Use a modal for the reusable blocks creation flow (#29040)

lib/client-assets.php

@@ -325,7 +325,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-editor',
 		gutenberg_url( 'build/editor/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-nux' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-nux', 'wp-reusable-blocks' ),
 		filemtime( gutenberg_dir_path() . 'build/editor/style.css' )
 	);
 	$styles->add_data( 'wp-editor', 'rtl', 'replace' );
@@ -375,6 +375,7 @@ function gutenberg_register_packages_styles( $styles ) {
 			'wp-components',
 			'wp-editor',
 			'wp-block-library',
+			'wp-reusable-blocks',
 			// Always include visual styles so the editor never appears broken.
 			'wp-block-library-theme',
 		),
@@ -431,7 +432,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-edit-blocks' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks', 'wp-reusable-blocks' ),
 		filemtime( gutenberg_dir_path() . 'build/edit-widgets/style.css' )
 	);
 	$styles->add_data( 'wp-edit-widgets', 'rtl', 'replace' );
@@ -453,6 +454,15 @@ function gutenberg_register_packages_styles( $styles ) {
 		filemtime( gutenberg_dir_path() . 'build/customize-widgets/style.css' )
 	);
 	$styles->add_data( 'wp-customize-widgets', 'rtl', 'replace' );
+
+	gutenberg_override_style(
+		$styles,
+		'wp-reusable-blocks',
+		gutenberg_url( 'build/reusable-blocks/style.css' ),
+		array( 'wp-components' ),
+		filemtime( gutenberg_dir_path() . 'build/reusable-blocks/style.css' )
+	);
+	$styles->add_data( 'wp-reusable-block', 'rtl', 'replace' );
 }
 add_action( 'wp_default_styles', 'gutenberg_register_packages_styles' );
 

lib/compat.php

@@ -243,27 +243,27 @@ function gutenberg_preload_edit_post( $preload_paths ) {
  */
 function gutenberg_override_reusable_block_post_type_labels() {
 	return array(
-		'name'                     => _x( 'Reusable Blocks', 'post type general name', 'gutenberg' ),
-		'singular_name'            => _x( 'Reusable Block', 'post type singular name', 'gutenberg' ),
-		'menu_name'                => _x( 'Reusable Blocks', 'admin menu', 'gutenberg' ),
-		'name_admin_bar'           => _x( 'Reusable Block', 'add new on admin bar', 'gutenberg' ),
-		'add_new'                  => _x( 'Add New', 'Reusable Block', 'gutenberg' ),
-		'add_new_item'             => __( 'Add New Reusable Block', 'gutenberg' ),
-		'new_item'                 => __( 'New Reusable Block', 'gutenberg' ),
-		'edit_item'                => __( 'Edit Reusable Block', 'gutenberg' ),
-		'view_item'                => __( 'View Reusable Block', 'gutenberg' ),
-		'all_items'                => __( 'All Reusable Blocks', 'gutenberg' ),
-		'search_items'             => __( 'Search Reusable Blocks', 'gutenberg' ),
+		'name'                     => _x( 'Reusable blocks', 'post type general name', 'gutenberg' ),
+		'singular_name'            => _x( 'Reusable block', 'post type singular name', 'gutenberg' ),
+		'menu_name'                => _x( 'Reusable blocks', 'admin menu', 'gutenberg' ),
+		'name_admin_bar'           => _x( 'Reusable block', 'add new on admin bar', 'gutenberg' ),
+		'add_new'                  => _x( 'Add New', 'Reusable block', 'gutenberg' ),
+		'add_new_item'             => __( 'Add new Reusable block', 'gutenberg' ),
+		'new_item'                 => __( 'New Reusable block', 'gutenberg' ),
+		'edit_item'                => __( 'Edit Reusable block', 'gutenberg' ),
+		'view_item'                => __( 'View Reusable block', 'gutenberg' ),
+		'all_items'                => __( 'All Reusable blocks', 'gutenberg' ),
+		'search_items'             => __( 'Search Reusable blocks', 'gutenberg' ),
 		'not_found'                => __( 'No reusable blocks found.', 'gutenberg' ),
 		'not_found_in_trash'       => __( 'No reusable blocks found in Trash.', 'gutenberg' ),
 		'filter_items_list'        => __( 'Filter reusable blocks list', 'gutenberg' ),
-		'items_list_navigation'    => __( 'Reusable Blocks list navigation', 'gutenberg' ),
-		'items_list'               => __( 'Reusable Blocks list', 'gutenberg' ),
-		'item_published'           => __( 'Reusable Block published.', 'gutenberg' ),
-		'item_published_privately' => __( 'Reusable Block published privately.', 'gutenberg' ),
-		'item_reverted_to_draft'   => __( 'Reusable Block reverted to draft.', 'gutenberg' ),
-		'item_scheduled'           => __( 'Reusable Block scheduled.', 'gutenberg' ),
-		'item_updated'             => __( 'Reusable Block updated.', 'gutenberg' ),
+		'items_list_navigation'    => __( 'Reusable blocks list navigation', 'gutenberg' ),
+		'items_list'               => __( 'Reusable blocks list', 'gutenberg' ),
+		'item_published'           => __( 'Reusable block published.', 'gutenberg' ),
+		'item_published_privately' => __( 'Reusable block published privately.', 'gutenberg' ),
+		'item_reverted_to_draft'   => __( 'Reusable block reverted to draft.', 'gutenberg' ),
+		'item_scheduled'           => __( 'Reusable block scheduled.', 'gutenberg' ),
+		'item_updated'             => __( 'Reusable block updated.', 'gutenberg' ),
 	);
 }
 add_filter( 'post_type_labels_wp_block', 'gutenberg_override_reusable_block_post_type_labels', 10, 0 );

packages/base-styles/_z-index.scss

@@ -125,6 +125,9 @@ $z-layers: (
 	// #adminmenuwrap { z-index: 9990 }
 	".components-popover": 1000000,
 
+	// Should be above the popover (dropdown)
+	".reusable-blocks-menu-items__convert-modal": 1000001,
+
 	// ...Except for popovers immediately beneath wp-admin menu on large breakpoints
 	".components-popover.block-editor-inserter__popover": 99999,
 	".components-popover.table-of-contents__popover": 99998,

packages/block-editor/src/components/inserter/reusable-blocks-tab.js

@@ -65,7 +65,7 @@ export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 						post_type: 'wp_block',
 					} ) }
 				>
-					{ __( 'Manage all reusable blocks' ) }
+					{ __( 'Manage Reusable blocks' ) }
 				</a>
 			</div>
 		</>

packages/block-library/src/block/index.js

@@ -14,7 +14,7 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	title: _x( 'Reusable Block', 'block title' ),
+	title: _x( 'Reusable block', 'block title' ),
 	description: __(
 		'Create and save content to reuse across your site. Update the block, and the changes apply everywhere it’s used.'
 	),

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

@@ -17,6 +17,8 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 const reusableBlockNameInputSelector =
+	'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+const reusableBlockInspectorNameInputSelector =
 	'.block-editor-block-inspector .components-text-control__input';
 
 const saveAll = async () => {
@@ -49,31 +51,23 @@ const createReusableBlock = async ( content, title ) => {
 
 	await clickBlockToolbarButton( 'Options' );
 	await clickMenuItem( 'Add to Reusable blocks' );
+	const nameInput = await page.waitForSelector(
+		reusableBlockNameInputSelector
+	);
+	await nameInput.click();
+	await page.keyboard.type( title );
+	await page.keyboard.press( 'Enter' );
 
 	// Wait for creation to finish
 	await page.waitForXPath(
-		'//*[contains(@class, "components-snackbar")]/*[text()="Block created."]'
+		'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
 	);
 
 	// Check that we have a reusable block on the page
 	const block = await page.waitForSelector(
 		'.block-editor-block-list__block[data-type="core/block"]'
 	);
 	expect( block ).not.toBeNull();
-
-	await openDocumentSettingsSidebar();
-	const nameInput = await page.waitForSelector(
-		reusableBlockNameInputSelector
-	);
-	if ( title ) {
-		await nameInput.click();
-
-		// Select all of the text in the title field.
-		await pressKeyWithModifier( 'primary', 'a' );
-
-		// Give the reusable block a title
-		await page.keyboard.type( title );
-	}
 };
 
 describe( 'Reusable blocks', () => {
@@ -85,19 +79,8 @@ describe( 'Reusable blocks', () => {
 		await createNewPost();
 	} );
 
-	it( 'can be created with no title', async () => {
-		await createReusableBlock( 'Hello there!' );
-		await openDocumentSettingsSidebar();
-		const title = await page.$eval(
-			reusableBlockNameInputSelector,
-			( element ) => element.value
-		);
-		expect( title ).toBe( 'Untitled Reusable Block' );
-	} );
-
 	it( 'can be created, inserted, edited and converted to a regular block.', async () => {
 		await createReusableBlock( 'Hello there!', 'Greeting block' );
-		await saveAll();
 		await clearAllBlocks();
 
 		// Insert the reusable block we created above
@@ -106,7 +89,7 @@ describe( 'Reusable blocks', () => {
 		// Change the block's title
 		await openDocumentSettingsSidebar();
 		const nameInput = await page.waitForSelector(
-			reusableBlockNameInputSelector
+			reusableBlockInspectorNameInputSelector
 		);
 		await nameInput.click();
 		await pressKeyWithModifier( 'primary', 'a' );
@@ -157,9 +140,6 @@ describe( 'Reusable blocks', () => {
 	it( 'can be inserted after refresh', async () => {
 		await createReusableBlock( 'Awesome Paragraph', 'Awesome block' );
 
-		// Save the reusable block
-		await saveAll();
-
 		// Step 2. Create new post.
 		await createNewPost();
 
@@ -169,7 +149,7 @@ describe( 'Reusable blocks', () => {
 		// Check the title.
 		await openDocumentSettingsSidebar();
 		const title = await page.$eval(
-			reusableBlockNameInputSelector,
+			reusableBlockInspectorNameInputSelector,
 			( element ) => element.value
 		);
 		expect( title ).toBe( 'Awesome block' );
@@ -192,22 +172,18 @@ describe( 'Reusable blocks', () => {
 		await clickBlockToolbarButton( 'Options' );
 		await clickMenuItem( 'Add to Reusable blocks' );
 
-		// Wait for creation to finish
-		await page.waitForXPath(
-			'//*[contains(@class, "components-snackbar")]/*[text()="Block created."]'
-		);
-
-		// Set title.
-		await openDocumentSettingsSidebar();
+		// Set title
 		const nameInput = await page.waitForSelector(
 			reusableBlockNameInputSelector
 		);
 		await nameInput.click();
-		await pressKeyWithModifier( 'primary', 'a' );
 		await page.keyboard.type( 'Multi-selection reusable block' );
+		await page.keyboard.press( 'Enter' );
 
-		// Save the reusable block
-		await saveAll();
+		// Wait for creation to finish
+		await page.waitForXPath(
+			'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
+		);
 
 		await clearAllBlocks();
 
@@ -226,7 +202,6 @@ describe( 'Reusable blocks', () => {
 			'Awesome Paragraph',
 			'Random reusable block'
 		);
-		await saveAll();
 		await clearAllBlocks();
 		await insertReusableBlock( 'Random reusable block' );
 
@@ -260,7 +235,7 @@ describe( 'Reusable blocks', () => {
 		// Save the reusable block
 		await page.click( publishButtonSelector );
 		await page.waitForXPath(
-			'//*[contains(@class, "components-snackbar")]/*[text()="Reusable Block updated."]'
+			'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block updated."]'
 		);
 
 		await createNewPost();
@@ -293,7 +268,6 @@ describe( 'Reusable blocks', () => {
 			'Awesome Paragraph',
 			'Duplicated reusable block'
 		);
-		await saveAll();
 		await clearAllBlocks();
 		await insertReusableBlock( 'Duplicated reusable block' );
 		await insertReusableBlock( 'Duplicated reusable block' );

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

@@ -30,7 +30,7 @@ registerPlugin( 'edit-post', {
 									post_type: 'wp_block',
 								} ) }
 							>
-								{ __( 'Manage all reusable blocks' ) }
+								{ __( 'Manage Reusable blocks' ) }
 							</MenuItem>
 							<KeyboardShortcutsHelpMenuItem
 								onSelect={ onClose }

packages/list-reusable-blocks/src/components/import-form/index.js

@@ -60,8 +60,8 @@ class ImportForm extends Component {
 					case 'Invalid JSON file':
 						uiMessage = __( 'Invalid JSON file' );
 						break;
-					case 'Invalid Reusable Block JSON file':
-						uiMessage = __( 'Invalid Reusable Block JSON file' );
+					case 'Invalid Reusable block JSON file':
+						uiMessage = __( 'Invalid Reusable block JSON file' );
 						break;
 					default:
 						uiMessage = __( 'Unknown error' );

packages/list-reusable-blocks/src/utils/import.js

@@ -34,7 +34,7 @@ async function importReusableBlock( file ) {
 		! isString( parsedContent.title ) ||
 		! isString( parsedContent.content )
 	) {
-		throw new Error( 'Invalid Reusable Block JSON file' );
+		throw new Error( 'Invalid Reusable block JSON file' );
 	}
 	const postType = await apiFetch( { path: `/wp/v2/types/wp_block` } );
 	const reusableBlock = await apiFetch( {