Template Part: Improve insertion flow. (#23295)

* Template Part: Improve insertion flow. * Template Part: Fix styles and remove unnecessary properties. * Template Part: Update tests. * Template Part: Improve popover design. * Template Part: Improve name panel style. * Fix property handling.
WordPress · Jun 29, 2020 · 12a5977 · 12a5977
1 parent 6676de7
commit 12a5977
Show file tree

Hide file tree

Showing 15 changed files with 220 additions and 273 deletions.
diff --git a/lib/template-loader.php b/lib/template-loader.php
@@ -135,7 +135,7 @@ function gutenberg_override_query_template( $template, $type, array $templates =
 function create_auto_draft_for_template_part_block( $block ) {
 	$template_part_ids = array();
 
-	if ( 'core/template-part' === $block['blockName'] ) {
+	if ( 'core/template-part' === $block['blockName'] && isset( $block['attrs']['slug'] ) ) {
 		if ( isset( $block['attrs']['postId'] ) ) {
 			// Template part is customized.
 			$template_part_id = $block['attrs']['postId'];

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -33,6 +33,7 @@ $z-layers: (
 	".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
 	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
+	".wp-block-template-part__placeholder-preview-filter-input": 1,
 
 	// Active pill button
 	".components-button {:focus or .is-primary}": 1,

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -81,6 +81,7 @@ export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { default as __experimentalLibrary } from './inserter/library';
+export { default as __experimentalSearchForm } from './inserter/search-form';
 export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MultiSelectScrollIntoView } from './multi-select-scroll-into-view';
 export { default as NavigableToolbar } from './navigable-toolbar';

diff --git a/packages/block-editor/src/components/inserter/search-form.js b/packages/block-editor/src/components/inserter/search-form.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -7,7 +12,7 @@ import { VisuallyHidden, Button } from '@wordpress/components';
 import { Icon, search, closeSmall } from '@wordpress/icons';
 import { useRef } from '@wordpress/element';
 
-function InserterSearchForm( { onChange, value } ) {
+function InserterSearchForm( { className, onChange, value } ) {
 	const instanceId = useInstanceId( InserterSearchForm );
 	const searchInput = useRef();
 
@@ -16,7 +21,12 @@ function InserterSearchForm( { onChange, value } ) {
 	// Popover's focusOnMount.
 	/* eslint-disable jsx-a11y/no-autofocus */
 	return (
-		<div className="block-editor-inserter__search">
+		<div
+			className={ classnames(
+				'block-editor-inserter__search',
+				className
+			) }
+		>
 			<VisuallyHidden
 				as="label"
 				htmlFor={ `block-editor-inserter__search-${ instanceId }` }

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
@@ -3,19 +3,20 @@
  */
 import { useRef, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { EntityProvider } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import useTemplatePartPost from './use-template-part-post';
+import TemplatePartNamePanel from './name-panel';
 import TemplatePartInnerBlocks from './inner-blocks';
 import TemplatePartPlaceholder from './placeholder';
 
 export default function TemplatePartEdit( {
 	attributes: { postId: _postId, slug, theme },
 	setAttributes,
 	clientId,
+	isSelected,
 } ) {
 	const initialPostId = useRef( _postId );
 	const initialSlug = useRef( slug );
@@ -28,8 +29,20 @@ export default function TemplatePartEdit( {
 	// but wait until the third inner blocks change,
 	// because the first 2 are just the template part
 	// content loading.
-	const innerBlocks = useSelect(
-		( select ) => select( 'core/block-editor' ).getBlocks( clientId ),
+	const { innerBlocks, hasSelectedInnerBlock } = useSelect(
+		( select ) => {
+			const {
+				getBlocks,
+				hasSelectedInnerBlock: getHasSelectedInnerBlock,
+			} = select( 'core/block-editor' );
+			return {
+				innerBlocks: getBlocks( clientId ),
+				hasSelectedInnerBlock: getHasSelectedInnerBlock(
+					clientId,
+					true
+				),
+			};
+		},
 		[ clientId ]
 	);
 	const { editEntityRecord } = useDispatch( 'core' );
@@ -54,13 +67,18 @@ export default function TemplatePartEdit( {
 	if ( postId ) {
 		// Part of a template file, post ID already resolved.
 		return (
-			<EntityProvider
-				kind="postType"
-				type="wp_template_part"
-				id={ postId }
-			>
-				<TemplatePartInnerBlocks />
-			</EntityProvider>
+			<>
+				{ ( isSelected || hasSelectedInnerBlock ) && (
+					<TemplatePartNamePanel
+						postId={ postId }
+						setAttributes={ setAttributes }
+					/>
+				) }
+				<TemplatePartInnerBlocks
+					postId={ postId }
+					hasInnerBlocks={ innerBlocks.length > 0 }
+				/>
+			</>
 		);
 	}
 	if ( ! initialSlug.current && ! initialTheme.current ) {

diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -4,16 +4,22 @@
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function TemplatePartInnerBlocks() {
+const renderAppender = () => <InnerBlocks.ButtonBlockAppender />;
+export default function TemplatePartInnerBlocks( {
+	postId: id,
+	hasInnerBlocks,
+} ) {
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
-		'wp_template_part'
+		'wp_template_part',
+		{ id }
 	);
 	return (
 		<InnerBlocks
 			value={ blocks }
 			onInput={ onInput }
 			onChange={ onChange }
+			renderAppender={ hasInnerBlocks ? undefined : renderAppender }
 		/>
 	);
 }
diff --git a/packages/block-library/src/template-part/edit/name-panel.js b/packages/block-library/src/template-part/edit/name-panel.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { cleanForSlug } from '@wordpress/url';
+
+export default function TemplatePartNamePanel( { postId, setAttributes } ) {
+	const [ title, setTitle ] = useEntityProp(
+		'postType',
+		'wp_template_part',
+		'title',
+		postId
+	);
+	const [ slug, setSlug ] = useEntityProp(
+		'postType',
+		'wp_template_part',
+		'slug',
+		postId
+	);
+	return (
+		<div className="wp-block-template-part__name-panel">
+			<TextControl
+				label={ __( 'Name' ) }
+				value={ title || slug }
+				onChange={ ( value ) => {
+					setTitle( value );
+					const newSlug = cleanForSlug( value );
+					setSlug( newSlug );
+					setAttributes( { slug: newSlug } );
+				} }
+			/>
+		</div>
+	);
+}