@wordpress/editor 13.24.1 → 13.25.0

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

@@ -0,0 +1,381 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockList,
+	store as blockEditorStore,
+	__unstableUseTypewriter as useTypewriter,
+	__unstableUseTypingObserver as useTypingObserver,
+	useSettings,
+	__experimentalRecursionProvider as RecursionProvider,
+	privateApis as blockEditorPrivateApis,
+	__experimentalUseResizeCanvas as useResizeCanvas,
+} from '@wordpress/block-editor';
+import { useEffect, useRef, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { parse } from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import PostTitle from '../post-title';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import EditTemplateBlocksNotification from './edit-template-blocks-notification';
+
+const {
+	LayoutStyle,
+	useLayoutClasses,
+	useLayoutStyles,
+	ExperimentalBlockCanvas: BlockCanvas,
+} = unlock( blockEditorPrivateApis );
+
+/**
+ * Given an array of nested blocks, find the first Post Content
+ * block inside it, recursing through any nesting levels,
+ * and return its attributes.
+ *
+ * @param {Array} blocks A list of blocks.
+ *
+ * @return {Object | undefined} The Post Content block.
+ */
+function getPostContentAttributes( blocks ) {
+	for ( let i = 0; i < blocks.length; i++ ) {
+		if ( blocks[ i ].name === 'core/post-content' ) {
+			return blocks[ i ].attributes;
+		}
+		if ( blocks[ i ].innerBlocks.length ) {
+			const nestedPostContent = getPostContentAttributes(
+				blocks[ i ].innerBlocks
+			);
+
+			if ( nestedPostContent ) {
+				return nestedPostContent;
+			}
+		}
+	}
+}
+
+function checkForPostContentAtRootLevel( blocks ) {
+	for ( let i = 0; i < blocks.length; i++ ) {
+		if ( blocks[ i ].name === 'core/post-content' ) {
+			return true;
+		}
+	}
+	return false;
+}
+
+function EditorCanvas( {
+	// Ideally as we unify post and site editors, we won't need these props.
+	autoFocus,
+	className,
+	renderAppender,
+	styles,
+	disableIframe = false,
+	iframeProps,
+	children,
+} ) {
+	const {
+		renderingMode,
+		postContentAttributes,
+		editedPostTemplate = {},
+		wrapperBlockName,
+		wrapperUniqueId,
+		deviceType,
+	} = useSelect( ( select ) => {
+		const {
+			getCurrentPostId,
+			getCurrentPostType,
+			getCurrentTemplateId,
+			getEditorSettings,
+			getRenderingMode,
+			getDeviceType,
+		} = select( editorStore );
+		const { getPostType, canUser, getEditedEntityRecord } =
+			select( coreStore );
+		const postTypeSlug = getCurrentPostType();
+		const _renderingMode = getRenderingMode();
+		let _wrapperBlockName;
+
+		if ( postTypeSlug === 'wp_block' ) {
+			_wrapperBlockName = 'core/block';
+		} else if ( ! _renderingMode === 'post-only' ) {
+			_wrapperBlockName = 'core/post-content';
+		}
+
+		const editorSettings = getEditorSettings();
+		const supportsTemplateMode = editorSettings.supportsTemplateMode;
+		const postType = getPostType( postTypeSlug );
+		const canEditTemplate = canUser( 'create', 'templates' );
+		const currentTemplateId = getCurrentTemplateId();
+		const template = currentTemplateId
+			? getEditedEntityRecord(
+					'postType',
+					'wp_template',
+					currentTemplateId
+			  )
+			: undefined;
+
+		return {
+			renderingMode: _renderingMode,
+			postContentAttributes: getEditorSettings().postContentAttributes,
+			// Post template fetch returns a 404 on classic themes, which
+			// messes with e2e tests, so check it's a block theme first.
+			editedPostTemplate:
+				postType?.viewable && supportsTemplateMode && canEditTemplate
+					? template
+					: undefined,
+			wrapperBlockName: _wrapperBlockName,
+			wrapperUniqueId: getCurrentPostId(),
+			deviceType: getDeviceType(),
+		};
+	}, [] );
+	const { isCleanNewPost } = useSelect( editorStore );
+	const {
+		hasRootPaddingAwareAlignments,
+		themeHasDisabledLayoutStyles,
+		themeSupportsLayout,
+	} = useSelect( ( select ) => {
+		const _settings = select( blockEditorStore ).getSettings();
+		return {
+			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
+			themeSupportsLayout: _settings.supportsLayout,
+			hasRootPaddingAwareAlignments:
+				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
+		};
+	}, [] );
+
+	const deviceStyles = useResizeCanvas( deviceType );
+	const [ globalLayoutSettings ] = useSettings( 'layout' );
+
+	// fallbackLayout is used if there is no Post Content,
+	// and for Post Title.
+	const fallbackLayout = useMemo( () => {
+		if ( renderingMode !== 'post-only' ) {
+			return { type: 'default' };
+		}
+
+		if ( themeSupportsLayout ) {
+			// We need to ensure support for wide and full alignments,
+			// so we add the constrained type.
+			return { ...globalLayoutSettings, type: 'constrained' };
+		}
+		// Set default layout for classic themes so all alignments are supported.
+		return { type: 'default' };
+	}, [ renderingMode, themeSupportsLayout, globalLayoutSettings ] );
+
+	const newestPostContentAttributes = useMemo( () => {
+		if (
+			! editedPostTemplate?.content &&
+			! editedPostTemplate?.blocks &&
+			postContentAttributes
+		) {
+			return postContentAttributes;
+		}
+		// When in template editing mode, we can access the blocks directly.
+		if ( editedPostTemplate?.blocks ) {
+			return getPostContentAttributes( editedPostTemplate?.blocks );
+		}
+		// If there are no blocks, we have to parse the content string.
+		// Best double-check it's a string otherwise the parse function gets unhappy.
+		const parseableContent =
+			typeof editedPostTemplate?.content === 'string'
+				? editedPostTemplate?.content
+				: '';
+
+		return getPostContentAttributes( parse( parseableContent ) ) || {};
+	}, [
+		editedPostTemplate?.content,
+		editedPostTemplate?.blocks,
+		postContentAttributes,
+	] );
+
+	const hasPostContentAtRootLevel = useMemo( () => {
+		if ( ! editedPostTemplate?.content && ! editedPostTemplate?.blocks ) {
+			return false;
+		}
+		// When in template editing mode, we can access the blocks directly.
+		if ( editedPostTemplate?.blocks ) {
+			return checkForPostContentAtRootLevel( editedPostTemplate?.blocks );
+		}
+		// If there are no blocks, we have to parse the content string.
+		// Best double-check it's a string otherwise the parse function gets unhappy.
+		const parseableContent =
+			typeof editedPostTemplate?.content === 'string'
+				? editedPostTemplate?.content
+				: '';
+
+		return (
+			checkForPostContentAtRootLevel( parse( parseableContent ) ) || false
+		);
+	}, [ editedPostTemplate?.content, editedPostTemplate?.blocks ] );
+
+	const { layout = {}, align = '' } = newestPostContentAttributes || {};
+
+	const postContentLayoutClasses = useLayoutClasses(
+		newestPostContentAttributes,
+		'core/post-content'
+	);
+
+	const blockListLayoutClass = classnames(
+		{
+			'is-layout-flow': ! themeSupportsLayout,
+		},
+		themeSupportsLayout && postContentLayoutClasses,
+		align && `align${ align }`
+	);
+
+	const postContentLayoutStyles = useLayoutStyles(
+		newestPostContentAttributes,
+		'core/post-content',
+		'.block-editor-block-list__layout.is-root-container'
+	);
+
+	// Update type for blocks using legacy layouts.
+	const postContentLayout = useMemo( () => {
+		return layout &&
+			( layout?.type === 'constrained' ||
+				layout?.inherit ||
+				layout?.contentSize ||
+				layout?.wideSize )
+			? { ...globalLayoutSettings, ...layout, type: 'constrained' }
+			: { ...globalLayoutSettings, ...layout, type: 'default' };
+	}, [
+		layout?.type,
+		layout?.inherit,
+		layout?.contentSize,
+		layout?.wideSize,
+		globalLayoutSettings,
+	] );
+
+	// If there is a Post Content block we use its layout for the block list;
+	// if not, this must be a classic theme, in which case we use the fallback layout.
+	const blockListLayout = postContentAttributes
+		? postContentLayout
+		: fallbackLayout;
+
+	const postEditorLayout =
+		blockListLayout?.type === 'default' && ! hasPostContentAtRootLevel
+			? fallbackLayout
+			: blockListLayout;
+
+	const observeTypingRef = useTypingObserver();
+	const titleRef = useRef();
+	useEffect( () => {
+		if ( ! autoFocus || ! isCleanNewPost() ) {
+			return;
+		}
+		titleRef?.current?.focus();
+	}, [ autoFocus, isCleanNewPost ] );
+
+	// Add some styles for alignwide/alignfull Post Content and its children.
+	const alignCSS = `.is-root-container.alignwide { max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto;}
+		.is-root-container.alignwide:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: var(--wp--style--global--wide-size);}
+		.is-root-container.alignfull { max-width: none; margin-left: auto; margin-right: auto;}
+		.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;
+
+	const localRef = useRef();
+	const typewriterRef = useTypewriter();
+	const contentRef = useMergeRefs(
+		[
+			localRef,
+			renderingMode === 'post-only' ? typewriterRef : undefined,
+		].filter( ( r ) => !! r )
+	);
+
+	return (
+		<BlockCanvas
+			shouldIframe={
+				! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType )
+			}
+			contentRef={ contentRef }
+			styles={ styles }
+			height="100%"
+			iframeProps={ {
+				...iframeProps,
+				style: {
+					...iframeProps?.style,
+					...deviceStyles,
+				},
+			} }
+		>
+			{ themeSupportsLayout &&
+				! themeHasDisabledLayoutStyles &&
+				renderingMode === 'post-only' && (
+					<>
+						<LayoutStyle
+							selector=".editor-editor-canvas__post-title-wrapper"
+							layout={ fallbackLayout }
+						/>
+						<LayoutStyle
+							selector=".block-editor-block-list__layout.is-root-container"
+							layout={ postEditorLayout }
+						/>
+						{ align && <LayoutStyle css={ alignCSS } /> }
+						{ postContentLayoutStyles && (
+							<LayoutStyle
+								layout={ postContentLayout }
+								css={ postContentLayoutStyles }
+							/>
+						) }
+					</>
+				) }
+			{ renderingMode === 'post-only' && (
+				<div
+					className={ classnames(
+						'editor-editor-canvas__post-title-wrapper',
+						// The following class is only here for backward comapatibility
+						// some themes might be using it to style the post title.
+						'edit-post-visual-editor__post-title-wrapper',
+						{
+							'has-global-padding': hasRootPaddingAwareAlignments,
+						}
+					) }
+					contentEditable={ false }
+					ref={ observeTypingRef }
+					style={ {
+						// This is using inline styles
+						// so it's applied for both iframed and non iframed editors.
+						marginTop: '4rem',
+					} }
+				>
+					<PostTitle ref={ titleRef } />
+				</div>
+			) }
+			<RecursionProvider
+				blockName={ wrapperBlockName }
+				uniqueId={ wrapperUniqueId }
+			>
+				<BlockList
+					className={ classnames(
+						className,
+						'is-' + deviceType.toLowerCase() + '-preview',
+						renderingMode !== 'post-only'
+							? 'wp-site-blocks'
+							: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
+					) }
+					layout={ blockListLayout }
+					dropZoneElement={
+						// When iframed, pass in the html element of the iframe to
+						// ensure the drop zone extends to the edges of the iframe.
+						disableIframe
+							? localRef.current
+							: localRef.current?.parentNode
+					}
+					renderAppender={ renderAppender }
+				/>
+				<EditTemplateBlocksNotification contentRef={ localRef } />
+			</RecursionProvider>
+			{ children }
+		</BlockCanvas>
+	);
+}
+
+export default EditorCanvas;

package/src/components/index.js

@@ -8,6 +8,7 @@ export * from './autocompleters';
 
 // Post Related Components.
 export { default as AutosaveMonitor } from './autosave-monitor';
+export { default as DocumentBar } from './document-bar';
 export { default as DocumentOutline } from './document-outline';
 export { default as DocumentOutlineCheck } from './document-outline/check';
 export { EditorKeyboardShortcuts };
@@ -23,7 +24,8 @@ export { default as LocalAutosaveMonitor } from './local-autosave-monitor';
 export { default as PageAttributesCheck } from './page-attributes/check';
 export { default as PageAttributesOrder } from './page-attributes/order';
 export { default as PageAttributesParent } from './page-attributes/parent';
-export { default as PageTemplate } from './post-template';
+export { default as PageTemplate } from './post-template/classic-theme';
+export { default as PostTemplatePanel } from './post-template/panel';
 export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';
 export { default as PostAuthorPanel } from './post-author/panel';

package/src/components/post-publish-button/index.js

@@ -176,6 +176,7 @@ export class PostPublishButton extends Component {
 			className: 'editor-post-publish-panel__toggle',
 			isBusy: isSaving && isPublished,
 			variant: 'primary',
+			size: 'compact',
 			onClick: this.createOnClick( onClickToggle ),
 		};
 

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -10,7 +10,6 @@ import {
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { upload } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import { isBlobURL } from '@wordpress/blob';
@@ -135,7 +134,7 @@ export default function PostFormatPanel() {
 		<PanelBody initialOpen={ true } title={ panelBodyTitle }>
 			<p>
 				{ __(
-					'There are some external images in the post which can be uploaded to the media library. Images coming from different domains may not always display correctly, load slowly for visitors, or be removed unexpectedly.'
+					'Upload external images to the Media Library. Images from different domains may load slowly, display incorrectly, or be removed unexpectedly.'
 				) }
 			</p>
 			<div
@@ -153,12 +152,8 @@ export default function PostFormatPanel() {
 				{ isUploading ? (
 					<Spinner />
 				) : (
-					<Button
-						icon={ upload }
-						variant="primary"
-						onClick={ uploadImages }
-					>
-						{ __( 'Upload all' ) }
+					<Button variant="primary" onClick={ uploadImages }>
+						{ __( 'Upload' ) }
 					</Button>
 				) }
 			</div>

package/src/components/post-saved-state/index.js

@@ -168,6 +168,7 @@ export default function PostSavedState( {
 				}
 				onClick={ isDisabled ? undefined : () => savePost() }
 				variant="tertiary"
+				size="compact"
 				icon={ isLargeViewport ? undefined : cloudUpload }
 				// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
 				aria-label={ buttonAccessibleLabel }

package/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -4,7 +4,7 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
 <button
   aria-disabled="true"
   aria-label="Save draft"
-  class="components-button is-tertiary has-icon"
+  class="components-button is-compact is-tertiary has-icon"
   type="button"
 >
   <svg
@@ -26,7 +26,7 @@ exports[`PostSavedState should return Save button if edits to be saved 1`] = `
 <button
   aria-disabled="false"
   aria-label="Save draft"
-  class="components-button editor-post-save-draft is-tertiary"
+  class="components-button editor-post-save-draft is-compact is-tertiary"
   type="button"
 >
   Save draft

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

@@ -49,7 +49,7 @@ export default function PostSchedulePanel() {
 								label
 							) }
 							label={ fullLabel }
-							showTooltip
+							showTooltip={ label !== fullLabel }
 							aria-expanded={ isOpen }
 						>
 							{ label }

package/src/components/post-template/block-theme.js

@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecord } from '@wordpress/core-data';
+import { check } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import SwapTemplateButton from './swap-template-button';
+import ResetDefaultTemplate from './reset-default-template';
+import { unlock } from '../../lock-unlock';
+import CreateNewTemplate from './create-new-template';
+
+const POPOVER_PROPS = {
+	className: 'editor-post-template__dropdown',
+	placement: 'bottom-start',
+};
+
+export default function BlockThemeControl( { id } ) {
+	const { isTemplateHidden } = useSelect( ( select ) => {
+		const { getRenderingMode } = unlock( select( editorStore ) );
+		return {
+			isTemplateHidden: getRenderingMode() === 'post-only',
+		};
+	}, [] );
+	const { editedRecord: template, hasResolved } = useEntityRecord(
+		'postType',
+		'wp_template',
+		id
+	);
+	const { getEditorSettings } = useSelect( editorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+
+	if ( ! hasResolved ) {
+		return null;
+	}
+
+	return (
+		<DropdownMenu
+			popoverProps={ POPOVER_PROPS }
+			focusOnMount
+			toggleProps={ {
+				variant: 'tertiary',
+			} }
+			label={ __( 'Template options' ) }
+			text={ decodeEntities( template.title ) }
+			icon={ null }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								setRenderingMode( 'template-only' );
+								onClose();
+								createSuccessNotice(
+									__(
+										'Editing template. Changes made here affect all posts and pages that use the template.'
+									),
+									{
+										type: 'snackbar',
+										actions: [
+											{
+												label: __( 'Go back' ),
+												onClick: () =>
+													setRenderingMode(
+														getEditorSettings()
+															.defaultRenderingMode
+													),
+											},
+										],
+									}
+								);
+							} }
+						>
+							{ __( 'Edit template' ) }
+						</MenuItem>
+						<SwapTemplateButton onClick={ onClose } />
+						<ResetDefaultTemplate onClick={ onClose } />
+						<CreateNewTemplate onClick={ onClose } />
+					</MenuGroup>
+					<MenuGroup>
+						<MenuItem
+							icon={ ! isTemplateHidden ? check : undefined }
+							isPressed={ ! isTemplateHidden }
+							onClick={ () => {
+								setRenderingMode(
+									isTemplateHidden
+										? 'template-locked'
+										: 'post-only'
+								);
+							} }
+						>
+							{ __( 'Template preview' ) }
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}