@wordpress/edit-post 5.0.24 → 6.0.0

package/src/components/block-manager/category.js

@@ -6,36 +6,59 @@ import { includes, map, without } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useContext, useMemo } from '@wordpress/element';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose, withInstanceId } from '@wordpress/compose';
+import { useMemo, useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 import { CheckboxControl } from '@wordpress/components';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import BlockTypesChecklist from './checklist';
-import EditPostSettings from '../edit-post-settings';
 import { store as editPostStore } from '../../store';
 
-function BlockManagerCategory( {
-	instanceId,
-	title,
-	blockTypes,
-	hiddenBlockTypes,
-	toggleVisible,
-	toggleAllVisible,
-} ) {
-	const settings = useContext( EditPostSettings );
-	const { allowedBlockTypes } = settings;
+function BlockManagerCategory( { title, blockTypes } ) {
+	const instanceId = useInstanceId( BlockManagerCategory );
+	const { defaultAllowedBlockTypes, hiddenBlockTypes } = useSelect(
+		( select ) => {
+			const { getEditorSettings } = select( editorStore );
+			const { getPreference } = select( editPostStore );
+			return {
+				defaultAllowedBlockTypes: getEditorSettings()
+					.defaultAllowedBlockTypes,
+				hiddenBlockTypes: getPreference( 'hiddenBlockTypes' ),
+			};
+		},
+		[]
+	);
 	const filteredBlockTypes = useMemo( () => {
-		if ( allowedBlockTypes === true ) {
+		if ( defaultAllowedBlockTypes === true ) {
 			return blockTypes;
 		}
 		return blockTypes.filter( ( { name } ) => {
-			return includes( allowedBlockTypes || [], name );
+			return includes( defaultAllowedBlockTypes || [], name );
 		} );
-	}, [ allowedBlockTypes, blockTypes ] );
+	}, [ defaultAllowedBlockTypes, blockTypes ] );
+	const { showBlockTypes, hideBlockTypes } = useDispatch( editPostStore );
+	const toggleVisible = useCallback( ( blockName, nextIsChecked ) => {
+		if ( nextIsChecked ) {
+			showBlockTypes( blockName );
+		} else {
+			hideBlockTypes( blockName );
+		}
+	}, [] );
+	const toggleAllVisible = useCallback(
+		( nextIsChecked ) => {
+			const blockNames = map( blockTypes, 'name' );
+			if ( nextIsChecked ) {
+				showBlockTypes( blockNames );
+			} else {
+				hideBlockTypes( blockNames );
+			}
+		},
+		[ blockTypes ]
+	);
 
 	if ( ! filteredBlockTypes.length ) {
 		return null;
@@ -81,34 +104,4 @@ function BlockManagerCategory( {
 	);
 }
 
-export default compose( [
-	withInstanceId,
-	withSelect( ( select ) => {
-		const { getPreference } = select( editPostStore );
-
-		return {
-			hiddenBlockTypes: getPreference( 'hiddenBlockTypes' ),
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps ) => {
-		const { showBlockTypes, hideBlockTypes } = dispatch( editPostStore );
-
-		return {
-			toggleVisible( blockName, nextIsChecked ) {
-				if ( nextIsChecked ) {
-					showBlockTypes( blockName );
-				} else {
-					hideBlockTypes( blockName );
-				}
-			},
-			toggleAllVisible( nextIsChecked ) {
-				const blockNames = map( ownProps.blockTypes, 'name' );
-				if ( nextIsChecked ) {
-					showBlockTypes( blockNames );
-				} else {
-					hideBlockTypes( blockNames );
-				}
-			},
-		};
-	} ),
-] )( BlockManagerCategory );
+export default BlockManagerCategory;

package/src/components/block-manager/index.js

@@ -10,7 +10,9 @@ import { store as blocksStore } from '@wordpress/blocks';
 import { withSelect } from '@wordpress/data';
 import { SearchControl } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -25,6 +27,7 @@ function BlockManager( {
 	isMatchingSearchTerm,
 	numberOfHiddenBlocks,
 } ) {
+	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ search, setSearch ] = useState( '' );
 
 	// Filtering occurs here (as opposed to `withSelect`) to avoid
@@ -38,6 +41,20 @@ function BlockManager( {
 				includes( blockType.parent, 'core/post-content' ) )
 	);
 
+	// Announce search results on change
+	useEffect( () => {
+		if ( ! search ) {
+			return;
+		}
+		const count = blockTypes.length;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage );
+	}, [ blockTypes.length, search, debouncedSpeak ] );
+
 	return (
 		<div className="edit-post-block-manager__content">
 			{ !! numberOfHiddenBlocks && (

package/src/components/header/index.native.js

@@ -27,13 +27,19 @@ export default class Header extends Component {
 	}
 
 	componentDidMount() {
-		Keyboard.addListener( 'keyboardDidShow', this.keyboardDidShow );
-		Keyboard.addListener( 'keyboardDidHide', this.keyboardDidHide );
+		this.keyboardShowSubscription = Keyboard.addListener(
+			'keyboardDidShow',
+			this.keyboardDidShow
+		);
+		this.keyboardHideSubscription = Keyboard.addListener(
+			'keyboardDidHide',
+			this.keyboardDidHide
+		);
 	}
 
 	componentWillUnmount() {
-		Keyboard.removeListener( 'keyboardDidShow', this.keyboardDidShow );
-		Keyboard.removeListener( 'keyboardDidHide', this.keyboardDidHide );
+		this.keyboardShowSubscription.remove();
+		this.keyboardHideSubscription.remove();
 	}
 
 	keyboardDidShow() {

package/src/components/header/plugin-more-menu-item/index.js

@@ -13,7 +13,7 @@ import { withPluginContext } from '@wordpress/plugins';
  * @param {string}                [props.href]                          When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor.
  * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
  * @param {Function}              [props.onClick=noop]                  The callback function to be executed when the user clicks the menu item.
- * @param {...*}                  [props.other]                         Any additional props are passed through to the underlying [MenuItem](/packages/components/src/menu-item/README.md) component.
+ * @param {...*}                  [props.other]                         Any additional props are passed through to the underlying [MenuItem](https://github.com/WordPress/gutenberg/tree/HEAD/packages/components/src/menu-item/README.md) component.
  *
  * @example
  * ```js

package/src/components/header/template-title/style.scss

@@ -41,7 +41,7 @@
 		}
 
 		@include break-xlarge() {
-			max-width: none;
+			max-width: 400px;
 		}
 	}
 }

package/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KeyboardShortcutHelpModal should match snapshot when the modal is active 1`] = `
-<Modal
+<ForwardRef(Modal)
   className="edit-post-keyboard-shortcut-help-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
@@ -80,7 +80,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
     }
     title="Text formatting"
   />
-</Modal>
+</ForwardRef(Modal)>
 `;
 
 exports[`KeyboardShortcutHelpModal should match snapshot when the modal is not active 1`] = `""`;

package/src/components/layout/index.js

@@ -16,11 +16,11 @@ import {
 	store as editorStore,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { BlockBreadcrumb } from '@wordpress/block-editor';
+import { BlockBreadcrumb, BlockStyles } from '@wordpress/block-editor';
 import { Button, ScrollLock, Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
-import { __, _x } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import {
 	ComplementaryArea,
 	FullscreenMode,
@@ -29,6 +29,7 @@ import {
 } from '@wordpress/interface';
 import { useState, useEffect, useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -70,6 +71,7 @@ function Layout( { styles } ) {
 		closeGeneralSidebar,
 		setIsInserterOpened,
 	} = useDispatch( editPostStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
 		mode,
 		isFullscreenActive,
@@ -178,6 +180,18 @@ function Layout( { styles } ) {
 		return null;
 	};
 
+	function onPluginAreaError( name ) {
+		createErrorNotice(
+			sprintf(
+				/* translators: %s: plugin name */
+				__(
+					'The "%s" plugin has encountered an error and cannot be rendered.'
+				),
+				name
+			)
+		);
+	}
+
 	return (
 		<>
 			<FullscreenMode isActive={ isFullscreenActive } />
@@ -239,6 +253,7 @@ function Layout( { styles } ) {
 						{ isMobileViewport && sidebarIsOpened && (
 							<ScrollLock />
 						) }
+						<BlockStyles.Slot scope="core/block-inspector" />
 					</>
 				}
 				footer={
@@ -272,7 +287,7 @@ function Layout( { styles } ) {
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
 			<Popover.Slot />
-			<PluginArea />
+			<PluginArea onError={ onPluginAreaError } />
 		</>
 	);
 }

package/src/components/layout/index.native.js

@@ -53,17 +53,14 @@ class Layout extends Component {
 
 	componentDidMount() {
 		this._isMounted = true;
-		SafeArea.addEventListener(
+		this.safeAreaSubscription = SafeArea.addEventListener(
 			'safeAreaInsetsForRootViewDidChange',
 			this.onSafeAreaInsetsUpdate
 		);
 	}
 
 	componentWillUnmount() {
-		SafeArea.removeEventListener(
-			'safeAreaInsetsForRootViewDidChange',
-			this.onSafeAreaInsetsUpdate
-		);
+		this.safeAreaSubscription?.remove();
 		this._isMounted = false;
 	}
 

package/src/components/preferences-modal/index.js

@@ -55,21 +55,34 @@ import BlockManager from '../block-manager';
 const MODAL_NAME = 'edit-post/preferences';
 const PREFERENCES_MENU = 'preferences-menu';
 
-function NavigationButton( {
-	as: Tag = Button,
-	path,
-	isBack = false,
-	...props
-} ) {
-	const navigator = useNavigator();
+function NavigationButton( { as: Tag = Button, path, ...props } ) {
+	const { goTo } = useNavigator();
+
+	const dataAttrName = 'data-navigator-focusable-id';
+	const dataAttrValue = path;
+
+	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
+
+	const tagProps = {
+		...props,
+		[ dataAttrName ]: dataAttrValue,
+	};
+
 	return (
 		<Tag
-			onClick={ () => navigator.push( path, { isBack } ) }
-			{ ...props }
+			onClick={ () =>
+				goTo( path, { focusTargetSelector: dataAttrCssSelector } )
+			}
+			{ ...tagProps }
 		/>
 	);
 }
 
+function NavigationBackButton( { as: Tag = Button, ...props } ) {
+	const { goBack } = useNavigator();
+	return <Tag onClick={ goBack } { ...props } />;
+}
+
 export default function PreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { closeModal } = useDispatch( editPostStore );
@@ -376,12 +389,10 @@ export default function PreferencesModal() {
 									size="small"
 									gap="6"
 								>
-									<NavigationButton
-										path="/"
+									<NavigationBackButton
 										icon={
 											isRTL() ? chevronRight : chevronLeft
 										}
-										isBack
 										aria-label={ __(
 											'Navigate to the previous view'
 										) }

package/src/components/preferences-modal/test/__snapshots__/index.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PreferencesModal should match snapshot when the modal is active large viewports 1`] = `
-<Modal
+<ForwardRef(Modal)
   className="edit-post-preferences-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
@@ -30,11 +30,11 @@ exports[`PreferencesModal should match snapshot when the modal is active large v
   >
     <Component />
   </TabPanel>
-</Modal>
+</ForwardRef(Modal)>
 `;
 
 exports[`PreferencesModal should match snapshot when the modal is active small viewports 1`] = `
-<Modal
+<ForwardRef(Modal)
   className="edit-post-preferences-modal"
   closeLabel="Close"
   onRequestClose={[Function]}
@@ -187,7 +187,7 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
           justify="left"
           size="small"
         >
-          <NavigationButton
+          <NavigationBackButton
             aria-label="Navigate to the previous view"
             icon={
               <SVG
@@ -199,8 +199,6 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
                 />
               </SVG>
             }
-            isBack={true}
-            path="/"
           />
           <Text
             size="16"
@@ -256,7 +254,7 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
           justify="left"
           size="small"
         >
-          <NavigationButton
+          <NavigationBackButton
             aria-label="Navigate to the previous view"
             icon={
               <SVG
@@ -268,8 +266,6 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
                 />
               </SVG>
             }
-            isBack={true}
-            path="/"
           />
           <Text
             size="16"
@@ -316,7 +312,7 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
           justify="left"
           size="small"
         >
-          <NavigationButton
+          <NavigationBackButton
             aria-label="Navigate to the previous view"
             icon={
               <SVG
@@ -328,8 +324,6 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
                 />
               </SVG>
             }
-            isBack={true}
-            path="/"
           />
           <Text
             size="16"
@@ -386,5 +380,5 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
       </Card>
     </NavigatorScreen>
   </NavigatorProvider>
-</Modal>
+</ForwardRef(Modal)>
 `;

package/src/components/secondary-sidebar/inserter-sidebar.js

@@ -2,13 +2,15 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
 import { close } from '@wordpress/icons';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,22 +30,30 @@ export default function InserterSidebar() {
 	const { setIsInserterOpened } = useDispatch( editPostStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
+		focusOnMount: null,
 	} );
 
+	const libraryRef = useRef();
+	useEffect( () => {
+		libraryRef.current.focusSearch();
+	}, [] );
+
 	return (
 		<div
 			ref={ inserterDialogRef }
 			{ ...inserterDialogProps }
 			className="edit-post-editor__inserter-panel"
 		>
-			<div className="edit-post-editor__inserter-panel-header">
+			<TagName className="edit-post-editor__inserter-panel-header">
 				<Button
 					icon={ close }
+					label={ __( 'Close block inserter' ) }
 					onClick={ () => setIsInserterOpened( false ) }
 				/>
-			</div>
+			</TagName>
 			<div className="edit-post-editor__inserter-panel-content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }
@@ -54,6 +64,7 @@ export default function InserterSidebar() {
 						insertionPoint.insertionIndex
 					}
 					__experimentalFilterValue={ insertionPoint.filterValue }
+					ref={ libraryRef }
 				/>
 			</div>
 		</div>

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -32,7 +32,8 @@ export default function ListViewSidebar() {
 	}
 
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-	const focusReturnRef = useFocusReturn();
+	const headerFocusReturnRef = useFocusReturn();
+	const contentFocusReturnRef = useFocusReturn();
 	function closeOnEscape( event ) {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			event.preventDefault();
@@ -50,17 +51,23 @@ export default function ListViewSidebar() {
 			className="edit-post-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
-			<div className="edit-post-editor__list-view-panel-header">
-				<strong id={ labelId }>{ __( 'List view' ) }</strong>
+			<div
+				className="edit-post-editor__list-view-panel-header"
+				ref={ headerFocusReturnRef }
+			>
+				<strong id={ labelId }>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
-					label={ __( 'Close list view sidebar' ) }
+					label={ __( 'Close List View Sidebar' ) }
 					onClick={ () => setIsListViewOpened( false ) }
 				/>
 			</div>
 			<div
 				className="edit-post-editor__list-view-panel-content"
-				ref={ useMergeRefs( [ focusReturnRef, focusOnMountRef ] ) }
+				ref={ useMergeRefs( [
+					contentFocusReturnRef,
+					focusOnMountRef,
+				] ) }
 			>
 				<ListView
 					onSelect={ selectEditorBlock }

package/src/components/secondary-sidebar/style.scss

@@ -16,10 +16,6 @@
 	padding-right: $grid-unit-10;
 	display: flex;
 	justify-content: flex-end;
-
-	@include break-medium() {
-		display: none;
-	}
 }
 
 .edit-post-editor__inserter-panel-content,

package/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+exports[`PluginPostPublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-post-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;

package/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
+exports[`PluginPrePublishPanel renders fill properly 1`] = `"<div class=\\"components-panel__body my-plugin-pre-publish-panel is-opened\\"><h2 class=\\"components-panel__body-title\\"><button type=\\"button\\" aria-expanded=\\"true\\" class=\\"components-button components-panel__body-toggle\\"><span aria-hidden=\\"true\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"components-panel__arrow\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z\\"></path></svg></span>My panel title</button></h2>My panel content</div>"`;
 q

package/src/components/sidebar/post-author/index.js

@@ -10,7 +10,7 @@ import {
 export function PostAuthor() {
 	return (
 		<PostAuthorCheck>
-			<PanelRow>
+			<PanelRow className="edit-post-post-author">
 				<PostAuthorForm />
 			</PanelRow>
 		</PostAuthorCheck>

package/src/components/sidebar/template/actions.js

@@ -25,7 +25,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '../../../store';
 import { createBlock, serialize } from '@wordpress/blocks';
 
-function PostTemplateActions() {
+function PostTemplateActions( { isPostsPage } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ isBusy, setIsBusy ] = useState( false );
 	const [ title, setTitle ] = useState( '' );
@@ -128,12 +128,17 @@ function PostTemplateActions() {
 						{ __( 'Edit' ) }
 					</Button>
 				) }
-				<Button variant="link" onClick={ () => setIsModalOpen( true ) }>
-					{
-						/* translators: button to create a new template */
-						_x( 'New', 'action' )
-					}
-				</Button>
+				{ ! isPostsPage && (
+					<Button
+						variant="link"
+						onClick={ () => setIsModalOpen( true ) }
+					>
+						{
+							/* translators: button to create a new template */
+							_x( 'New', 'action' )
+						}
+					</Button>
+				) }
 			</div>
 			{ isModalOpen && (
 				<Modal