Merge branch '3' into 4.0

DOC Update README.md for CMS 5

.nvmrc

@@ -1 +1 @@
-10
+18

.upgrade.yml

@@ -1,33 +0,0 @@
-mappings:
-  GridFieldCategorisationConfig: SilverStripe\Blog\Admin\GridFieldCategorisationConfig
-  GridFieldFormAction: SilverStripe\Blog\Admin\GridFieldFormAction
-  GridFieldMergeAction: SilverStripe\Blog\Admin\GridFieldMergeAction
-  BlogCommentExtension: SilverStripe\Blog\Model\BlogCommentExtension
-  BlogFilter: SilverStripe\Blog\Model\BlogFilter
-  BlogFilter_GridField: SilverStripe\Blog\Model\BlogFilter\BlogFilterGridField
-  BlogMemberExtension: SilverStripe\Blog\Model\BlogMemberExtension
-  BlogPostFilter: SilverStripe\Blog\Model\BlogPostFilter
-  BlogPostNotifications: SilverStripe\Blog\Model\BlogPostNotifications
-  Blog: SilverStripe\Blog\Model\Blog
-  Blog_Controller: SilverStripe\Blog\Model\BlogController
-  BlogController: SilverStripe\Blog\Model\BlogController
-  BlogCategory: SilverStripe\Blog\Model\BlogCategory
-  BlogPost: SilverStripe\Blog\Model\BlogPost
-  BlogPost_Controller: SilverStripe\Blog\Model\BlogPostController
-  BlogPostController: SilverStripe\Blog\Model\BlogPostController
-  BlogTag: SilverStripe\Blog\Model\BlogTag
-  CategorisationObject: SilverStripe\Blog\Model\CategorisationObject
-  BlogAdminSidebar: SilverStripe\Blog\Forms\BlogAdminSidebar
-  GridFieldAddByDBField: SilverStripe\Blog\Forms\GridField\GridFieldAddByDBField
-  GridFieldBlogPostState: SilverStripe\Blog\Forms\GridField\GridFieldBlogPostState
-  GridFieldConfig_BlogPost: SilverStripe\Blog\Forms\GridField\GridFieldConfigBlogPost
-  BlogArchiveWidget: SilverStripe\Blog\Widgets\BlogArchiveWidget
-  BlogArchiveWidget_Controller: SilverStripe\Blog\Widgets\BlogArchiveWidgetController
-  BlogCategoriesWidget: SilverStripe\Blog\Widgets\BlogCategoriesWidget
-  BlogCategoriesWidget_Controller: SilverStripe\Blog\Widgets\BlogCategoriesWidgetController
-  BlogRecentPostsWidget: SilverStripe\Blog\Widgets\BlogRecentPostsWidget
-  BlogRecentPostsWidget_Controller: SilverStripe\Blog\Widgets\BlogRecentPostsWidgetController
-  BlogTagsCloudWidget: SilverStripe\Blog\Widgets\BlogTagsCloudWidget
-  BlogTagsCloudWidget_Controller: SilverStripe\Blog\Widgets\BlogTagsCloudWidgetController
-  BlogTagsWidget: SilverStripe\Blog\Widgets\BlogTagsWidget
-  BlogTagsWidget_Controller: SilverStripe\Blog\Widgets\BlogTagsWidgetController

README.md

@@ -8,16 +8,6 @@
 * [User guide](docs/en/userguide/index.md)
 * [Developer documentation](docs/en/index.md)
 
-## Requirements
-
-* Silverstripe CMS 4.0+
-* Silverstripe Lumberjack Module 2.0+
-* Silverstripe Tag Field Module 2.0+
-* Silverstripe Assets 1.0+
-* Silverstripe Asset Admin Module 1.0+
-
-Note: this version is compatible with Silverstripe 4. For Silverstripe 3, please see [the 2.x release line](https://github.com/silverstripe/silverstripe-blog/tree/2).
-
 ### Suggested Modules
 
 * Silverstripe Widgets Module
@@ -28,13 +18,3 @@ Note: this version is compatible with Silverstripe 4. For Silverstripe 3, please
 ```
 composer require silverstripe/blog
 ```
-
-## Upgrading
-
-### Upgrading from 2.x to 3.x
-
-Aside from the framework and CMS upgrades required the blog module should not require anything extra to be completed.
-
-### Upgrading legacy blog to 2.x
-
-If you're upgrading from blog version 1.0 to 2.x you will need to run the `BlogMigrationTask`. Run the task using `dev/tasks/BlogMigrationTask` either via the browser or sake CLI to migrate your legacy blog to the new version data structure.

_config/legacy.yml

@@ -1,14 +0,0 @@
----
-Name: bloglegacy
----
-SilverStripe\ORM\DatabaseAdmin:
-  classname_value_remapping:
-    Blog: SilverStripe\Blog\Model\Blog
-    BlogCategory: SilverStripe\Blog\Model\BlogCategory
-    BlogPost: SilverStripe\Blog\Model\BlogPost
-    BlogTag: SilverStripe\Blog\Model\BlogTag
-    BlogArchiveWidget: SilverStripe\Blog\Widgets\BlogArchiveWidget
-    BlogCategoriesWidget: SilverStripe\Blog\Widgets\BlogCategoriesWidget
-    BlogRecentPostsWidget: SilverStripe\Blog\Widgets\BlogRecentPostsWidget
-    BlogTagsCloudWidget: SilverStripe\Blog\Widgets\BlogTagsCloudWidget
-    BlogTagsWidget: SilverStripe\Blog\Widgets\BlogTagsWidget

babel.config.json

@@ -0,0 +1,6 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+}

client/dist/js/main.bundle.js

@@ -1 +1 @@
-!function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s="./client/src/main.js")}({"./client/src/bundles/cms.js":function(t,e,n){"use strict";var i=n(0);n.n(i).a.entwine("ss",function(t){t(".cms-content-fields > #Form_EditForm_error").entwine({onadd:function(){var e=t(".blog-admin-outer");1===e.length&&e.prepend(this)}}),t(".toggle-description").entwine({onadd:function(){var e=t(this);if(!e.hasClass("toggle-description-enabled")){e.addClass("toggle-description-enabled");var n=!1,i=e.closest(".field").find(".form-text");e.on("click",function(){i[n?"hide":"show"](),e.toggleClass("toggle-description-shown"),n=!n}),i.hide(),e.parent().addClass("toggle-description-correct-right"),e.parent().prev(".middleColumn").addClass("toggle-description-correct-middle"),e.parent().next(".description").addClass("toggle-description-correct-description")}}}),t(".MergeAction").entwine({onadd:function(){var e=t(this);e.on("click","select",function(){return!1}),e.children("button").each(function(e,n){var i=t(n),o=i.prev("select");i.before('<input type="hidden" name="'+i.attr("data-target")+'" value="'+o.val()+'" />')}),e.on("change","select",function(e){var n=t(e.target);n.next("input").val(n.val())}),e.children("button, select").hide(),e.on("click",".MergeActionReveal",function(e){var n=t(e.target);return n.parent().children("button, select").show(),n.hide(),!1})}}),t(".blog-admin-sidebar.cms-panel").entwine({MinInnerWidth:620,onadd:function(){var e=this;this._super(),this.updateLayout(),!this.hasClass("collapsed")&&t(".blog-admin-outer").width()<this.getMinInnerWidth()&&this.collapsePanel();var n=function(){e.updateLayout()};n.bind(this),window.onresize=n},togglePanel:function(t,e){this._super(t,e),this.updateLayout()},updateLayout:function(){t(this).css("height","100%");var e=t(this).outerHeight(),n=t(".cms-content-actions").eq(0).outerHeight();t(this).css("height",e-n+"px"),t(this).css("bottom",n+"px"),t(".cms-container").updateLayoutOptions({minContentWidth:820+this.width()})}})})},"./client/src/bundles/gridfieldaddbydbfield.js":function(t,e,n){"use strict";var i=n(0);n.n(i).a.entwine("ss",function(t){t(".add-existing-autocompleter input.text").entwine({onkeydown:function(e){13===e.which&&(t(this).parents(".add-existing-autocompleter").find('button[type="submit"]').click(),e.preventDefault())}})})},"./client/src/main.js":function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),n("./client/src/bundles/cms.js"),n("./client/src/bundles/gridfieldaddbydbfield.js")},0:function(t,e){t.exports=jQuery}});
+!function(){"use strict";var t={949:function(t,e,n){var i;((i=n(311))&&i.__esModule?i:{default:i}).default.entwine("ss",(t=>{t(".cms-content-fields > #Form_EditForm_error").entwine({onadd(){const e=t(".blog-admin-outer");1===e.length&&e.prepend(this)}}),t(".toggle-description").entwine({onadd(){const e=t(this);if(e.hasClass("toggle-description-enabled"))return;e.addClass("toggle-description-enabled");let n=!1;const i=e.closest(".field").find(".form-text");e.on("click",(()=>{i[n?"hide":"show"](),e.toggleClass("toggle-description-shown"),n=!n})),i.hide(),e.parent().addClass("toggle-description-correct-right"),e.parent().prev(".middleColumn").addClass("toggle-description-correct-middle"),e.parent().next(".description").addClass("toggle-description-correct-description")}}),t(".MergeAction").entwine({onadd(){const e=t(this);e.on("click","select",(()=>!1)),e.children("button").each(((e,n)=>{const i=t(n),s=i.prev("select");i.before(`<input type="hidden" name="${i.attr("data-target")}" value="${s.val()}" />`)})),e.on("change","select",(e=>{const n=t(e.target);n.next("input").val(n.val())})),e.children("button, select").hide(),e.on("click",".MergeActionReveal",(e=>{const n=t(e.target);return n.parent().children("button, select").show(),n.hide(),!1}))}}),t(".blog-admin-sidebar.cms-panel").entwine({MinInnerWidth:620,onadd(){this._super(),this.updateLayout(),!this.hasClass("collapsed")&&t(".blog-admin-outer").width()<this.getMinInnerWidth()&&this.collapsePanel();const e=()=>{this.updateLayout()};e.bind(this),window.onresize=e},togglePanel(t,e){this._super(t,e),this.updateLayout()},updateLayout(){t(this).css("height","100%");const e=t(this).outerHeight(),n=t(".cms-content-actions").eq(0).outerHeight();t(this).css("height",e-n+"px"),t(this).css("bottom",`${n}px`),t(".cms-container").updateLayoutOptions({minContentWidth:820+this.width()})}})}))},997:function(t,e,n){var i;((i=n(311))&&i.__esModule?i:{default:i}).default.entwine("ss",(t=>{t(".add-existing-autocompleter input.text").entwine({onkeydown(e){if(13===e.which){t(this).parents(".add-existing-autocompleter").find('button[type="submit"]').click(),e.preventDefault()}}})}))},311:function(t){t.exports=jQuery}},e={};function n(i){var s=e[i];if(void 0!==s)return s.exports;var o=e[i]={exports:{}};return t[i](o,o.exports,n),o.exports}n(949),n(997)}();

client/dist/styles/main.css

@@ -1 +1 @@
-.no-sidebar .content-container.size3of4{width:75%}.blog-entry .post-image img{width:98.75%}.blog-sidebar .WidgetHolder ul{margin-left:0}.blog-sidebar .WidgetHolder ul li,ul.blogTagCloud{list-style-type:none}ul.blogTagCloud{clear:both}ul.blogTagCloud li{float:left;display:inline;padding-right:8px}ul.blogTagCloud li a span{float:left;line-height:30px;text-align:center;padding:0}ul.blogTagCloud .tagCount10{font-size:26pt}ul.blogTagCloud .tagCount9{font-size:24pt}ul.blogTagCloud .tagCount8{font-size:22pt}ul.blogTagCloud .tagCount7{font-size:20pt}ul.blogTagCloud .tagCount6{font-size:18pt}ul.blogTagCloud .tagCount5{font-size:16pt}ul.blogTagCloud .tagCount4{font-size:14pt}ul.blogTagCloud .tagCount3{font-size:12pt}ul.blogTagCloud .tagCount2{font-size:10pt}ul.blogTagCloud .tagCount1{font-size:8pt}#FeaturedImage .middleColumn{clear:none;float:left}.has-panel .cms-content-tools.blog-admin-sidebar{width:280px;border-right:0;border-left:1px solid #c0c0c2;position:absolute!important;right:0;top:0;height:100%}.has-panel .cms-content-tools.blog-admin-sidebar .cms-panel-toggle a{text-align:left;margin:0}.has-panel .cms-content-tools.blog-admin-sidebar .cms-panel-toggle.south{border-top:1px solid #aaa}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer{width:100%;padding-right:280px;position:absolute;height:100%;overflow-y:hidden;overflow-x:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset{position:relative;overflow:auto;height:100%;width:100%}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset #Title label{float:none}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset #Title .middleColumn,.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset #Title input{width:100%;max-width:100%;margin-left:0}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field+.field{margin-top:10px}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.urlsegment .preview{padding-top:0;line-height:25px}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.urlsegment .edit{float:right}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn>.date{width:60%}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn>.time{width:36%;float:right}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn .middleColumn,.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn input{width:100%}.has-panel .cms-content-tools.blog-admin-sidebar.collapsed~.blog-admin-outer{padding-right:41px}.has-panel .cms-content-tools.blog-admin-sidebar.collapsed~.blog-admin-outer #Root_Main{margin-right:15px}.has-panel .cms-content-tools.blog-admin-sidebar.cms-content-tools .cms-panel-content{width:auto}.toggle-description{display:inline-block;font-size:1.2rem;width:20px;height:20px;margin-top:1px;cursor:pointer}.middleColumn.toggle-description-correct-middle{margin-left:0;float:left;width:416px}.tab-content .field p.toggle-description-correct-right{display:inline-block;margin-left:0;padding-left:0;clear:none;float:left}.description.toggle-description-correct-description{width:416px;padding:12px 0}.custom-summary .ui-accordion-content,.custom-summary .ui-accordion-content .field{padding:0}.custom-summary .ui-icon-triangle-1-e{background-position:-16px -128px}.cms table.ss-gridfield-table tr td.MergeAction{width:225px}.cms table.ss-gridfield-table tr td.MergeAction a{display:block;height:100%;width:100%}.cms table.ss-gridfield-table tr td.MergeAction select{width:150px}.blog-cms-categorisation .toolbar--content{margin-top:0}.blog-cms-categorisation .MergeActionReveal:after{content:"@";font-family:silverstripe;display:inline-block;position:relative;margin-left:10px;top:3px}.blog-cms-categorisation .blog-merge-action{margin-top:5px}
+.no-sidebar .content-container.size3of4{width:75%}.blog-entry .post-image img{width:98.75%}.blog-sidebar .WidgetHolder ul{margin-left:0}.blog-sidebar .WidgetHolder ul li{list-style-type:none}ul.blogTagCloud{list-style-type:none;clear:both}ul.blogTagCloud li{float:left;display:inline;padding-right:8px}ul.blogTagCloud li a span{float:left;line-height:30px;text-align:center;padding:0}ul.blogTagCloud .tagCount10{font-size:26pt}ul.blogTagCloud .tagCount9{font-size:24pt}ul.blogTagCloud .tagCount8{font-size:22pt}ul.blogTagCloud .tagCount7{font-size:20pt}ul.blogTagCloud .tagCount6{font-size:18pt}ul.blogTagCloud .tagCount5{font-size:16pt}ul.blogTagCloud .tagCount4{font-size:14pt}ul.blogTagCloud .tagCount3{font-size:12pt}ul.blogTagCloud .tagCount2{font-size:10pt}ul.blogTagCloud .tagCount1{font-size:8pt}#FeaturedImage .middleColumn{clear:none;float:left}.has-panel .cms-content-tools.blog-admin-sidebar{width:280px;border-right:0;border-left:1px solid #c0c0c2;position:absolute !important;right:0;top:0;height:100%}.has-panel .cms-content-tools.blog-admin-sidebar .cms-panel-toggle a{text-align:left;margin:0}.has-panel .cms-content-tools.blog-admin-sidebar .cms-panel-toggle.south{border-top:1px solid #aaa}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer{width:100%;padding-right:280px;position:absolute;height:100%;overflow-y:hidden;overflow-x:hidden;box-sizing:border-box}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset{position:relative;overflow:auto;height:100%;width:100%}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset #Title label{float:none}.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset #Title .middleColumn,.has-panel .cms-content-tools.blog-admin-sidebar~.blog-admin-outer>.ss-tabset #Title input{width:100%;max-width:100%;margin-left:0}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field+.field{margin-top:10px}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.urlsegment .preview{padding-top:0;line-height:25px}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.urlsegment .edit{float:right}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn>.date{width:60%}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn>.time{width:36%;float:right}.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn .middleColumn,.has-panel .cms-content-tools.blog-admin-sidebar .cms-content-view>.field.datetime>.middleColumn input{width:100%}.has-panel .cms-content-tools.blog-admin-sidebar.collapsed~.blog-admin-outer{padding-right:41px}.has-panel .cms-content-tools.blog-admin-sidebar.collapsed~.blog-admin-outer #Root_Main{margin-right:15px}.has-panel .cms-content-tools.blog-admin-sidebar.cms-content-tools .cms-panel-content{width:auto}.toggle-description{display:inline-block;font-size:1.2rem;width:20px;height:20px;margin-top:1px;cursor:pointer}.middleColumn.toggle-description-correct-middle{margin-left:0;float:left;width:416px}.tab-content .field p.toggle-description-correct-right{display:inline-block;margin-left:0;padding-left:0;clear:none;float:left}.description.toggle-description-correct-description{width:416px;padding:12px 0}.custom-summary .ui-accordion-content,.custom-summary .ui-accordion-content .field{padding:0}.custom-summary .ui-icon-triangle-1-e{background-position:-16px -128px}.cms table.ss-gridfield-table tr td.MergeAction{width:225px}.cms table.ss-gridfield-table tr td.MergeAction a{display:block;height:100%;width:100%}.cms table.ss-gridfield-table tr td.MergeAction select{width:150px}.blog-cms-categorisation .toolbar--content{margin-top:0}.blog-cms-categorisation .MergeActionReveal:after{content:"@";font-family:silverstripe;display:inline-block;position:relative;margin-left:10px;top:3px}.blog-cms-categorisation .blog-merge-action{margin-top:5px}

composer.json

@@ -8,19 +8,19 @@
     ],
     "type": "silverstripe-vendormodule",
     "require": {
-        "php": "^7.4 || ^8.0",
-        "silverstripe/cms": "^4.0",
-        "silverstripe/lumberjack": "^2.0",
-        "silverstripe/tagfield": "^2.0",
-        "silverstripe/assets": "^1.0",
-        "silverstripe/asset-admin": "^1.0"
+        "php": "^8.1",
+        "silverstripe/cms": "^5",
+        "silverstripe/lumberjack": "^3.0",
+        "silverstripe/tagfield": "^3.0",
+        "silverstripe/assets": "^2.0",
+        "silverstripe/asset-admin": "^2.0"
     },
     "require-dev": {
-        "silverstripe/recipe-testing": "^2",
-        "squizlabs/php_codesniffer": "^3.0",
-        "silverstripe/widgets": "^2",
-        "silverstripe/comments": "^3.7",
-        "silverstripe/content-widget": "^2"
+        "silverstripe/recipe-testing": "^3",
+        "squizlabs/php_codesniffer": "^3",
+        "silverstripe/widgets": "^3",
+        "silverstripe/comments": "^4",
+        "silverstripe/content-widget": "^3"
     },
     "extra": {
         "expose": [

package.json

@@ -1,9 +1,8 @@
 {
   "name": "silverstripe-blog",
-  "version": "3.0.0",
   "description": "A fresh take on blogging in Silverstripe set out to tackle the issue of a cluttered Site Tree",
   "scripts": {
-    "build": "yarn && yarn lint && NODE_ENV=production webpack -p --bail --progress",
+    "build": "yarn && yarn lint && rm -rf client/dist/* && NODE_ENV=production webpack --mode production --bail --progress",
     "dev": "NODE_ENV=development webpack --progress",
     "watch": "NODE_ENV=development webpack --watch --progress",
     "css": "WEBPACK_CHILD=css npm run build",
@@ -28,11 +27,16 @@
   },
   "homepage": "https://github.com/silverstripe/silverstripe-blog#readme",
   "dependencies": {},
-  "peerDependencies": {
-    "jquery": "^3"
-  },
   "devDependencies": {
-    "@silverstripe/eslint-config": "^0.0.5",
-    "@silverstripe/webpack-config": "^1.3"
-  }
+    "@silverstripe/eslint-config": "^1.0.0",
+    "@silverstripe/webpack-config": "^2.0.0",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
+  },
+  "resolutions": {
+    "colors": "1.4.0"
+  },
+  "browserslist": [
+    "defaults"
+  ]
 }

src/Widgets/BlogTagsCloudWidget.php

@@ -9,6 +9,7 @@ use SilverStripe\ORM\ArrayList;
 use SilverStripe\ORM\DataObject;
 use SilverStripe\ORM\DB;
 use SilverStripe\Widgets\Model\Widget;
+use SilverStripe\Control\Controller;
 
 if (!class_exists(Widget::class)) {
     return;
@@ -98,7 +99,7 @@ class BlogTagsCloudWidget extends Widget
             foreach ($records as $record) {
                 $tag = DataObject::create();
                 $tag->TagName = $record['Title'];
-                $link = $bloglink.'tag/'.$record['URLSegment'];
+                $link = Controller::join_links($bloglink, 'tag', $record['URLSegment']);
                 $tag->Link = $link;
                 if ($record['TagCount'] > $maxTagCount) {
                     $maxTagCount = $record['TagCount'];

tests/behat/features/blog.feature

@@ -47,7 +47,7 @@ Feature: Create a blog
     And I press the "Log in as someone else" button
 
   Scenario: Create a blog post
-  
+
     Given I am logged in as a member of "EDITOR" group
     # Create a new blog post called "New Post"
     When I go to "/admin/pages"
@@ -65,8 +65,8 @@ Feature: Create a blog
 
     # Add categories and tags
     And I click the "Post Options" CMS tab
-    And I add "My Category" to the "Categories" tag field
-    And I add "My Tag" to the "Tags" tag field
+    And I add "My Category" to the "#Form_EditForm_Categories_Holder" tag field
+    And I add "My Tag" to the "#Form_EditForm_Tags_Holder" tag field
 
     # Publish the blog post and logout
     And I press the "Publish" button

tests/php/BlogFunctionalTest.php

@@ -11,8 +11,6 @@ class BlogFunctionalTest extends FunctionalTest
 {
     protected static $fixture_file = 'BlogFunctionalTest.yml';
 
-    protected static $use_draft_site = true;
-
     protected function setUp(): void
     {
         Config::modify()->set(URLSegmentFilter::class, 'default_allow_multibyte', true);
@@ -23,14 +21,16 @@ class BlogFunctionalTest extends FunctionalTest
 
     public function testBlogWithMultibyteUrl()
     {
-        $result = $this->get(rawurlencode('آبید'));
+        $this->logInWithPermission('VIEW_DRAFT_CONTENT');
+        $result = $this->get(rawurlencode('آبید') . '?stage=Stage');
 
         $this->assertEquals(200, $result->getStatusCode());
     }
 
     public function testMemberProfileWithMultibyteUrlAndName()
     {
-        $result = $this->get(rawurlencode('آبید') . '/profile/' . rawurlencode('عبّاس-آبان'));
+        $this->logInWithPermission('VIEW_DRAFT_CONTENT');
+        $result = $this->get(rawurlencode('آبید') . '/profile/' . rawurlencode('عبّاس-آبان') . '?stage=Stage');
 
         $this->assertEquals(200, $result->getStatusCode());
         $this->assertStringContainsString('My Blog Post', $result->getBody());
@@ -38,7 +38,8 @@ class BlogFunctionalTest extends FunctionalTest
 
     public function testMemberProfileWithMultibyteUrlAndEnglishName()
     {
-        $result = $this->get(rawurlencode('آبید') . '/profile/bob-jones');
+        $this->logInWithPermission('VIEW_DRAFT_CONTENT');
+        $result = $this->get(rawurlencode('آبید') . '/profile/bob-jones' . '?stage=Stage');
 
         $this->assertEquals(200, $result->getStatusCode());
         $this->assertStringContainsString('My Blog Post', $result->getBody());

tests/php/Model/BlogControllerFunctionalTest.php

@@ -11,8 +11,6 @@ class BlogControllerFunctionalTest extends FunctionalTest
 {
     protected static $fixture_file = 'BlogControllerFunctionalTest.yml';
 
-    protected static $use_draft_site = true;
-
     protected function setUp(): void
     {
         Config::modify()->set(URLSegmentFilter::class, 'default_allow_multibyte', true);
@@ -23,7 +21,8 @@ class BlogControllerFunctionalTest extends FunctionalTest
 
     public function testGetCategoriesWithMultibyteUrl()
     {
-        $result = $this->get('my-blog/category/' . rawurlencode('آبید'));
+        $this->logInWithPermission('VIEW_DRAFT_CONTENT');
+        $result = $this->get('my-blog/category/' . rawurlencode('آبید') . '?stage=Stage');
 
         $this->assertEquals(200, $result->getStatusCode());
         $this->assertStringContainsString('آبید', $result->getBody());
@@ -31,7 +30,8 @@ class BlogControllerFunctionalTest extends FunctionalTest
 
     public function testGetTagsWithMultibyteUrl()
     {
-        $result = $this->get('my-blog/tag/' . rawurlencode('برتراند'));
+        $this->logInWithPermission('VIEW_DRAFT_CONTENT');
+        $result = $this->get('my-blog/tag/' . rawurlencode('برتراند')  . '?stage=Stage');
 
         $this->assertEquals(200, $result->getStatusCode());
         $this->assertStringContainsString('برتراند', $result->getBody());

webpack.config.js

@@ -1,55 +1,31 @@
 const Path = require('path');
-const webpack = require('webpack');
-// Import the core config
-const webpackConfig = require('@silverstripe/webpack-config');
-const {
-    resolveJS,
-    externalJS,
-    moduleJS,
-    pluginJS,
-    moduleCSS,
-    pluginCSS,
-} = webpackConfig;
+const { JavascriptWebpackConfig, CssWebpackConfig } = require('@silverstripe/webpack-config');
 
 const ENV = process.env.NODE_ENV;
 const PATHS = {
     ROOT: Path.resolve(),
-    MODULES: 'node_modules',
-    FILES_PATH: '../',
-    THIRDPARTY: 'thirdparty',
     SRC: Path.resolve('client/src'),
     DIST: Path.resolve('client/dist'),
 };
 
 const config = [
-    {
-        name: 'bundle',
-        entry: {
-            main: `${PATHS.SRC}/main.js`
-        },
-        output: {
-            path: PATHS.DIST,
-            filename: 'js/[name].bundle.js',
-        },
-        devtool: (ENV !== 'production') ? 'source-map' : '',
-        resolve: resolveJS(ENV, PATHS),
-        externals: externalJS(ENV, PATHS),
-        module: moduleJS(ENV, PATHS),
-        plugins: pluginJS(ENV, PATHS),
-    },
-    {
-        name: 'bundle',
-        entry: {
-            main: `${PATHS.SRC}/main.scss`
-        },
-        output: {
-            path: PATHS.DIST,
-            filename: 'styles/[name].css'
-        },
-        devtool: (ENV !== 'production') ? 'source-map' : '',
-        module: moduleCSS(ENV, PATHS),
-        plugins: pluginCSS(ENV, PATHS),
-    },
+  // Main JS bundle
+  new JavascriptWebpackConfig('js', PATHS, 'silverstripe/blog')
+    .setEntry({
+      main: `${PATHS.SRC}/main.js`
+    })
+    .mergeConfig({
+      output: {
+        filename: 'js/[name].bundle.js',
+      },
+    })
+    .getConfig(),
+  // sass to css
+  new CssWebpackConfig('css', PATHS)
+    .setEntry({
+      main: `${PATHS.SRC}/main.scss`
+    })
+    .getConfig(),
 ];
 
 module.exports = config;