Patterns: create patterns package and share the create pattern modal between post editor and site editor

docs/manifest.json

@@ -1757,6 +1757,12 @@
 		"markdown_source": "../packages/nux/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/patterns",
+		"slug": "packages-patterns",
+		"markdown_source": "../packages/patterns/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/plugins",
 		"slug": "packages-plugins",

lib/client-assets.php

@@ -275,7 +275,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-editor',
 		gutenberg_url( 'build/editor/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-reusable-blocks' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-patterns', 'wp-reusable-blocks' ),
 		$version
 	);
 	$styles->add_data( 'wp-editor', 'rtl', 'replace' );
@@ -324,6 +324,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		// The block library styles override the "reset" styles.
 		'wp-reset-editor-styles',
 		'wp-block-library',
+		'wp-patterns',
 		'wp-reusable-blocks',
 		// Until #37466, we can't specifically add them as editor styles yet,
 		// so we must hard-code it here as a dependency.
@@ -417,7 +418,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-widgets',
 		gutenberg_url( 'build/edit-widgets/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-reusable-blocks', 'wp-widgets' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-patterns', 'wp-reusable-blocks', 'wp-widgets' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-widgets', 'rtl', 'replace' );
@@ -440,6 +441,15 @@ function gutenberg_register_packages_styles( $styles ) {
 	);
 	$styles->add_data( 'wp-customize-widgets', 'rtl', 'replace' );
 
+	gutenberg_override_style(
+		$styles,
+		'wp-patterns',
+		gutenberg_url( 'build/patterns/style.css' ),
+		array( 'wp-components' ),
+		$version
+	);
+	$styles->add_data( 'wp-patterns', 'rtl', 'replace' );
+
 	gutenberg_override_style(
 		$styles,
 		'wp-reusable-blocks',

package.json

@@ -66,6 +66,7 @@
 		"@wordpress/media-utils": "file:packages/media-utils",
 		"@wordpress/notices": "file:packages/notices",
 		"@wordpress/nux": "file:packages/nux",
+		"@wordpress/patterns": "file:packages/patterns",
 		"@wordpress/plugins": "file:packages/plugins",
 		"@wordpress/preferences": "file:packages/preferences",
 		"@wordpress/preferences-persistence": "file:packages/preferences-persistence",

packages/base-styles/_z-index.scss

@@ -121,6 +121,7 @@ $z-layers: (
 
 	// Should be above the popover (dropdown)
 	".reusable-blocks-menu-items__convert-modal": 1000001,
+	".patterns-menu-items__convert-modal": 1000001,
 	".edit-site-create-template-part-modal": 1000001,
 	".block-editor-block-lock-modal": 1000001,
 	".block-editor-template-part__selection-modal": 1000001,

packages/e2e-test-utils/src/create-reusable-block.js

@@ -14,15 +14,15 @@ import { canvas } from './canvas';
  */
 export const createReusableBlock = async ( content, title ) => {
 	const reusableBlockNameInputSelector =
-		'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+		'.patterns-menu-items__convert-modal .components-text-control__input';
 	const syncToggleSelectorChecked =
-		'.reusable-blocks-menu-items__convert-modal .components-form-toggle.is-checked';
+		'.patterns-menu-items__convert-modal .components-form-toggle.is-checked';
 	// Insert a paragraph block
 	await insertBlock( 'Paragraph' );
 	await page.keyboard.type( content );
 
 	await clickBlockToolbarButton( 'Options' );
-	await clickMenuItem( 'Create pattern/reusable block' );
+	await clickMenuItem( 'Create pattern' );
 	const nameInput = await page.waitForSelector(
 		reusableBlockNameInputSelector
 	);

packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js

@@ -90,9 +90,9 @@ describe( 'block editor keyboard shortcuts', () => {
 		} );
 		it( 'should prevent deleting multiple selected blocks from inputs', async () => {
 			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Create pattern/reusable block' );
+			await clickMenuItem( 'Create pattern' );
 			const reusableBlockNameInputSelector =
-				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+				'.patterns-menu-items__convert-modal .components-text-control__input';
 			const nameInput = await page.waitForSelector(
 				reusableBlockNameInputSelector
 			);
@@ -102,7 +102,7 @@ describe( 'block editor keyboard shortcuts', () => {
 			await page.keyboard.press( 'ArrowLeft' );
 			await page.keyboard.press( 'Delete' );
 			await clickOnCloseModalButton(
-				'.reusable-blocks-menu-items__convert-modal'
+				'.patterns-menu-items__convert-modal'
 			);
 			expect( await getEditedPostContent() ).toMatchSnapshot();
 		} );

packages/e2e-tests/specs/editor/various/reusable-blocks.test.js

@@ -20,11 +20,11 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 const reusableBlockNameInputSelector =
-	'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+	'.patterns-menu-items__convert-modal .components-text-control__input';
 const reusableBlockInspectorNameInputSelector =
 	'.block-editor-block-inspector .components-text-control__input';
 const syncToggleSelectorChecked =
-	'.reusable-blocks-menu-items__convert-modal .components-form-toggle.is-checked';
+	'.patterns-menu-items__convert-modal .components-form-toggle.is-checked';
 
 const saveAll = async () => {
 	const publishButtonSelector =
@@ -196,7 +196,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert block to a reusable block.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create pattern/reusable block' );
+		await clickMenuItem( 'Create pattern' );
 
 		// Set title.
 		const nameInput = await page.waitForSelector(
@@ -382,7 +382,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert to reusable.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create pattern/reusable block' );
+		await clickMenuItem( 'Create pattern' );
 		const nameInput = await page.waitForSelector(
 			reusableBlockNameInputSelector
 		);

packages/edit-site/package.json

@@ -53,6 +53,7 @@
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
+		"@wordpress/patterns": "file:../patterns",
 		"@wordpress/plugins": "file:../plugins",
 		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/primitives": "file:../primitives",

packages/edit-site/src/components/add-new-pattern/index.js

@@ -7,17 +7,18 @@ import { __ } from '@wordpress/i18n';
 import { plus, symbol, symbolFilled } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
 
 /**
  * Internal dependencies
  */
-import CreatePatternModal from '../create-pattern-modal';
 import CreateTemplatePartModal from '../create-template-part-modal';
 import SidebarButton from '../sidebar-button';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
 const { useHistory } = unlock( routerPrivateApis );
+const { CreatePatternModal } = unlock( editPatternsPrivateApis );
 
 export default function AddNewPattern() {
 	const history = useHistory();
@@ -87,8 +88,8 @@ export default function AddNewPattern() {
 			/>
 			{ showPatternModal && (
 				<CreatePatternModal
-					closeModal={ () => setShowPatternModal( false ) }
-					onCreate={ handleCreatePattern }
+					onClose={ () => setShowPatternModal( false ) }
+					onSuccess={ handleCreatePattern }
 					onError={ handleError }
 				/>
 			) }

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

@@ -3,8 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { BlockInspector } from '@wordpress/block-editor';
-
-import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
+import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
 
 /**
  * Internal dependencies
@@ -15,6 +14,8 @@ import { store as editSiteStore } from '../../store';
 import SiteEditorCanvas from './site-editor-canvas';
 import getBlockEditorProvider from './get-block-editor-provider';
 
+import { unlock } from '../../lock-unlock';
+const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
 export default function BlockEditor() {
 	const entityType = useSelect(
 		( select ) => select( editSiteStore ).getEditedPostType(),
@@ -34,7 +35,7 @@ export default function BlockEditor() {
 
 			<SiteEditorCanvas />
 
-			<ReusableBlocksMenuItems />
+			<PatternsMenuItems />
 		</BlockEditorProvider>
 	);
 }