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.

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'];

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,

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';

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 }` }

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 ) {

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 }
  />
  );
 }

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>
+ );
+}