Add the initial version of the Block Patterns API and UI as a sidebar…

… plugin (#20354)

lib/client-assets.php

@@ -698,3 +698,34 @@ function gutenberg_extend_settings_image_dimensions( $settings ) {
 	return $settings;
 }
 add_filter( 'block_editor_settings', 'gutenberg_extend_settings_image_dimensions' );
+
+/**
+ * Load a block pattern by name.
+ *
+ * @param string $name Block Pattern File name.
+ *
+ * @return array Block Pattern Array.
+ */
+function gutenberg_load_block_pattern( $name ) {
+	return json_decode(
+		file_get_contents( __DIR__ . '/patterns/' . $name . '.json' ),
+		true
+	);
+}
+
+/**
+ * Extends block editor settings to include a list of default block patterns.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_extend_settings_block_patterns( $settings ) {
+	$block_patterns                          = [
+		gutenberg_load_block_pattern( 'teams' ),
+		gutenberg_load_block_pattern( 'testimonial' ),
+	];
+	$settings['__experimentalBlockPatterns'] = $block_patterns;
+	return $settings;
+}
+add_filter( 'block_editor_settings', 'gutenberg_extend_settings_block_patterns' );

lib/patterns/teams.json

@@ -0,0 +1,5 @@
+{
+	"__file": "wp_block",
+	"title": "Teams",
+	"content": "<!-- wp:columns {\"className\":\"has-1-columns dsgn__basic-711220\"} -->\n<div class=\"wp-block-columns has-1-columns dsgn__basic-711220\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:columns {\"className\":\"has-3-columns\"} -->\n<div class=\"wp-block-columns has-3-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"align\":\"center\",\"id\":1137001,\"width\":140,\"height\":140} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img src=\"https://wpdesignhub.com/designs/basic/711220/team-member-1.png\" alt=\"CC0 by coffeebeanworks \nhttps://pixabay.com/en/users/coffeebeanworks-558718/?tab=about\" class=\"wp-image-1137001\" width=\"140\" height=\"140\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"align\":\"center\",\"level\":3,\"className\":\"clear-both\"} -->\n<h3 class=\"has-text-align-center clear-both\">Eliza Jason</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"fontSize\":\"small\"} -->\n<p class=\"has-text-align-center has-small-font-size\">SEO &amp; SMM</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:button {\"align\":\"center\"} -->\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link\" href=\"https://wpdesignhub.com?ref=demo-basicdesign\">Contact</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"align\":\"center\",\"id\":1137002,\"width\":140,\"height\":140} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img src=\"https://wpdesignhub.com/designs/basic/711220/team-member-2.png\" alt=\"CC0 by coffeebeanworks \n\thttps://pixabay.com/en/users/coffeebeanworks-558718/?tab=about\" class=\"wp-image-1137002\" width=\"140\" height=\"140\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"align\":\"center\",\"level\":3,\"className\":\"clear-both\"} -->\n<h3 class=\"has-text-align-center clear-both\">Bryant Van</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"fontSize\":\"small\"} -->\n<p class=\"has-text-align-center has-small-font-size\">Web-Developer</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:button {\"align\":\"center\"} -->\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link\" href=\"https://wpdesignhub.com?ref=demo-basicdesign\">Contact</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"align\":\"center\",\"id\":1137001,\"width\":140,\"height\":140} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img src=\"https://wpdesignhub.com/designs/basic/711220/team-member-3.png\" alt=\"CC0 by coffeebeanworks \n\thttps://pixabay.com/en/users/coffeebeanworks-558718/?tab=about\" class=\"wp-image-1137001\" width=\"140\" height=\"140\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"align\":\"center\",\"level\":3,\"className\":\"clear-both\"} -->\n<h3 class=\"has-text-align-center clear-both\">Anna Caris</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"fontSize\":\"small\"} -->\n<p class=\"has-text-align-center has-small-font-size\">Web-Designer</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:button {\"align\":\"center\"} -->\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link\" href=\"https://wpdesignhub.com?ref=demo-basicdesign\">Contact</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->"
+}

lib/patterns/testimonial.json

@@ -0,0 +1,5 @@
+{
+  "__file": "wp_block",
+  "title": "Testimonial",
+  "content": "<!-- wp:image {\"align\":\"center\",\"id\":1137,\"width\":113,\"height\":113,\"linkDestination\":\"custom\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><a href=\"https://pixabay.com/en/idea-icon-light-business-design-1873540/\"><img src=\"https://wpdesignhub.com/designs/basic/055854/team-member-1.png\" alt=\"CC0 by Coffee Bean \nhttps://pixabay.com/en/users/coffeebeanworks-558718/?tab=about\" class=\"wp-image-1137\" width=\"113\" height=\"113\"/></a></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"customFontSize\":21} -->\n<p style=\"font-size:21px\" class=\"has-text-align-center\">“These guys are amazing! A very professional team that delivers excellent results every time we come for help. I highly recommend this company for your projects!”</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"fontSize\":\"small\"} -->\n<p class=\"has-text-align-center has-small-font-size\"><strong>ANNA JANISON</strong><br><em>director at CYKO</em></p>\n<!-- /wp:paragraph -->"
+}

packages/block-editor/src/components/block-patterns/index.js

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useCallback } from '@wordpress/element';
+import { parse, cloneBlock } from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockPreview from '../block-preview';
+
+function BlockPattern( { pattern, onClick } ) {
+	const { title, content } = pattern;
+	const blocks = useMemo( () => parse( content ), [ content ] );
+
+	return (
+		<div
+			className="block-editor-patterns__item"
+			role="button"
+			onClick={ () => onClick( pattern, blocks ) }
+			onKeyDown={ ( event ) => {
+				if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
+					onClick( blocks );
+				}
+			} }
+			tabIndex={ 0 }
+		>
+			<div className="block-editor-patterns__item-preview">
+				<BlockPreview blocks={ blocks } />
+			</div>
+			<div className="block-editor-patterns__item-title">{ title }</div>
+		</div>
+	);
+}
+
+function BlockPatterns( { patterns } ) {
+	const getBlockInsertionPoint = useSelect( ( select ) => {
+		return select( 'core/block-editor' ).getBlockInsertionPoint;
+	} );
+	const { insertBlocks } = useDispatch( 'core/block-editor' );
+	const { createSuccessNotice } = useDispatch( 'core/notices' );
+	const onClickPattern = useCallback( ( pattern, blocks ) => {
+		const { index, rootClientId } = getBlockInsertionPoint();
+		insertBlocks(
+			map( blocks, ( block ) => cloneBlock( block ) ),
+			index,
+			rootClientId,
+			false
+		);
+		createSuccessNotice(
+			sprintf( __( 'Pattern "%s" inserted' ), pattern.title ),
+			{
+				type: 'snackbar',
+			}
+		);
+	}, [] );
+
+	return (
+		<div className="block-editor-patterns">
+			{ patterns.map( ( pattern, index ) => (
+				<BlockPattern
+					key={ index }
+					pattern={ pattern }
+					onClick={ onClickPattern }
+				/>
+			) ) }
+		</div>
+	);
+}
+
+export default BlockPatterns;

packages/block-editor/src/components/block-patterns/style.scss

@@ -0,0 +1,40 @@
+.block-editor-patterns {
+	padding: 16px;
+}
+
+.block-editor-patterns__item {
+	border-radius: 2px;
+	cursor: pointer;
+	margin-bottom: 16px;
+	border: 1px solid $light-gray-500;
+	transition: all 0.05s ease-in-out;
+	position: relative;
+
+	&:hover {
+		background: $white;
+		box-shadow: 0 0 0 1px $white, 0 0 0 3px $dark-gray-500;
+	}
+
+	&:focus {
+		@include block-style__focus();
+	}
+}
+
+.block-editor-patterns__item-preview {
+	overflow: hidden;
+	height: 200px;
+
+	.block-editor-block-preview__container {
+		height: 100%;
+	}
+
+	.block-editor-block-preview__content {
+		display: flex;
+		justify-content: center;
+	}
+}
+
+.block-editor-patterns__item-title {
+	text-align: center;
+	padding: 10px 0;
+}

packages/block-editor/src/components/index.js

@@ -15,6 +15,7 @@ export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { default as __experimentalBlockNavigationList } from './block-navigation/list';
+export { default as __experimentalBlockPatterns } from './block-patterns';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
 export { default as ButtonBlockerAppender } from './button-block-appender';

packages/block-editor/src/style.scss

@@ -15,6 +15,7 @@
 @import "./components/block-mobile-toolbar/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
+@import "./components/block-patterns/style.scss";
 @import "./components/block-preview/style.scss";
 @import "./components/block-settings-menu/style.scss";
 @import "./components/block-styles/style.scss";

packages/edit-post/src/plugins/block-patterns/index.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { layout } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { __experimentalBlockPatterns as BlockPatternsList } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PluginSidebar from '../../components/sidebar/plugin-sidebar';
+import PluginSidebarMoreMenuItem from '../../components/header/plugin-sidebar-more-menu-item';
+
+function BlockPatterns() {
+	const { __experimentalBlockPatterns: blockPatterns = [] } = useSelect(
+		( select ) => {
+			return select( 'core/editor' ).getEditorSettings();
+		},
+		[]
+	);
+
+	return (
+		<>
+			<PluginSidebar
+				icon={ layout }
+				name="block-patterns-sidebar"
+				title={ __( 'Block Patterns' ) }
+			>
+				<BlockPatternsList patterns={ blockPatterns } />
+			</PluginSidebar>
+			<PluginSidebarMoreMenuItem
+				icon={ layout }
+				target="block-patterns-sidebar"
+			>
+				{ __( 'Block Patterns' ) }
+			</PluginSidebarMoreMenuItem>
+		</>
+	);
+}
+
+export default BlockPatterns;

packages/edit-post/src/plugins/index.js

@@ -14,11 +14,13 @@ import ManageBlocksMenuItem from './manage-blocks-menu-item';
 import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item';
 import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
+import BlockPatterns from './block-patterns';
 
 registerPlugin( 'edit-post', {
 	render() {
 		return (
 			<>
+				<BlockPatterns />
 				<ToolsMoreMenuGroup>
 					{ ( { onClose } ) => (
 						<>