@wordpress/editor 13.34.0 → 13.35.0

package/src/components/block-settings-menu/content-only-settings-menu.js

@@ -0,0 +1,175 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockSettingsMenuControls,
+	__unstableBlockSettingsMenuFirstItem as BlockSettingsMenuFirstItem,
+	store as blockEditorStore,
+	useBlockDisplayInformation,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalText as Text, MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
+	const { entity, onNavigateToEntityRecord } = useSelect(
+		( select ) => {
+			const {
+				getBlockEditingMode,
+				getBlockParentsByBlockName,
+				getSettings,
+				getBlockAttributes,
+			} = select( blockEditorStore );
+			const contentOnly =
+				getBlockEditingMode( clientId ) === 'contentOnly';
+			if ( ! contentOnly ) {
+				return {};
+			}
+			const patternParent = getBlockParentsByBlockName(
+				clientId,
+				'core/block',
+				true
+			)[ 0 ];
+
+			let record;
+			if ( patternParent ) {
+				record = select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_block',
+					getBlockAttributes( patternParent ).ref
+				);
+			} else {
+				const { getCurrentPostType, getCurrentTemplateId } =
+					select( editorStore );
+				const currentPostType = getCurrentPostType();
+				const templateId = getCurrentTemplateId();
+				if ( currentPostType === 'page' && templateId ) {
+					record = select( coreStore ).getEntityRecord(
+						'postType',
+						'wp_template',
+						templateId
+					);
+				}
+			}
+			return {
+				entity: record,
+				onNavigateToEntityRecord:
+					getSettings().onNavigateToEntityRecord,
+			};
+		},
+		[ clientId ]
+	);
+
+	if ( ! entity ) {
+		return (
+			<TemplateLockContentOnlyMenuItems
+				clientId={ clientId }
+				onClose={ onClose }
+			/>
+		);
+	}
+
+	const isPattern = entity.type === 'wp_block';
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<MenuItem
+					onClick={ () => {
+						onNavigateToEntityRecord( {
+							postId: entity.id,
+							postType: entity.type,
+						} );
+					} }
+				>
+					{ isPattern ? __( 'Edit pattern' ) : __( 'Edit template' ) }
+				</MenuItem>
+			</BlockSettingsMenuFirstItem>
+			<Text
+				variant="muted"
+				as="p"
+				className="editor-content-only-settings-menu__description"
+			>
+				{ isPattern
+					? __(
+							'Edit the pattern to move, delete, or make further changes to this block.'
+					  )
+					: __(
+							'Edit the template to move, delete, or make further changes to this block.'
+					  ) }
+			</Text>
+		</>
+	);
+}
+
+function TemplateLockContentOnlyMenuItems( { clientId, onClose } ) {
+	const { contentLockingParent } = useSelect(
+		( select ) => {
+			const { getContentLockingParent } = unlock(
+				select( blockEditorStore )
+			);
+			return {
+				contentLockingParent: getContentLockingParent( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const blockDisplayInformation =
+		useBlockDisplayInformation( contentLockingParent );
+	// Disable reason: We're using a hook here so it has to be on top-level.
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { modifyContentLockBlock, selectBlock } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	if ( ! blockDisplayInformation?.title ) {
+		return null;
+	}
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<MenuItem
+					onClick={ () => {
+						selectBlock( contentLockingParent );
+						modifyContentLockBlock( contentLockingParent );
+						onClose();
+					} }
+				>
+					{ __( 'Unlock' ) }
+				</MenuItem>
+			</BlockSettingsMenuFirstItem>
+			<Text
+				variant="muted"
+				as="p"
+				className="editor-content-only-settings-menu__description"
+			>
+				{ __(
+					'Temporarily unlock the parent block to edit, delete or make further changes to this block.'
+				) }
+			</Text>
+		</>
+	);
+}
+
+export default function ContentOnlySettingsMenu() {
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds, onClose } ) =>
+				selectedClientIds.length === 1 && (
+					<ContentOnlySettingsMenuItems
+						clientId={ selectedClientIds[ 0 ] }
+						onClose={ onClose }
+					/>
+				)
+			}
+		</BlockSettingsMenuControls>
+	);
+}

package/src/components/block-settings-menu/content-only-settings-menu.native.js

@@ -0,0 +1,4 @@
+// Render nothing in native for now.
+export default function ContentOnlySettingsMenu() {
+	return null;
+}

package/src/components/block-settings-menu/style.scss

@@ -0,0 +1,4 @@
+.editor-content-only-settings-menu__description {
+	padding: $grid-unit;
+	min-width: 235px;
+}

package/src/components/collapsible-block-toolbar/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -49,7 +49,7 @@ function CollapsableBlockToolbar( { isCollapsed, onToggle } ) {
 	return (
 		<>
 			<div
-				className={ classnames( 'editor-collapsible-block-toolbar', {
+				className={ clsx( 'editor-collapsible-block-toolbar', {
 					'is-collapsed': isCollapsed || ! hasBlockSelection,
 				} ) }
 			>

package/src/components/document-bar/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -111,7 +111,7 @@ export default function DocumentBar() {
 
 	return (
 		<div
-			className={ classnames( 'editor-document-bar', {
+			className={ clsx( 'editor-document-bar', {
 				'has-back-button': hasBackButton,
 				'is-global': isGlobalEntity,
 			} ) }

package/src/components/document-outline/item.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const TableOfContentsItem = ( {
 	children,
@@ -11,7 +11,7 @@ const TableOfContentsItem = ( {
 	onSelect,
 } ) => (
 	<li
-		className={ classnames(
+		className={ clsx(
 			'document-outline__item',
 			`is-${ level.toLowerCase() }`,
 			{

package/src/components/document-tools/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import {
 } from '@wordpress/block-editor';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
-import { useRef, useCallback } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -35,11 +35,9 @@ const preventDefault = ( event ) => {
 function DocumentTools( {
 	className,
 	disableBlockTools = false,
-	children,
 	// This is a temporary prop until the list view is fully unified between post and site editors.
 	listViewLabel = __( 'Document Overview' ),
 } ) {
-	const inserterButton = useRef();
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editorStore );
 	const {
@@ -47,16 +45,21 @@ function DocumentTools( {
 		isInserterOpened,
 		isListViewOpen,
 		listViewShortcut,
+		inserterSidebarToggleRef,
 		listViewToggleRef,
 		hasFixedToolbar,
 		showIconLabels,
 	} = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { get } = select( preferencesStore );
-		const { isListViewOpened, getListViewToggleRef } = unlock(
-			select( editorStore )
-		);
+		const {
+			isListViewOpened,
+			getEditorMode,
+			getInserterSidebarToggleRef,
+			getListViewToggleRef,
+		} = unlock( select( editorStore ) );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
 
 		return {
 			isInserterOpened: select( editorStore ).isInserterOpened(),
@@ -64,10 +67,13 @@ function DocumentTools( {
 			listViewShortcut: getShortcutRepresentation(
 				'core/editor/toggle-list-view'
 			),
+			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
 			listViewToggleRef: getListViewToggleRef(),
 			hasFixedToolbar: getSettings().hasFixedToolbar,
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
+			isVisualMode: getEditorMode() === 'visual',
+			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
@@ -82,17 +88,10 @@ function DocumentTools( {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
-	const toggleInserter = useCallback( () => {
-		if ( isInserterOpened ) {
-			// Focusing the inserter button should close the inserter popover.
-			// However, there are some cases it won't close when the focus is lost.
-			// See https://github.com/WordPress/gutenberg/issues/43090 for more details.
-			inserterButton.current.focus();
-			setIsInserterOpened( false );
-		} else {
-			setIsInserterOpened( true );
-		}
-	}, [ isInserterOpened, setIsInserterOpened ] );
+	const toggleInserter = useCallback(
+		() => setIsInserterOpened( ! isInserterOpened ),
+		[ isInserterOpened, setIsInserterOpened ]
+	);
 
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const longLabel = _x(
@@ -107,7 +106,7 @@ function DocumentTools( {
 		// supported, but we're keeping it in the list of class names for backwards
 		// compatibility.
 		<NavigableToolbar
-			className={ classnames(
+			className={ clsx(
 				'editor-document-tools',
 				'edit-post-header-toolbar',
 				className
@@ -118,7 +117,7 @@ function DocumentTools( {
 			<div className="editor-document-tools__left">
 				{ ! isDistractionFree && (
 					<ToolbarItem
-						ref={ inserterButton }
+						ref={ inserterSidebarToggleRef }
 						as={ Button }
 						className="editor-document-tools__inserter-toggle"
 						variant="primary"
@@ -179,7 +178,6 @@ function DocumentTools( {
 						) }
 					</>
 				) }
-				{ children }
 			</div>
 		</NavigableToolbar>
 	);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -161,13 +161,17 @@ function EditorCanvas( {
 		hasRootPaddingAwareAlignments,
 		themeHasDisabledLayoutStyles,
 		themeSupportsLayout,
+		isZoomOutMode,
 	} = useSelect( ( select ) => {
-		const _settings = select( blockEditorStore ).getSettings();
+		const { getSettings, __unstableGetEditorMode } =
+			select( blockEditorStore );
+		const _settings = getSettings();
 		return {
 			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
 			themeSupportsLayout: _settings.supportsLayout,
 			hasRootPaddingAwareAlignments:
 				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
@@ -248,7 +252,7 @@ function EditorCanvas( {
 		'core/post-content'
 	);
 
-	const blockListLayoutClass = classnames(
+	const blockListLayoutClass = clsx(
 		{
 			'is-layout-flow': ! themeSupportsLayout,
 		},
@@ -319,6 +323,13 @@ function EditorCanvas( {
 		} ),
 	] );
 
+	const zoomOutProps = isZoomOutMode
+		? {
+				scale: 'default',
+				frameSize: '20px',
+		  }
+		: {};
+
 	return (
 		<BlockCanvas
 			shouldIframe={
@@ -328,10 +339,11 @@ function EditorCanvas( {
 			styles={ styles }
 			height="100%"
 			iframeProps={ {
-				className: classnames( 'editor-canvas__iframe', {
+				className: clsx( 'editor-canvas__iframe', {
 					'has-editor-padding': showEditorPadding,
 				} ),
 				...iframeProps,
+				...zoomOutProps,
 				style: {
 					...iframeProps?.style,
 					...deviceStyles,
@@ -362,7 +374,7 @@ function EditorCanvas( {
 				) }
 			{ renderingMode === 'post-only' && ! isDesignPostType && (
 				<div
-					className={ classnames(
+					className={ clsx(
 						'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.
@@ -387,7 +399,7 @@ function EditorCanvas( {
 				uniqueId={ wrapperUniqueId }
 			>
 				<BlockList
-					className={ classnames(
+					className={ clsx(
 						className,
 						'is-' + deviceType.toLowerCase() + '-preview',
 						renderingMode !== 'post-only' || isDesignPostType

package/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -72,7 +72,7 @@ function EditorKeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/editor/toggle-list-view',
 			category: 'global',
-			description: __( 'Open the block list view.' ),
+			description: __( 'Open the List View.' ),
 			keyCombination: {
 				modifier: 'access',
 				character: 'o',

package/src/components/global-styles-provider/index.js

@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import deepmerge from 'deepmerge';
+import { isPlainObject } from 'is-plain-object';
+
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext, cleanEmptyObject } = unlock(
+	blockEditorPrivateApis
+);
+
+export function mergeBaseAndUserConfigs( base, user ) {
+	return deepmerge( base, user, {
+		// We only pass as arrays the presets,
+		// in which case we want the new array of values
+		// to override the old array (no merging).
+		isMergeableObject: isPlainObject,
+	} );
+}
+
+function useGlobalStylesUserConfig() {
+	const { globalStylesId, isReady, settings, styles } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const _globalStylesId =
+				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
+			const record = _globalStylesId
+				? getEditedEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId
+				  )
+				: undefined;
+
+			let hasResolved = false;
+			if (
+				hasFinishedResolution(
+					'__experimentalGetCurrentGlobalStylesId'
+				)
+			) {
+				hasResolved = _globalStylesId
+					? hasFinishedResolution( 'getEditedEntityRecord', [
+							'root',
+							'globalStyles',
+							_globalStylesId,
+					  ] )
+					: true;
+			}
+
+			return {
+				globalStylesId: _globalStylesId,
+				isReady: hasResolved,
+				settings: record?.settings,
+				styles: record?.styles,
+			};
+		},
+		[]
+	);
+
+	const { getEditedEntityRecord } = useSelect( coreStore );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const config = useMemo( () => {
+		return {
+			settings: settings ?? {},
+			styles: styles ?? {},
+		};
+	}, [ settings, styles ] );
+
+	const setConfig = useCallback(
+		( callback, options = {} ) => {
+			const record = getEditedEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId
+			);
+			const currentConfig = {
+				styles: record?.styles ?? {},
+				settings: record?.settings ?? {},
+			};
+			const updatedConfig = callback( currentConfig );
+			editEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId,
+				{
+					styles: cleanEmptyObject( updatedConfig.styles ) || {},
+					settings: cleanEmptyObject( updatedConfig.settings ) || {},
+				},
+				options
+			);
+		},
+		[ globalStylesId ]
+	);
+
+	return [ isReady, config, setConfig ];
+}
+
+function useGlobalStylesBaseConfig() {
+	const baseConfig = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeBaseGlobalStyles();
+	}, [] );
+
+	return [ !! baseConfig, baseConfig ];
+}
+
+export function useGlobalStylesContext() {
+	const [ isUserConfigReady, userConfig, setUserConfig ] =
+		useGlobalStylesUserConfig();
+	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
+	const mergedConfig = useMemo( () => {
+		if ( ! baseConfig || ! userConfig ) {
+			return {};
+		}
+		return mergeBaseAndUserConfigs( baseConfig, userConfig );
+	}, [ userConfig, baseConfig ] );
+	const context = useMemo( () => {
+		return {
+			isReady: isUserConfigReady && isBaseConfigReady,
+			user: userConfig,
+			base: baseConfig,
+			merged: mergedConfig,
+			setUserConfig,
+		};
+	}, [
+		mergedConfig,
+		userConfig,
+		baseConfig,
+		setUserConfig,
+		isUserConfigReady,
+		isBaseConfigReady,
+	] );
+
+	return context;
+}
+
+export function GlobalStylesProvider( { children } ) {
+	const context = useGlobalStylesContext();
+	if ( ! context.isReady ) {
+		return null;
+	}
+
+	return (
+		<GlobalStylesContext.Provider value={ context }>
+			{ children }
+		</GlobalStylesContext.Provider>
+	);
+}