From 841017564e984b4b15262e065e2c1639457635b2 Mon Sep 17 00:00:00 2001 From: Nick Diego Date: Tue, 22 Oct 2024 15:15:38 -0500 Subject: [PATCH 1/2] Add server side render block example. --- .../.editorconfig | 18 ++ .../server-side-render-block-d26119/.eslintrc | 8 + .../.gitignore | 30 ++ .../server-side-render-block-d26119/README.md | 23 ++ .../package.json | 17 ++ .../server-side-render-block-d26119.php | 55 ++++ .../src/block.json | 19 ++ .../src/edit.js | 36 +++ .../src/index.js | 24 ++ pnpm-lock.yaml | 263 +++++++++++++++--- 10 files changed, 460 insertions(+), 33 deletions(-) create mode 100644 plugins/server-side-render-block-d26119/.editorconfig create mode 100644 plugins/server-side-render-block-d26119/.eslintrc create mode 100644 plugins/server-side-render-block-d26119/.gitignore create mode 100644 plugins/server-side-render-block-d26119/README.md create mode 100644 plugins/server-side-render-block-d26119/package.json create mode 100644 plugins/server-side-render-block-d26119/server-side-render-block-d26119.php create mode 100644 plugins/server-side-render-block-d26119/src/block.json create mode 100644 plugins/server-side-render-block-d26119/src/edit.js create mode 100644 plugins/server-side-render-block-d26119/src/index.js diff --git a/plugins/server-side-render-block-d26119/.editorconfig b/plugins/server-side-render-block-d26119/.editorconfig new file mode 100644 index 00000000..b5df0fc5 --- /dev/null +++ b/plugins/server-side-render-block-d26119/.editorconfig @@ -0,0 +1,18 @@ +# This file is for unifying the coding style for different editors and IDEs +# editorconfig.org + +# WordPress Coding Standards +# https://make.wordpress.org/core/handbook/coding-standards/ + +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true +indent_style = tab + +[*.{yml,yaml}] +indent_style = space +indent_size = 2 diff --git a/plugins/server-side-render-block-d26119/.eslintrc b/plugins/server-side-render-block-d26119/.eslintrc new file mode 100644 index 00000000..d462c116 --- /dev/null +++ b/plugins/server-side-render-block-d26119/.eslintrc @@ -0,0 +1,8 @@ +{ + "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ], + "settings": { + "jest": { + "version": 26 + } + } +} diff --git a/plugins/server-side-render-block-d26119/.gitignore b/plugins/server-side-render-block-d26119/.gitignore new file mode 100644 index 00000000..f66335eb --- /dev/null +++ b/plugins/server-side-render-block-d26119/.gitignore @@ -0,0 +1,30 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Coverage directory used by tools like istanbul +coverage + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Output of `npm pack` +*.tgz + +# Output of `wp-scripts plugin-zip` +*.zip + +# dotenv environment variables file +.env diff --git a/plugins/server-side-render-block-d26119/README.md b/plugins/server-side-render-block-d26119/README.md new file mode 100644 index 00000000..4d2ab856 --- /dev/null +++ b/plugins/server-side-render-block-d26119/README.md @@ -0,0 +1,23 @@ +# Server Side Render Block d26119 + +This example demonstrates how to build a simple block that is rendered on the server and displayed in the Editor using the `ServerSideRender` component. + + + + + +## Understanding the Example Code + +- This is a dynamic block that renders content on the server side. However, instead of using a `render.php` file, it uses a render callback function. +- In the Editor, the block content defined in the callback function is rendered using the `ServerSideRender` component. +- This example also demonstrates how to register a custom attribute for the block and how to use it in the callback function. + +## Related resources + +- [`ServerSideRender` documentation](https://developer.wordpress.org/block-editor/reference-guides/components/server-side-render/) + +---- + +> **Note** +> Check the [Start Guide for local development with the examples](https://github.com/WordPress/block-development-examples/wiki/02-Examples#start-guide-for-local-development-with-the-examples) + diff --git a/plugins/server-side-render-block-d26119/package.json b/plugins/server-side-render-block-d26119/package.json new file mode 100644 index 00000000..38885ece --- /dev/null +++ b/plugins/server-side-render-block-d26119/package.json @@ -0,0 +1,17 @@ +{ + "name": "@block-development-examples/server-side-render-block-d26119", + "version": "0.1.0", + "author": "The WordPress Contributors", + "license": "GPL-2.0-or-later", + "scripts": { + "build": "wp-scripts build", + "start": "wp-scripts start", + "plugin-zip": "wp-scripts plugin-zip" + }, + "files": [ + "*" + ], + "devDependencies": { + "@wordpress/scripts": "^26.15.0" + } +} diff --git a/plugins/server-side-render-block-d26119/server-side-render-block-d26119.php b/plugins/server-side-render-block-d26119/server-side-render-block-d26119.php new file mode 100644 index 00000000..9d9375e7 --- /dev/null +++ b/plugins/server-side-render-block-d26119/server-side-render-block-d26119.php @@ -0,0 +1,55 @@ + 'server_side_render_block_d26119__render_block', + ) + ); +} +add_action( 'init', 'server_side_render_block_d26119__register_block' ); + +/** + * Renders the block on server. + * + * @param array $attributes The block attributes. + * + * @return string Returns the block content. + */ +function server_side_render_block_d26119__render_block( $attributes ) { + $label = isset( $attributes['label'] ) ? $attributes['label'] : ''; + $message = __( 'Server Side Render Block d26119 – This content is rendered on the server and displayed in the Editor using the ServerSideRender component.', 'block-development-examples' ); + + $wrapper_attributes = get_block_wrapper_attributes(); + + if ( empty( $label ) ) { + return sprintf( '

%s

', $wrapper_attributes, esc_html( $message ) ); + } + + return sprintf( + '

%s

%s

', + $wrapper_attributes, + esc_html( $label ), + esc_html( $message ) + ); +} diff --git a/plugins/server-side-render-block-d26119/src/block.json b/plugins/server-side-render-block-d26119/src/block.json new file mode 100644 index 00000000..1360973a --- /dev/null +++ b/plugins/server-side-render-block-d26119/src/block.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "block-development-examples/server-side-render-block-d26119", + "version": "0.1.0", + "title": "Server Side Render Block d26119", + "category": "widgets", + "example": {}, + "textdomain": "block-development-examples", + "attributes": { + "label": { + "type": "string" + } + }, + "editorScript": "file:./index.js", + "keywords": [ + "d26119" + ] +} \ No newline at end of file diff --git a/plugins/server-side-render-block-d26119/src/edit.js b/plugins/server-side-render-block-d26119/src/edit.js new file mode 100644 index 00000000..4f4695c8 --- /dev/null +++ b/plugins/server-side-render-block-d26119/src/edit.js @@ -0,0 +1,36 @@ +/** + * WordPress Dependencies + */ +import { __ } from '@wordpress/i18n'; +import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import { Disabled, PanelBody, TextControl } from '@wordpress/components'; +import ServerSideRender from '@wordpress/server-side-render'; + +export default function Edit( props ) { + const { attributes, setAttributes } = props; + + return ( + <> + + + setAttributes( { label } ) } + /> + + +
+ + + +
+ + ); +} diff --git a/plugins/server-side-render-block-d26119/src/index.js b/plugins/server-side-render-block-d26119/src/index.js new file mode 100644 index 00000000..5770e1ab --- /dev/null +++ b/plugins/server-side-render-block-d26119/src/index.js @@ -0,0 +1,24 @@ +/** + * Registers a new block provided a unique name and an object defining its behavior. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ + */ +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import Edit from './edit'; +import metadata from './block.json'; + +/** + * Every block starts by registering a new block type definition. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ + */ +registerBlockType( metadata.name, { + /** + * @see ./edit.js + */ + edit: Edit, +} ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6cd995e3..edf678ec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -322,6 +322,12 @@ importers: specifier: ^27.8.0 version: 27.8.0(@playwright/test@1.46.1)(@types/eslint@8.56.10)(@types/node@20.12.12)(@types/webpack@4.41.38)(babel-plugin-macros@3.1.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.4.5) + plugins/server-side-render-block-d26119: + devDependencies: + '@wordpress/scripts': + specifier: ^26.15.0 + version: 26.19.0(@playwright/test@1.46.1)(@types/eslint@8.56.10)(@types/node@20.12.12)(@types/webpack@4.41.38)(babel-plugin-macros@3.1.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.4.5) + plugins/settings-sidebar-82c525: dependencies: '@wordpress/icons': @@ -2085,6 +2091,12 @@ packages: resolution: {integrity: sha512-azUXRQDhxoCkME7c+0Cw/aCZmyoQeTXhWJYtZBFyPU5wsIXSv/Ucp3WggJR7OSKFnE5rSp5qpCt/nihfLLfZWQ==} engines: {node: '>=12'} + '@wordpress/dependency-extraction-webpack-plugin@4.31.0': + resolution: {integrity: sha512-Xpm8EEhi6e8GL1juYh/70AFbcE/ZVXJ3p47KMkkEsn5t+hG9QHjKe2lTj98v2r3rB+ampoK+whdV1w6gItXYpw==} + engines: {node: '>=14'} + peerDependencies: + webpack: ^4.8.3 || ^5.0.0 + '@wordpress/dependency-extraction-webpack-plugin@5.8.0': resolution: {integrity: sha512-DdFjCrBkV0maEh1REY8QFtg6rfgGz+qXw8qJ0HxfH+Uees16oCModxBmbgCTC2w3IkMyHP3kEpvRJHHmYRRmWg==} engines: {node: '>=18'} @@ -2103,6 +2115,12 @@ packages: resolution: {integrity: sha512-3vJ1Z5Lzb7kfMoB8ni275vFGIRrljWFQ2XsVfO6oA/HeoIfHAGVcR58GmbjyxwEgClrizMGIkbs9ubrRpontLQ==} engines: {node: '>=12'} + '@wordpress/e2e-test-utils-playwright@0.16.0': + resolution: {integrity: sha512-CktRj5/Cc/pAvTHXIAPIMrmmnb0VjtXbTGSjYG6pW/JI2YAmpwY2yBA+DlHJjqOIpcjDDj+sSsJomRSxT2chwQ==} + engines: {node: '>=12'} + peerDependencies: + '@playwright/test': '>=1' + '@wordpress/e2e-test-utils-playwright@0.25.0': resolution: {integrity: sha512-6KhYvOeCjiwGqb6V2pc8pdzIaee9annctrpoBBCZDC+LOeW+8DLKZeQYAn9CV3Lmeq1Pxn+9dvHsaV/4+nSHBg==} engines: {node: '>=12'} @@ -2132,6 +2150,20 @@ packages: resolution: {integrity: sha512-DkTDo1Qhvs9rfobBpg5vXAOKaev3Jox8R5ryvYIhql5chrkj/V5k2ZzwUChFXxYmivVkWacCwDGmDmwe2ex/ag==} engines: {node: '>=12'} + '@wordpress/eslint-plugin@17.13.0': + resolution: {integrity: sha512-QnG5HmOd+XsweKOvrqbOugm9rINUjcsh1jo2SN4cbbTWZJ6nPmcfLS0YJdrKkgOQUnKDPQgBPVEyI8tp19OtBw==} + engines: {node: '>=14', npm: '>=6.14.4'} + peerDependencies: + '@babel/core': '>=7' + eslint: '>=8' + prettier: '>=3' + typescript: '>=4' + peerDependenciesMeta: + prettier: + optional: true + typescript: + optional: true + '@wordpress/eslint-plugin@18.0.0': resolution: {integrity: sha512-8IpdmGlQyOBGxAHV3GkRfs5wCyCw83xm0Ou46RVK9Ef3JtocPGVwA9l+Ehs/w6Rc+Dt4PTJM0wmeO40Om2ZRlg==} engines: {node: '>=14', npm: '>=6.14.4'} @@ -2262,6 +2294,15 @@ packages: peerDependencies: react: ^18.0.0 + '@wordpress/scripts@26.19.0': + resolution: {integrity: sha512-m3QYlgpWRfIqCfU4jWKwGeA12Qkt6d9CMewEIxIBGVlEGd/sL5rU1fM7LKNBEbSPQpaOTWJApNGWPcW75Fwp+w==} + engines: {node: '>=14', npm: '>=6.14.4'} + hasBin: true + peerDependencies: + '@playwright/test': ^1.39.0 + react: ^18.0.0 + react-dom: ^18.0.0 + '@wordpress/scripts@27.8.0': resolution: {integrity: sha512-tG333hEHwoi91wHlZK68AGXoD/DxXc2Sg8HmUjFkalZNDO5GRONT+arPxv6jFHYa2hKZrzlCK2NJKNRa7RBrmA==} engines: {node: '>=18', npm: '>=6.14.4'} @@ -5651,6 +5692,11 @@ packages: resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==} engines: {node: '>=8'} + playwright-core@1.39.0: + resolution: {integrity: sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==} + engines: {node: '>=16'} + hasBin: true + playwright-core@1.46.1: resolution: {integrity: sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==} engines: {node: '>=18'} @@ -8813,7 +8859,7 @@ snapshots: dependencies: playwright: 1.46.1 - '@pmmmwh/react-refresh-webpack-plugin@0.5.15(@types/webpack@4.41.38)(react-refresh@0.14.2)(type-fest@3.13.1)(webpack-dev-server@4.15.2(webpack-cli@5.1.4)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4))': + '@pmmmwh/react-refresh-webpack-plugin@0.5.15(@types/webpack@4.41.38)(react-refresh@0.14.2)(type-fest@3.13.1)(webpack-dev-server@4.15.2)(webpack@5.91.0)': dependencies: ansi-html: 0.0.9 core-js-pure: 3.37.1 @@ -9630,17 +9676,17 @@ snapshots: '@webassemblyjs/ast': 1.12.1 '@xtuc/long': 4.2.2 - '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.2)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4))': + '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4)(webpack@5.91.0)': dependencies: webpack: 5.91.0(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.2)(webpack@5.91.0) - '@webpack-cli/info@2.0.2(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.2)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4))': + '@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.91.0)': dependencies: webpack: 5.91.0(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.2)(webpack@5.91.0) - '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.2)(webpack@5.91.0))(webpack-dev-server@4.15.2(webpack-cli@5.1.4)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4))': + '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack-dev-server@4.15.2)(webpack@5.91.0)': dependencies: webpack: 5.91.0(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.2)(webpack@5.91.0) @@ -9931,7 +9977,13 @@ snapshots: moment: 2.30.1 moment-timezone: 0.5.45 - '@wordpress/dependency-extraction-webpack-plugin@5.8.0(webpack@5.91.0(webpack-cli@5.1.4))': + '@wordpress/dependency-extraction-webpack-plugin@4.31.0(webpack@5.91.0)': + dependencies: + json2php: 0.0.7 + webpack: 5.91.0(webpack-cli@5.1.4) + webpack-sources: 3.2.3 + + '@wordpress/dependency-extraction-webpack-plugin@5.8.0(webpack@5.91.0)': dependencies: json2php: 0.0.7 webpack: 5.91.0(webpack-cli@5.1.4) @@ -9950,6 +10002,25 @@ snapshots: '@babel/runtime': 7.24.5 '@wordpress/deprecated': 3.57.0 + '@wordpress/e2e-test-utils-playwright@0.16.0(@playwright/test@1.46.1)(encoding@0.1.13)(typescript@5.4.5)': + dependencies: + '@playwright/test': 1.46.1 + '@wordpress/api-fetch': 6.55.0 + '@wordpress/keycodes': 3.58.0 + '@wordpress/url': 3.59.0 + change-case: 4.1.2 + form-data: 4.0.0 + get-port: 5.1.1 + lighthouse: 10.4.0(encoding@0.1.13)(typescript@5.4.5) + mime: 3.0.0 + web-vitals: 3.5.2 + transitivePeerDependencies: + - bufferutil + - encoding + - supports-color + - typescript + - utf-8-validate + '@wordpress/e2e-test-utils-playwright@0.25.0(@playwright/test@1.46.1)(encoding@0.1.13)(typescript@5.4.5)': dependencies: '@playwright/test': 1.46.1 @@ -10032,6 +10103,37 @@ snapshots: dependencies: '@babel/runtime': 7.24.5 + '@wordpress/eslint-plugin@17.13.0(@babel/core@7.24.5)(@types/eslint@8.56.10)(eslint@8.57.0)(jest@29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0))(typescript@5.4.5)(wp-prettier@3.0.3)': + dependencies: + '@babel/core': 7.24.5 + '@babel/eslint-parser': 7.24.5(@babel/core@7.24.5)(eslint@8.57.0) + '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) + '@wordpress/babel-preset-default': 7.41.0 + '@wordpress/prettier-config': 3.14.0(wp-prettier@3.0.3) + cosmiconfig: 7.1.0 + eslint: 8.57.0 + eslint-config-prettier: 8.10.0(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0) + eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(jest@29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0))(typescript@5.4.5) + eslint-plugin-jsdoc: 46.10.1(eslint@8.57.0) + eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0) + eslint-plugin-playwright: 0.15.3(eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(jest@29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0))(typescript@5.4.5))(eslint@8.57.0) + eslint-plugin-prettier: 5.1.3(@types/eslint@8.56.10)(eslint-config-prettier@8.10.0(eslint@8.57.0))(eslint@8.57.0)(wp-prettier@3.0.3) + eslint-plugin-react: 7.34.1(eslint@8.57.0) + eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) + globals: 13.24.0 + requireindex: 1.2.0 + optionalDependencies: + prettier: wp-prettier@3.0.3 + typescript: 5.4.5 + transitivePeerDependencies: + - '@types/eslint' + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - jest + - supports-color + '@wordpress/eslint-plugin@18.0.0(@babel/core@7.24.5)(@types/eslint@8.56.10)(eslint@8.57.0)(jest@29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0))(typescript@5.4.5)(wp-prettier@3.0.3)': dependencies: '@babel/core': 7.24.5 @@ -10221,15 +10323,108 @@ snapshots: memize: 2.1.0 react: 18.3.1 + '@wordpress/scripts@26.19.0(@playwright/test@1.46.1)(@types/eslint@8.56.10)(@types/node@20.12.12)(@types/webpack@4.41.38)(babel-plugin-macros@3.1.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.4.5)': + dependencies: + '@babel/core': 7.24.5 + '@playwright/test': 1.46.1 + '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(@types/webpack@4.41.38)(react-refresh@0.14.2)(type-fest@3.13.1)(webpack-dev-server@4.15.2)(webpack@5.91.0) + '@svgr/webpack': 8.1.0(typescript@5.4.5) + '@wordpress/babel-preset-default': 7.41.0 + '@wordpress/browserslist-config': 5.40.0 + '@wordpress/dependency-extraction-webpack-plugin': 4.31.0(webpack@5.91.0) + '@wordpress/e2e-test-utils-playwright': 0.16.0(@playwright/test@1.46.1)(encoding@0.1.13)(typescript@5.4.5) + '@wordpress/eslint-plugin': 17.13.0(@babel/core@7.24.5)(@types/eslint@8.56.10)(eslint@8.57.0)(jest@29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0))(typescript@5.4.5)(wp-prettier@3.0.3) + '@wordpress/jest-preset-default': 11.28.0(@babel/core@7.24.5)(jest@29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0)) + '@wordpress/npm-package-json-lint-config': 4.42.0(npm-package-json-lint@6.4.0(typescript@5.4.5)) + '@wordpress/postcss-plugins-preset': 4.41.0(postcss@8.4.38) + '@wordpress/prettier-config': 3.14.0(wp-prettier@3.0.3) + '@wordpress/stylelint-config': 21.40.0(postcss@8.4.38)(stylelint@14.16.1) + adm-zip: 0.5.12 + babel-jest: 29.7.0(@babel/core@7.24.5) + babel-loader: 8.3.0(@babel/core@7.24.5)(webpack@5.91.0) + browserslist: 4.23.0 + chalk: 4.1.1 + check-node-version: 4.2.1 + clean-webpack-plugin: 3.0.0(webpack@5.91.0) + copy-webpack-plugin: 10.2.4(webpack@5.91.0) + cross-spawn: 5.1.0 + css-loader: 6.11.0(webpack@5.91.0) + cssnano: 6.1.2(postcss@8.4.38) + cwd: 0.10.0 + dir-glob: 3.0.1 + eslint: 8.57.0 + expect-puppeteer: 4.4.0 + fast-glob: 3.3.2 + filenamify: 4.3.0 + jest: 29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0) + jest-dev-server: 9.0.2 + jest-environment-jsdom: 29.7.0 + jest-environment-node: 29.7.0 + markdownlint-cli: 0.31.1 + merge-deep: 3.0.3 + mini-css-extract-plugin: 2.9.0(webpack@5.91.0) + minimist: 1.2.8 + npm-package-json-lint: 6.4.0(typescript@5.4.5) + npm-packlist: 3.0.0 + playwright-core: 1.39.0 + postcss: 8.4.38 + postcss-loader: 6.2.1(postcss@8.4.38)(webpack@5.91.0) + prettier: wp-prettier@3.0.3 + puppeteer-core: 13.7.0(encoding@0.1.13) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-refresh: 0.14.2 + read-pkg-up: 7.0.1 + resolve-bin: 0.4.3 + sass: 1.77.1 + sass-loader: 12.6.0(sass@1.77.1)(webpack@5.91.0) + source-map-loader: 3.0.2(webpack@5.91.0) + stylelint: 14.16.1 + terser-webpack-plugin: 5.3.10(webpack@5.91.0) + url-loader: 4.1.1(webpack@5.91.0) + webpack: 5.91.0(webpack-cli@5.1.4) + webpack-bundle-analyzer: 4.10.2 + webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.2)(webpack@5.91.0) + webpack-dev-server: 4.15.2(webpack-cli@5.1.4)(webpack@5.91.0) + transitivePeerDependencies: + - '@rspack/core' + - '@swc/core' + - '@types/eslint' + - '@types/node' + - '@types/webpack' + - '@webpack-cli/generators' + - babel-plugin-macros + - bufferutil + - canvas + - debug + - encoding + - esbuild + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - fibers + - file-loader + - node-notifier + - node-sass + - sass-embedded + - sockjs-client + - supports-color + - ts-node + - type-fest + - typescript + - uglify-js + - utf-8-validate + - webpack-hot-middleware + - webpack-plugin-serve + '@wordpress/scripts@27.8.0(@playwright/test@1.46.1)(@types/eslint@8.56.10)(@types/node@20.12.12)(@types/webpack@4.41.38)(babel-plugin-macros@3.1.0)(encoding@0.1.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.4.5)': dependencies: '@babel/core': 7.24.5 '@playwright/test': 1.46.1 - '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(@types/webpack@4.41.38)(react-refresh@0.14.2)(type-fest@3.13.1)(webpack-dev-server@4.15.2(webpack-cli@5.1.4)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4)) + '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(@types/webpack@4.41.38)(react-refresh@0.14.2)(type-fest@3.13.1)(webpack-dev-server@4.15.2)(webpack@5.91.0) '@svgr/webpack': 8.1.0(typescript@5.4.5) '@wordpress/babel-preset-default': 7.41.0 '@wordpress/browserslist-config': 5.40.0 - '@wordpress/dependency-extraction-webpack-plugin': 5.8.0(webpack@5.91.0(webpack-cli@5.1.4)) + '@wordpress/dependency-extraction-webpack-plugin': 5.8.0(webpack@5.91.0) '@wordpress/e2e-test-utils-playwright': 0.25.0(@playwright/test@1.46.1)(encoding@0.1.13)(typescript@5.4.5) '@wordpress/eslint-plugin': 18.0.0(@babel/core@7.24.5)(@types/eslint@8.56.10)(eslint@8.57.0)(jest@29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0))(typescript@5.4.5)(wp-prettier@3.0.3) '@wordpress/jest-preset-default': 11.28.0(@babel/core@7.24.5)(jest@29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0)) @@ -10239,14 +10434,14 @@ snapshots: '@wordpress/stylelint-config': 21.40.0(postcss@8.4.38)(stylelint@14.16.1) adm-zip: 0.5.12 babel-jest: 29.7.0(@babel/core@7.24.5) - babel-loader: 8.3.0(@babel/core@7.24.5)(webpack@5.91.0(webpack-cli@5.1.4)) + babel-loader: 8.3.0(@babel/core@7.24.5)(webpack@5.91.0) browserslist: 4.23.0 chalk: 4.1.1 check-node-version: 4.2.1 - clean-webpack-plugin: 3.0.0(webpack@5.91.0(webpack-cli@5.1.4)) - copy-webpack-plugin: 10.2.4(webpack@5.91.0(webpack-cli@5.1.4)) + clean-webpack-plugin: 3.0.0(webpack@5.91.0) + copy-webpack-plugin: 10.2.4(webpack@5.91.0) cross-spawn: 5.1.0 - css-loader: 6.11.0(webpack@5.91.0(webpack-cli@5.1.4)) + css-loader: 6.11.0(webpack@5.91.0) cssnano: 6.1.2(postcss@8.4.38) cwd: 0.10.0 dir-glob: 3.0.1 @@ -10260,12 +10455,12 @@ snapshots: jest-environment-node: 29.7.0 markdownlint-cli: 0.31.1 merge-deep: 3.0.3 - mini-css-extract-plugin: 2.9.0(webpack@5.91.0(webpack-cli@5.1.4)) + mini-css-extract-plugin: 2.9.0(webpack@5.91.0) minimist: 1.2.8 npm-package-json-lint: 6.4.0(typescript@5.4.5) npm-packlist: 3.0.0 postcss: 8.4.38 - postcss-loader: 6.2.1(postcss@8.4.38)(webpack@5.91.0(webpack-cli@5.1.4)) + postcss-loader: 6.2.1(postcss@8.4.38)(webpack@5.91.0) prettier: wp-prettier@3.0.3 puppeteer-core: 13.7.0(encoding@0.1.13) react: 18.3.1 @@ -10274,11 +10469,11 @@ snapshots: read-pkg-up: 7.0.1 resolve-bin: 0.4.3 sass: 1.77.1 - sass-loader: 12.6.0(sass@1.77.1)(webpack@5.91.0(webpack-cli@5.1.4)) - source-map-loader: 3.0.2(webpack@5.91.0(webpack-cli@5.1.4)) + sass-loader: 12.6.0(sass@1.77.1)(webpack@5.91.0) + source-map-loader: 3.0.2(webpack@5.91.0) stylelint: 14.16.1 - terser-webpack-plugin: 5.3.10(webpack@5.91.0(webpack-cli@5.1.4)) - url-loader: 4.1.1(webpack@5.91.0(webpack-cli@5.1.4)) + terser-webpack-plugin: 5.3.10(webpack@5.91.0) + url-loader: 4.1.1(webpack@5.91.0) webpack: 5.91.0(webpack-cli@5.1.4) webpack-bundle-analyzer: 4.10.2 webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.2)(webpack@5.91.0) @@ -10650,7 +10845,7 @@ snapshots: transitivePeerDependencies: - supports-color - babel-loader@8.3.0(@babel/core@7.24.5)(webpack@5.91.0(webpack-cli@5.1.4)): + babel-loader@8.3.0(@babel/core@7.24.5)(webpack@5.91.0): dependencies: '@babel/core': 7.24.5 find-cache-dir: 3.3.2 @@ -11000,7 +11195,7 @@ snapshots: classnames@2.5.1: {} - clean-webpack-plugin@3.0.0(webpack@5.91.0(webpack-cli@5.1.4)): + clean-webpack-plugin@3.0.0(webpack@5.91.0): dependencies: '@types/webpack': 4.41.38 del: 4.1.1 @@ -11185,7 +11380,7 @@ snapshots: copy-dir@1.3.0: {} - copy-webpack-plugin@10.2.4(webpack@5.91.0(webpack-cli@5.1.4)): + copy-webpack-plugin@10.2.4(webpack@5.91.0): dependencies: fast-glob: 3.3.2 glob-parent: 6.0.2 @@ -11281,7 +11476,7 @@ snapshots: css-functions-list@3.2.2: {} - css-loader@6.11.0(webpack@5.91.0(webpack-cli@5.1.4)): + css-loader@6.11.0(webpack@5.91.0): dependencies: icss-utils: 5.1.0(postcss@8.4.38) postcss: 8.4.38 @@ -13771,7 +13966,7 @@ snapshots: min-indent@1.0.1: {} - mini-css-extract-plugin@2.9.0(webpack@5.91.0(webpack-cli@5.1.4)): + mini-css-extract-plugin@2.9.0(webpack@5.91.0): dependencies: schema-utils: 4.2.0 tapable: 2.2.1 @@ -14193,6 +14388,8 @@ snapshots: dependencies: find-up: 4.1.0 + playwright-core@1.39.0: {} + playwright-core@1.46.1: {} playwright@1.46.1: @@ -14243,7 +14440,7 @@ snapshots: dependencies: postcss: 8.4.38 - postcss-loader@6.2.1(postcss@8.4.38)(webpack@5.91.0(webpack-cli@5.1.4)): + postcss-loader@6.2.1(postcss@8.4.38)(webpack@5.91.0): dependencies: cosmiconfig: 7.1.0 klona: 2.0.6 @@ -14913,7 +15110,7 @@ snapshots: safer-buffer@2.1.2: {} - sass-loader@12.6.0(sass@1.77.1)(webpack@5.91.0(webpack-cli@5.1.4)): + sass-loader@12.6.0(sass@1.77.1)(webpack@5.91.0): dependencies: klona: 2.0.6 neo-async: 2.6.2 @@ -15168,7 +15365,7 @@ snapshots: source-map-js@1.2.0: {} - source-map-loader@3.0.2(webpack@5.91.0(webpack-cli@5.1.4)): + source-map-loader@3.0.2(webpack@5.91.0): dependencies: abab: 2.0.6 iconv-lite: 0.6.3 @@ -15544,7 +15741,7 @@ snapshots: ansi-escapes: 4.3.2 supports-hyperlinks: 2.3.0 - terser-webpack-plugin@5.3.10(webpack@5.91.0(webpack-cli@5.1.4)): + terser-webpack-plugin@5.3.10(webpack@5.91.0): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 @@ -15762,7 +15959,7 @@ snapshots: dependencies: punycode: 2.3.1 - url-loader@4.1.1(webpack@5.91.0(webpack-cli@5.1.4)): + url-loader@4.1.1(webpack@5.91.0): dependencies: loader-utils: 2.0.4 mime-types: 2.1.35 @@ -15901,9 +16098,9 @@ snapshots: webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.2)(webpack@5.91.0): dependencies: '@discoveryjs/json-ext': 0.5.7 - '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.2)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4)) - '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.2)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4)) - '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.2)(webpack@5.91.0))(webpack-dev-server@4.15.2(webpack-cli@5.1.4)(webpack@5.91.0))(webpack@5.91.0(webpack-cli@5.1.4)) + '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4)(webpack@5.91.0) + '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4)(webpack@5.91.0) + '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4)(webpack-dev-server@4.15.2)(webpack@5.91.0) colorette: 2.0.20 commander: 10.0.1 cross-spawn: 7.0.3 @@ -15918,7 +16115,7 @@ snapshots: webpack-bundle-analyzer: 4.10.2 webpack-dev-server: 4.15.2(webpack-cli@5.1.4)(webpack@5.91.0) - webpack-dev-middleware@5.3.4(webpack@5.91.0(webpack-cli@5.1.4)): + webpack-dev-middleware@5.3.4(webpack@5.91.0): dependencies: colorette: 2.0.20 memfs: 3.5.3 @@ -15957,7 +16154,7 @@ snapshots: serve-index: 1.9.1 sockjs: 0.3.24 spdy: 4.0.2 - webpack-dev-middleware: 5.3.4(webpack@5.91.0(webpack-cli@5.1.4)) + webpack-dev-middleware: 5.3.4(webpack@5.91.0) ws: 8.17.0 optionalDependencies: webpack: 5.91.0(webpack-cli@5.1.4) @@ -15999,7 +16196,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(webpack@5.91.0(webpack-cli@5.1.4)) + terser-webpack-plugin: 5.3.10(webpack@5.91.0) watchpack: 2.4.1 webpack-sources: 3.2.3 optionalDependencies: From edabe1fc92e82601ab2f6e53652aebf40cb0e83d Mon Sep 17 00:00:00 2001 From: Nick Diego Date: Fri, 25 Oct 2024 12:54:36 -0500 Subject: [PATCH 2/2] Add note about use of Disabled component --- plugins/server-side-render-block-d26119/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/server-side-render-block-d26119/README.md b/plugins/server-side-render-block-d26119/README.md index 4d2ab856..3133fcf6 100644 --- a/plugins/server-side-render-block-d26119/README.md +++ b/plugins/server-side-render-block-d26119/README.md @@ -10,6 +10,7 @@ This example demonstrates how to build a simple block that is rendered on the se - This is a dynamic block that renders content on the server side. However, instead of using a `render.php` file, it uses a render callback function. - In the Editor, the block content defined in the callback function is rendered using the `ServerSideRender` component. +- It's best practice to wrap the `ServerSideRender` component in a `Disabled` component. This ensures that users can't mistakenly interact with or modify the block's content directly in the editor, especially when such interaction is not intended. - This example also demonstrates how to register a custom attribute for the block and how to use it in the callback function. ## Related resources