@wordpress/editor 13.34.0 → 14.0.0

package/src/components/post-sticky/panel.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+import PostStickyForm from './';
+import PostStickyCheck from './check';
+
+export function PostStickyPanel() {
+	return (
+		<PostStickyCheck>
+			<PostPanelRow>
+				<PostStickyForm />
+			</PostPanelRow>
+		</PostStickyCheck>
+	);
+}
+
+export default PostStickyPanel;

package/src/components/post-sticky/style.scss

@@ -0,0 +1,3 @@
+.editor-post-sticky__toggle-control {
+	padding: 6px 12px;
+}

package/src/components/post-template/block-theme.js

@@ -78,6 +78,7 @@ export default function BlockThemeControl( { id } ) {
 			toggleProps={ {
 				size: 'compact',
 				variant: 'tertiary',
+				tooltipPosition: 'middle left',
 			} }
 			label={ __( 'Template options' ) }
 			text={ decodeEntities( template.title ) }

package/src/components/post-template/classic-theme.js

@@ -55,6 +55,14 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 	);
 }
 
+/**
+ * Renders the dropdown content for selecting a post template.
+ *
+ * @param {Object}   props         The component props.
+ * @param {Function} props.onClose The function to close the dropdown.
+ *
+ * @return {JSX.Element} The rendered dropdown content.
+ */
 function PostTemplateDropdownContent( { onClose } ) {
 	const allowSwitchingTemplate = useAllowSwitchingTemplates();
 	const {
@@ -216,4 +224,11 @@ function ClassicThemeControl() {
 	);
 }
 
+/**
+ * Provides a dropdown menu for selecting and managing post templates.
+ *
+ * The dropdown menu includes a button for toggling the menu, a list of available templates, and options for creating and editing templates.
+ *
+ * @return {JSX.Element} The rendered ClassicThemeControl component.
+ */
 export default ClassicThemeControl;

package/src/components/post-template/panel.js

@@ -13,6 +13,11 @@ import ClassicThemeControl from './classic-theme';
 import BlockThemeControl from './block-theme';
 import PostPanelRow from '../post-panel-row';
 
+/**
+ * Displays the template controls based on the current editor settings and user permissions.
+ *
+ * @return {JSX.Element|null} The rendered PostTemplatePanel component.
+ */
 export default function PostTemplatePanel() {
 	const { templateId, isBlockTheme } = useSelect( ( select ) => {
 		const { getCurrentTemplateId, getEditorSettings } =

package/src/components/post-template/style.scss

@@ -20,14 +20,6 @@
 	.block-editor-block-patterns-list__list-item {
 		break-inside: avoid-column;
 	}
-
-	.block-editor-block-patterns-list__item {
-		// Avoid to override the BlockPatternList component
-		// default hover and focus styles.
-		&:not(:focus):not(:hover) .block-editor-block-preview__container {
-			box-shadow: 0 0 0 1px $gray-300;
-		}
-	}
 }
 
 .editor-post-template__dropdown {

package/src/components/post-text-editor/index.js

@@ -19,6 +19,11 @@ import { VisuallyHidden } from '@wordpress/components';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Displays the Post Text Editor along with content in Visual and Text mode.
+ *
+ * @return {JSX.Element|null} The rendered PostTextEditor component.
+ */
 export default function PostTextEditor() {
 	const instanceId = useInstanceId( PostTextEditor );
 	const { content, blocks, type, id } = useSelect( ( select ) => {

package/src/components/post-title/index.js

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -185,7 +184,7 @@ function PostTitle( _, forwardedRef ) {
 
 	// The wp-block className is important for editor styles.
 	// This same block is used in both the visual and the code editor.
-	const className = classnames( DEFAULT_CLASSNAMES, {
+	const className = clsx( DEFAULT_CLASSNAMES, {
 		'is-selected': isSelected,
 		'has-fixed-toolbar': hasFixedToolbar,
 	} );
@@ -211,4 +210,12 @@ function PostTitle( _, forwardedRef ) {
 	);
 }
 
+/**
+ * Renders the `PostTitle` component.
+ *
+ * @param {Object}  _            Unused parameter.
+ * @param {Element} forwardedRef Forwarded ref for the component.
+ *
+ * @return {Component} The rendered PostTitle component.
+ */
 export default forwardRef( PostTitle );

package/src/components/post-title/index.native.js

@@ -18,11 +18,67 @@ import { store as blockEditorStore, RichText } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
+/** @typedef {import('./types').RichTextValue} RichTextValue */
+
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
+/**
+ * Inserts content with title
+ *
+ * This function processes the given content and title, updating the title
+ * and content based on certain conditions. If the content is an array of
+ * blocks, it will check the first block for a heading or paragraph to use
+ * as the title. If the content is a string, it will strip HTML and update
+ * the title and content accordingly.
+ *
+ * @param {string}         title           The post title.
+ * @param {Array | string} content         The content to be processed. It can be an array of blocks or a string.
+ * @param {Function}       onUpdateTitle   Callback function to update the title.
+ * @param {Function}       onUpdateContent Callback function to update the content.
+ * @param {RichTextValue}  value           The initial value object, default is an object with empty text.
+ */
+export function insertContentWithTitle(
+	title,
+	content,
+	onUpdateTitle,
+	onUpdateContent,
+	value = create( { text: '' } )
+) {
+	if ( ! content.length ) {
+		return;
+	}
+
+	if ( typeof content !== 'string' ) {
+		const [ firstBlock ] = content;
+
+		if (
+			! title &&
+			( firstBlock.name === 'core/heading' ||
+				firstBlock.name === 'core/paragraph' )
+		) {
+			// Strip HTML to avoid unwanted HTML being added to the title.
+			// In the majority of cases it is assumed that HTML in the title
+			// is undesirable.
+			const contentNoHTML = stripHTML( firstBlock.attributes.content );
+			onUpdateTitle( contentNoHTML );
+			onUpdateContent( content.slice( 1 ) );
+		} else {
+			onUpdateContent( content );
+		}
+	} else {
+		// Strip HTML to avoid unwanted HTML being added to the title.
+		// In the majority of cases it is assumed that HTML in the title
+		// is undesirable.
+		const contentNoHTML = stripHTML( content );
+
+		const newValue = insert( value, create( { html: contentNoHTML } ) );
+		onUpdateTitle( toHTMLString( { value: newValue } ) );
+	}
+}
+
 class PostTitle extends Component {
 	constructor( props ) {
 		super( props );
@@ -59,45 +115,24 @@ class PostTitle extends Component {
 	}
 
 	onPaste( { value, plainText, html } ) {
-		const { title, onInsertBlockAfter, onUpdate } = this.props;
+		const {
+			title,
+			onInsertBlockAfter: onInsertBlocks,
+			onUpdate,
+		} = this.props;
 
 		const content = pasteHandler( {
 			HTML: html,
 			plainText,
 		} );
 
-		if ( ! content.length ) {
-			return;
-		}
-
-		if ( typeof content !== 'string' ) {
-			const [ firstBlock ] = content;
-
-			if (
-				! title &&
-				( firstBlock.name === 'core/heading' ||
-					firstBlock.name === 'core/paragraph' )
-			) {
-				// Strip HTML to avoid unwanted HTML being added to the title.
-				// In the majority of cases it is assumed that HTML in the title
-				// is undesirable.
-				const contentNoHTML = stripHTML(
-					firstBlock.attributes.content
-				);
-				onUpdate( contentNoHTML );
-				onInsertBlockAfter( content.slice( 1 ) );
-			} else {
-				onInsertBlockAfter( content );
-			}
-		} else {
-			// Strip HTML to avoid unwanted HTML being added to the title.
-			// In the majority of cases it is assumed that HTML in the title
-			// is undesirable.
-			const contentNoHTML = stripHTML( content );
-
-			const newValue = insert( value, create( { html: contentNoHTML } ) );
-			onUpdate( toHTMLString( { value: newValue } ) );
-		}
+		insertContentWithTitle(
+			title,
+			content,
+			onUpdate,
+			onInsertBlocks,
+			value
+		);
 	}
 
 	setRef( richText ) {
@@ -166,7 +201,7 @@ class PostTitle extends Component {
 				<RichText.Raw
 					ref={ this.setRef }
 					accessibilityLabel={ this.getTitle( title, postType ) }
-					tagName={ 'p' }
+					tagName="p"
 					tagsToEliminate={ [ 'strong' ] }
 					unstableOnFocus={ this.props.onSelect }
 					onBlur={ this.props.onBlur } // Always assign onBlur as a props.
@@ -174,7 +209,7 @@ class PostTitle extends Component {
 					styles={ styles }
 					fontSize={ 24 }
 					lineHeight={ 1 }
-					fontWeight={ 'bold' }
+					fontWeight="bold"
 					deleteEnter
 					onChange={ ( value ) => {
 						this.props.onUpdate( value );

package/src/components/post-title/post-title-raw.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,6 +20,14 @@ import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';
 import usePostTitleFocus from './use-post-title-focus';
 import usePostTitle from './use-post-title';
 
+/**
+ * Renders a raw post title input field.
+ *
+ * @param {Object}  _            Unused parameter.
+ * @param {Element} forwardedRef Reference to the component's DOM node.
+ *
+ * @return {Component} The rendered component.
+ */
 function PostTitleRaw( _, forwardedRef ) {
 	const { placeholder, hasFixedToolbar } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -51,7 +59,7 @@ function PostTitleRaw( _, forwardedRef ) {
 
 	// The wp-block className is important for editor styles.
 	// This same block is used in both the visual and the code editor.
-	const className = classnames( DEFAULT_CLASSNAMES, {
+	const className = clsx( DEFAULT_CLASSNAMES, {
 		'is-selected': isSelected,
 		'has-fixed-toolbar': hasFixedToolbar,
 		'is-raw-text': true,

package/src/components/post-title/use-post-title-focus.js

@@ -9,6 +9,13 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Custom hook that manages the focus behavior of the post title input field.
+ *
+ * @param {Element} forwardedRef - The forwarded ref for the input field.
+ *
+ * @return {Object} - The ref object.
+ */
 export default function usePostTitleFocus( forwardedRef ) {
 	const ref = useRef();
 

package/src/components/post-title/use-post-title.js

@@ -7,6 +7,11 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Custom hook for managing the post title in the editor.
+ *
+ * @return {Object} An object containing the current title and a function to update the title.
+ */
 export default function usePostTitle() {
 	const { editPost } = useDispatch( editorStore );
 	const { title } = useSelect( ( select ) => {

package/src/components/post-transform-panel/hooks.js

@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { EXCLUDED_PATTERN_SOURCES, PATTERN_TYPES } =
+	unlock( patternsPrivateApis );
+
+function injectThemeAttributeInBlockTemplateContent(
+	block,
+	currentThemeStylesheet
+) {
+	block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+		return injectThemeAttributeInBlockTemplateContent(
+			innerBlock,
+			currentThemeStylesheet
+		);
+	} );
+
+	if (
+		block.name === 'core/template-part' &&
+		block.attributes.theme === undefined
+	) {
+		block.attributes.theme = currentThemeStylesheet;
+	}
+	return block;
+}
+
+/**
+ * Filter all patterns and return only the ones that are compatible with the current template.
+ *
+ * @param {Array}  patterns An array of patterns.
+ * @param {Object} template The current template.
+ * @return {Array} Array of patterns that are compatible with the current template.
+ */
+function filterPatterns( patterns, template ) {
+	// Filter out duplicates.
+	const filterOutDuplicatesByName = ( currentItem, index, items ) =>
+		index === items.findIndex( ( item ) => currentItem.name === item.name );
+
+	// Filter out core/directory patterns not included in theme.json.
+	const filterOutExcludedPatternSources = ( pattern ) =>
+		! EXCLUDED_PATTERN_SOURCES.includes( pattern.source );
+
+	// Looks for patterns that have the same template type as the current template,
+	// or have a block type that matches the current template area.
+	const filterCompatiblePatterns = ( pattern ) =>
+		pattern.templateTypes?.includes( template.slug ) ||
+		pattern.blockTypes?.includes( 'core/template-part/' + template.area );
+
+	return patterns.filter( ( pattern, index, items ) => {
+		return (
+			filterOutDuplicatesByName( pattern, index, items ) &&
+			filterOutExcludedPatternSources( pattern ) &&
+			filterCompatiblePatterns( pattern )
+		);
+	} );
+}
+
+function preparePatterns( patterns, currentThemeStylesheet ) {
+	return patterns.map( ( pattern ) => ( {
+		...pattern,
+		keywords: pattern.keywords || [],
+		type: PATTERN_TYPES.theme,
+		blocks: parse( pattern.content, {
+			__unstableSkipMigrationLogs: true,
+		} ).map( ( block ) =>
+			injectThemeAttributeInBlockTemplateContent(
+				block,
+				currentThemeStylesheet
+			)
+		),
+	} ) );
+}
+
+export function useAvailablePatterns( template ) {
+	const { blockPatterns, restBlockPatterns, currentThemeStylesheet } =
+		useSelect( ( select ) => {
+			const { getEditorSettings } = select( editorStore );
+			const settings = getEditorSettings();
+
+			return {
+				blockPatterns:
+					settings.__experimentalAdditionalBlockPatterns ??
+					settings.__experimentalBlockPatterns,
+				restBlockPatterns: select( coreStore ).getBlockPatterns(),
+				currentThemeStylesheet:
+					select( coreStore ).getCurrentTheme().stylesheet,
+			};
+		}, [] );
+
+	return useMemo( () => {
+		const mergedPatterns = [
+			...( blockPatterns || [] ),
+			...( restBlockPatterns || [] ),
+		];
+		const filteredPatterns = filterPatterns( mergedPatterns, template );
+		return preparePatterns(
+			filteredPatterns,
+			template,
+			currentThemeStylesheet
+		);
+	}, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] );
+}

package/src/components/post-transform-panel/index.js

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useAsyncList } from '@wordpress/compose';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { useAvailablePatterns } from './hooks';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../store/constants';
+
+function TemplatesList( { availableTemplates, onSelect } ) {
+	const shownTemplates = useAsyncList( availableTemplates );
+	if ( ! availableTemplates || availableTemplates?.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<BlockPatternsList
+			label={ __( 'Templates' ) }
+			blockPatterns={ availableTemplates }
+			shownPatterns={ shownTemplates }
+			onClickPattern={ onSelect }
+			showTitlesAsTooltip
+		/>
+	);
+}
+
+function PostTransform() {
+	const { record, postType, postId } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const type = getCurrentPostType();
+		const id = getCurrentPostId();
+		return {
+			postType: type,
+			postId: id,
+			record: getEditedEntityRecord( 'postType', type, id ),
+		};
+	}, [] );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const availablePatterns = useAvailablePatterns( record );
+	const onTemplateSelect = async ( selectedTemplate ) => {
+		await editEntityRecord( 'postType', postType, postId, {
+			blocks: selectedTemplate.blocks,
+			content: serialize( selectedTemplate.blocks ),
+		} );
+	};
+	if ( ! availablePatterns?.length ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			title={ __( 'Design' ) }
+			initialOpen={ record.type === TEMPLATE_PART_POST_TYPE }
+		>
+			<TemplatesList
+				availableTemplates={ availablePatterns }
+				onSelect={ onTemplateSelect }
+			/>
+		</PanelBody>
+	);
+}
+
+export default function PostTransformPanel() {
+	const { postType } = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		return {
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+
+	if (
+		! [ TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE ].includes( postType )
+	) {
+		return null;
+	}
+
+	return <PostTransform />;
+}

package/src/components/post-type-support-check/index.js

@@ -27,7 +27,7 @@ function PostTypeSupportCheck( { children, supportKeys } ) {
 		const { getPostType } = select( coreStore );
 		return getPostType( getEditedPostAttribute( 'type' ) );
 	}, [] );
-	let isSupported = true;
+	let isSupported = !! postType;
 	if ( postType ) {
 		isSupported = (
 			Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]

package/src/components/post-type-support-check/test/index.js

@@ -29,7 +29,7 @@ function setupUseSelectMock( postType ) {
 }
 
 describe( 'PostTypeSupportCheck', () => {
-	it( 'renders its children when post type is not known', () => {
+	it( 'does not render its children when post type is not known', () => {
 		setupUseSelectMock( undefined );
 
 		const { container } = render(
@@ -38,7 +38,7 @@ describe( 'PostTypeSupportCheck', () => {
 			</PostTypeSupportCheck>
 		);
 
-		expect( container ).toHaveTextContent( 'Supported' );
+		expect( container ).not.toHaveTextContent( 'Supported' );
 	} );
 
 	it( 'does not render its children when post type is known and not supports', () => {

package/src/components/post-url/check.js

@@ -9,6 +9,14 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Check if the post URL is valid and visible.
+ *
+ * @param {Object}  props          The component props.
+ * @param {Element} props.children The child components.
+ *
+ * @return {Component|null} The child components if the post URL is valid and visible, otherwise null.
+ */
 export default function PostURLCheck( { children } ) {
 	const isVisible = useSelect( ( select ) => {
 		const postTypeSlug = select( editorStore ).getCurrentPostType();

package/src/components/post-url/index.js

@@ -21,37 +21,54 @@ import { useCopyToClipboard } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { usePostURLLabel } from './label';
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the `PostURL` component.
+ *
+ * @example
+ * ```jsx
+ * <PostURL />
+ * ```
+ *
+ * @param {Function} onClose Callback function to be executed when the popover is closed.
+ *
+ * @return {Component} The rendered PostURL component.
+ */
 export default function PostURL( { onClose } ) {
-	const { isEditable, postSlug, postLink, permalinkPrefix, permalinkSuffix } =
-		useSelect( ( select ) => {
-			const post = select( editorStore ).getCurrentPost();
-			const postTypeSlug = select( editorStore ).getCurrentPostType();
-			const postType = select( coreStore ).getPostType( postTypeSlug );
-			const permalinkParts = select( editorStore ).getPermalinkParts();
-			const hasPublishAction =
-				post?._links?.[ 'wp:action-publish' ] ?? false;
+	const {
+		isEditable,
+		postSlug,
+		postLink,
+		permalinkPrefix,
+		permalinkSuffix,
+		permalink,
+	} = useSelect( ( select ) => {
+		const post = select( editorStore ).getCurrentPost();
+		const postTypeSlug = select( editorStore ).getCurrentPostType();
+		const postType = select( coreStore ).getPostType( postTypeSlug );
+		const permalinkParts = select( editorStore ).getPermalinkParts();
+		const hasPublishAction = post?._links?.[ 'wp:action-publish' ] ?? false;
 
-			return {
-				isEditable:
-					select( editorStore ).isPermalinkEditable() &&
-					hasPublishAction,
-				postSlug: safeDecodeURIComponent(
-					select( editorStore ).getEditedPostSlug()
-				),
-				viewPostLabel: postType?.labels.view_item,
-				postLink: post.link,
-				permalinkPrefix: permalinkParts?.prefix,
-				permalinkSuffix: permalinkParts?.suffix,
-			};
-		}, [] );
+		return {
+			isEditable:
+				select( editorStore ).isPermalinkEditable() && hasPublishAction,
+			postSlug: safeDecodeURIComponent(
+				select( editorStore ).getEditedPostSlug()
+			),
+			viewPostLabel: postType?.labels.view_item,
+			postLink: post.link,
+			permalinkPrefix: permalinkParts?.prefix,
+			permalinkSuffix: permalinkParts?.suffix,
+			permalink: safeDecodeURIComponent(
+				select( editorStore ).getPermalink()
+			),
+		};
+	}, [] );
 	const { editPost } = useDispatch( editorStore );
 	const { createNotice } = useDispatch( noticesStore );
 	const [ forceEmptyField, setForceEmptyField ] = useState( false );
-	const postUrlLabel = usePostURLLabel();
-	const copyButtonRef = useCopyToClipboard( postUrlLabel, () => {
+	const copyButtonRef = useCopyToClipboard( permalink, () => {
 		createNotice( 'info', __( 'Copied URL to clipboard.' ), {
 			isDismissible: true,
 			type: 'snackbar',