From 2fd811e3a88058e25b44731d8f32e41303958cf6 Mon Sep 17 00:00:00 2001 From: lithrel Date: Fri, 17 May 2024 12:57:09 +0200 Subject: [PATCH] PLANET-7519: Guestbook block refactoring to block.json Ref: https://jira.greenpeace.org/browse/PLANET-7519 This is a demo for block refactoring, following Gutenberg structure. It allows WordPress to handle assets loading automatically. This PR has multiple issues, due to the packages and webpack versions being a lot older than what Gutenberg currently uses. In particular, we can't update wordpress/scripts higher because of PostCss package, npm version, webpack version. --- assets/src/blocks/GuestBook/GuestBookBlock.js | 28 - .../blocks/GuestBook/GuestBookEditorScript.js | 3 - .../src/blocks/GuestBook/GuestBookScript.js | 11 - assets/src/blocks/guestbook/block.json | 15 + assets/src/blocks/guestbook/deprecated.js | 8 + assets/src/blocks/guestbook/edit.js | 11 + .../guestbook.js} | 5 +- assets/src/blocks/guestbook/index.js | 20 + assets/src/blocks/guestbook/save.js | 5 + assets/src/blocks/guestbook/viewScript.js | 11 + assets/src/webpack.blocks.config.js | 131 + package-lock.json | 4293 +++++++++++------ package.json | 8 +- src/Blocks/Register.php | 22 + src/Loader.php | 2 +- webpack.config.js | 33 +- 16 files changed, 3123 insertions(+), 1483 deletions(-) delete mode 100644 assets/src/blocks/GuestBook/GuestBookBlock.js delete mode 100644 assets/src/blocks/GuestBook/GuestBookEditorScript.js delete mode 100644 assets/src/blocks/GuestBook/GuestBookScript.js create mode 100644 assets/src/blocks/guestbook/block.json create mode 100644 assets/src/blocks/guestbook/deprecated.js create mode 100644 assets/src/blocks/guestbook/edit.js rename assets/src/blocks/{GuestBook/GuestBookFrontend.js => guestbook/guestbook.js} (90%) create mode 100644 assets/src/blocks/guestbook/index.js create mode 100644 assets/src/blocks/guestbook/save.js create mode 100644 assets/src/blocks/guestbook/viewScript.js create mode 100644 assets/src/webpack.blocks.config.js create mode 100644 src/Blocks/Register.php diff --git a/assets/src/blocks/GuestBook/GuestBookBlock.js b/assets/src/blocks/GuestBook/GuestBookBlock.js deleted file mode 100644 index 67d578995b..0000000000 --- a/assets/src/blocks/GuestBook/GuestBookBlock.js +++ /dev/null @@ -1,28 +0,0 @@ -import {frontendRendered} from '../../functions/frontendRendered'; -import {GuestBookFrontend} from './GuestBookFrontend'; - -export const BLOCK_NAME = 'planet4-blocks/guestbook'; - -export const registerGuestBookBlock = () => { - const {registerBlockType} = wp.blocks; - const {__} = wp.i18n; - - registerBlockType(BLOCK_NAME, { - title: '50 Years GuestBook', - icon: 'admin-site-alt2', - category: 'planet4-blocks', - supports: { - html: false, // Disable "Edit as HTML" block option. - multiple: false, // Use the block just once per post. - }, - edit: () => ( -

- {__('This block only renders in the frontend', 'planet4-blocks-backend')} -

- ), - save: GuestBookFrontend, - deprecated: [{ - save: frontendRendered(BLOCK_NAME), - }], - }); -}; diff --git a/assets/src/blocks/GuestBook/GuestBookEditorScript.js b/assets/src/blocks/GuestBook/GuestBookEditorScript.js deleted file mode 100644 index f8633e7694..0000000000 --- a/assets/src/blocks/GuestBook/GuestBookEditorScript.js +++ /dev/null @@ -1,3 +0,0 @@ -import {registerGuestBookBlock} from './GuestBookBlock'; - -registerGuestBookBlock(); diff --git a/assets/src/blocks/GuestBook/GuestBookScript.js b/assets/src/blocks/GuestBook/GuestBookScript.js deleted file mode 100644 index 443ca1a54f..0000000000 --- a/assets/src/blocks/GuestBook/GuestBookScript.js +++ /dev/null @@ -1,11 +0,0 @@ -import {createRoot} from 'react-dom/client'; -import {BLOCK_NAME} from './GuestBookBlock'; -import {GuestBookFrontend} from './GuestBookFrontend'; - -// Fallback for non migrated content. Remove after migration. -document.querySelectorAll(`[data-render="${BLOCK_NAME}"]`).forEach( - blockNode => { - const rootElement = createRoot(blockNode); - rootElement.render(); - } -); diff --git a/assets/src/blocks/guestbook/block.json b/assets/src/blocks/guestbook/block.json new file mode 100644 index 0000000000..9445c7fc9f --- /dev/null +++ b/assets/src/blocks/guestbook/block.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "planet4-blocks/guestbook", + "title": "50 Years GuestBook", + "icon": "admin-site-alt2", + "supports": { + "html": false, + "multiple": false + }, + "viewScript": "file:./viewScript.js", + "editorScript": "file:./index.js", + "style": "", + "editorStyle": "" +} diff --git a/assets/src/blocks/guestbook/deprecated.js b/assets/src/blocks/guestbook/deprecated.js new file mode 100644 index 0000000000..2a15d136e2 --- /dev/null +++ b/assets/src/blocks/guestbook/deprecated.js @@ -0,0 +1,8 @@ +import metadata from './block.json'; +import {frontendRendered} from '../../functions/frontendRendered'; + +const v1 = { + save: frontendRendered(metadata.name), +}; + +export default [v1]; diff --git a/assets/src/blocks/guestbook/edit.js b/assets/src/blocks/guestbook/edit.js new file mode 100644 index 0000000000..72f4f4bf0e --- /dev/null +++ b/assets/src/blocks/guestbook/edit.js @@ -0,0 +1,11 @@ +const {__} = wp.i18n; + +const GuestBookEdit = () => { + return ( +

+ {__('This block only renders in the frontend', 'planet4-blocks-backend')} +

+ ); +}; + +export default GuestBookEdit; diff --git a/assets/src/blocks/GuestBook/GuestBookFrontend.js b/assets/src/blocks/guestbook/guestbook.js similarity index 90% rename from assets/src/blocks/GuestBook/GuestBookFrontend.js rename to assets/src/blocks/guestbook/guestbook.js index 1a5e3780e1..33906d79a4 100644 --- a/assets/src/blocks/GuestBook/GuestBookFrontend.js +++ b/assets/src/blocks/guestbook/guestbook.js @@ -1,4 +1,4 @@ -export const GuestBookFrontend = () => { +const GuestBook = () => { const buildURL = () => { const hostname = window.location.hostname; const pathname = window.location.pathname.slice(1); @@ -6,10 +6,11 @@ export const GuestBookFrontend = () => { const storyID = params.get('id'); return `https://maps.greenpeace.org/maps/gpint/50th_guestbook/?origin_host=${hostname}&origin_path=${encodeURIComponent(pathname)}${storyID ? `&id=${storyID}` : ''}`; }; - return (