diff --git a/packages/edit-site/src/components/page-content-focus-manager/constants.js b/packages/edit-site/src/components/page-content-focus-manager/constants.js
deleted file mode 100644
index a81b2fd37563af..00000000000000
--- a/packages/edit-site/src/components/page-content-focus-manager/constants.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const PAGE_CONTENT_BLOCK_TYPES = [
- 'core/post-title',
- 'core/post-featured-image',
- 'core/post-content',
-];
diff --git a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js b/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js
index 33ea486863d203..7b184ff253c7e6 100644
--- a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js
+++ b/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js
@@ -10,16 +10,22 @@ import { useEffect } from '@wordpress/element';
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
-import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
+const PAGE_CONTENT_BLOCK_TYPES = [
+ 'core/post-title',
+ 'core/post-featured-image',
+ 'core/post-content',
+];
+
/**
* Component that when rendered, makes it so that the site editor allows only
* page content to be edited.
*/
export default function DisableNonPageContentBlocks() {
useDisableNonPageContentBlocks();
+ return null;
}
/**
@@ -43,8 +49,11 @@ export function useDisableNonPageContentBlocks() {
const withDisableNonPageContentBlocks = createHigherOrderComponent(
( BlockEdit ) => ( props ) => {
- const isContent = PAGE_CONTENT_BLOCK_TYPES.includes( props.name );
- const mode = isContent ? 'contentOnly' : undefined;
+ const isDescendentOfQueryLoop = !! props.context.queryId;
+ const isPageContent =
+ PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) &&
+ ! isDescendentOfQueryLoop;
+ const mode = isPageContent ? 'contentOnly' : undefined;
useBlockEditingMode( mode );
return ;
},
diff --git a/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js b/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js
new file mode 100644
index 00000000000000..d2c14d15f341b0
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js
@@ -0,0 +1,196 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import {
+ TEMPLATE_PARTS,
+ PATTERNS,
+ SYNC_TYPES,
+ USER_PATTERNS,
+ USER_PATTERN_CATEGORY,
+} from './utils';
+import {
+ useExistingTemplateParts,
+ getUniqueTemplatePartTitle,
+ getCleanTemplatePartSlug,
+} from '../../utils/template-part-create';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+function getPatternMeta( item ) {
+ if ( item.type === PATTERNS ) {
+ return { wp_pattern_sync_status: SYNC_TYPES.unsynced };
+ }
+
+ const syncStatus = item.reusableBlock.wp_pattern_sync_status;
+ const isUnsynced = syncStatus === SYNC_TYPES.unsynced;
+
+ return {
+ ...item.reusableBlock.meta,
+ wp_pattern_sync_status: isUnsynced ? syncStatus : undefined,
+ };
+}
+
+export default function DuplicateMenuItem( {
+ categoryId,
+ item,
+ label = __( 'Duplicate' ),
+ onClose,
+} ) {
+ const { saveEntityRecord } = useDispatch( coreStore );
+ const { createErrorNotice, createSuccessNotice } =
+ useDispatch( noticesStore );
+
+ const history = useHistory();
+ const existingTemplateParts = useExistingTemplateParts();
+
+ async function createTemplatePart() {
+ try {
+ const copiedTitle = sprintf(
+ /* translators: %s: Existing template part title */
+ __( '%s (Copy)' ),
+ item.title
+ );
+ const title = getUniqueTemplatePartTitle(
+ copiedTitle,
+ existingTemplateParts
+ );
+ const slug = getCleanTemplatePartSlug( title );
+ const { area, content } = item.templatePart;
+
+ const result = await saveEntityRecord(
+ 'postType',
+ 'wp_template_part',
+ { slug, title, content, area },
+ { throwOnError: true }
+ );
+
+ createSuccessNotice(
+ sprintf(
+ // translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+ __( '"%s" created.' ),
+ title
+ ),
+ {
+ type: 'snackbar',
+ id: 'edit-site-patterns-success',
+ actions: [
+ {
+ label: __( 'Edit' ),
+ onClick: () =>
+ history.push( {
+ postType: TEMPLATE_PARTS,
+ postId: result?.id,
+ categoryType: TEMPLATE_PARTS,
+ categoryId,
+ } ),
+ },
+ ],
+ }
+ );
+
+ onClose();
+ } catch ( error ) {
+ const errorMessage =
+ error.message && error.code !== 'unknown_error'
+ ? error.message
+ : __(
+ 'An error occurred while creating the template part.'
+ );
+
+ createErrorNotice( errorMessage, {
+ type: 'snackbar',
+ id: 'edit-site-patterns-error',
+ } );
+ onClose();
+ }
+ }
+
+ async function createPattern() {
+ try {
+ const isThemePattern = item.type === PATTERNS;
+ const title = sprintf(
+ /* translators: %s: Existing pattern title */
+ __( '%s (Copy)' ),
+ item.title
+ );
+
+ const result = await saveEntityRecord(
+ 'postType',
+ 'wp_block',
+ {
+ content: isThemePattern
+ ? item.content
+ : item.reusableBlock.content,
+ meta: getPatternMeta( item ),
+ status: 'publish',
+ title,
+ },
+ { throwOnError: true }
+ );
+
+ const actionLabel = isThemePattern
+ ? __( 'View my patterns' )
+ : __( 'Edit' );
+
+ const newLocation = isThemePattern
+ ? {
+ categoryType: USER_PATTERNS,
+ categoryId: USER_PATTERN_CATEGORY,
+ path: '/patterns',
+ }
+ : {
+ categoryType: USER_PATTERNS,
+ categoryId: USER_PATTERN_CATEGORY,
+ postType: USER_PATTERNS,
+ postId: result?.id,
+ };
+
+ createSuccessNotice(
+ sprintf(
+ // translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
+ __( '"%s" added to my patterns.' ),
+ title
+ ),
+ {
+ type: 'snackbar',
+ id: 'edit-site-patterns-success',
+ actions: [
+ {
+ label: actionLabel,
+ onClick: () => history.push( newLocation ),
+ },
+ ],
+ }
+ );
+
+ onClose();
+ } catch ( error ) {
+ const errorMessage =
+ error.message && error.code !== 'unknown_error'
+ ? error.message
+ : __( 'An error occurred while creating the pattern.' );
+
+ createErrorNotice( errorMessage, {
+ type: 'snackbar',
+ id: 'edit-site-patterns-error',
+ } );
+ onClose();
+ }
+ }
+
+ const createItem =
+ item.type === TEMPLATE_PARTS ? createTemplatePart : createPattern;
+
+ return ;
+}
diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js
index 8795e41eedd4f3..7f40fbce9035cf 100644
--- a/packages/edit-site/src/components/page-patterns/grid-item.js
+++ b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -24,7 +24,7 @@ import {
Icon,
header,
footer,
- symbolFilled,
+ symbolFilled as uncategorized,
moreHorizontal,
lockSmall,
} from '@wordpress/icons';
@@ -35,23 +35,31 @@ import { DELETE, BACKSPACE } from '@wordpress/keycodes';
/**
* Internal dependencies
*/
-import { PATTERNS, USER_PATTERNS } from './utils';
+import RenameMenuItem from './rename-menu-item';
+import DuplicateMenuItem from './duplicate-menu-item';
+import { PATTERNS, TEMPLATE_PARTS, USER_PATTERNS } from './utils';
+import { store as editSiteStore } from '../../store';
import { useLink } from '../routes/link';
-const THEME_PATTERN_TOOLTIP = __( 'Theme patterns cannot be edited.' );
+const templatePartIcons = { header, footer, uncategorized };
export default function GridItem( { categoryId, composite, icon, item } ) {
const descriptionId = useId();
const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
+ const { removeTemplate } = useDispatch( editSiteStore );
const { __experimentalDeleteReusableBlock } =
useDispatch( reusableBlocksStore );
const { createErrorNotice, createSuccessNotice } =
useDispatch( noticesStore );
+ const isUserPattern = item.type === USER_PATTERNS;
+ const isNonUserPattern = item.type === PATTERNS;
+ const isTemplatePart = item.type === TEMPLATE_PARTS;
+
const { onClick } = useLink( {
postType: item.type,
- postId: item.type === USER_PATTERNS ? item.id : item.name,
+ postId: isUserPattern ? item.id : item.name,
categoryId,
categoryType: item.type,
} );
@@ -67,27 +75,41 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
'is-placeholder': isEmpty,
} );
const previewClassNames = classnames( 'edit-site-patterns__preview', {
- 'is-inactive': item.type === PATTERNS,
+ 'is-inactive': isNonUserPattern,
} );
const deletePattern = async () => {
try {
await __experimentalDeleteReusableBlock( item.id );
- createSuccessNotice( __( 'Pattern successfully deleted.' ), {
- type: 'snackbar',
- } );
+ createSuccessNotice(
+ sprintf(
+ // translators: %s: The pattern's title e.g. 'Call to action'.
+ __( '"%s" deleted.' ),
+ item.title
+ ),
+ { type: 'snackbar', id: 'edit-site-patterns-success' }
+ );
} catch ( error ) {
const errorMessage =
error.message && error.code !== 'unknown_error'
? error.message
: __( 'An error occurred while deleting the pattern.' );
- createErrorNotice( errorMessage, { type: 'snackbar' } );
+ createErrorNotice( errorMessage, {
+ type: 'snackbar',
+ id: 'edit-site-patterns-error',
+ } );
}
};
+ const deleteItem = () =>
+ isTemplatePart ? removeTemplate( item ) : deletePattern();
- const isUserPattern = item.type === USER_PATTERNS;
+ // Only custom patterns or custom template parts can be renamed or deleted.
+ const isCustomPattern =
+ isUserPattern || ( isTemplatePart && item.isCustom );
+ const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
const ariaDescriptions = [];
- if ( isUserPattern ) {
+
+ if ( isCustomPattern ) {
// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
ariaDescriptions.push(
__( 'Press Enter to edit, or Delete to delete the pattern.' )
@@ -95,19 +117,24 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
} else if ( item.description ) {
ariaDescriptions.push( item.description );
}
- if ( item.type === PATTERNS ) {
- ariaDescriptions.push( THEME_PATTERN_TOOLTIP );
- }
- let itemIcon = icon;
- if ( categoryId === 'header' ) {
- itemIcon = header;
- } else if ( categoryId === 'footer' ) {
- itemIcon = footer;
- } else if ( categoryId === 'uncategorized' ) {
- itemIcon = symbolFilled;
+ if ( isNonUserPattern ) {
+ ariaDescriptions.push( __( 'Theme patterns cannot be edited.' ) );
}
+ const itemIcon = templatePartIcons[ categoryId ]
+ ? templatePartIcons[ categoryId ]
+ : icon;
+
+ const confirmButtonText = hasThemeFile ? __( 'Clear' ) : __( 'Delete' );
+ const confirmPrompt = hasThemeFile
+ ? __( 'Are you sure you want to clear these customizations?' )
+ : sprintf(
+ // translators: %s: The pattern or template part's title e.g. 'Call to action'.
+ __( 'Are you sure you want to delete "%s"?' ),
+ item.title
+ );
+
return (
<>
@@ -117,7 +144,7 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
as="div"
{ ...composite }
onClick={ item.type !== PATTERNS ? onClick : undefined }
- onKeyDown={ isUserPattern ? onKeyDown : undefined }
+ onKeyDown={ isCustomPattern ? onKeyDown : undefined }
aria-label={ item.title }
aria-describedby={
ariaDescriptions.length
@@ -169,58 +196,73 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
) }
>
-
+
) }
- { item.type === USER_PATTERNS && (
-
- { () => (
-
+
+ { ( { onClose } ) => (
+
+ { isCustomPattern && ! hasThemeFile && (
+
+ ) }
+
+ { isCustomPattern && (
-
- ) }
-
- ) }
+ ) }
+
+ ) }
+
{ isDeleteDialogOpen && (
setIsDeleteDialogOpen( false ) }
>
- { __( 'Are you sure you want to delete this pattern?' ) }
+ { confirmPrompt }
) }
diff --git a/packages/edit-site/src/components/page-patterns/rename-menu-item.js b/packages/edit-site/src/components/page-patterns/rename-menu-item.js
new file mode 100644
index 00000000000000..938023a62cefd3
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/rename-menu-item.js
@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ Button,
+ MenuItem,
+ Modal,
+ TextControl,
+ __experimentalHStack as HStack,
+ __experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_PARTS } from './utils';
+
+export default function RenameMenuItem( { item, onClose } ) {
+ const [ title, setTitle ] = useState( () => item.title );
+ const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+ const { editEntityRecord, saveEditedEntityRecord } =
+ useDispatch( coreStore );
+ const { createSuccessNotice, createErrorNotice } =
+ useDispatch( noticesStore );
+
+ if ( item.type === TEMPLATE_PARTS && ! item.isCustom ) {
+ return null;
+ }
+
+ async function onRename( event ) {
+ event.preventDefault();
+
+ try {
+ await editEntityRecord( 'postType', item.type, item.id, { title } );
+
+ // Update state before saving rerenders the list.
+ setTitle( '' );
+ setIsModalOpen( false );
+ onClose();
+
+ // Persist edited entity.
+ await saveEditedEntityRecord( 'postType', item.type, item.id, {
+ throwOnError: true,
+ } );
+
+ createSuccessNotice( __( 'Entity renamed.' ), {
+ type: 'snackbar',
+ } );
+ } catch ( error ) {
+ const errorMessage =
+ error.message && error.code !== 'unknown_error'
+ ? error.message
+ : __( 'An error occurred while renaming the entity.' );
+
+ createErrorNotice( errorMessage, { type: 'snackbar' } );
+ }
+ }
+
+ return (
+ <>
+
+ { isModalOpen && (
+ {
+ setIsModalOpen( false );
+ onClose();
+ } }
+ overlayClassName="edit-site-list__rename_modal"
+ >
+
+
+ ) }
+
+ );
+}
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 9326a966123198..7a7bf026b9c625 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -101,6 +101,10 @@
.edit-site-patterns__pattern-lock-icon {
display: inline-flex;
+
+ svg {
+ fill: currentcolor;
+ }
}
}
diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
index cef7b4721193f4..295d1eee8e410f 100644
--- a/packages/edit-site/src/components/page-patterns/use-patterns.js
+++ b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -31,21 +31,17 @@ const templatePartToPattern = ( templatePart ) => ( {
blocks: parse( templatePart.content.raw ),
categories: [ templatePart.area ],
description: templatePart.description || '',
+ isCustom: templatePart.source === 'custom',
keywords: templatePart.keywords || [],
+ id: createTemplatePartId( templatePart.theme, templatePart.slug ),
name: createTemplatePartId( templatePart.theme, templatePart.slug ),
title: templatePart.title.rendered,
type: templatePart.type,
templatePart,
} );
-const templatePartCategories = [ 'header', 'footer', 'sidebar' ];
-const templatePartHasCategory = ( item, category ) => {
- if ( category === 'uncategorized' ) {
- return ! templatePartCategories.includes( item.templatePart.area );
- }
-
- return item.templatePart.area === category;
-};
+const templatePartHasCategory = ( item, category ) =>
+ item.templatePart.area === category;
const useTemplatePartsAsPatterns = (
categoryId,
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js
index d6e7dd23a709fa..dd40bcaef9f707 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js
@@ -6,22 +6,24 @@ import {
store as blockEditorStore,
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
-import { PAGE_CONTENT_BLOCK_TYPES } from '../../page-content-focus-manager/constants';
import { unlock } from '../../../lock-unlock';
const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
export default function PageContent() {
- const clientIds = useSelect(
+ const clientIdsTree = useSelect(
( select ) =>
- select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
- PAGE_CONTENT_BLOCK_TYPES
- ),
+ unlock( select( blockEditorStore ) ).getEnabledClientIdsTree(),
[]
);
+ const clientIds = useMemo(
+ () => clientIdsTree.map( ( { clientId } ) => clientId ),
+ [ clientIdsTree ]
+ );
return ;
}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index 58b93d61c45a65..152139870fa59f 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -20,6 +20,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
+import TemplatePartHint from './template-part-hint';
export default function SidebarNavigationScreenMain() {
const { location } = useNavigator();
@@ -42,46 +43,49 @@ export default function SidebarNavigationScreenMain() {
'Customize the appearance of your website using the block editor.'
) }
content={
-
-
- { __( 'Navigation' ) }
-
-
- { __( 'Styles' ) }
-
-
- { __( 'Pages' ) }
-
-
- { __( 'Templates' ) }
-
-
- { __( 'Patterns' ) }
-
-
+ <>
+
+
+ { __( 'Navigation' ) }
+
+
+ { __( 'Styles' ) }
+
+
+ { __( 'Pages' ) }
+
+
+ { __( 'Templates' ) }
+
+
+ { __( 'Patterns' ) }
+
+
+
+
}
/>
);
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js
new file mode 100644
index 00000000000000..8fbe74f81bb4d9
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/template-part-hint.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { Notice } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+const PREFERENCE_NAME = 'isTemplatePartMoveHintVisible';
+
+export default function TemplatePartHint() {
+ const showTemplatePartHint = useSelect(
+ ( select ) =>
+ select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+ []
+ );
+
+ const { set: setPreference } = useDispatch( preferencesStore );
+ if ( ! showTemplatePartHint ) {
+ return null;
+ }
+
+ return (
+ {
+ setPreference( 'core', PREFERENCE_NAME, false );
+ } }
+ >
+ { __(
+ 'Looking for template parts? You can now find them in the new "Patterns" page.'
+ ) }
+
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
index b28aa6687723b7..f200382f963113 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
@@ -7,6 +7,7 @@ import {
Flex,
Icon,
Tooltip,
+ __experimentalHeading as Heading,
} from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
@@ -29,12 +30,79 @@ import usePatternCategories from './use-pattern-categories';
import useMyPatterns from './use-my-patterns';
import useTemplatePartAreas from './use-template-part-areas';
-const templatePartAreaLabels = {
- header: __( 'Headers' ),
- footer: __( 'Footers' ),
- sidebar: __( 'Sidebar' ),
- uncategorized: __( 'Uncategorized' ),
-};
+function TemplatePartGroup( { areas, currentArea, currentType } ) {
+ return (
+ <>
+
+
{ __( 'Template parts' ) }
+
{ __( 'Synced patterns for use in template building.' ) }
+
+
{ __( 'Theme patterns' ) }
+
+ { __(
+ 'For insertion into documents where they can then be customized.'
+ ) }
+
+