i18n: Add pattern block (#33217)

* i18n: Add pattern block

* i18n: Add pattern block

* i18n: Add pattern block

* Switch to using innerblocks

* add useeffect lifecycle method to replace innerblocks and hide from inserter

* Only run useeffect once

* Update packages/block-library/src/pattern/index.php

Co-authored-by: Miguel Fonseca <[email protected]>

* Update packages/block-library/src/pattern/edit.js

Co-authored-by: Miguel Fonseca <[email protected]>

* Update packages/block-library/src/pattern/block.json

Co-authored-by: Miguel Fonseca <[email protected]>

* Update packages/block-library/src/pattern/block.json

Co-authored-by: Miguel Fonseca <[email protected]>

* Replace the pattern block with the innerblocks when the block is selected

* reformat

* Remove save

* Add fixtures

* simplify how we determine if a block is selected

* Update packages/block-library/src/pattern/edit.js

Co-authored-by: Miguel Fonseca <[email protected]>

* Update packages/block-library/src/pattern/index.php

Co-authored-by: Miguel Fonseca <[email protected]>

* Cache pattern on slug

Co-authored-by: Miguel Fonseca <[email protected]>

* Add dependency to hook.

* Use innerBlocksProps + blockProps.

* Fix phpcs errors.

* Update tests to reference a core pattern.

* Add mcore/ prefix to slug.

* Replace pattern wrapper with group.

* Fix linting error.

* Wrap pattern contents in div instead of group block.

* Replace InnerBlocks with div.

* Minor render callback refactoring

Co-authored-by: Miguel Fonseca <[email protected]>
Co-authored-by: Jeff Ong <[email protected]>
Co-authored-by: George Mamadashvili <[email protected]>

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',

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,
 ];
 
 /**

packages/block-library/src/pattern/block.json

@@ -0,0 +1,17 @@
+{
+	"apiVersion": 2,
+	"name": "core/pattern",
+	"title": "Pattern",
+	"category": "design",
+	"description": "Show a block pattern.",
+	"supports": {
+		"html": false,
+		"inserter": false
+	},
+	"textdomain": "default",
+	"attributes": {
+		"slug": {
+			"type": "string"
+		}
+	}
+}

packages/block-library/src/pattern/edit.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import {
+	store as blockEditorStore,
+	useBlockProps,
+	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+
+const PatternEdit = ( { attributes, clientId, isSelected } ) => {
+	const selectedPattern = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__experimentalGetParsedPattern(
+				attributes.slug
+			),
+		[ attributes.slug ]
+	);
+
+	const hasSelection = useSelect(
+		( select ) =>
+			isSelected ||
+			select( blockEditorStore ).hasSelectedInnerBlock( clientId, true ),
+		[ isSelected, clientId ]
+	);
+
+	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 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,
+				createBlock( 'core/group', {}, selectedPattern.blocks )
+			);
+		}
+	}, [ hasSelection, selectedPattern?.blocks ] );
+
+	// 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 );
+		}
+	}, [ selectedPattern?.blocks ] );
+
+	const props = useInnerBlocksProps( useBlockProps(), {} );
+
+	return <div { ...props } />;
+};
+
+export default PatternEdit;

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,
+};

packages/block-library/src/pattern/index.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Server-side rendering of the `core/pattern` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ *  Registers the `core/pattern` block on the server.
+ *
+ * @return void
+ */
+function register_block_core_pattern() {
+	register_block_type_from_metadata(
+		__DIR__ . '/pattern',
+		array(
+			'render_callback' => 'render_block_core_pattern',
+		)
+	);
+}
+
+/**
+ * Renders the `core/pattern` block on the server.
+ *
+ * @param array $attributes Block attributes.
+ *
+ * @return string Returns the output of the pattern.
+ */
+function render_block_core_pattern( $attributes ) {
+	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( '<div>' . $pattern['content'] . '</div>' );
+}
+
+add_action( 'init', 'register_block_core_pattern' );

test/integration/fixtures/blocks/core__pattern.html

@@ -0,0 +1 @@
+<!-- wp:pattern {"slug":"core/text-two-columns"} /-->

test/integration/fixtures/blocks/core__pattern.json

@@ -0,0 +1,12 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/pattern",
+		"isValid": true,
+		"attributes": {
+			"slug": "core/text-two-columns"
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
+]

test/integration/fixtures/blocks/core__pattern.parsed.json

@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/pattern",
+		"attrs": {
+			"slug": "core/text-two-columns"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]

test/integration/fixtures/blocks/core__pattern.serialized.html

@@ -0,0 +1 @@
+<!-- wp:pattern {"slug":"core/text-two-columns"} /-->