@wordpress/editor 13.35.0 → 14.0.1

package/src/components/provider/with-registry-provider.js

@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
-import {
-	withRegistry,
-	createRegistry,
-	RegistryProvider,
-} from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor';
 
@@ -15,41 +11,46 @@ import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor';
  */
 import { storeConfig } from '../../store';
 
+function getSubRegistry( subRegistries, registry, useSubRegistry ) {
+	if ( ! useSubRegistry ) {
+		return registry;
+	}
+	let subRegistry = subRegistries.get( registry );
+	if ( ! subRegistry ) {
+		subRegistry = createRegistry(
+			{
+				'core/block-editor': blockEditorStoreConfig,
+			},
+			registry
+		);
+		// Todo: The interface store should also be created per instance.
+		subRegistry.registerStore( 'core/editor', storeConfig );
+		subRegistries.set( registry, subRegistry );
+	}
+	return subRegistry;
+}
+
 const withRegistryProvider = createHigherOrderComponent(
 	( WrappedComponent ) =>
-		withRegistry( ( props ) => {
-			const {
-				useSubRegistry = true,
+		( { useSubRegistry = true, ...props } ) => {
+			const registry = useRegistry();
+			const [ subRegistries ] = useState( () => new WeakMap() );
+			const subRegistry = getSubRegistry(
+				subRegistries,
 				registry,
-				...additionalProps
-			} = props;
-			if ( ! useSubRegistry ) {
-				return <WrappedComponent { ...additionalProps } />;
-			}
-
-			const [ subRegistry, setSubRegistry ] = useState( null );
-			useEffect( () => {
-				const newRegistry = createRegistry(
-					{
-						'core/block-editor': blockEditorStoreConfig,
-					},
-					registry
-				);
-				// Todo: The interface store should also be created per instance.
-				newRegistry.registerStore( 'core/editor', storeConfig );
-				setSubRegistry( newRegistry );
-			}, [ registry ] );
+				useSubRegistry
+			);
 
-			if ( ! subRegistry ) {
-				return null;
+			if ( subRegistry === registry ) {
+				return <WrappedComponent registry={ registry } { ...props } />;
 			}
 
 			return (
 				<RegistryProvider value={ subRegistry }>
-					<WrappedComponent { ...additionalProps } />
+					<WrappedComponent registry={ subRegistry } { ...props } />
 				</RegistryProvider>
 			);
-		} ),
+		},
 	'withRegistryProvider'
 );
 

package/src/components/resizable-editor/index.js

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useRef, useCallback } from '@wordpress/element';
+import { ResizableBox } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ResizeHandle from './resize-handle';
+
+// Removes the inline styles in the drag handles.
+const HANDLE_STYLES_OVERRIDE = {
+	position: undefined,
+	userSelect: undefined,
+	cursor: undefined,
+	width: undefined,
+	height: undefined,
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+
+function ResizableEditor( { className, enableResizing, height, children } ) {
+	const [ width, setWidth ] = useState( '100%' );
+	const resizableRef = useRef();
+	const resizeWidthBy = useCallback( ( deltaPixels ) => {
+		if ( resizableRef.current ) {
+			setWidth( resizableRef.current.offsetWidth + deltaPixels );
+		}
+	}, [] );
+	return (
+		<ResizableBox
+			className={ clsx( 'editor-resizable-editor', className, {
+				'is-resizable': enableResizing,
+			} ) }
+			ref={ ( api ) => {
+				resizableRef.current = api?.resizable;
+			} }
+			size={ {
+				width: enableResizing ? width : '100%',
+				height: enableResizing && height ? height : '100%',
+			} }
+			onResizeStop={ ( event, direction, element ) => {
+				setWidth( element.style.width );
+			} }
+			minWidth={ 300 }
+			maxWidth="100%"
+			maxHeight="100%"
+			enable={ {
+				left: enableResizing,
+				right: enableResizing,
+			} }
+			showHandle={ enableResizing }
+			// The editor is centered horizontally, resizing it only
+			// moves half the distance. Hence double the ratio to correctly
+			// align the cursor to the resizer handle.
+			resizeRatio={ 2 }
+			handleComponent={ {
+				left: (
+					<ResizeHandle
+						direction="left"
+						resizeWidthBy={ resizeWidthBy }
+					/>
+				),
+				right: (
+					<ResizeHandle
+						direction="right"
+						resizeWidthBy={ resizeWidthBy }
+					/>
+				),
+			} }
+			handleClasses={ undefined }
+			handleStyles={ {
+				left: HANDLE_STYLES_OVERRIDE,
+				right: HANDLE_STYLES_OVERRIDE,
+			} }
+		>
+			{ children }
+		</ResizableBox>
+	);
+}
+
+export default ResizableEditor;

package/src/components/resizable-editor/resize-handle.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { LEFT, RIGHT } from '@wordpress/keycodes';
+import {
+	VisuallyHidden,
+	Tooltip,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+
+const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
+
+export default function ResizeHandle( { direction, resizeWidthBy } ) {
+	function handleKeyDown( event ) {
+		const { keyCode } = event;
+
+		if (
+			( direction === 'left' && keyCode === LEFT ) ||
+			( direction === 'right' && keyCode === RIGHT )
+		) {
+			resizeWidthBy( DELTA_DISTANCE );
+		} else if (
+			( direction === 'left' && keyCode === RIGHT ) ||
+			( direction === 'right' && keyCode === LEFT )
+		) {
+			resizeWidthBy( -DELTA_DISTANCE );
+		}
+	}
+
+	const resizeHandleVariants = {
+		active: {
+			opacity: 1,
+			scaleY: 1.3,
+		},
+	};
+
+	const resizableHandleHelpId = `resizable-editor__resize-help-${ direction }`;
+
+	return (
+		<>
+			<Tooltip text={ __( 'Drag to resize' ) }>
+				<motion.button
+					className={ `editor-resizable-editor__resize-handle is-${ direction }` }
+					aria-label={ __( 'Drag to resize' ) }
+					aria-describedby={ resizableHandleHelpId }
+					onKeyDown={ handleKeyDown }
+					variants={ resizeHandleVariants }
+					whileFocus="active"
+					whileHover="active"
+					whileTap="active"
+					key="handle"
+					role="separator"
+					aria-orientation="vertical"
+				/>
+			</Tooltip>
+			<VisuallyHidden id={ resizableHandleHelpId }>
+				{ __( 'Use left and right arrow keys to resize the canvas.' ) }
+			</VisuallyHidden>
+		</>
+	);
+}

package/src/components/resizable-editor/style.scss

@@ -0,0 +1,53 @@
+// To hide the horizontal scrollbar and show the drag handle on the
+// left and right of the container.
+.editor-resizable-editor.is-resizable {
+	overflow: visible;
+	margin: 0 auto;
+}
+
+.editor-resizable-editor__resize-handle {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	padding: 0;
+	margin: auto 0;
+	width: $grid-unit-15;
+	appearance: none;
+	cursor: ew-resize;
+	outline: none;
+	background: none;
+	border-radius: $radius-block-ui;
+	border: 0;
+	height: 100px;
+
+	&::after {
+		position: absolute;
+		top: $grid-unit-20;
+		left: $grid-unit-05;
+		right: 0;
+		bottom: $grid-unit-20;
+		content: "";
+		width: $grid-unit-05;
+		background-color: rgba($gray-700, 0.4);
+		border-radius: $radius-block-ui;
+	}
+
+	&.is-left {
+		// Subtract half of the handle width to properly center.
+		left: -$grid-unit-20 - math.div($grid-unit-05, 2);
+	}
+
+	&.is-right {
+		// Subtract half of the handle width to properly center.
+		right: -$grid-unit-20 - math.div($grid-unit-05, 2);
+	}
+
+	&:hover,
+	&:focus,
+	&:active {
+		opacity: 1;
+		&::after {
+			background-color: var(--wp-admin-theme-color);
+		}
+	}
+}

package/src/components/save-publish-panels/index.js

@@ -14,6 +14,7 @@ import PostPublishPanel from '../post-publish-panel';
 import PluginPrePublishPanel from '../plugin-pre-publish-panel';
 import PluginPostPublishPanel from '../plugin-post-publish-panel';
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const { Fill, Slot } = createSlotFill( 'ActionsPanel' );
 
@@ -27,12 +28,19 @@ export default function SavePublishPanels( {
 } ) {
 	const { closePublishSidebar, togglePublishSidebar } =
 		useDispatch( editorStore );
-	const { publishSidebarOpened, hasNonPostEntityChanges } = useSelect(
+	const {
+		publishSidebarOpened,
+		hasNonPostEntityChanges,
+		hasPostMetaChanges,
+	} = useSelect(
 		( select ) => ( {
 			publishSidebarOpened:
 				select( editorStore ).isPublishSidebarOpened(),
 			hasNonPostEntityChanges:
 				select( editorStore ).hasNonPostEntityChanges(),
+			hasPostMetaChanges: unlock(
+				select( editorStore )
+			).hasPostMetaChanges(),
 		} ),
 		[]
 	);
@@ -54,7 +62,7 @@ export default function SavePublishPanels( {
 				PostPublishExtension={ PluginPostPublishPanel.Slot }
 			/>
 		);
-	} else if ( hasNonPostEntityChanges ) {
+	} else if ( hasNonPostEntityChanges || hasPostMetaChanges ) {
 		unmountableContent = (
 			<div className="editor-layout__toggle-entities-saved-states-panel">
 				<Button

package/src/components/save-publish-panels/style.scss

@@ -26,11 +26,3 @@
 		bottom: 0;
 	}
 }
-
-.edit-post-layout__toggle-sidebar-panel {
-	.interface-interface-skeleton__sidebar:focus &,
-	.interface-interface-skeleton__sidebar:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
-}

package/src/components/sidebar/index.js

@@ -22,11 +22,9 @@ import { store as interfaceStore } from '@wordpress/interface';
 /**
  * Internal dependencies
  */
-import PageAttributesPanel from '../page-attributes/panel';
 import PatternOverridesPanel from '../pattern-overrides-panel';
 import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 import PluginSidebar from '../plugin-sidebar';
-import PostLastRevisionPanel from '../post-last-revision/panel';
 import PostSummary from './post-summary';
 import PostTaxonomiesPanel from '../post-taxonomies/panel';
 import PostTransformPanel from '../post-transform-panel';
@@ -117,9 +115,7 @@ const SidebarContent = ( {
 						<TemplateContentPanel />
 					) }
 					<PostTransformPanel />
-					<PostLastRevisionPanel />
 					<PostTaxonomiesPanel />
-					<PageAttributesPanel />
 					<PatternOverridesPanel />
 					{ extraPanels }
 				</Tabs.TabPanel>

package/src/components/sidebar/post-summary.js

@@ -12,6 +12,7 @@ import PostActions from '../post-actions';
 import PostAuthorPanel from '../post-author/panel';
 import PostCardPanel from '../post-card-panel';
 import PostContentInformation from '../post-content-information';
+import PageAttributesPanel from '../page-attributes/panel';
 import PostDiscussionPanel from '../post-discussion/panel';
 import { PrivatePostExcerptPanel as PostExcerptPanel } from '../post-excerpt/panel';
 import PostFeaturedImagePanel from '../post-featured-image/panel';
@@ -23,16 +24,13 @@ import PostStatusPanel from '../post-status';
 import PostStickyPanel from '../post-sticky';
 import PostSyncStatus from '../post-sync-status';
 import PostTemplatePanel from '../post-template/panel';
-import PostTrashPanel from '../post-trash/panel';
 import PostURLPanel from '../post-url/panel';
+import BlogTitle from '../blog-title';
+import PostsPerPage from '../posts-per-page';
+import SiteDiscussion from '../site-discussion';
 import { store as editorStore } from '../../store';
-import {
-	NAVIGATION_POST_TYPE,
-	PATTERN_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_POST_TYPE,
-} from '../../store/constants';
 import TemplateAreas from '../template-areas';
+import { PrivatePostLastRevision } from '../post-last-revision';
 
 /**
  * Module Constants
@@ -40,7 +38,7 @@ import TemplateAreas from '../template-areas';
 const PANEL_NAME = 'post-status';
 
 export default function PostSummary( { onActionPerformed } ) {
-	const { isRemovedPostStatusPanel, postType } = useSelect( ( select ) => {
+	const { isRemovedPostStatusPanel } = useSelect( ( select ) => {
 		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
 		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
 		const { isEditorPanelRemoved, getCurrentPostType } =
@@ -50,10 +48,6 @@ export default function PostSummary( { onActionPerformed } ) {
 			postType: getCurrentPostType(),
 		};
 	}, [] );
-	const isPattern = postType === PATTERN_POST_TYPE;
-	const isTemplate = postType === TEMPLATE_POST_TYPE;
-	const isTemplatePart = postType === TEMPLATE_PART_POST_TYPE;
-	const isNavigation = postType === NAVIGATION_POST_TYPE;
 
 	return (
 		<PostPanelSection className="editor-post-summary">
@@ -79,20 +73,21 @@ export default function PostSummary( { onActionPerformed } ) {
 									<VStack spacing={ 1 }>
 										<PostStatusPanel />
 										<PostSchedulePanel />
-										<PostTemplatePanel />
 										<PostURLPanel />
+										<PostAuthorPanel />
+										<PostTemplatePanel />
 										<PostDiscussionPanel />
+										<PrivatePostLastRevision />
+										<PageAttributesPanel />
 										<PostSyncStatus />
+										<BlogTitle />
+										<PostsPerPage />
+										<SiteDiscussion />
+										<PostFormatPanel />
+										<PostStickyPanel />
 									</VStack>
-									<PostStickyPanel />
-									<PostFormatPanel />
-									<PostAuthorPanel />
-									{ isTemplate && <TemplateAreas /> }
+									<TemplateAreas />
 									{ fills }
-									{ ! isPattern &&
-										! isTemplate &&
-										! isTemplatePart &&
-										! isNavigation && <PostTrashPanel /> }
 								</VStack>
 							) }
 						</VStack>

package/src/components/sidebar/style.scss

@@ -1,6 +1,6 @@
 .components-panel__header.editor-sidebar__panel-tabs {
 	padding-left: 0;
-	padding-right: $grid-unit-20;
+	padding-right: $grid-unit-15;
 
 	.components-button.has-icon {
 		padding: 0;

package/src/components/site-discussion/index.js

@@ -0,0 +1,138 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	Button,
+	Dropdown,
+	RadioControl,
+	__experimentalVStack as VStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+
+const COMMENT_OPTIONS = [
+	{
+		label: (
+			<>
+				{ __( 'Open' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Visitors can add new comments and replies.' ) }
+				</Text>
+			</>
+		),
+		value: 'open',
+	},
+	{
+		label: (
+			<>
+				{ __( 'Closed' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Visitors cannot add new comments or replies.' ) }
+				</Text>
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Existing comments remain visible.' ) }
+				</Text>
+			</>
+		),
+		value: '',
+	},
+];
+
+export default function SiteDiscussion() {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { allowCommentsOnNewPosts, isTemplate, postSlug } = useSelect(
+		( select ) => {
+			const { getEditedPostAttribute, getCurrentPostType } =
+				select( editorStore );
+			const { getEditedEntityRecord } = select( coreStore );
+			const siteSettings = getEditedEntityRecord( 'root', 'site' );
+			return {
+				isTemplate: getCurrentPostType() === TEMPLATE_POST_TYPE,
+				postSlug: getEditedPostAttribute( 'slug' ),
+				allowCommentsOnNewPosts:
+					siteSettings?.default_comment_status || '',
+			};
+		},
+		[]
+	);
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// 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 ]
+	);
+
+	if ( ! isTemplate || ! [ 'home', 'index' ].includes( postSlug ) ) {
+		return null;
+	}
+	const setAllowCommentsOnNewPosts = ( newValue ) => {
+		editEntityRecord( 'root', 'site', undefined, {
+			default_comment_status: newValue ? 'open' : null,
+		} );
+	};
+	return (
+		<PostPanelRow label={ __( 'Discussion' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				contentClassName="editor-site-discussion-dropdown__content"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						size="compact"
+						variant="tertiary"
+						aria-expanded={ isOpen }
+						aria-label={ __( 'Change discussion settings' ) }
+						onClick={ onToggle }
+					>
+						{ allowCommentsOnNewPosts
+							? __( 'Comments open' )
+							: __( 'Comments closed' ) }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ __( 'Discussion' ) }
+							onClose={ onClose }
+						/>
+						<VStack spacing={ 3 }>
+							<Text>
+								{ __(
+									'Changes will apply to new posts only. Individual posts may override these settings.'
+								) }
+							</Text>
+							<RadioControl
+								className="editor-site-discussion__options"
+								hideLabelFromVision
+								label={ __( 'Comment status' ) }
+								options={ COMMENT_OPTIONS }
+								onChange={ setAllowCommentsOnNewPosts }
+								selected={ allowCommentsOnNewPosts }
+							/>
+						</VStack>
+					</>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}

package/src/components/site-discussion/style.scss

@@ -0,0 +1,19 @@
+.editor-site-discussion-dropdown__content .components-popover__content {
+	min-width: 320px;
+	padding: $grid-unit-20;
+}
+
+.editor-site-discussion__options {
+	// TODO: it's not great to override component styles.. This might be resolved
+	// by the new radio control component.
+	.components-radio-control__option {
+		align-items: flex-start;
+	}
+
+	label {
+		.components-text {
+			display: block;
+			margin-top: $grid-unit-05;
+		}
+	}
+}

package/src/components/start-template-options/style.scss

@@ -44,12 +44,4 @@ $actions-height: 92px;
 			display: none;
 		}
 	}
-
-	.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;
-		}
-	}
 }

package/src/components/template-areas/index.js

@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
 
 function TemplateAreaItem( { area, clientId } ) {
 	const { selectBlock, toggleBlockHighlight } =
@@ -54,13 +55,21 @@ function TemplateAreaItem( { area, clientId } ) {
 }
 
 export default function TemplateAreas() {
-	const templateParts = useSelect(
-		( select ) =>
-			unlock( select( editorStore ) ).getCurrentTemplateTemplateParts(),
-		[]
-	);
+	const { isTemplate, templateParts } = useSelect( ( select ) => {
+		const _isTemplate =
+			select( editorStore ).getCurrentPostType() === TEMPLATE_POST_TYPE;
+
+		return {
+			isTemplate: _isTemplate,
+			templateParts:
+				_isTemplate &&
+				unlock(
+					select( editorStore )
+				).getCurrentTemplateTemplateParts(),
+		};
+	}, [] );
 
-	if ( ! templateParts.length ) {
+	if ( ! isTemplate || ! templateParts.length ) {
 		return null;
 	}