@wordpress/editor 13.31.0 → 13.33.0

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

@@ -6,122 +6,152 @@ import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
 import { useState } from '@wordpress/element';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { TextControl, ExternalLink } from '@wordpress/components';
+import {
+	ExternalLink,
+	Button,
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as noticesStore } from '@wordpress/notices';
+import { copySmall } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { useCopyToClipboard } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import { usePostURLLabel } from './label';
 import { store as editorStore } from '../../store';
 
 export default function PostURL( { onClose } ) {
-	const {
-		isEditable,
-		postSlug,
-		viewPostLabel,
-		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;
-
-		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,
-		};
-	}, [] );
+	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;
 
+			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,
+			};
+		}, [] );
 	const { editPost } = useDispatch( editorStore );
-
+	const { createNotice } = useDispatch( noticesStore );
 	const [ forceEmptyField, setForceEmptyField ] = useState( false );
-
+	const postUrlLabel = usePostURLLabel();
+	const copyButtonRef = useCopyToClipboard( postUrlLabel, () => {
+		createNotice( 'info', __( 'Copied URL to clipboard.' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	} );
 	return (
 		<div className="editor-post-url">
-			<InspectorPopoverHeader title={ __( 'URL' ) } onClose={ onClose } />
-			{ isEditable && (
-				<TextControl
-					__nextHasNoMarginBottom
-					label={ __( 'Permalink' ) }
-					value={ forceEmptyField ? '' : postSlug }
-					autoComplete="off"
-					spellCheck="false"
-					help={
-						<>
-							{ __( 'The last part of the URL.' ) }{ ' ' }
-							<ExternalLink
-								href={ __(
-									'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
-								) }
-							>
-								{ __( 'Learn more.' ) }
-							</ExternalLink>
-						</>
-					}
-					onChange={ ( newValue ) => {
-						editPost( { slug: newValue } );
-						// When we delete the field the permalink gets
-						// reverted to the original value.
-						// The forceEmptyField logic allows the user to have
-						// the field temporarily empty while typing.
-						if ( ! newValue ) {
-							if ( ! forceEmptyField ) {
-								setForceEmptyField( true );
+			<InspectorPopoverHeader
+				title={ __( 'Link' ) }
+				onClose={ onClose }
+			/>
+			<VStack spacing={ 3 }>
+				{ isEditable && (
+					<div>
+						{ __( 'Customize the last part of the URL. ' ) }
+						<ExternalLink
+							href={ __(
+								'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
+							) }
+						>
+							{ __( 'Learn more.' ) }
+						</ExternalLink>
+					</div>
+				) }
+				<div>
+					{ isEditable && (
+						<InputControl
+							__next40pxDefaultSize
+							prefix={
+								<InputControlPrefixWrapper>
+									/
+								</InputControlPrefixWrapper>
 							}
-							return;
-						}
-						if ( forceEmptyField ) {
-							setForceEmptyField( false );
-						}
-					} }
-					onBlur={ ( event ) => {
-						editPost( {
-							slug: cleanForSlug( event.target.value ),
-						} );
-						if ( forceEmptyField ) {
-							setForceEmptyField( false );
-						}
-					} }
-				/>
-			) }
-			{ isEditable && (
-				<h3 className="editor-post-url__link-label">
-					{ viewPostLabel ?? __( 'View post' ) }
-				</h3>
-			) }
-			<p>
-				<ExternalLink
-					className="editor-post-url__link"
-					href={ postLink }
-					target="_blank"
-				>
-					{ isEditable ? (
-						<>
-							<span className="editor-post-url__link-prefix">
-								{ permalinkPrefix }
-							</span>
-							<span className="editor-post-url__link-slug">
-								{ postSlug }
-							</span>
-							<span className="editor-post-url__link-suffix">
-								{ permalinkSuffix }
-							</span>
-						</>
-					) : (
-						postLink
+							suffix={
+								<Button
+									icon={ copySmall }
+									ref={ copyButtonRef }
+								/>
+							}
+							label={ __( 'Link' ) }
+							hideLabelFromVision
+							value={ forceEmptyField ? '' : postSlug }
+							autoComplete="off"
+							spellCheck="false"
+							type="text"
+							className="editor-post-url__input"
+							onChange={ ( newValue ) => {
+								editPost( { slug: newValue } );
+								// When we delete the field the permalink gets
+								// reverted to the original value.
+								// The forceEmptyField logic allows the user to have
+								// the field temporarily empty while typing.
+								if ( ! newValue ) {
+									if ( ! forceEmptyField ) {
+										setForceEmptyField( true );
+									}
+									return;
+								}
+								if ( forceEmptyField ) {
+									setForceEmptyField( false );
+								}
+							} }
+							onBlur={ ( event ) => {
+								editPost( {
+									slug: cleanForSlug( event.target.value ),
+								} );
+								if ( forceEmptyField ) {
+									setForceEmptyField( false );
+								}
+							} }
+							help={
+								<ExternalLink
+									className="editor-post-url__link"
+									href={ postLink }
+									target="_blank"
+								>
+									<span className="editor-post-url__link-prefix">
+										{ permalinkPrefix }
+									</span>
+									<span className="editor-post-url__link-slug">
+										{ postSlug }
+									</span>
+									<span className="editor-post-url__link-suffix">
+										{ permalinkSuffix }
+									</span>
+								</ExternalLink>
+							}
+						/>
+					) }
+					{ ! isEditable && (
+						<ExternalLink
+							className="editor-post-url__link"
+							href={ postLink }
+							target="_blank"
+						>
+							{ postLink }
+						</ExternalLink>
 					) }
-				</ExternalLink>
-			</p>
+				</div>
+			</VStack>
 		</div>
 	);
 }

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

@@ -2,16 +2,18 @@
  * WordPress dependencies
  */
 import { useMemo, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+import { safeDecodeURIComponent } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import PostURLCheck from './check';
 import PostURL from './index';
-import { usePostURLLabel } from './label';
 import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
 
 export default function PostURLPanel() {
 	// Use internal state instead of a ref to make sure that the component
@@ -19,13 +21,20 @@ export default function PostURLPanel() {
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	// Memoize popoverProps to avoid returning a new object every time.
 	const popoverProps = useMemo(
-		() => ( { anchor: popoverAnchor, placement: 'bottom-end' } ),
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
 		[ popoverAnchor ]
 	);
 
 	return (
 		<PostURLCheck>
-			<PostPanelRow label={ __( 'URL' ) } ref={ setPopoverAnchor }>
+			<PostPanelRow label={ __( 'Link' ) } ref={ setPopoverAnchor }>
 				<Dropdown
 					popoverProps={ popoverProps }
 					className="editor-post-url__panel-dropdown"
@@ -44,18 +53,22 @@ export default function PostURLPanel() {
 }
 
 function PostURLToggle( { isOpen, onClick } ) {
-	const label = usePostURLLabel();
+	const slug = useSelect(
+		( select ) => select( editorStore ).getEditedPostSlug(),
+		[]
+	);
+	const decodedSlug = safeDecodeURIComponent( slug );
 	return (
 		<Button
 			__next40pxDefaultSize
 			className="editor-post-url__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
-			// translators: %s: Current post URL.
-			aria-label={ sprintf( __( 'Change URL: %s' ), label ) }
+			// translators: %s: Current post link.
+			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			{ label }
+			{ decodedSlug }
 		</Button>
 	);
 }

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

@@ -17,19 +17,21 @@
 	margin: $grid-unit-10;
 }
 
-.editor-post-url__link-label {
-	font-size: $default-font-size;
-	font-weight: 400;
-	margin: 0;
-}
-
 /* rtl:begin:ignore */
 .editor-post-url__link {
 	direction: ltr;
 	word-break: break-word;
+	margin-top: $grid-unit-05;
+	color: $gray-700;
 }
 /* rtl:end:ignore */
 
 .editor-post-url__link-slug {
 	font-weight: 600;
 }
+
+// TODO: This might indicate a need to update the InputControl itself, as
+// there is no way currently to control the padding when adding prefix/suffix.
+.editor-post-url__input input.components-input-control__input {
+	padding-inline-start: 0 !important;
+}

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

@@ -125,6 +125,7 @@ export default function PostVisibility( { onClose } ) {
 				isOpen={ showPrivateConfirmDialog }
 				onConfirm={ confirmPrivate }
 				onCancel={ handleDialogCancel }
+				confirmButtonText={ __( 'Publish' ) }
 			>
 				{ __( 'Would you like to privately publish this post now?' ) }
 			</ConfirmDialog>

package/src/components/preferences-modal/index.js

@@ -10,6 +10,7 @@ import {
 	store as preferencesStore,
 	privateApis as preferencesPrivateApis,
 } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -32,16 +33,13 @@ const {
 	PreferenceToggleControl,
 } = unlock( preferencesPrivateApis );
 
-export default function EditorPreferencesModal( {
-	extraSections = {},
-	isActive,
-	onClose,
-} ) {
+export default function EditorPreferencesModal( { extraSections = {} } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { showBlockBreadcrumbsOption } = useSelect(
+	const { isActive, showBlockBreadcrumbsOption } = useSelect(
 		( select ) => {
 			const { getEditorSettings } = select( editorStore );
 			const { get } = select( preferencesStore );
+			const { isModalActive } = select( interfaceStore );
 			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
 			const isDistractionFreeEnabled = get( 'core', 'distractionFree' );
 			return {
@@ -49,26 +47,16 @@ export default function EditorPreferencesModal( {
 					! isDistractionFreeEnabled &&
 					isLargeViewport &&
 					isRichEditingEnabled,
+				isActive: isModalActive( 'editor/preferences' ),
 			};
 		},
 		[ isLargeViewport ]
 	);
-
+	const { closeModal } = useDispatch( interfaceStore );
 	const { setIsListViewOpened, setIsInserterOpened } =
 		useDispatch( editorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
 
-	const toggleDistractionFree = () => {
-		setPreference( 'core', 'fixedToolbar', true );
-		setIsInserterOpened( false );
-		setIsListViewOpened( false );
-		// Todo: Check sidebar when closing/opening distraction free.
-	};
-
-	const turnOffDistractionFree = () => {
-		setPreference( 'core', 'distractionFree', false );
-	};
-
 	const sections = useMemo(
 		() => [
 			{
@@ -165,7 +153,13 @@ export default function EditorPreferencesModal( {
 						<PreferenceToggleControl
 							scope="core"
 							featureName="fixedToolbar"
-							onToggle={ turnOffDistractionFree }
+							onToggle={ () =>
+								setPreference(
+									'core',
+									'distractionFree',
+									false
+								)
+							}
 							help={ __(
 								'Access all block and document tools in a single place.'
 							) }
@@ -174,7 +168,11 @@ export default function EditorPreferencesModal( {
 						<PreferenceToggleControl
 							scope="core"
 							featureName="distractionFree"
-							onToggle={ toggleDistractionFree }
+							onToggle={ () => {
+								setPreference( 'core', 'fixedToolbar', true );
+								setIsInserterOpened( false );
+								setIsListViewOpened( false );
+							} }
 							help={ __(
 								'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
 							) }
@@ -254,7 +252,13 @@ export default function EditorPreferencesModal( {
 				),
 			},
 		],
-		[ isLargeViewport, showBlockBreadcrumbsOption, extraSections ]
+		[
+			showBlockBreadcrumbsOption,
+			extraSections,
+			setIsInserterOpened,
+			setIsListViewOpened,
+			setPreference,
+		]
 	);
 
 	if ( ! isActive ) {
@@ -262,7 +266,7 @@ export default function EditorPreferencesModal( {
 	}
 
 	return (
-		<PreferencesModal closeModal={ onClose }>
+		<PreferencesModal closeModal={ closeModal }>
 			<PreferencesModalTabs sections={ sections } />
 		</PreferencesModal>
 	);

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

@@ -4,50 +4,70 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
 
-const PAGE_CONTENT_BLOCKS = [
+const CONTENT_ONLY_BLOCKS = applyFilters( 'editor.postContentBlockTypes', [
 	'core/post-title',
 	'core/post-featured-image',
 	'core/post-content',
-];
+	'core/template-part',
+] );
 
-function useDisableNonPageContentBlocks() {
-	const contentIds = useSelect( ( select ) => {
+/**
+ * Component that when rendered, makes it so that the site editor allows only
+ * page content to be edited.
+ */
+export default function DisableNonPageContentBlocks() {
+	const contentOnlyIds = useSelect( ( select ) => {
 		const { getBlocksByName, getBlockParents, getBlockName } =
 			select( blockEditorStore );
-		return getBlocksByName( PAGE_CONTENT_BLOCKS ).filter( ( clientId ) =>
+		return getBlocksByName( CONTENT_ONLY_BLOCKS ).filter( ( clientId ) =>
 			getBlockParents( clientId ).every( ( parentClientId ) => {
 				const parentBlockName = getBlockName( parentClientId );
 				return (
+					// Ignore descendents of the query block.
 					parentBlockName !== 'core/query' &&
-					! PAGE_CONTENT_BLOCKS.includes( parentBlockName )
+					// Enable only the top-most block.
+					! CONTENT_ONLY_BLOCKS.includes( parentBlockName )
 				);
 			} )
 		);
 	}, [] );
 
+	const disabledIds = useSelect( ( select ) => {
+		const { getBlocksByName, getBlockOrder } = select( blockEditorStore );
+		return getBlocksByName( [ 'core/template-part' ] ).flatMap(
+			( clientId ) => getBlockOrder( clientId )
+		);
+	}, [] );
+
 	const { setBlockEditingMode, unsetBlockEditingMode } =
 		useDispatch( blockEditorStore );
 
 	useEffect( () => {
-		setBlockEditingMode( '', 'disabled' ); // Disable editing at the root level.
-
-		for ( const contentId of contentIds ) {
-			setBlockEditingMode( contentId, 'contentOnly' ); // Re-enable each content block.
+		setBlockEditingMode( '', 'disabled' );
+		for ( const clientId of contentOnlyIds ) {
+			setBlockEditingMode( clientId, 'contentOnly' );
 		}
+		for ( const clientId of disabledIds ) {
+			setBlockEditingMode( clientId, 'disabled' );
+		}
+
 		return () => {
 			unsetBlockEditingMode( '' );
-			for ( const contentId of contentIds ) {
-				unsetBlockEditingMode( contentId );
+			for ( const clientId of contentOnlyIds ) {
+				unsetBlockEditingMode( clientId );
+			}
+			for ( const clientId of disabledIds ) {
+				unsetBlockEditingMode( clientId );
 			}
 		};
-	}, [ contentIds, setBlockEditingMode, unsetBlockEditingMode ] );
-}
+	}, [
+		contentOnlyIds,
+		disabledIds,
+		setBlockEditingMode,
+		unsetBlockEditingMode,
+	] );
 
-/**
- * Component that when rendered, makes it so that the site editor allows only
- * page content to be edited.
- */
-export default function DisableNonPageContentBlocks() {
-	useDisableNonPageContentBlocks();
+	return null;
 }

package/src/components/provider/index.js

@@ -26,6 +26,8 @@ import NavigationBlockEditingMode from './navigation-block-editing-mode';
 import { useHideBlocksFromInserter } from './use-hide-blocks-from-inserter';
 import useCommands from '../commands';
 import BlockRemovalWarnings from '../block-removal-warnings';
+import StartPageOptions from '../start-page-options';
+import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -167,7 +169,8 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		const blockEditorSettings = useBlockEditorSettings(
 			editorSettings,
 			type,
-			id
+			id,
+			mode
 		);
 		const [ blocks, onInput, onChange ] = useBlockEditorProps(
 			post,
@@ -258,14 +261,20 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							useSubRegistry={ false }
 						>
 							{ children }
-							<PatternsMenuItems />
-							{ mode === 'template-locked' && (
-								<DisableNonPageContentBlocks />
-							) }
-							{ type === 'wp_navigation' && (
-								<NavigationBlockEditingMode />
+							{ ! settings.__unstableIsPreviewMode && (
+								<>
+									<PatternsMenuItems />
+									{ mode === 'template-locked' && (
+										<DisableNonPageContentBlocks />
+									) }
+									{ type === 'wp_navigation' && (
+										<NavigationBlockEditingMode />
+									) }
+									<KeyboardShortcutHelpModal />
+									<BlockRemovalWarnings />
+									<StartPageOptions />
+								</>
 							) }
-							<BlockRemovalWarnings />
 						</BlockEditorProviderComponent>
 					</BlockContextProvider>
 				</EntityProvider>

package/src/components/provider/use-auto-switch-editor-sidebars.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * This listener hook monitors for block selection and triggers the appropriate
+ * sidebar state.
+ */
+function useAutoSwitchEditorSidebars() {
+	const { hasBlockSelection } = useSelect( ( select ) => {
+		return {
+			hasBlockSelection:
+				!! select( blockEditorStore ).getBlockSelectionStart(),
+		};
+	}, [] );
+
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const { get: getPreference } = useSelect( preferencesStore );
+
+	useEffect( () => {
+		const activeGeneralSidebar = getActiveComplementaryArea( 'core' );
+		const isEditorSidebarOpened = [
+			'edit-post/document',
+			'edit-post/block',
+		].includes( activeGeneralSidebar );
+		const isDistractionFree = getPreference( 'core', 'distractionFree' );
+		if ( ! isEditorSidebarOpened || isDistractionFree ) {
+			return;
+		}
+		if ( hasBlockSelection ) {
+			enableComplementaryArea( 'core', 'edit-post/block' );
+		} else {
+			enableComplementaryArea( 'core', 'edit-post/document' );
+		}
+	}, [
+		hasBlockSelection,
+		getActiveComplementaryArea,
+		enableComplementaryArea,
+		getPreference,
+	] );
+}
+
+export default useAutoSwitchEditorSidebars;