@wordpress/editor 13.31.0 → 13.33.0

package/src/store/utils/get-filtered-template-parts.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/store/utils/is-template-revertable.js

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_ORIGINS } from '../constants';
+
+// Copy of the function from packages/edit-site/src/utils/is-template-revertable.js
+
+/**
+ * Check if a template is revertable to its original theme-provided template file.
+ *
+ * @param {Object} template The template entity to check.
+ * @return {boolean} Whether the template is revertable.
+ */
+export default function isTemplateRevertable( template ) {
+	if ( ! template ) {
+		return false;
+	}
+	/* eslint-disable camelcase */
+	return (
+		template?.source === TEMPLATE_ORIGINS.custom && template?.has_theme_file
+	);
+	/* eslint-enable camelcase */
+}

package/src/store/utils/test/get-filtered-template-parts.js

@@ -0,0 +1,189 @@
+/**
+ * Internal dependencies
+ */
+import { getFilteredTemplatePartBlocks } from '../get-filtered-template-parts';
+
+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( '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.
+		/**
+		 * TODO what should be done about this?
+		 * Can it be tested another way?
+		 * Is it necessary?
+		 */
+		// 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.
+		/**
+		 * TODO what should be done about this?
+		 * Can it be tested another way?
+		 * Is it necessary?
+		 */
+		// const [ , , finalSize ] = getFilteredTemplatePartBlocks.getCache();
+		// expect( finalSize ).toBe( 2 );
+	} );
+} );

package/src/style.scss

@@ -1,3 +1,5 @@
+@import "../../interface/src/style.scss";
+
 @import "./components/autocompleters/style.scss";
 @import "./components/block-manager/style.scss";
 @import "./components/document-bar/style.scss";
@@ -7,18 +9,21 @@
 @import "./components/entities-saved-states/style.scss";
 @import "./components/error-boundary/style.scss";
 @import "./components/inserter-sidebar/style.scss";
+@import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/list-view-sidebar/style.scss";
 @import "./components/post-author/style.scss";
+@import "./components/post-actions/style.scss";
+@import "./components/post-card-panel/style.scss";
 @import "./components/post-excerpt/style.scss";
 @import "./components/post-featured-image/style.scss";
 @import "./components/post-format/style.scss";
 @import "./components/post-last-revision/style.scss";
 @import "./components/post-locked-modal/style.scss";
 @import "./components/post-panel-row/style.scss";
-@import "./components/post-publish-button/style.scss";
 @import "./components/post-publish-panel/style.scss";
 @import "./components/post-saved-state/style.scss";
 @import "./components/post-schedule/style.scss";
+@import "./components/post-status/style.scss";
 @import "./components/post-sync-status/style.scss";
 @import "./components/post-taxonomies/style.scss";
 @import "./components/post-template/style.scss";
@@ -28,5 +33,6 @@
 @import "./components/post-visibility/style.scss";
 @import "./components/post-trash/style.scss";
 @import "./components/preview-dropdown/style.scss";
+@import "./components/start-page-options/style.scss";
 @import "./components/table-of-contents/style.scss";
-@import "./components/template-validation-notice/style.scss";
+@import "./components/template-areas/style.scss";

package/src/components/post-publish-button/style.scss

@@ -1,8 +0,0 @@
-.editor-post-publish-button__button.has-changes-dot::before {
-	background: currentcolor;
-	border-radius: 4px;
-	content: "";
-	height: 8px;
-	margin: auto 5px auto -3px;
-	width: 8px;
-}

package/src/components/provider/test/disable-non-page-content-blocks.js

@@ -1,90 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { createRegistry, RegistryProvider } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import DisableNonPageContentBlocks from '../disable-non-page-content-blocks';
-
-describe( 'DisableNonPageContentBlocks', () => {
-	it( 'disables page content blocks', () => {
-		const testBlocks = {
-			0: 'core/template-part',
-			/**/ '00': 'core/site-title',
-			/**/ '01': 'core/navigation',
-			1: 'core/group',
-			/**/ 10: 'core/post-title',
-			/**/ 11: 'core/post-featured-image',
-			/**/ 12: 'core/post-content',
-			/**/ /**/ 120: 'core/paragraph',
-			/**/ /**/ 121: 'core/post-featured-image',
-			2: 'core/query',
-			/**/ 20: 'core/post-title',
-			/**/ 21: 'core/post-featured-image',
-			/**/ 22: 'core/post-content',
-			3: 'core/template-part',
-			/**/ 30: 'core/paragraph',
-		};
-
-		const setBlockEditingMode = jest.fn( () => ( {
-			type: 'SET_BLOCK_EDITING_MODE',
-		} ) );
-		const unsetBlockEditingMode = jest.fn( () => ( {
-			type: 'UNSET_BLOCK_EDITING_MODE',
-		} ) );
-
-		const registry = createRegistry( {
-			'core/block-editor': {
-				reducer: () => {},
-				selectors: {
-					getBlocksByName( state, blockNames ) {
-						return Object.keys( testBlocks ).filter( ( clientId ) =>
-							blockNames.includes( testBlocks[ clientId ] )
-						);
-					},
-					getBlockParents( state, clientId ) {
-						return clientId.slice( 0, -1 ).split( '' );
-					},
-					getBlockName( state, clientId ) {
-						return testBlocks[ clientId ];
-					},
-				},
-				actions: {
-					setBlockEditingMode,
-					unsetBlockEditingMode,
-				},
-			},
-		} );
-
-		const { unmount } = render(
-			<RegistryProvider value={ registry }>
-				<DisableNonPageContentBlocks />
-			</RegistryProvider>
-		);
-
-		expect( setBlockEditingMode.mock.calls ).toEqual( [
-			[ '', 'disabled' ], // root
-			[ '10', 'contentOnly' ], // post-title
-			[ '11', 'contentOnly' ], // post-featured-image
-			[ '12', 'contentOnly' ], // post-content
-			// NOT the post-featured-image nested within post-content
-			// NOT any of the content blocks within query
-		] );
-
-		unmount();
-
-		expect( unsetBlockEditingMode.mock.calls ).toEqual( [
-			[ '' ], // root
-			[ '10' ], // post-title
-			[ '11' ], // post-featured-image
-			[ '12' ], // post-content
-		] );
-	} );
-} );

package/src/components/template-validation-notice/style.scss

@@ -1,9 +0,0 @@
-.editor-template-validation-notice {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	.components-button {
-		margin-left: 5px;
-	}
-}