@wordpress/editor 13.34.0 → 14.0.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-page-options/index.js

@@ -17,6 +17,7 @@ import { __unstableSerializeAndClean } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
 
 function useStartPatterns() {
 	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
@@ -115,14 +116,15 @@ export default function StartPageOptions() {
 			isEditedPostEmpty,
 			getCurrentPostType,
 			getCurrentPostId,
-			getEditorSettings,
 		} = select( editorStore );
-		const { __unstableIsPreviewMode: isPreviewMode } = getEditorSettings();
+		const _postType = getCurrentPostType();
 
 		return {
 			shouldEnableModal:
-				! isPreviewMode && ! isEditedPostDirty() && isEditedPostEmpty(),
-			postType: getCurrentPostType(),
+				! isEditedPostDirty() &&
+				isEditedPostEmpty() &&
+				TEMPLATE_POST_TYPE !== _postType,
+			postType: _postType,
 			postId: getCurrentPostId(),
 		};
 	}, [] );

package/src/components/start-template-options/index.js

@@ -0,0 +1,219 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo, useEffect } from '@wordpress/element';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useAsyncList } from '@wordpress/compose';
+import { parse } from '@wordpress/blocks';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+
+function useFallbackTemplateContent( slug, isCustom = false ) {
+	return useSelect(
+		( select ) => {
+			const { getEntityRecord, getDefaultTemplateId } =
+				select( coreStore );
+			const templateId = getDefaultTemplateId( {
+				slug,
+				is_custom: isCustom,
+				ignore_empty: true,
+			} );
+			return templateId
+				? getEntityRecord( 'postType', TEMPLATE_POST_TYPE, templateId )
+						?.content?.raw
+				: undefined;
+		},
+		[ slug, isCustom ]
+	);
+}
+
+function useStartPatterns( fallbackContent ) {
+	const { slug, patterns } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEntityRecord, getBlockPatterns } = select( coreStore );
+		const postId = getCurrentPostId();
+		const postType = getCurrentPostType();
+		const record = getEntityRecord( 'postType', postType, postId );
+		return {
+			slug: record.slug,
+			patterns: getBlockPatterns(),
+		};
+	}, [] );
+
+	const currentThemeStylesheet = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme().stylesheet
+	);
+
+	// Duplicated from packages/block-library/src/pattern/edit.js.
+	function injectThemeAttributeInBlockTemplateContent( block ) {
+		if (
+			block.innerBlocks.find(
+				( innerBlock ) => innerBlock.name === 'core/template-part'
+			)
+		) {
+			block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+				if (
+					innerBlock.name === 'core/template-part' &&
+					innerBlock.attributes.theme === undefined
+				) {
+					innerBlock.attributes.theme = currentThemeStylesheet;
+				}
+				return innerBlock;
+			} );
+		}
+
+		if (
+			block.name === 'core/template-part' &&
+			block.attributes.theme === undefined
+		) {
+			block.attributes.theme = currentThemeStylesheet;
+		}
+		return block;
+	}
+
+	return useMemo( () => {
+		// filter patterns that are supposed to be used in the current template being edited.
+		return [
+			{
+				name: 'fallback',
+				blocks: parse( fallbackContent ),
+				title: __( 'Fallback content' ),
+			},
+			...patterns
+				.filter( ( pattern ) => {
+					return (
+						Array.isArray( pattern.templateTypes ) &&
+						pattern.templateTypes.some( ( templateType ) =>
+							slug.startsWith( templateType )
+						)
+					);
+				} )
+				.map( ( pattern ) => {
+					return {
+						...pattern,
+						blocks: parse( pattern.content ).map( ( block ) =>
+							injectThemeAttributeInBlockTemplateContent( block )
+						),
+					};
+				} ),
+		];
+	}, [ fallbackContent, slug, patterns ] );
+}
+
+function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
+	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
+	const blockPatterns = useStartPatterns( fallbackContent );
+	const shownBlockPatterns = useAsyncList( blockPatterns );
+	return (
+		<BlockPatternsList
+			blockPatterns={ blockPatterns }
+			shownPatterns={ shownBlockPatterns }
+			onClickPattern={ ( pattern, blocks ) => {
+				onChange( blocks, { selection: undefined } );
+				onChoosePattern();
+			} }
+		/>
+	);
+}
+
+function StartModal( { slug, isCustom, onClose, postType } ) {
+	const fallbackContent = useFallbackTemplateContent( slug, isCustom );
+	if ( ! fallbackContent ) {
+		return null;
+	}
+	return (
+		<Modal
+			className="editor-start-template-options__modal"
+			title={ __( 'Choose a pattern' ) }
+			closeLabel={ __( 'Cancel' ) }
+			focusOnMount="firstElement"
+			onRequestClose={ onClose }
+			isFullScreen
+		>
+			<div className="editor-start-template-options__modal-content">
+				<PatternSelection
+					fallbackContent={ fallbackContent }
+					slug={ slug }
+					isCustom={ isCustom }
+					postType={ postType }
+					onChoosePattern={ () => {
+						onClose();
+					} }
+				/>
+			</div>
+			<Flex
+				className="editor-start-template-options__modal__actions"
+				justify="flex-end"
+				expanded={ false }
+			>
+				<FlexItem>
+					<Button variant="tertiary" onClick={ onClose }>
+						{ __( 'Skip' ) }
+					</Button>
+				</FlexItem>
+			</Flex>
+		</Modal>
+	);
+}
+
+export default function StartTemplateOptions() {
+	const [ isClosed, setIsClosed ] = useState( false );
+	const { shouldOpenModal, slug, isCustom, postType, postId } = useSelect(
+		( select ) => {
+			const { getCurrentPostType, getCurrentPostId } =
+				select( editorStore );
+			const _postType = getCurrentPostType();
+			const _postId = getCurrentPostId();
+			const { getEditedEntityRecord, hasEditsForEntityRecord } =
+				select( coreStore );
+			const templateRecord = getEditedEntityRecord(
+				'postType',
+				_postType,
+				_postId
+			);
+			const hasEdits = hasEditsForEntityRecord(
+				'postType',
+				_postType,
+				_postId
+			);
+
+			return {
+				shouldOpenModal:
+					! hasEdits &&
+					'' === templateRecord.content &&
+					TEMPLATE_POST_TYPE === _postType,
+				slug: templateRecord.slug,
+				isCustom: templateRecord.is_custom,
+				postType: _postType,
+				postId: _postId,
+			};
+		},
+		[]
+	);
+
+	useEffect( () => {
+		// Should reset the modal state when navigating to a new page/post.
+		setIsClosed( false );
+	}, [ postType, postId ] );
+
+	if ( ! shouldOpenModal || isClosed ) {
+		return null;
+	}
+
+	return (
+		<StartModal
+			slug={ slug }
+			isCustom={ isCustom }
+			postType={ postType }
+			onClose={ () => setIsClosed( true ) }
+		/>
+	);
+}

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

@@ -0,0 +1,47 @@
+$actions-height: 92px;
+
+.editor-start-template-options__modal {
+	.editor-start-template-options__modal__actions {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		height: $actions-height;
+		background-color: $white;
+		margin-left: - $grid-unit-40;
+		margin-right: - $grid-unit-40;
+		padding-left: $grid-unit-40;
+		padding-right: $grid-unit-40;
+		border-top: 1px solid $gray-300;
+		z-index: z-index(".editor-start-template-options__modal__actions");
+	}
+
+	.block-editor-block-patterns-list {
+		// Since the actions container is positioned absolutely,
+		// this padding bottom ensures that the content wrapper will properly
+		// detect overflowing content and start showing scrollbars at the right
+		// moment. Without this padding, the content would render under the actions
+		// bar without causing the wrapper to show a scrollbar.
+		padding-bottom: $actions-height;
+	}
+}
+
+.editor-start-template-options__modal-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+
+		.block-editor-block-patterns-list__item-title {
+			display: none;
+		}
+	}
+}

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/template-areas/style.scss

@@ -1,5 +1,4 @@
 .editor-template-areas {
-	margin-top: $grid-unit-20;
 	&__list {
 		margin: 0;
 		> li {

package/src/components/template-content-panel/index.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
+
+const PAGE_CONTENT_BLOCKS = [
+	'core/post-content',
+	'core/post-featured-image',
+	'core/post-title',
+];
+
+export default function TemplateContentPanel() {
+	const clientIds = useSelect( ( select ) => {
+		const { getBlocksByName } = select( blockEditorStore );
+		return getBlocksByName( PAGE_CONTENT_BLOCKS );
+	}, [] );
+
+	return (
+		<PanelBody title={ __( 'Content' ) }>
+			<BlockQuickNavigation clientIds={ clientIds } />
+		</PanelBody>
+	);
+}

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;
+	}
+}