Update: Move duplicate pattern and template part actions to the edito…

…r package (WordPress#61879) Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
carstingaxion · Jun 4, 2024 · d9ce548 · d9ce548
1 parent 3a1a832
commit d9ce548
Show file tree

Hide file tree

Showing 15 changed files with 163 additions and 182 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -125,7 +125,7 @@ $z-layers: (
 	// Should be above the popover (dropdown)
 	".reusable-blocks-menu-items__convert-modal": 1000001,
 	".patterns-menu-items__convert-modal": 1000001,
-	".edit-site-create-template-part-modal": 1000001,
+	".editor-create-template-part-modal": 1000001,
 	".block-editor-block-lock-modal": 1000001,
 	".block-editor-template-part__selection-modal": 1000001,
 	".block-editor-block-rename-modal": 1000001,

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -13,11 +13,11 @@ import {
 } from '@wordpress/patterns';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import CreateTemplatePartModal from '../create-template-part-modal';
 import { unlock } from '../../lock-unlock';
 import {
 	PATTERN_TYPES,
@@ -29,6 +29,7 @@ const { useHistory } = unlock( routerPrivateApis );
 const { CreatePatternModal, useAddPatternCategory } = unlock(
 	editPatternsPrivateApis
 );
+const { CreateTemplatePartModal } = unlock( editorPrivateApis );
 
 export default function AddNewPattern() {
 	const history = useHistory();

diff --git a/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js b/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js
diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
@@ -46,10 +46,6 @@ import {
 	PATTERN_DEFAULT_CATEGORY,
 	OPERATOR_IS,
 } from '../../utils/constants';
-import {
-	duplicatePatternAction,
-	duplicateTemplatePartAction,
-} from './dataviews-pattern-actions';
 import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 import usePatterns from './use-patterns';
@@ -361,15 +357,9 @@ export default function DataviewsPatterns() {
 
 	const actions = useMemo( () => {
 		if ( type === TEMPLATE_PART_POST_TYPE ) {
-			return [
-				editAction,
-				duplicateTemplatePartAction,
-				...templatePartActions,
-			].filter( Boolean );
+			return [ editAction, ...templatePartActions ].filter( Boolean );
 		}
-		return [ editAction, duplicatePatternAction, ...patternActions ].filter(
-			Boolean
-		);
+		return [ editAction, ...patternActions ].filter( Boolean );
 	}, [ editAction, type, templatePartActions, patternActions ] );
 	const onChangeView = useCallback(
 		( newView ) => {

diff --git a/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js b/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
@@ -9,13 +9,16 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { symbolFilled } from '@wordpress/icons';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import CreateTemplatePartModal from '../create-template-part-modal';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
+const { CreateTemplatePartModal } = unlock( editorPrivateApis );
+
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { replaceBlocks } = useDispatch( blockEditorStore );

diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -13,7 +13,6 @@
 @import "./components/page-templates/style.scss";
 @import "./components/table/style.scss";
 @import "./components/editor/style.scss";
-@import "./components/create-template-part-modal/style.scss";
 @import "./components/welcome-guide/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/save-hub/style.scss";

diff --git a/packages/edit-site/src/utils/template-part-create.js b/packages/edit-site/src/utils/template-part-create.js
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { paramCase as kebabCase } from 'change-case';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_PART_POST_TYPE } from './constants';
-
-export const useExistingTemplateParts = () => {
-	return useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecords(
-				'postType',
-				TEMPLATE_PART_POST_TYPE,
-				{
-					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';
-};

diff --git a/...nents/create-template-part-modal/index.js → ...nents/create-template-part-modal/index.js b/...nents/create-template-part-modal/index.js → ...nents/create-template-part-modal/index.js
@@ -19,7 +19,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
-import { store as editorStore } from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
@@ -28,15 +27,16 @@ import { serialize } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
+import { store as editorStore } from '../../store';
 import {
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
-} from '../../utils/constants';
+} from '../../store/constants';
 import {
 	useExistingTemplateParts,
 	getUniqueTemplatePartTitle,
 	getCleanTemplatePartSlug,
-} from '../../utils/template-part-create';
+} from './utils';
 
 export default function CreateTemplatePartModal( {
 	modalTitle,
@@ -52,7 +52,7 @@ export default function CreateTemplatePartModal( {
 		<Modal
 			title={ modalTitle || defaultModalTitle }
 			onRequestClose={ restProps.closeModal }
-			overlayClassName="edit-site-create-template-part-modal"
+			overlayClassName="editor-create-template-part-modal"
 		>
 			<CreateTemplatePartModalContents { ...restProps } />
 		</Modal>
@@ -142,13 +142,13 @@ export function CreateTemplatePartModalContents( {
 				/>
 				<BaseControl
 					label={ __( 'Area' ) }
-					id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-					className="edit-site-create-template-part-modal__area-base-control"
+					id={ `editor-create-template-part-modal__area-selection-${ instanceId }` }
+					className="editor-create-template-part-modal__area-base-control"
 				>
 					<RadioGroup
 						label={ __( 'Area' ) }
-						className="edit-site-create-template-part-modal__area-radio-group"
-						id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
+						className="editor-create-template-part-modal__area-radio-group"
+						id={ `editor-create-template-part-modal__area-selection-${ instanceId }` }
 						onChange={ setArea }
 						checked={ area }
 					>
@@ -157,18 +157,18 @@ export function CreateTemplatePartModalContents( {
 								<Radio
 									key={ label }
 									value={ value }
-									className="edit-site-create-template-part-modal__area-radio"
+									className="editor-create-template-part-modal__area-radio"
 								>
 									<Flex align="start" justify="start">
 										<FlexItem>
 											<Icon icon={ icon } />
 										</FlexItem>
-										<FlexBlock className="edit-site-create-template-part-modal__option-label">
+										<FlexBlock className="editor-create-template-part-modal__option-label">
 											{ label }
 											<div>{ description }</div>
 										</FlexBlock>
 
-										<FlexItem className="edit-site-create-template-part-modal__checkbox">
+										<FlexItem className="editor-create-template-part-modal__checkbox">
 											{ area === value && (
 												<Icon icon={ check } />
 											) }

diff --git a/...nts/create-template-part-modal/style.scss → ...nts/create-template-part-modal/style.scss b/...nts/create-template-part-modal/style.scss → ...nts/create-template-part-modal/style.scss
@@ -1,5 +1,5 @@
-.edit-site-create-template-part-modal {
-	z-index: z-index(".edit-site-create-template-part-modal");
+.editor-create-template-part-modal {
+	z-index: z-index(".editor-create-template-part-modal");
 
 	.components-modal__frame {
 		@include break-small {
@@ -8,12 +8,12 @@
 	}
 }
 
-.edit-site-create-template-part-modal__area-radio-group {
+.editor-create-template-part-modal__area-radio-group {
 	width: 100%;
 	border: $border-width solid $gray-700;
 	border-radius: 2px;
 
-	.components-button.edit-site-create-template-part-modal__area-radio {
+	.components-button.editor-create-template-part-modal__area-radio {
 		display: block;
 		width: 100%;
 		height: 100%;
@@ -46,12 +46,12 @@
 			color: $gray-900;
 			cursor: auto;
 
-			.edit-site-create-template-part-modal__option-label div {
+			.editor-create-template-part-modal__option-label div {
 				color: $gray-600;
 			}
 		}
 
-		.edit-site-create-template-part-modal__option-label {
+		.editor-create-template-part-modal__option-label {
 			padding-top: $grid-unit-05;
 			white-space: normal;
 
@@ -61,7 +61,7 @@
 			}
 		}
 
-		.edit-site-create-template-part-modal__checkbox {
+		.editor-create-template-part-modal__checkbox {
 			margin-left: auto;
 			min-width: $grid-unit-30;
 		}

diff --git a/...te/src/utils/test/template-part-create.js → .../create-template-part-modal/test/utils.js b/...te/src/utils/test/template-part-create.js → .../create-template-part-modal/test/utils.js
@@ -1,10 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	getUniqueTemplatePartTitle,
-	getCleanTemplatePartSlug,
-} from '../template-part-create';
+import { getUniqueTemplatePartTitle, getCleanTemplatePartSlug } from '../utils';
 
 describe( 'getUniqueTemplatePartTitle', () => {
 	it( 'should return the title if it is unique', () => {