@wordpress/editor 13.24.0 → 13.25.0

package/src/components/post-template/swap-template-button.js

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState, useCallback } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { MenuItem, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
+import { useAsyncList } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { useAvailableTemplates, useEditedPostContext } from './hooks';
+
+export default function SwapTemplateButton( { onClick } ) {
+	const [ showModal, setShowModal ] = useState( false );
+	const availableTemplates = useAvailableTemplates();
+	const onClose = useCallback( () => {
+		setShowModal( false );
+	}, [] );
+	const { postType, postId } = useEditedPostContext();
+	const { editEntityRecord } = useDispatch( coreStore );
+	if ( ! availableTemplates?.length ) {
+		return null;
+	}
+	const onTemplateSelect = async ( template ) => {
+		editEntityRecord(
+			'postType',
+			postType,
+			postId,
+			{ template: template.name },
+			{ undoIgnore: true }
+		);
+		onClose(); // Close the template suggestions modal first.
+		onClick();
+	};
+	return (
+		<>
+			<MenuItem onClick={ () => setShowModal( true ) }>
+				{ __( 'Swap template' ) }
+			</MenuItem>
+			{ showModal && (
+				<Modal
+					title={ __( 'Choose a template' ) }
+					onRequestClose={ onClose }
+					overlayClassName="editor-post-template__swap-template-modal"
+					isFullScreen
+				>
+					<div className="editor-post-template__swap-template-modal-content">
+						<TemplatesList onSelect={ onTemplateSelect } />
+					</div>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+function TemplatesList( { onSelect } ) {
+	const availableTemplates = useAvailableTemplates();
+	const templatesAsPatterns = useMemo(
+		() =>
+			availableTemplates.map( ( template ) => ( {
+				name: template.slug,
+				blocks: parse( template.content.raw ),
+				title: decodeEntities( template.title.rendered ),
+				id: template.id,
+			} ) ),
+		[ availableTemplates ]
+	);
+	const shownTemplates = useAsyncList( templatesAsPatterns );
+	return (
+		<BlockPatternsList
+			label={ __( 'Templates' ) }
+			blockPatterns={ templatesAsPatterns }
+			shownPatterns={ shownTemplates }
+			onClickPattern={ onSelect }
+		/>
+	);
+}

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

@@ -155,7 +155,6 @@ class PostTitle extends Component {
 					tagsToEliminate={ [ 'strong' ] }
 					unstableOnFocus={ this.props.onSelect }
 					onBlur={ this.props.onBlur } // Always assign onBlur as a props.
-					multiline={ false }
 					style={ titleStyles }
 					styles={ styles }
 					fontSize={ 24 }

package/src/components/preview-dropdown/index.js

@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+	Icon,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { check, desktop, mobile, tablet, external } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostPreviewButton from '../post-preview-button';
+
+export default function PreviewDropdown( {
+	showIconLabels,
+	forceIsAutosaveable,
+	disabled,
+} ) {
+	const { deviceType, homeUrl, isTemplate, isViewable } = useSelect(
+		( select ) => {
+			const { getDeviceType, getCurrentPostType } = select( editorStore );
+			const { getUnstableBase, getPostType } = select( coreStore );
+			const _currentPostType = getCurrentPostType();
+			return {
+				deviceType: getDeviceType(),
+				homeUrl: getUnstableBase()?.home,
+				isTemplate: _currentPostType === 'wp_template',
+				isViewable: getPostType( _currentPostType )?.viewable ?? false,
+			};
+		},
+		[]
+	);
+	const { setDeviceType } = useDispatch( editorStore );
+	const isMobile = useViewportMatch( 'medium', '<' );
+	if ( isMobile ) return null;
+
+	const popoverProps = {
+		placement: 'bottom-end',
+	};
+	const toggleProps = {
+		className: 'editor-preview-dropdown__toggle',
+		size: 'compact',
+		showTooltip: ! showIconLabels,
+		disabled,
+		__experimentalIsFocusable: disabled,
+	};
+	const menuProps = {
+		'aria-label': __( 'View options' ),
+	};
+
+	const deviceIcons = {
+		mobile,
+		tablet,
+		desktop,
+	};
+
+	return (
+		<DropdownMenu
+			className="editor-preview-dropdown"
+			popoverProps={ popoverProps }
+			toggleProps={ toggleProps }
+			menuProps={ menuProps }
+			icon={ deviceIcons[ deviceType.toLowerCase() ] }
+			label={ __( 'View' ) }
+			disableOpenOnArrowDown={ disabled }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => setDeviceType( 'Desktop' ) }
+							icon={ deviceType === 'Desktop' && check }
+						>
+							{ __( 'Desktop' ) }
+						</MenuItem>
+						<MenuItem
+							onClick={ () => setDeviceType( 'Tablet' ) }
+							icon={ deviceType === 'Tablet' && check }
+						>
+							{ __( 'Tablet' ) }
+						</MenuItem>
+						<MenuItem
+							onClick={ () => setDeviceType( 'Mobile' ) }
+							icon={ deviceType === 'Mobile' && check }
+						>
+							{ __( 'Mobile' ) }
+						</MenuItem>
+					</MenuGroup>
+					{ isTemplate && (
+						<MenuGroup>
+							<MenuItem
+								href={ homeUrl }
+								target="_blank"
+								icon={ external }
+								onClick={ onClose }
+							>
+								{ __( 'View site' ) }
+								<VisuallyHidden as="span">
+									{
+										/* translators: accessibility text */
+										__( '(opens in a new tab)' )
+									}
+								</VisuallyHidden>
+							</MenuItem>
+						</MenuGroup>
+					) }
+					{ isViewable && (
+						<MenuGroup>
+							<PostPreviewButton
+								className="editor-preview-dropdown__button-external"
+								role="menuitem"
+								forceIsAutosaveable={ forceIsAutosaveable }
+								textContent={
+									<>
+										{ __( 'Preview in new tab' ) }
+										<Icon icon={ external } />
+									</>
+								}
+								onPreview={ onClose }
+							/>
+						</MenuGroup>
+					) }
+				</>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/preview-dropdown/style.scss

@@ -0,0 +1,5 @@
+.editor-preview-dropdown__button-external {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+}

package/src/components/provider/index.js

@@ -9,7 +9,6 @@ import {
 	BlockEditorProvider,
 	BlockContextProvider,
 	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
@@ -23,73 +22,13 @@ import { store as editorStore } from '../../store';
 import useBlockEditorSettings from './use-block-editor-settings';
 import { unlock } from '../../lock-unlock';
 import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
-import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
+import NavigationBlockEditingMode from './navigation-block-editing-mode';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
 
 const noop = () => {};
 
-/**
- * For the Navigation block editor, we need to force the block editor to contentOnly for that block.
- *
- * Set block editing mode to contentOnly when entering Navigation focus mode.
- * this ensures that non-content controls on the block will be hidden and thus
- * the user can focus on editing the Navigation Menu content only.
- *
- * @param {string} navigationBlockClientId ClientId.
- */
-function useForceFocusModeForNavigation( navigationBlockClientId ) {
-	const { setBlockEditingMode, unsetBlockEditingMode } =
-		useDispatch( blockEditorStore );
-
-	useEffect( () => {
-		if ( ! navigationBlockClientId ) {
-			return;
-		}
-
-		setBlockEditingMode( navigationBlockClientId, 'contentOnly' );
-
-		return () => {
-			unsetBlockEditingMode( navigationBlockClientId );
-		};
-	}, [
-		navigationBlockClientId,
-		unsetBlockEditingMode,
-		setBlockEditingMode,
-	] );
-}
-
-/**
- * Helper method to extract the post content block types from a template.
- *
- * @param {Array} blocks Template blocks.
- *
- * @return {Array} Flattened object.
- */
-function extractPageContentBlockTypesFromTemplateBlocks( blocks ) {
-	const result = [];
-	for ( let i = 0; i < blocks.length; i++ ) {
-		// Since the Query Block could contain PAGE_CONTENT_BLOCK_TYPES block types,
-		// we skip it because we only want to render stand-alone page content blocks in the block list.
-		if ( blocks[ i ].name === 'core/query' ) {
-			continue;
-		}
-		if ( PAGE_CONTENT_BLOCK_TYPES.includes( blocks[ i ].name ) ) {
-			result.push( createBlock( blocks[ i ].name ) );
-		}
-		if ( blocks[ i ].innerBlocks.length ) {
-			result.push(
-				...extractPageContentBlockTypesFromTemplateBlocks(
-					blocks[ i ].innerBlocks
-				)
-			);
-		}
-	}
-
-	return result;
-}
-
 /**
  * Depending on the post, template and template mode,
  * returns the appropriate blocks and change handlers for the block editor provider.
@@ -111,7 +50,7 @@ function useBlockEditorProps( post, template, mode ) {
 		useEntityBlockEditor( 'postType', template?.type, {
 			id: template?.id,
 		} );
-	const blocks = useMemo( () => {
+	const maybeNavigationBlocks = useMemo( () => {
 		if ( post.type === 'wp_navigation' ) {
 			return [
 				createBlock( 'core/navigation', {
@@ -123,33 +62,13 @@ function useBlockEditorProps( post, template, mode ) {
 				} ),
 			];
 		}
+	}, [ post.type, post.id ] );
 
-		if ( mode === 'post-only' ) {
-			const postContentBlocks =
-				extractPageContentBlockTypesFromTemplateBlocks(
-					templateBlocks
-				);
-			return [
-				createBlock(
-					'core/group',
-					{
-						layout: { type: 'constrained' },
-						style: {
-							spacing: {
-								margin: {
-									top: '4em', // Mimics the post editor.
-								},
-							},
-						},
-					},
-					postContentBlocks.length
-						? postContentBlocks
-						: [
-								createBlock( 'core/post-title' ),
-								createBlock( 'core/post-content' ),
-						  ]
-				),
-			];
+	// It is important that we don't create a new instance of blocks on every change
+	// We should only create a new instance if the blocks them selves change, not a dependency of them.
+	const blocks = useMemo( () => {
+		if ( maybeNavigationBlocks ) {
+			return maybeNavigationBlocks;
 		}
 
 		if ( rootLevelPost === 'template' ) {
@@ -157,21 +76,14 @@ function useBlockEditorProps( post, template, mode ) {
 		}
 
 		return postBlocks;
-	}, [
-		templateBlocks,
-		postBlocks,
-		rootLevelPost,
-		post.type,
-		post.id,
-		mode,
-	] );
+	}, [ maybeNavigationBlocks, rootLevelPost, templateBlocks, postBlocks ] );
+
+	// Handle fallback to postBlocks outside of the above useMemo, to ensure
+	// that constructed block templates that call `createBlock` are not generated
+	// too frequently. This ensures that clientIds are stable.
 	const disableRootLevelChanges =
 		( !! template && mode === 'template-locked' ) ||
-		post.type === 'wp_navigation' ||
-		mode === 'post-only';
-	const navigationBlockClientId =
-		post.type === 'wp_navigation' && blocks && blocks[ 0 ]?.clientId;
-	useForceFocusModeForNavigation( navigationBlockClientId );
+		post.type === 'wp_navigation';
 	if ( disableRootLevelChanges ) {
 		return [ blocks, noop, noop ];
 	}
@@ -252,11 +164,12 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			updatePostLock,
 			setupEditor,
 			updateEditorSettings,
-			__experimentalTearDownEditor,
-		} = useDispatch( editorStore );
+			setCurrentTemplateId,
+			setEditedPost,
+			setRenderingMode,
+		} = unlock( useDispatch( editorStore ) );
 		const { createWarningNotice } = useDispatch( noticesStore );
 
-		// Initialize and tear down the editor.
 		// Ideally this should be synced on each change and not just something you do once.
 		useLayoutEffect( () => {
 			// Assume that we don't need to initialize in the case of an error recovery.
@@ -282,17 +195,28 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 					}
 				);
 			}
-
-			return () => {
-				__experimentalTearDownEditor();
-			};
 		}, [] );
 
+		// Synchronizes the active post with the state
+		useEffect( () => {
+			setEditedPost( post.type, post.id );
+		}, [ post.type, post.id ] );
+
 		// Synchronize the editor settings as they change.
 		useEffect( () => {
 			updateEditorSettings( settings );
 		}, [ settings, updateEditorSettings ] );
 
+		// Synchronizes the active template with the state.
+		useEffect( () => {
+			setCurrentTemplateId( template?.id );
+		}, [ template?.id, setCurrentTemplateId ] );
+
+		// Sets the right rendering mode when loading the editor.
+		useEffect( () => {
+			setRenderingMode( settings.defaultRenderingMode ?? 'post-only' );
+		}, [ settings.defaultRenderingMode, setRenderingMode ] );
+
 		if ( ! isReady ) {
 			return null;
 		}
@@ -315,9 +239,12 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 						>
 							{ children }
 							<PatternsMenuItems />
-							{ [ 'post-only', 'template-locked' ].includes(
-								mode
-							) && <DisableNonPageContentBlocks /> }
+							{ mode === 'template-locked' && (
+								<DisableNonPageContentBlocks />
+							) }
+							{ type === 'wp_navigation' && (
+								<NavigationBlockEditingMode />
+							) }
 						</BlockEditorProviderComponent>
 					</BlockContextProvider>
 				</EntityProvider>

package/src/components/provider/index.native.js

@@ -27,6 +27,7 @@ import {
 	parse,
 	serialize,
 	getUnregisteredTypeHandlerName,
+	getBlockType,
 	createBlock,
 } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -35,6 +36,7 @@ import { applyFilters } from '@wordpress/hooks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { getGlobalStyles, getColorsAndGradients } from '@wordpress/components';
 import { NEW_BLOCK_TYPES } from '@wordpress/block-library';
+import { __ } from '@wordpress/i18n';
 
 const postTypeEntities = [
 	{ name: 'post', baseURL: '/wp/v2/posts' },
@@ -94,6 +96,7 @@ class NativeEditorProvider extends Component {
 	componentDidMount() {
 		const {
 			capabilities,
+			createErrorNotice,
 			locale,
 			hostAppNamespace,
 			updateEditorSettings,
@@ -136,17 +139,26 @@ class NativeEditorProvider extends Component {
 		this.subscriptionParentMediaAppend = subscribeMediaAppend(
 			( payload ) => {
 				const blockName = 'core/' + payload.mediaType;
-				const newBlock = createBlock( blockName, {
-					id: payload.mediaId,
-					[ payload.mediaType === 'image' ? 'url' : 'src' ]:
-						payload.mediaUrl,
-				} );
-
-				const indexAfterSelected = this.props.selectedBlockIndex + 1;
-				const insertionIndex =
-					indexAfterSelected || this.props.blockCount;
-
-				this.props.insertBlock( newBlock, insertionIndex );
+				const blockType = getBlockType( blockName );
+
+				if ( blockType && blockType?.name ) {
+					const newBlock = createBlock( blockType.name, {
+						id: payload.mediaId,
+						[ payload.mediaType === 'image' ? 'url' : 'src' ]:
+							payload.mediaUrl,
+					} );
+
+					const indexAfterSelected =
+						this.props.selectedBlockIndex + 1;
+					const insertionIndex =
+						indexAfterSelected || this.props.blockCount;
+
+					this.props.insertBlock( newBlock, insertionIndex );
+				} else {
+					createErrorNotice(
+						__( 'File type not supported as a media file.' )
+					);
+				}
 			}
 		);
 
@@ -389,7 +401,8 @@ const ComposedNativeProvider = compose( [
 			dispatch( blockEditorStore );
 		const { switchEditorMode } = dispatch( editPostStore );
 		const { addEntities, receiveEntityRecords } = dispatch( coreStore );
-		const { createSuccessNotice } = dispatch( noticesStore );
+		const { createSuccessNotice, createErrorNotice } =
+			dispatch( noticesStore );
 
 		return {
 			updateBlockEditorSettings: updateSettings,
@@ -397,6 +410,7 @@ const ComposedNativeProvider = compose( [
 			addEntities,
 			insertBlock,
 			createSuccessNotice,
+			createErrorNotice,
 			editTitle( title ) {
 				editPost( { title } );
 			},

package/src/components/provider/navigation-block-editing-mode.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * For the Navigation block editor, we need to force the block editor to contentOnly for that block.
+ *
+ * Set block editing mode to contentOnly when entering Navigation focus mode.
+ * this ensures that non-content controls on the block will be hidden and thus
+ * the user can focus on editing the Navigation Menu content only.
+ */
+
+export default function NavigationBlockEditingMode() {
+	// In the navigation block editor,
+	// the navigation block is the only root block.
+	const blockClientId = useSelect(
+		( select ) => select( blockEditorStore ).getBlockOrder()?.[ 0 ],
+		[]
+	);
+	const { setBlockEditingMode, unsetBlockEditingMode } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( ! blockClientId ) {
+			return;
+		}
+
+		setBlockEditingMode( blockClientId, 'contentOnly' );
+
+		return () => {
+			unsetBlockEditingMode( blockClientId );
+		};
+	}, [ blockClientId, unsetBlockEditingMode, setBlockEditingMode ] );
+}

package/src/components/provider/use-block-editor-settings.js

@@ -96,6 +96,8 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		pageOnFront,
 		pageForPosts,
 		userPatternCategories,
+		restBlockPatterns,
+		restBlockPatternCategories,
 	} = useSelect(
 		( select ) => {
 			const isWeb = Platform.OS === 'web';
@@ -105,6 +107,8 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				getEntityRecord,
 				getUserPatternCategories,
 				getEntityRecords,
+				getBlockPatterns,
+				getBlockPatternCategories,
 			} = select( coreStore );
 
 			const siteSettings = canUser( 'read', 'settings' )
@@ -127,6 +131,8 @@ function useBlockEditorSettings( settings, postType, postId ) {
 				pageOnFront: siteSettings?.page_on_front,
 				pageForPosts: siteSettings?.page_for_posts,
 				userPatternCategories: getUserPatternCategories(),
+				restBlockPatterns: getBlockPatterns(),
+				restBlockPatternCategories: getBlockPatternCategories(),
 			};
 		},
 		[ postType, postId ]
@@ -139,15 +145,6 @@ function useBlockEditorSettings( settings, postType, postId ) {
 		settings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
 		settings.__experimentalBlockPatternCategories; // WP 5.9
 
-	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
-		( select ) => ( {
-			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories:
-				select( coreStore ).getBlockPatternCategories(),
-		} ),
-		[]
-	);
-
 	const blockPatterns = useMemo(
 		() =>
 			[

package/src/hooks/index.js

@@ -3,3 +3,4 @@
  */
 import './custom-sources-backwards-compatibility';
 import './default-autocompleters';
+import './pattern-partial-syncing';

package/src/hooks/pattern-partial-syncing.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useBlockEditingMode } from '@wordpress/block-editor';
+import { hasBlockSupport } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+const {
+	PartialSyncingControls,
+	PATTERN_TYPES,
+	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
+} = unlock( patternsPrivateApis );
+
+/**
+ * Override the default edit UI to include a new block inspector control for
+ * assigning a partial syncing controls to supported blocks in the pattern editor.
+ * Currently, only the `core/paragraph` block is supported.
+ *
+ * @param {Component} BlockEdit Original component.
+ *
+ * @return {Component} Wrapped component.
+ */
+const withPartialSyncingControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const blockEditingMode = useBlockEditingMode();
+		const hasCustomFieldsSupport = hasBlockSupport(
+			props.name,
+			'__experimentalConnections',
+			false
+		);
+		const isEditingPattern = useSelect(
+			( select ) =>
+				select( editorStore ).getCurrentPostType() ===
+				PATTERN_TYPES.user,
+			[]
+		);
+
+		const shouldShowPartialSyncingControls =
+			hasCustomFieldsSupport &&
+			props.isSelected &&
+			isEditingPattern &&
+			blockEditingMode === 'default' &&
+			Object.keys( PARTIAL_SYNCING_SUPPORTED_BLOCKS ).includes(
+				props.name
+			);
+
+		return (
+			<>
+				<BlockEdit { ...props } />
+				{ shouldShowPartialSyncingControls && (
+					<PartialSyncingControls { ...props } />
+				) }
+			</>
+		);
+	}
+);
+
+if ( window.__experimentalPatternPartialSyncing ) {
+	addFilter(
+		'editor.BlockEdit',
+		'core/editor/with-partial-syncing-controls',
+		withPartialSyncingControls
+	);
+}