From d9c7863376e7597f40f08d276b911242d6b001d9 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 6 Jul 2021 11:53:57 +0100 Subject: [PATCH 01/28] i18n: Add pattern block --- lib/blocks.php | 2 ++ packages/block-library/src/index.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/lib/blocks.php b/lib/blocks.php index 3e35685e0c7a9..d0f6dede5a313 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -36,6 +36,7 @@ function gutenberg_reregister_core_block_types() { 'navigation-link', 'navigation-submenu', 'nextpage', + 'pattern', 'paragraph', 'preformatted', 'pullquote', @@ -69,6 +70,7 @@ function gutenberg_reregister_core_block_types() { 'social-link.php' => 'core/social-link', 'tag-cloud.php' => 'core/tag-cloud', 'page-list.php' => 'core/page-list', + 'pattern.php' => 'core/pattern', 'post-author.php' => 'core/post-author', 'post-comment.php' => 'core/post-comment', 'post-comment-author.php' => 'core/post-comment-author', diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 27ff83cdb817a..acc997d899ef2 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -42,6 +42,7 @@ import * as list from './list'; import * as missing from './missing'; import * as more from './more'; import * as nextpage from './nextpage'; +import * as pattern from './pattern'; import * as pageList from './page-list'; import * as preformatted from './preformatted'; import * as pullquote from './pullquote'; @@ -195,6 +196,7 @@ export const __experimentalGetCoreBlocks = () => [ postTerms, logInOut, + pattern, ]; /** From 2f131bcca3af37b05d0fed28067dada46d69be5c Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 6 Jul 2021 11:59:05 +0100 Subject: [PATCH 02/28] i18n: Add pattern block --- packages/block-library/src/pattern/block.json | 16 ++++++++++++++ packages/block-library/src/pattern/index.js | 12 +++++++++++ packages/block-library/src/pattern/index.php | 21 +++++++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 packages/block-library/src/pattern/block.json create mode 100644 packages/block-library/src/pattern/index.js create mode 100644 packages/block-library/src/pattern/index.php diff --git a/packages/block-library/src/pattern/block.json b/packages/block-library/src/pattern/block.json new file mode 100644 index 0000000000000..31fa877741a61 --- /dev/null +++ b/packages/block-library/src/pattern/block.json @@ -0,0 +1,16 @@ +{ + "apiVersion": 2, + "name": "core/pattern", + "title": "pattern", + "category": "text", + "description": "Show a block pattern.", + "supports": { + "html": false + }, + "textdomain": "default", + "attributes": { + "slug": { + "type": "string" + } + } +} diff --git a/packages/block-library/src/pattern/index.js b/packages/block-library/src/pattern/index.js new file mode 100644 index 0000000000000..5ab74fdd0c967 --- /dev/null +++ b/packages/block-library/src/pattern/index.js @@ -0,0 +1,12 @@ +/** + * Internal dependencies + */ +import metadata from './block.json'; +import PatternEdit from './edit'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + edit: PatternEdit, +}; diff --git a/packages/block-library/src/pattern/index.php b/packages/block-library/src/pattern/index.php new file mode 100644 index 0000000000000..fcda7eb44bb02 --- /dev/null +++ b/packages/block-library/src/pattern/index.php @@ -0,0 +1,21 @@ + 'render_block_pattern', + ) + ); +} + +function render_block_pattern( $attributes ) { + $slug = $attributes['slug']; + if( class_exists( 'WP_Block_Type_Registry' ) && WP_Block_Patterns_Registry::get_instance()->is_registered( $slug ) ) { + $pattern = WP_Block_Patterns_Registry::get_instance()->get_registered( $slug ); + return do_blocks( $pattern['content'] ); + + } +} + +add_action( 'init', 'register_block_core_pattern' ); From e27ef1029b62651cde37f523bd0f2dbad1ff90aa Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 6 Jul 2021 12:00:22 +0100 Subject: [PATCH 03/28] i18n: Add pattern block --- packages/block-library/src/pattern/edit.js | 23 ++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 packages/block-library/src/pattern/edit.js diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js new file mode 100644 index 0000000000000..9020bf81fc2fa --- /dev/null +++ b/packages/block-library/src/pattern/edit.js @@ -0,0 +1,23 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { + store as blockEditorStore, + BlockList, + BlockEditorProvider, +} from '@wordpress/block-editor'; + +const PatternEdit = ( { attributes } ) => { + const selectedPattern = useSelect( ( select ) => + select( blockEditorStore ).__experimentalGetParsedPattern( attributes.slug ) + ); + + return ( + + + + ); +}; + +export default PatternEdit; From 587d496ad798cc41b1ef61eac238988082984ee9 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 6 Jul 2021 15:49:00 +0100 Subject: [PATCH 04/28] Switch to using innerblocks --- packages/block-library/src/pattern/edit.js | 20 +++++++++----------- packages/block-library/src/pattern/index.js | 8 ++++++++ 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index 9020bf81fc2fa..2eb540851f716 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -1,23 +1,21 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { store as blockEditorStore, - BlockList, - BlockEditorProvider, + InnerBlocks, } from '@wordpress/block-editor'; -const PatternEdit = ( { attributes } ) => { +const PatternEdit = ( { attributes, clientId } ) => { const selectedPattern = useSelect( ( select ) => - select( blockEditorStore ).__experimentalGetParsedPattern( attributes.slug ) - ); - - return ( - - - + select( blockEditorStore ).__experimentalGetParsedPattern( + attributes.slug + ) ); + const { replaceInnerBlocks } = useDispatch( blockEditorStore ); + replaceInnerBlocks( clientId, selectedPattern.blocks ); + return ; }; export default PatternEdit; diff --git a/packages/block-library/src/pattern/index.js b/packages/block-library/src/pattern/index.js index 5ab74fdd0c967..e5e2404f4897b 100644 --- a/packages/block-library/src/pattern/index.js +++ b/packages/block-library/src/pattern/index.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + /** * Internal dependencies */ @@ -9,4 +14,7 @@ export { metadata, name }; export const settings = { edit: PatternEdit, + save: () => { + return ; + }, }; From fb50aa715cdf8edfa31831cec2c463c319de366b Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 14 Jul 2021 15:28:53 +0100 Subject: [PATCH 05/28] add useeffect lifecycle method to replace innerblocks and hide from inserter --- packages/block-library/src/pattern/block.json | 3 ++- packages/block-library/src/pattern/edit.js | 9 ++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/pattern/block.json b/packages/block-library/src/pattern/block.json index 31fa877741a61..ece0a1059c3b9 100644 --- a/packages/block-library/src/pattern/block.json +++ b/packages/block-library/src/pattern/block.json @@ -5,7 +5,8 @@ "category": "text", "description": "Show a block pattern.", "supports": { - "html": false + "html": false, + "inserter": false }, "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index 2eb540851f716..d7f8ebe0eee54 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; +import { useEffect } from '@wordpress/element'; import { store as blockEditorStore, InnerBlocks, @@ -13,8 +14,14 @@ const PatternEdit = ( { attributes, clientId } ) => { attributes.slug ) ); + const { replaceInnerBlocks } = useDispatch( blockEditorStore ); - replaceInnerBlocks( clientId, selectedPattern.blocks ); + useEffect( () => { + if ( selectedPattern && selectedPattern.blocks ) { + replaceInnerBlocks( clientId, selectedPattern.blocks ); + } + }, [ selectedPattern ] ); + return ; }; From 46893b34e30bc789660ddea25acedd7efff572d9 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 16 Jul 2021 14:15:02 +0100 Subject: [PATCH 06/28] Only run useeffect once --- packages/block-library/src/pattern/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index d7f8ebe0eee54..73d7514ca6e82 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -20,7 +20,7 @@ const PatternEdit = ( { attributes, clientId } ) => { if ( selectedPattern && selectedPattern.blocks ) { replaceInnerBlocks( clientId, selectedPattern.blocks ); } - }, [ selectedPattern ] ); + }, [] ); return ; }; From f7eafa762d1ac70ea102f53a09a69f71bc6cdecb Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 15 Jul 2021 18:53:00 +0100 Subject: [PATCH 07/28] Update packages/block-library/src/pattern/index.php Co-authored-by: Miguel Fonseca --- packages/block-library/src/pattern/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/pattern/index.php b/packages/block-library/src/pattern/index.php index fcda7eb44bb02..8f4bc95d27b5c 100644 --- a/packages/block-library/src/pattern/index.php +++ b/packages/block-library/src/pattern/index.php @@ -11,7 +11,7 @@ function register_block_core_pattern() { function render_block_pattern( $attributes ) { $slug = $attributes['slug']; - if( class_exists( 'WP_Block_Type_Registry' ) && WP_Block_Patterns_Registry::get_instance()->is_registered( $slug ) ) { + if ( class_exists( 'WP_Block_Patterns_Registry' ) && WP_Block_Patterns_Registry::get_instance()->is_registered( $slug ) ) { $pattern = WP_Block_Patterns_Registry::get_instance()->get_registered( $slug ); return do_blocks( $pattern['content'] ); From 86dd39657ba265f89b59105891e0856fdf300c19 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 15 Jul 2021 18:53:05 +0100 Subject: [PATCH 08/28] Update packages/block-library/src/pattern/edit.js Co-authored-by: Miguel Fonseca --- packages/block-library/src/pattern/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index 73d7514ca6e82..8c773b310699b 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -17,7 +17,7 @@ const PatternEdit = ( { attributes, clientId } ) => { const { replaceInnerBlocks } = useDispatch( blockEditorStore ); useEffect( () => { - if ( selectedPattern && selectedPattern.blocks ) { + if ( selectedPattern?.blocks ) { replaceInnerBlocks( clientId, selectedPattern.blocks ); } }, [] ); From 1c7e99ed3986c61bd71342341dd3542e1a6f352d Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 15 Jul 2021 18:53:11 +0100 Subject: [PATCH 09/28] Update packages/block-library/src/pattern/block.json Co-authored-by: Miguel Fonseca --- packages/block-library/src/pattern/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/pattern/block.json b/packages/block-library/src/pattern/block.json index ece0a1059c3b9..997bf194417e4 100644 --- a/packages/block-library/src/pattern/block.json +++ b/packages/block-library/src/pattern/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/pattern", "title": "pattern", - "category": "text", + "category": "design", "description": "Show a block pattern.", "supports": { "html": false, From 224c108be4ba28c0138c8e104472df88ed2cea42 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 15 Jul 2021 18:53:15 +0100 Subject: [PATCH 10/28] Update packages/block-library/src/pattern/block.json Co-authored-by: Miguel Fonseca --- packages/block-library/src/pattern/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/pattern/block.json b/packages/block-library/src/pattern/block.json index 997bf194417e4..78423e8d49123 100644 --- a/packages/block-library/src/pattern/block.json +++ b/packages/block-library/src/pattern/block.json @@ -1,7 +1,7 @@ { "apiVersion": 2, "name": "core/pattern", - "title": "pattern", + "title": "Pattern", "category": "design", "description": "Show a block pattern.", "supports": { From 8979ee4dfde0738d7c56923303ebb02727be3c78 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 21 Jul 2021 10:44:34 +0100 Subject: [PATCH 11/28] Replace the pattern block with the innerblocks when the block is selected --- packages/block-library/src/pattern/edit.js | 28 ++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index 8c773b310699b..271c0cfecebc3 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -8,16 +8,40 @@ import { InnerBlocks, } from '@wordpress/block-editor'; -const PatternEdit = ( { attributes, clientId } ) => { +const PatternEdit = ( { attributes, clientId, isSelected } ) => { const selectedPattern = useSelect( ( select ) => select( blockEditorStore ).__experimentalGetParsedPattern( attributes.slug ) ); + const isInnerBlockSelected = useSelect( ( select) => { + const { + getBlock, + hasSelectedInnerBlock, + } = select( blockEditorStore ); - const { replaceInnerBlocks } = useDispatch( blockEditorStore ); + const block = getBlock( clientId ); + const hasInnerBlocks = !! ( block && block.innerBlocks.length ); + return hasInnerBlocks && hasSelectedInnerBlock( clientId, true ); + } ); + const { replaceBlocks, replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); + + // Run this effect when the block, or any of its InnerBlocks are selected. + // This replaces the Pattern block wrapper with the content of the pattern. + // This change won't be saved unless further changes are made to the InnerBlocks. + useEffect( () => { + if ( ( isSelected || isInnerBlockSelected ) && selectedPattern?.blocks ) { + __unstableMarkNextChangeAsNotPersistent(); + replaceBlocks( clientId, selectedPattern.blocks ); + } + }, [ isSelected, isInnerBlockSelected ] ); + + // Run this effect when the component loads. + // This adds the Pattern block template as InnerBlocks. + // This change won't be saved. useEffect( () => { if ( selectedPattern?.blocks ) { + __unstableMarkNextChangeAsNotPersistent(); replaceInnerBlocks( clientId, selectedPattern.blocks ); } }, [] ); From cae2c3c480fb596899c382b7747e53c6925b74af Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 21 Jul 2021 10:55:49 +0100 Subject: [PATCH 12/28] reformat --- packages/block-library/src/pattern/edit.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index 271c0cfecebc3..be102d5f28bda 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -14,23 +14,27 @@ const PatternEdit = ( { attributes, clientId, isSelected } ) => { attributes.slug ) ); - const isInnerBlockSelected = useSelect( ( select) => { - const { - getBlock, - hasSelectedInnerBlock, - } = select( blockEditorStore ); + const isInnerBlockSelected = useSelect( ( select ) => { + const { getBlock, hasSelectedInnerBlock } = select( blockEditorStore ); const block = getBlock( clientId ); const hasInnerBlocks = !! ( block && block.innerBlocks.length ); return hasInnerBlocks && hasSelectedInnerBlock( clientId, true ); } ); - const { replaceBlocks, replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); + const { + replaceBlocks, + replaceInnerBlocks, + __unstableMarkNextChangeAsNotPersistent, + } = useDispatch( blockEditorStore ); // Run this effect when the block, or any of its InnerBlocks are selected. // This replaces the Pattern block wrapper with the content of the pattern. // This change won't be saved unless further changes are made to the InnerBlocks. useEffect( () => { - if ( ( isSelected || isInnerBlockSelected ) && selectedPattern?.blocks ) { + if ( + ( isSelected || isInnerBlockSelected ) && + selectedPattern?.blocks + ) { __unstableMarkNextChangeAsNotPersistent(); replaceBlocks( clientId, selectedPattern.blocks ); } From 25c26b4ab62e6d7e01b95228bf78b31cc211d1c3 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 6 Aug 2021 12:22:20 +0100 Subject: [PATCH 13/28] Remove save --- packages/block-library/src/pattern/index.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/block-library/src/pattern/index.js b/packages/block-library/src/pattern/index.js index e5e2404f4897b..5ab74fdd0c967 100644 --- a/packages/block-library/src/pattern/index.js +++ b/packages/block-library/src/pattern/index.js @@ -1,8 +1,3 @@ -/** - * WordPress dependencies - */ -import { InnerBlocks } from '@wordpress/block-editor'; - /** * Internal dependencies */ @@ -14,7 +9,4 @@ export { metadata, name }; export const settings = { edit: PatternEdit, - save: () => { - return ; - }, }; From 3d9ece5f40f26cb9c107ef51dd5cf72d4f7e1cbe Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 6 Aug 2021 12:26:40 +0100 Subject: [PATCH 14/28] Add fixtures --- test/integration/fixtures/blocks/core__pattern.html | 1 + test/integration/fixtures/blocks/core__pattern.json | 12 ++++++++++++ .../fixtures/blocks/core__pattern.parsed.json | 11 +++++++++++ .../fixtures/blocks/core__pattern.serialized.html | 1 + 4 files changed, 25 insertions(+) create mode 100644 test/integration/fixtures/blocks/core__pattern.html create mode 100644 test/integration/fixtures/blocks/core__pattern.json create mode 100644 test/integration/fixtures/blocks/core__pattern.parsed.json create mode 100644 test/integration/fixtures/blocks/core__pattern.serialized.html diff --git a/test/integration/fixtures/blocks/core__pattern.html b/test/integration/fixtures/blocks/core__pattern.html new file mode 100644 index 0000000000000..7baa98d504372 --- /dev/null +++ b/test/integration/fixtures/blocks/core__pattern.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__pattern.json b/test/integration/fixtures/blocks/core__pattern.json new file mode 100644 index 0000000000000..a4fa51c73a2f2 --- /dev/null +++ b/test/integration/fixtures/blocks/core__pattern.json @@ -0,0 +1,12 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/pattern", + "isValid": true, + "attributes": { + "slug": "quadrat/search-results" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__pattern.parsed.json b/test/integration/fixtures/blocks/core__pattern.parsed.json new file mode 100644 index 0000000000000..39ec868a987d2 --- /dev/null +++ b/test/integration/fixtures/blocks/core__pattern.parsed.json @@ -0,0 +1,11 @@ +[ + { + "blockName": "core/pattern", + "attrs": { + "slug": "quadrat/search-results" + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__pattern.serialized.html b/test/integration/fixtures/blocks/core__pattern.serialized.html new file mode 100644 index 0000000000000..7baa98d504372 --- /dev/null +++ b/test/integration/fixtures/blocks/core__pattern.serialized.html @@ -0,0 +1 @@ + From 6a9e3ef3be442d97880d27eedd4211e7555a03e2 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 6 Aug 2021 12:32:27 +0100 Subject: [PATCH 15/28] simplify how we determine if a block is selected --- packages/block-library/src/pattern/edit.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index be102d5f28bda..5f60041a63f7b 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -14,13 +14,14 @@ const PatternEdit = ( { attributes, clientId, isSelected } ) => { attributes.slug ) ); - const isInnerBlockSelected = useSelect( ( select ) => { - const { getBlock, hasSelectedInnerBlock } = select( blockEditorStore ); - const block = getBlock( clientId ); - const hasInnerBlocks = !! ( block && block.innerBlocks.length ); - return hasInnerBlocks && hasSelectedInnerBlock( clientId, true ); - } ); + const hasSelection = useSelect( + ( select ) => + isSelected || + select( blockEditorStore ).hasSelectedInnerBlock( clientId, true ), + [ isSelected, clientId ] + ); + const { replaceBlocks, replaceInnerBlocks, @@ -31,14 +32,11 @@ const PatternEdit = ( { attributes, clientId, isSelected } ) => { // This replaces the Pattern block wrapper with the content of the pattern. // This change won't be saved unless further changes are made to the InnerBlocks. useEffect( () => { - if ( - ( isSelected || isInnerBlockSelected ) && - selectedPattern?.blocks - ) { + if ( selectedPattern?.blocks ) { __unstableMarkNextChangeAsNotPersistent(); replaceBlocks( clientId, selectedPattern.blocks ); } - }, [ isSelected, isInnerBlockSelected ] ); + }, [ hasSelection ] ); // Run this effect when the component loads. // This adds the Pattern block template as InnerBlocks. From 20936daee182f6ebfb34dda3a972dca34c8a7177 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 7 Oct 2021 12:23:54 -0400 Subject: [PATCH 16/28] Update packages/block-library/src/pattern/edit.js Co-authored-by: Miguel Fonseca --- packages/block-library/src/pattern/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index 5f60041a63f7b..239b9729c33c1 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -32,11 +32,11 @@ const PatternEdit = ( { attributes, clientId, isSelected } ) => { // This replaces the Pattern block wrapper with the content of the pattern. // This change won't be saved unless further changes are made to the InnerBlocks. useEffect( () => { - if ( selectedPattern?.blocks ) { + if ( hasSelection && selectedPattern?.blocks ) { __unstableMarkNextChangeAsNotPersistent(); replaceBlocks( clientId, selectedPattern.blocks ); } - }, [ hasSelection ] ); + }, [ hasSelection, selectedPattern?.blocks ] ); // Run this effect when the component loads. // This adds the Pattern block template as InnerBlocks. From 3e602b4fc99e17b76522fb6e47c768e22a28b91f Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 7 Oct 2021 12:24:44 -0400 Subject: [PATCH 17/28] Update packages/block-library/src/pattern/index.php Co-authored-by: Miguel Fonseca --- packages/block-library/src/pattern/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/pattern/index.php b/packages/block-library/src/pattern/index.php index 8f4bc95d27b5c..14fb01d716079 100644 --- a/packages/block-library/src/pattern/index.php +++ b/packages/block-library/src/pattern/index.php @@ -4,12 +4,12 @@ function register_block_core_pattern() { register_block_type_from_metadata( __DIR__ . '/pattern', array( - 'render_callback' => 'render_block_pattern', + 'render_callback' => 'render_block_core_pattern', ) ); } -function render_block_pattern( $attributes ) { +function render_block_core_pattern( $attributes ) { $slug = $attributes['slug']; if ( class_exists( 'WP_Block_Patterns_Registry' ) && WP_Block_Patterns_Registry::get_instance()->is_registered( $slug ) ) { $pattern = WP_Block_Patterns_Registry::get_instance()->get_registered( $slug ); From 076a4deeb05f94b7d8c5ee865a199335b73665c7 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 7 Oct 2021 13:59:05 -0400 Subject: [PATCH 18/28] Cache pattern on slug Co-authored-by: Miguel Fonseca --- packages/block-library/src/pattern/edit.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index 239b9729c33c1..699d795fd14f5 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -9,10 +9,12 @@ import { } from '@wordpress/block-editor'; const PatternEdit = ( { attributes, clientId, isSelected } ) => { - const selectedPattern = useSelect( ( select ) => - select( blockEditorStore ).__experimentalGetParsedPattern( - attributes.slug - ) + const selectedPattern = useSelect( + ( select ) => + select( blockEditorStore ).__experimentalGetParsedPattern( + attributes.slug + ), + [ attributes.slug ] ); const hasSelection = useSelect( From 82a2450f2d48cdadaa2feafa64fa48a1f70205b1 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 7 Oct 2021 15:10:07 -0400 Subject: [PATCH 19/28] Add dependency to hook. --- packages/block-library/src/pattern/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index 699d795fd14f5..9416481b4a012 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -48,7 +48,7 @@ const PatternEdit = ( { attributes, clientId, isSelected } ) => { __unstableMarkNextChangeAsNotPersistent(); replaceInnerBlocks( clientId, selectedPattern.blocks ); } - }, [] ); + }, [ selectedPattern?.blocks ] ); return ; }; From 3e8d7b84543f39d02e71c4c111d95fd0cc151058 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 7 Oct 2021 15:37:21 -0400 Subject: [PATCH 20/28] Use innerBlocksProps + blockProps. --- packages/block-library/src/pattern/edit.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index 9416481b4a012..8762e2bcd2101 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -6,6 +6,8 @@ import { useEffect } from '@wordpress/element'; import { store as blockEditorStore, InnerBlocks, + useBlockProps, + __experimentalUseInnerBlocksProps as useInnerBlocksProps, } from '@wordpress/block-editor'; const PatternEdit = ( { attributes, clientId, isSelected } ) => { @@ -50,7 +52,9 @@ const PatternEdit = ( { attributes, clientId, isSelected } ) => { } }, [ selectedPattern?.blocks ] ); - return ; + const props = useInnerBlocksProps( useBlockProps(), {} ); + + return ; }; export default PatternEdit; From 90619bbe9e01b9b2519c209c588fdde21d875941 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 7 Oct 2021 15:40:23 -0400 Subject: [PATCH 21/28] Fix phpcs errors. --- packages/block-library/src/pattern/index.php | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/pattern/index.php b/packages/block-library/src/pattern/index.php index 14fb01d716079..fa532d657fd31 100644 --- a/packages/block-library/src/pattern/index.php +++ b/packages/block-library/src/pattern/index.php @@ -1,5 +1,15 @@ is_registered( $slug ) ) { $pattern = WP_Block_Patterns_Registry::get_instance()->get_registered( $slug ); return do_blocks( $pattern['content'] ); - } } From 4fc64ba6505bc71f8562d548e1c24d9cf745407e Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 7 Oct 2021 15:43:45 -0400 Subject: [PATCH 22/28] Update tests to reference a core pattern. --- test/integration/fixtures/blocks/core__pattern.html | 2 +- test/integration/fixtures/blocks/core__pattern.json | 2 +- test/integration/fixtures/blocks/core__pattern.parsed.json | 2 +- test/integration/fixtures/blocks/core__pattern.serialized.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/integration/fixtures/blocks/core__pattern.html b/test/integration/fixtures/blocks/core__pattern.html index 7baa98d504372..d4d8a0ab00685 100644 --- a/test/integration/fixtures/blocks/core__pattern.html +++ b/test/integration/fixtures/blocks/core__pattern.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__pattern.json b/test/integration/fixtures/blocks/core__pattern.json index a4fa51c73a2f2..104b7204461f0 100644 --- a/test/integration/fixtures/blocks/core__pattern.json +++ b/test/integration/fixtures/blocks/core__pattern.json @@ -4,7 +4,7 @@ "name": "core/pattern", "isValid": true, "attributes": { - "slug": "quadrat/search-results" + "slug": "text-two-columns" }, "innerBlocks": [], "originalContent": "" diff --git a/test/integration/fixtures/blocks/core__pattern.parsed.json b/test/integration/fixtures/blocks/core__pattern.parsed.json index 39ec868a987d2..f3e9a25d1ba9e 100644 --- a/test/integration/fixtures/blocks/core__pattern.parsed.json +++ b/test/integration/fixtures/blocks/core__pattern.parsed.json @@ -2,7 +2,7 @@ { "blockName": "core/pattern", "attrs": { - "slug": "quadrat/search-results" + "slug": "text-two-columns" }, "innerBlocks": [], "innerHTML": "", diff --git a/test/integration/fixtures/blocks/core__pattern.serialized.html b/test/integration/fixtures/blocks/core__pattern.serialized.html index 7baa98d504372..d4d8a0ab00685 100644 --- a/test/integration/fixtures/blocks/core__pattern.serialized.html +++ b/test/integration/fixtures/blocks/core__pattern.serialized.html @@ -1 +1 @@ - + From a2adecf2a5f039d1928a95798d91ff22a40d23c3 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 7 Oct 2021 15:49:54 -0400 Subject: [PATCH 23/28] Add mcore/ prefix to slug. --- test/integration/fixtures/blocks/core__pattern.html | 2 +- test/integration/fixtures/blocks/core__pattern.json | 2 +- test/integration/fixtures/blocks/core__pattern.parsed.json | 2 +- test/integration/fixtures/blocks/core__pattern.serialized.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/integration/fixtures/blocks/core__pattern.html b/test/integration/fixtures/blocks/core__pattern.html index d4d8a0ab00685..7e54c15b02123 100644 --- a/test/integration/fixtures/blocks/core__pattern.html +++ b/test/integration/fixtures/blocks/core__pattern.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__pattern.json b/test/integration/fixtures/blocks/core__pattern.json index 104b7204461f0..55ac2e12b5d56 100644 --- a/test/integration/fixtures/blocks/core__pattern.json +++ b/test/integration/fixtures/blocks/core__pattern.json @@ -4,7 +4,7 @@ "name": "core/pattern", "isValid": true, "attributes": { - "slug": "text-two-columns" + "slug": "core/text-two-columns" }, "innerBlocks": [], "originalContent": "" diff --git a/test/integration/fixtures/blocks/core__pattern.parsed.json b/test/integration/fixtures/blocks/core__pattern.parsed.json index f3e9a25d1ba9e..e37cee551dda7 100644 --- a/test/integration/fixtures/blocks/core__pattern.parsed.json +++ b/test/integration/fixtures/blocks/core__pattern.parsed.json @@ -2,7 +2,7 @@ { "blockName": "core/pattern", "attrs": { - "slug": "text-two-columns" + "slug": "core/text-two-columns" }, "innerBlocks": [], "innerHTML": "", diff --git a/test/integration/fixtures/blocks/core__pattern.serialized.html b/test/integration/fixtures/blocks/core__pattern.serialized.html index d4d8a0ab00685..7e54c15b02123 100644 --- a/test/integration/fixtures/blocks/core__pattern.serialized.html +++ b/test/integration/fixtures/blocks/core__pattern.serialized.html @@ -1 +1 @@ - + From 0cb327b1635baaffe1c0334f4c42c81e6611f93f Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Tue, 12 Oct 2021 12:42:46 -0400 Subject: [PATCH 24/28] Replace pattern wrapper with group. --- packages/block-library/src/pattern/edit.js | 6 ++++-- packages/block-library/src/pattern/index.php | 6 +++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index 8762e2bcd2101..c1cbf8ab9741b 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -9,6 +9,7 @@ import { useBlockProps, __experimentalUseInnerBlocksProps as useInnerBlocksProps, } from '@wordpress/block-editor'; +import { createBlock } from '@wordpress/blocks'; const PatternEdit = ( { attributes, clientId, isSelected } ) => { const selectedPattern = useSelect( @@ -33,12 +34,13 @@ const PatternEdit = ( { attributes, clientId, isSelected } ) => { } = useDispatch( blockEditorStore ); // Run this effect when the block, or any of its InnerBlocks are selected. - // This replaces the Pattern block wrapper with the content of the pattern. + // This replaces the Pattern block wrapper with a Group block. + // This ensures the markup structure and alignment are consistent between editor and view. // This change won't be saved unless further changes are made to the InnerBlocks. useEffect( () => { if ( hasSelection && selectedPattern?.blocks ) { __unstableMarkNextChangeAsNotPersistent(); - replaceBlocks( clientId, selectedPattern.blocks ); + replaceBlocks( clientId, createBlock( 'core/group', {}, selectedPattern.blocks ) ); } }, [ hasSelection, selectedPattern?.blocks ] ); diff --git a/packages/block-library/src/pattern/index.php b/packages/block-library/src/pattern/index.php index fa532d657fd31..206ae3de8f539 100644 --- a/packages/block-library/src/pattern/index.php +++ b/packages/block-library/src/pattern/index.php @@ -8,7 +8,7 @@ /** * Registers the `core/pattern` block on the server. * - * @return void + * @return void */ function register_block_core_pattern() { register_block_type_from_metadata( @@ -22,7 +22,7 @@ function register_block_core_pattern() { /** * Renders the `core/pattern` block on the server. * - * @param array $attributes Block attributes. + * @param array $attributes Block attributes. * * @return string Returns the output of the pattern. */ @@ -30,7 +30,7 @@ function render_block_core_pattern( $attributes ) { $slug = $attributes['slug']; if ( class_exists( 'WP_Block_Patterns_Registry' ) && WP_Block_Patterns_Registry::get_instance()->is_registered( $slug ) ) { $pattern = WP_Block_Patterns_Registry::get_instance()->get_registered( $slug ); - return do_blocks( $pattern['content'] ); + return do_blocks( '
' . $pattern['content'] . '
' ); } } From e88bcdf70fe8c591583ece1ce463c335f12ce124 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Tue, 12 Oct 2021 12:51:09 -0400 Subject: [PATCH 25/28] Fix linting error. --- packages/block-library/src/pattern/edit.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index c1cbf8ab9741b..005ad039e139e 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -40,7 +40,10 @@ const PatternEdit = ( { attributes, clientId, isSelected } ) => { useEffect( () => { if ( hasSelection && selectedPattern?.blocks ) { __unstableMarkNextChangeAsNotPersistent(); - replaceBlocks( clientId, createBlock( 'core/group', {}, selectedPattern.blocks ) ); + replaceBlocks( + clientId, + createBlock( 'core/group', {}, selectedPattern.blocks ) + ); } }, [ hasSelection, selectedPattern?.blocks ] ); From 4497b0eac2f8623c990a015bf2534d63c81efb69 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Wed, 13 Oct 2021 12:27:23 -0400 Subject: [PATCH 26/28] Wrap pattern contents in div instead of group block. --- packages/block-library/src/pattern/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/pattern/index.php b/packages/block-library/src/pattern/index.php index 206ae3de8f539..c7e461ea1b042 100644 --- a/packages/block-library/src/pattern/index.php +++ b/packages/block-library/src/pattern/index.php @@ -30,7 +30,7 @@ function render_block_core_pattern( $attributes ) { $slug = $attributes['slug']; if ( class_exists( 'WP_Block_Patterns_Registry' ) && WP_Block_Patterns_Registry::get_instance()->is_registered( $slug ) ) { $pattern = WP_Block_Patterns_Registry::get_instance()->get_registered( $slug ); - return do_blocks( '
' . $pattern['content'] . '
' ); + return do_blocks( '
' . $pattern['content'] . '
' ); } } From 3843b3e1f86f7671715ccf239e0269d56ae7133d Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 28 Oct 2021 10:14:35 -0400 Subject: [PATCH 27/28] Replace InnerBlocks with div. --- packages/block-library/src/pattern/edit.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index 005ad039e139e..e0cab9c7b86e4 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; import { store as blockEditorStore, - InnerBlocks, useBlockProps, __experimentalUseInnerBlocksProps as useInnerBlocksProps, } from '@wordpress/block-editor'; @@ -59,7 +58,7 @@ const PatternEdit = ( { attributes, clientId, isSelected } ) => { const props = useInnerBlocksProps( useBlockProps(), {} ); - return ; + return
; }; export default PatternEdit; From f1ca663f676d7fc873a4c7ac0952dbf022405b5a Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 28 Oct 2021 21:14:09 +0400 Subject: [PATCH 28/28] Minor render callback refactoring --- packages/block-library/src/pattern/index.php | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/pattern/index.php b/packages/block-library/src/pattern/index.php index c7e461ea1b042..3c2888a9a7727 100644 --- a/packages/block-library/src/pattern/index.php +++ b/packages/block-library/src/pattern/index.php @@ -27,11 +27,18 @@ function register_block_core_pattern() { * @return string Returns the output of the pattern. */ function render_block_core_pattern( $attributes ) { - $slug = $attributes['slug']; - if ( class_exists( 'WP_Block_Patterns_Registry' ) && WP_Block_Patterns_Registry::get_instance()->is_registered( $slug ) ) { - $pattern = WP_Block_Patterns_Registry::get_instance()->get_registered( $slug ); - return do_blocks( '
' . $pattern['content'] . '
' ); + if ( empty( $attributes['slug'] ) ) { + return ''; } + + $slug = $attributes['slug']; + $registry = WP_Block_Patterns_Registry::get_instance(); + if ( ! $registry->is_registered( $slug ) ) { + return ''; + } + + $pattern = $registry->get_registered( $slug ); + return do_blocks( '
' . $pattern['content'] . '
' ); } add_action( 'init', 'register_block_core_pattern' );