@wordpress/editor 13.35.0 → 14.0.0

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/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,15 +24,11 @@ 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';
 
 /**
@@ -40,7 +37,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 +47,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 +72,20 @@ export default function PostSummary( { onActionPerformed } ) {
 									<VStack spacing={ 1 }>
 										<PostStatusPanel />
 										<PostSchedulePanel />
-										<PostTemplatePanel />
 										<PostURLPanel />
+										<PostAuthorPanel />
+										<PostTemplatePanel />
 										<PostDiscussionPanel />
+										<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;
 	}
 

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

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostTextEditor from '../post-text-editor';
+import PostTitleRaw from '../post-title/post-title-raw';
+
+export default function TextEditor( { autoFocus = false } ) {
+	const { switchEditorMode } = useDispatch( editorStore );
+	const { shortcut, isRichEditingEnabled } = useSelect( ( select ) => {
+		const { getEditorSettings } = select( editorStore );
+		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+
+		return {
+			shortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ),
+			isRichEditingEnabled: getEditorSettings().richEditingEnabled,
+		};
+	}, [] );
+
+	const titleRef = useRef();
+	useEffect( () => {
+		if ( autoFocus ) {
+			return;
+		}
+		titleRef?.current?.focus();
+	}, [ autoFocus ] );
+
+	return (
+		<div className="editor-text-editor">
+			{ isRichEditingEnabled && (
+				<div className="editor-text-editor__toolbar">
+					<h2>{ __( 'Editing code' ) }</h2>
+					<Button
+						variant="tertiary"
+						onClick={ () => switchEditorMode( 'visual' ) }
+						shortcut={ shortcut }
+					>
+						{ __( 'Exit code editor' ) }
+					</Button>
+				</div>
+			) }
+			<div className="editor-text-editor__body">
+				<PostTitleRaw ref={ titleRef } />
+				<PostTextEditor />
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,71 @@
+.editor-text-editor {
+	position: relative;
+	width: 100%;
+	background-color: $white;
+	flex-grow: 1;
+
+	// Post title.
+	.editor-post-title:not(.is-raw-text),
+	.editor-post-title.is-raw-text textarea {
+		max-width: none;
+		line-height: $default-line-height;
+
+		font-family: $editor-html-font;
+		font-size: 2.5em;
+		font-weight: normal;
+
+		border: $border-width solid $gray-600;
+		border-radius: 0;
+
+		// Same padding as body.
+		padding: $grid-unit-20;
+
+		@include break-small() {
+			padding: $grid-unit-30;
+		}
+
+		&:focus {
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.editor-text-editor__body {
+	width: 100%;
+	padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
+	max-width: $break-xlarge;
+	margin-left: auto;
+	margin-right: auto;
+
+	@include break-large() {
+		padding: 0 $grid-unit-30 $grid-unit-30 $grid-unit-30;
+	}
+}
+
+// Exit code editor toolbar.
+.editor-text-editor__toolbar {
+	position: sticky;
+	z-index: z-index(".editor-text-editor__toolbar");
+	top: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	background: rgba($white, 0.8);
+	padding: $grid-unit-05 $grid-unit-15;
+
+	@include break-small() {
+		padding: $grid-unit-15;
+	}
+
+	@include break-large() {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+
+	h2 {
+		line-height: $button-size;
+		margin: 0 auto 0 0;
+		font-size: $default-font-size;
+		color: $gray-900;
+	}
+}