Add template part previews to placeholder block (#22760)

* initial commit

* conditioned behind experiment

* create TP component

* show previews of each template part

* remove early return

* kind of inserting

* styles

* better inserting / bug fix

* group by theme

* added success notice

* set up for search section

* filtering working

* placeholders and async list

* comment and var name change

* initial

* moving stuff over

* carried styles, changed classnames

* more styles for previews

* style tweaks

* add filter input

* revert inserter changes

* erm and style tags too

* remove unused file

* insert/selection function updated

* remove old preview

* separate concerns with tabs

* carried over styles, updated class name

* more style edits, dont hide preview on small width

* updated help and guiding phrases

* more classNames, styles, and refactoring

* change 'slug' to 'name' in editor

* rename subcomponent

* updating some e2e's

* updated first placeholder e2e, skipped ones that need to be rewritten for new design

* added new test for preview

* test for selecting

* e2e should be g2g

* package lock

* move useAsyncList to compose package

* Update packages/block-editor/src/components/inserter/block-patterns.js

Co-authored-by: Enrique Piqueras <[email protected]>

* Update packages/block-library/src/template-part/edit/placeholder.js

Co-authored-by: Enrique Piqueras <[email protected]>

* remove unnecessary frags

* use setAttributes instead of rename

* add per_page, remove auto-draft

* rename placeholder

* update classnames missing placeholder prefix

* use placeholder subdirectory

* added resolved query merge

* remove helpPhrase memo

* add deburr to filtering

* update test selector for new class name

Co-authored-by: Enrique Piqueras <[email protected]>

packages/block-editor/package.json

@@ -44,7 +44,6 @@
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/priority-queue": "file:../priority-queue",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/shortcode": "file:../shortcode",
 		"@wordpress/token-list": "file:../token-list",

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

@@ -10,12 +10,12 @@ import { useMemo, useCallback } from '@wordpress/element';
 import { parse } from '@wordpress/blocks';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { __, _x } from '@wordpress/i18n';
+import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import BlockPreview from '../block-preview';
-import useAsyncList from './use-async-list';
 import InserterPanel from './panel';
 import { searchItems } from './search-items';
 import InserterNoResults from './no-results';

packages/block-library/src/template-part/edit/placeholder/index.js

@@ -0,0 +1,171 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState, useCallback } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { cleanForSlug } from '@wordpress/url';
+import {
+	Placeholder,
+	TextControl,
+	Button,
+	TabPanel,
+} from '@wordpress/components';
+import { layout } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import useTemplatePartPost from '../use-template-part-post';
+import TemplatePartPreviews from './template-part-previews';
+
+const HELP_PHRASES = {
+	initial: __( 'Please add a name and theme for your new Template Part.' ),
+	unavailable: __(
+		'Name and theme combination already in use, please try another.'
+	),
+	available: __( 'This name is available!' ),
+	error: __( 'Error adding template.' ),
+};
+
+export default function TemplatePartPlaceholder( { setAttributes } ) {
+	const [ slug, _setSlug ] = useState( '' );
+	const [ theme, _setTheme ] = useState( '' );
+	const [ help, setHelp ] = useState( '' );
+
+	// Try to find an existing template part.
+	const postId = useTemplatePartPost( null, slug, theme );
+
+	const setSlug = useCallback(
+		( nextSlug ) => {
+			_setSlug( nextSlug );
+			if ( help ) {
+				setHelp( '' );
+			}
+		},
+		[ help ]
+	);
+
+	const setTheme = useCallback(
+		( nextTheme ) => {
+			_setTheme( nextTheme );
+			if ( help ) {
+				setHelp( '' );
+			}
+		},
+		[ help ]
+	);
+
+	const getHelpPhrase = () => {
+		if ( ! slug || ! theme ) {
+			return HELP_PHRASES.initial;
+		} else if ( postId ) {
+			return HELP_PHRASES.unavailable;
+		}
+
+		return HELP_PHRASES.available;
+	};
+
+	const { saveEntityRecord } = useDispatch( 'core' );
+	const onCreate = useCallback( async () => {
+		const nextAttributes = { slug, theme };
+		// Create a new template part.
+		try {
+			const cleanSlug = cleanForSlug( slug );
+			const templatePart = await saveEntityRecord(
+				'postType',
+				'wp_template_part',
+				{
+					title: cleanSlug,
+					status: 'publish',
+					slug: cleanSlug,
+					meta: { theme },
+				}
+			);
+			nextAttributes.postId = templatePart.id;
+		} catch ( err ) {
+			setHelp( HELP_PHRASES.error );
+		}
+		setAttributes( nextAttributes );
+	}, [ postId, slug, theme ] );
+
+	const [ filterValue, setFilterValue ] = useState( '' );
+
+	const createTab = (
+		<>
+			<div className="wp-block-template-part__placeholder-input-container">
+				<TextControl
+					label={ __( 'Name' ) }
+					placeholder={ __( 'header' ) }
+					value={ slug }
+					onChange={ setSlug }
+					className="wp-block-template-part__placeholder-input"
+				/>
+				<TextControl
+					label={ __( 'Theme' ) }
+					placeholder={ __( 'twentytwenty' ) }
+					value={ theme }
+					onChange={ setTheme }
+					className="wp-block-template-part__placeholder-input"
+				/>
+			</div>
+			<div className="wp-block-template-part__placeholder-help-phrase">
+				{ help || getHelpPhrase() }
+			</div>
+			<Button
+				isPrimary
+				disabled={ ! slug || ! theme || postId }
+				onClick={ onCreate }
+				className="wp-block-template-part__placeholder-create-button"
+			>
+				{ __( 'Create' ) }
+			</Button>
+		</>
+	);
+
+	const selectTab = (
+		<>
+			<TextControl
+				label={ __( 'Search' ) }
+				placeholder={ __( 'header' ) }
+				value={ filterValue }
+				onChange={ setFilterValue }
+				className="wp-block-template-part__placeholder-preview-filter-input"
+			/>
+
+			<div className="wp-block-template-part__placeholder-preview-container">
+				<TemplatePartPreviews
+					setAttributes={ setAttributes }
+					filterValue={ filterValue }
+				/>
+			</div>
+		</>
+	);
+
+	return (
+		<Placeholder icon={ layout } label={ __( 'Template Part' ) }>
+			<TabPanel
+				className="wp-block-template-part__placeholder-tabs"
+				tabs={ [
+					{
+						name: 'select',
+						/* translators: Select tab of template part creation placeholder. */
+						title: __( 'Select from existing' ),
+					},
+					{
+						name: 'create',
+						/* translators: Create tab of template part placeholder.  */
+						title: __( 'Create new' ),
+					},
+				] }
+			>
+				{ ( tab ) => {
+					if ( tab.name === 'create' ) {
+						return createTab;
+					}
+					return selectTab;
+				} }
+			</TabPanel>
+		</Placeholder>
+	);
+}