@wordpress/edit-site 5.2.0 → 5.3.0

package/src/components/template-part-converter/convert-to-template-part.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -24,12 +19,18 @@ import { symbolFilled } from '@wordpress/icons';
  */
 import CreateTemplatePartModal from '../create-template-part-modal';
 import { store as editSiteStore } from '../../store';
+import {
+	useExistingTemplateParts,
+	getUniqueTemplatePartTitle,
+	getCleanTemplatePartSlug,
+} from '../../utils/template-part-create';
 
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
+	const existingTemplateParts = useExistingTemplateParts();
 
 	const { canCreate } = useSelect( ( select ) => {
 		const { supportsTemplatePartsMode } =
@@ -44,17 +45,18 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	}
 
 	const onConvert = async ( { title, area } ) => {
-		// Currently template parts only allow latin chars.
-		// Fallback slug will receive suffix by default.
-		const cleanSlug =
-			kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
+		const uniqueTitle = getUniqueTemplatePartTitle(
+			title,
+			existingTemplateParts
+		);
+		const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
 
 		const templatePart = await saveEntityRecord(
 			'postType',
 			'wp_template_part',
 			{
 				slug: cleanSlug,
-				title,
+				title: uniqueTitle,
 				content: serialize( blocks ),
 				area,
 			}

package/src/experiments.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/edit-site'
+	);

package/src/hooks/push-changes-to-global-styles/index.js

@@ -11,6 +11,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import {
 	InspectorAdvancedControls,
 	store as blockEditorStore,
+	experiments as blockEditorExperiments,
 } from '@wordpress/block-editor';
 import { BaseControl, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -26,11 +27,68 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { getSupportedGlobalStylesPanels } from '../../components/global-styles/hooks';
-import { GlobalStylesContext } from '../../components/global-styles/context';
-import {
-	STYLE_PATH_TO_CSS_VAR_INFIX,
-	STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
-} from '../../components/global-styles/utils';
+import { unlock } from '../../experiments';
+
+const { GlobalStylesContext } = unlock( blockEditorExperiments );
+
+// TODO: Temporary duplication of constant in @wordpress/block-editor. Can be
+// removed by moving PushChangesToGlobalStylesControl to
+// @wordpress/block-editor.
+const STYLE_PATH_TO_CSS_VAR_INFIX = {
+	'color.background': 'color',
+	'color.text': 'color',
+	'elements.link.color.text': 'color',
+	'elements.link.:hover.color.text': 'color',
+	'elements.link.typography.fontFamily': 'font-family',
+	'elements.link.typography.fontSize': 'font-size',
+	'elements.button.color.text': 'color',
+	'elements.button.color.background': 'color',
+	'elements.button.typography.fontFamily': 'font-family',
+	'elements.button.typography.fontSize': 'font-size',
+	'elements.heading.color': 'color',
+	'elements.heading.color.background': 'color',
+	'elements.heading.typography.fontFamily': 'font-family',
+	'elements.heading.gradient': 'gradient',
+	'elements.heading.color.gradient': 'gradient',
+	'elements.h1.color': 'color',
+	'elements.h1.color.background': 'color',
+	'elements.h1.typography.fontFamily': 'font-family',
+	'elements.h1.color.gradient': 'gradient',
+	'elements.h2.color': 'color',
+	'elements.h2.color.background': 'color',
+	'elements.h2.typography.fontFamily': 'font-family',
+	'elements.h2.color.gradient': 'gradient',
+	'elements.h3.color': 'color',
+	'elements.h3.color.background': 'color',
+	'elements.h3.typography.fontFamily': 'font-family',
+	'elements.h3.color.gradient': 'gradient',
+	'elements.h4.color': 'color',
+	'elements.h4.color.background': 'color',
+	'elements.h4.typography.fontFamily': 'font-family',
+	'elements.h4.color.gradient': 'gradient',
+	'elements.h5.color': 'color',
+	'elements.h5.color.background': 'color',
+	'elements.h5.typography.fontFamily': 'font-family',
+	'elements.h5.color.gradient': 'gradient',
+	'elements.h6.color': 'color',
+	'elements.h6.color.background': 'color',
+	'elements.h6.typography.fontFamily': 'font-family',
+	'elements.h6.color.gradient': 'gradient',
+	'color.gradient': 'gradient',
+	'typography.fontSize': 'font-size',
+	'typography.fontFamily': 'font-family',
+};
+
+// TODO: Temporary duplication of constant in @wordpress/block-editor. Can be
+// removed by moving PushChangesToGlobalStylesControl to
+// @wordpress/block-editor.
+const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
+	'color.background': 'backgroundColor',
+	'color.text': 'textColor',
+	'color.gradient': 'gradient',
+	'typography.fontSize': 'fontSize',
+	'typography.fontFamily': 'fontFamily',
+};
 
 function getChangesToPush( name, attributes ) {
 	return getSupportedGlobalStylesPanels( name ).flatMap( ( key ) => {

package/src/index.js

@@ -7,7 +7,8 @@ import {
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
 import { dispatch } from '@wordpress/data';
-import { render, unmountComponentAtNode } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import { createRoot } from '@wordpress/element';
 import {
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
@@ -26,14 +27,27 @@ import { store as editSiteStore } from './store';
 import App from './components/app';
 
 /**
- * Reinitializes the editor after the user chooses to reboot the editor after
- * an unhandled error occurs, replacing previously mounted editor element using
- * an initial state from prior to the crash.
+ * Initializes the site editor screen.
  *
- * @param {Element} target   DOM node in which editor is rendered.
- * @param {?Object} settings Editor settings object.
+ * @param {string} id       ID of the root element to render the screen in.
+ * @param {Object} settings Editor settings.
  */
-export function reinitializeEditor( target, settings ) {
+export function initializeEditor( id, settings ) {
+	const target = document.getElementById( id );
+	const root = createRoot( target );
+
+	settings.__experimentalFetchLinkSuggestions = ( search, searchOptions ) =>
+		fetchLinkSuggestions( search, searchOptions, settings );
+	settings.__experimentalFetchRichUrlData = fetchUrlData;
+
+	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
+	registerCoreBlocks();
+	registerLegacyWidgetBlock( { inserter: false } );
+	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+		__experimentalRegisterExperimentalCoreBlocks( {
+			enableFSEBlocks: true,
+		} );
+	}
 	/*
 	 * Prevent adding the Clasic block in the site editor.
 	 * Only add the filter when the site editor is initialized, not imported.
@@ -54,70 +68,48 @@ export function reinitializeEditor( target, settings ) {
 		}
 	);
 
-	// This will be a no-op if the target doesn't have any React nodes.
-	unmountComponentAtNode( target );
-	const reboot = reinitializeEditor.bind( null, target, settings );
-
 	// We dispatch actions and update the store synchronously before rendering
 	// so that we won't trigger unnecessary re-renders with useEffect.
-	{
-		dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
-			editorMode: 'visual',
-			fixedToolbar: false,
-			focusMode: false,
-			keepCaretInsideBlock: false,
-			welcomeGuide: true,
-			welcomeGuideStyles: true,
-			showListViewByDefault: false,
-		} );
+	dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
+		editorMode: 'visual',
+		fixedToolbar: false,
+		focusMode: false,
+		keepCaretInsideBlock: false,
+		welcomeGuide: true,
+		welcomeGuideStyles: true,
+		showListViewByDefault: false,
+	} );
 
-		dispatch( interfaceStore ).setDefaultComplementaryArea(
-			'core/edit-site',
-			'edit-site/template'
-		);
+	dispatch( interfaceStore ).setDefaultComplementaryArea(
+		'core/edit-site',
+		'edit-site/template'
+	);
 
-		dispatch( editSiteStore ).updateSettings( settings );
+	dispatch( editSiteStore ).updateSettings( settings );
 
-		// Keep the defaultTemplateTypes in the core/editor settings too,
-		// so that they can be selected with core/editor selectors in any editor.
-		// This is needed because edit-site doesn't initialize with EditorProvider,
-		// which internally uses updateEditorSettings as well.
-		dispatch( editorStore ).updateEditorSettings( {
-			defaultTemplateTypes: settings.defaultTemplateTypes,
-			defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
-		} );
-	}
+	// Keep the defaultTemplateTypes in the core/editor settings too,
+	// so that they can be selected with core/editor selectors in any editor.
+	// This is needed because edit-site doesn't initialize with EditorProvider,
+	// which internally uses updateEditorSettings as well.
+	dispatch( editorStore ).updateEditorSettings( {
+		defaultTemplateTypes: settings.defaultTemplateTypes,
+		defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
+	} );
 
 	// Prevent the default browser action for files dropped outside of dropzones.
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	render( <App reboot={ reboot } />, target );
-}
-
-/**
- * Initializes the site editor screen.
- *
- * @param {string} id       ID of the root element to render the screen in.
- * @param {Object} settings Editor settings.
- */
-export function initializeEditor( id, settings ) {
-	settings.__experimentalFetchLinkSuggestions = ( search, searchOptions ) =>
-		fetchLinkSuggestions( search, searchOptions, settings );
-	settings.__experimentalFetchRichUrlData = fetchUrlData;
+	root.render( <App /> );
 
-	const target = document.getElementById( id );
-
-	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
-	registerCoreBlocks();
-	registerLegacyWidgetBlock( { inserter: false } );
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
-		__experimentalRegisterExperimentalCoreBlocks( {
-			enableFSEBlocks: true,
-		} );
-	}
+	return root;
+}
 
-	reinitializeEditor( target, settings );
+export function reinitializeEditor() {
+	deprecated( 'wp.editSite.reinitializeEditor', {
+		since: '6.2',
+		version: '6.3',
+	} );
 }
 
 export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-sidebar';

package/src/store/selectors.js

@@ -10,10 +10,14 @@ import { store as coreDataStore } from '@wordpress/core-data';
 import { createRegistrySelector } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { uploadMedia } from '@wordpress/media-utils';
-import { isTemplatePart } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 
+/**
+ * Internal dependencies
+ */
+import { getFilteredTemplatePartBlocks } from './utils';
+
 /**
  * @typedef {'template'|'template_type'} TemplateType Template type.
  */
@@ -268,32 +272,8 @@ export const getCurrentTemplateTemplateParts = createRegistrySelector(
 			'wp_template_part',
 			{ per_page: -1 }
 		);
-		const templatePartsById = templateParts
-			? // Key template parts by their ID.
-			  templateParts.reduce(
-					( newTemplateParts, part ) => ( {
-						...newTemplateParts,
-						[ part.id ]: part,
-					} ),
-					{}
-			  )
-			: {};
-
-		return ( template.blocks ?? [] )
-			.filter( ( block ) => isTemplatePart( block ) )
-			.map( ( block ) => {
-				const {
-					attributes: { theme, slug },
-				} = block;
-				const templatePartId = `${ theme }//${ slug }`;
-				const templatePart = templatePartsById[ templatePartId ];
 
-				return {
-					templatePart,
-					block,
-				};
-			} )
-			.filter( ( { templatePart } ) => !! templatePart );
+		return getFilteredTemplatePartBlocks( template.blocks, templateParts );
 	}
 );
 

package/src/store/test/utils.js

@@ -0,0 +1,181 @@
+/**
+ * Internal dependencies
+ */
+import { getFilteredTemplatePartBlocks } from '../utils';
+
+const NESTED_BLOCKS = [
+	{
+		clientId: '1',
+		name: 'core/group',
+		innerBlocks: [
+			{
+				clientId: '2',
+				name: 'core/template-part',
+				attributes: {
+					slug: 'header',
+					theme: 'my-theme',
+				},
+				innerBlocks: [
+					{
+						clientId: '3',
+						name: 'core/group',
+						innerBlocks: [],
+					},
+				],
+			},
+			{
+				clientId: '4',
+				name: 'core/template-part',
+				attributes: {
+					slug: 'aside',
+					theme: 'my-theme',
+				},
+				innerBlocks: [],
+			},
+		],
+	},
+	{
+		clientId: '5',
+		name: 'core/paragraph',
+		innerBlocks: [],
+	},
+	{
+		clientId: '6',
+		name: 'core/template-part',
+		attributes: {
+			slug: 'footer',
+			theme: 'my-theme',
+		},
+		innerBlocks: [],
+	},
+];
+
+const FLATTENED_BLOCKS = [
+	{
+		block: {
+			clientId: '2',
+			name: 'core/template-part',
+			attributes: {
+				slug: 'header',
+				theme: 'my-theme',
+			},
+		},
+		templatePart: {
+			id: 'my-theme//header',
+			slug: 'header',
+			theme: 'my-theme',
+		},
+	},
+	{
+		block: {
+			clientId: '4',
+			name: 'core/template-part',
+			attributes: {
+				slug: 'aside',
+				theme: 'my-theme',
+			},
+		},
+		templatePart: {
+			id: 'my-theme//aside',
+			slug: 'aside',
+			theme: 'my-theme',
+		},
+	},
+	{
+		block: {
+			clientId: '6',
+			name: 'core/template-part',
+			attributes: {
+				slug: 'footer',
+				theme: 'my-theme',
+			},
+		},
+		templatePart: {
+			id: 'my-theme//footer',
+			slug: 'footer',
+			theme: 'my-theme',
+		},
+	},
+];
+
+const SINGLE_TEMPLATE_PART_BLOCK = {
+	clientId: '1',
+	name: 'core/template-part',
+	innerBlocks: [],
+	attributes: {
+		slug: 'aside',
+		theme: 'my-theme',
+	},
+};
+
+const TEMPLATE_PARTS = [
+	{
+		id: 'my-theme//header',
+		slug: 'header',
+		theme: 'my-theme',
+	},
+	{
+		id: 'my-theme//aside',
+		slug: 'aside',
+		theme: 'my-theme',
+	},
+	{
+		id: 'my-theme//footer',
+		slug: 'footer',
+		theme: 'my-theme',
+	},
+];
+
+describe( 'utils', () => {
+	describe( 'getFilteredTemplatePartBlocks', () => {
+		it( 'returns a flattened list of filtered template parts preserving a depth-first order', () => {
+			const flattenedFilteredTemplateParts =
+				getFilteredTemplatePartBlocks( NESTED_BLOCKS, TEMPLATE_PARTS );
+			expect( flattenedFilteredTemplateParts ).toEqual(
+				FLATTENED_BLOCKS
+			);
+		} );
+
+		it( 'returns a cached result when passed the same params', () => {
+			// Clear the cache and call the function twice.
+			getFilteredTemplatePartBlocks.clear();
+			getFilteredTemplatePartBlocks( NESTED_BLOCKS, TEMPLATE_PARTS );
+			expect(
+				getFilteredTemplatePartBlocks( NESTED_BLOCKS, TEMPLATE_PARTS )
+			).toEqual( FLATTENED_BLOCKS );
+
+			// The function has been called twice with the same params, so the cache size should be 1.
+			const [ , , originalSize ] =
+				getFilteredTemplatePartBlocks.getCache();
+			expect( originalSize ).toBe( 1 );
+
+			// Call the function again, with different params.
+			expect(
+				getFilteredTemplatePartBlocks(
+					[ SINGLE_TEMPLATE_PART_BLOCK ],
+					TEMPLATE_PARTS
+				)
+			).toEqual( [
+				{
+					block: {
+						clientId: '1',
+						name: 'core/template-part',
+						attributes: {
+							slug: 'aside',
+							theme: 'my-theme',
+						},
+					},
+					templatePart: {
+						id: 'my-theme//aside',
+						slug: 'aside',
+						theme: 'my-theme',
+					},
+				},
+			] );
+
+			// The function has been called with different params, so the cache size should now be 2.
+			const [ , , finalSize ] = getFilteredTemplatePartBlocks.getCache();
+			expect( finalSize ).toBe( 2 );
+		} );
+	} );
+} );

package/src/store/utils.js

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import memoize from 'memize';
+
+/**
+ * WordPress dependencies
+ */
+import { isTemplatePart } from '@wordpress/blocks';
+
+const EMPTY_ARRAY = [];
+
+/**
+ * Get a flattened and filtered list of template parts and the matching block for that template part.
+ *
+ * Takes a list of blocks defined within a template, and a list of template parts, and returns a
+ * flattened list of template parts and the matching block for that template part.
+ *
+ * @param {Array}  blocks        Blocks to flatten.
+ * @param {?Array} templateParts Available template parts.
+ * @return {Array} An array of template parts and their blocks.
+ */
+function getFilteredTemplatePartBlocks( blocks = EMPTY_ARRAY, templateParts ) {
+	const templatePartsById = templateParts
+		? // Key template parts by their ID.
+		  templateParts.reduce(
+				( newTemplateParts, part ) => ( {
+					...newTemplateParts,
+					[ part.id ]: part,
+				} ),
+				{}
+		  )
+		: {};
+
+	const result = [];
+
+	// Iterate over all blocks, recursing into inner blocks.
+	// Output will be based on a depth-first traversal.
+	const stack = [ ...blocks ];
+	while ( stack.length ) {
+		const { innerBlocks, ...block } = stack.shift();
+		// Place inner blocks at the beginning of the stack to preserve order.
+		stack.unshift( ...innerBlocks );
+
+		if ( isTemplatePart( block ) ) {
+			const {
+				attributes: { theme, slug },
+			} = block;
+			const templatePartId = `${ theme }//${ slug }`;
+			const templatePart = templatePartsById[ templatePartId ];
+
+			// Only add to output if the found template part block is in the list of available template parts.
+			if ( templatePart ) {
+				result.push( {
+					templatePart,
+					block,
+				} );
+			}
+		}
+	}
+
+	return result;
+}
+
+const memoizedGetFilteredTemplatePartBlocks = memoize(
+	getFilteredTemplatePartBlocks
+);
+
+export { memoizedGetFilteredTemplatePartBlocks as getFilteredTemplatePartBlocks };

package/src/style.scss

@@ -1,15 +1,16 @@
 @import "../../interface/src/style.scss";
 
+@import "./components/add-new-template/style.scss";
 @import "./components/block-editor/style.scss";
+@import "./components/canvas-spinner/style.scss";
 @import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/header-edit-mode/style.scss";
 @import "./components/header-edit-mode/document-actions/style.scss";
 @import "./components/list/style.scss";
-@import "./components/add-new-template/style.scss";
+@import "./components/navigation-inspector/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";
 @import "./components/sidebar-edit-mode/settings-header/style.scss";
-@import "./components/sidebar-edit-mode/navigation-menu-sidebar/style.scss";
 @import "./components/sidebar-edit-mode/template-card/style.scss";
 @import "./components/editor/style.scss";
 @import "./components/template-details/style.scss";
@@ -23,6 +24,7 @@
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-templates/style.scss";
 @import "./components/site-hub/style.scss";
+@import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";

package/src/utils/template-part-create.js

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { kebabCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+export const useExistingTemplateParts = () => {
+	return useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords(
+				'postType',
+				'wp_template_part',
+				{
+					per_page: -1,
+				}
+			),
+		[]
+	);
+};
+
+/**
+ * Return a unique template part title based on
+ * the given title and existing template parts.
+ *
+ * @param {string} title         The original template part title.
+ * @param {Object} templateParts The array of template part entities.
+ * @return {string} A unique template part title.
+ */
+export const getUniqueTemplatePartTitle = ( title, templateParts ) => {
+	const lowercaseTitle = title.toLowerCase();
+	const existingTitles = templateParts.map( ( templatePart ) =>
+		templatePart.title.rendered.toLowerCase()
+	);
+
+	if ( ! existingTitles.includes( lowercaseTitle ) ) {
+		return title;
+	}
+
+	let suffix = 2;
+	while ( existingTitles.includes( `${ lowercaseTitle } ${ suffix }` ) ) {
+		suffix++;
+	}
+
+	return `${ title } ${ suffix }`;
+};
+
+/**
+ * Get a valid slug for a template part.
+ * Currently template parts only allow latin chars.
+ * The fallback slug will receive suffix by default.
+ *
+ * @param {string} title The template part title.
+ * @return {string} A valid template part slug.
+ */
+export const getCleanTemplatePartSlug = ( title ) => {
+	return kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
+};