@wordpress/editor 13.34.0 → 14.0.0

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

@@ -0,0 +1,254 @@
+/**
+ * External dependencies
+ */
+import deepmerge from 'deepmerge';
+import { isPlainObject } from 'is-plain-object';
+
+/**
+ * WordPress dependencies
+ */
+import { registerBlockStyle, store as blocksStore } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useMemo, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import setNestedValue from '../../utils/set-nested-value';
+
+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,
+	} );
+}
+
+/**
+ * Resolves shared block style variation definitions from the user origin
+ * under their respective block types and registers the block style if required.
+ *
+ * @param {Object} userConfig Current user origin global styles data.
+ * @return {Object} Updated global styles data.
+ */
+function useResolvedBlockStyleVariationsConfig( userConfig ) {
+	const { getBlockStyles } = useSelect( blocksStore );
+	const sharedVariations = userConfig?.styles?.blocks?.variations;
+
+	// Collect block style variation definitions to merge and unregistered
+	// block styles for automatic registration.
+	const [ userConfigToMerge, unregisteredStyles ] = useMemo( () => {
+		if ( ! sharedVariations ) {
+			return [];
+		}
+
+		const variationsConfigToMerge = {};
+		const unregisteredBlockStyles = [];
+
+		Object.entries( sharedVariations ).forEach(
+			( [ variationName, variation ] ) => {
+				if ( ! variation?.blockTypes?.length ) {
+					return;
+				}
+
+				variation.blockTypes.forEach( ( blockName ) => {
+					const blockStyles = getBlockStyles( blockName );
+					const registeredBlockStyle = blockStyles.find(
+						( { name } ) => name === variationName
+					);
+
+					if ( ! registeredBlockStyle ) {
+						unregisteredBlockStyles.push( [
+							blockName,
+							{
+								name: variationName,
+								label: variationName,
+							},
+						] );
+					}
+
+					const path = [
+						'styles',
+						'blocks',
+						blockName,
+						'variations',
+						variationName,
+					];
+					setNestedValue( variationsConfigToMerge, path, variation );
+				} );
+			}
+		);
+
+		return [ variationsConfigToMerge, unregisteredBlockStyles ];
+	}, [ sharedVariations, getBlockStyles ] );
+
+	// Automatically register missing block styles from variations.
+	useEffect(
+		() =>
+			unregisteredStyles?.forEach( ( unregisteredStyle ) =>
+				registerBlockStyle( ...unregisteredStyle )
+			),
+		[ unregisteredStyles ]
+	);
+
+	// Merge shared block style variation definitions into overall user config.
+	const updatedConfig = useMemo( () => {
+		if ( ! userConfigToMerge ) {
+			return userConfig;
+		}
+
+		return deepmerge( userConfigToMerge, userConfig );
+	}, [ userConfigToMerge, userConfig ] );
+
+	return updatedConfig;
+}
+
+function useGlobalStylesUserConfig() {
+	const { globalStylesId, isReady, settings, styles, _links } = 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,
+				_links: record?._links,
+			};
+		},
+		[]
+	);
+
+	const { getEditedEntityRecord } = useSelect( coreStore );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const config = useMemo( () => {
+		return {
+			settings: settings ?? {},
+			styles: styles ?? {},
+			_links: _links ?? {},
+		};
+	}, [ settings, styles, _links ] );
+
+	const setConfig = useCallback(
+		( callback, options = {} ) => {
+			const record = getEditedEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId
+			);
+
+			const currentConfig = {
+				styles: record?.styles ?? {},
+				settings: record?.settings ?? {},
+				_links: record?._links ?? {},
+			};
+			const updatedConfig = callback( currentConfig );
+
+			editEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId,
+				{
+					styles: cleanEmptyObject( updatedConfig.styles ) || {},
+					settings: cleanEmptyObject( updatedConfig.settings ) || {},
+					_links: cleanEmptyObject( updatedConfig._links ) || {},
+				},
+				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 userConfigWithVariations =
+		useResolvedBlockStyleVariationsConfig( userConfig );
+
+	const mergedConfig = useMemo( () => {
+		if ( ! baseConfig || ! userConfigWithVariations ) {
+			return {};
+		}
+
+		return mergeBaseAndUserConfigs( baseConfig, userConfigWithVariations );
+	}, [ userConfigWithVariations, baseConfig ] );
+
+	const context = useMemo( () => {
+		return {
+			isReady: isUserConfigReady && isBaseConfigReady,
+			user: userConfigWithVariations,
+			base: baseConfig,
+			merged: mergedConfig,
+			setUserConfig,
+		};
+	}, [
+		mergedConfig,
+		userConfigWithVariations,
+		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>
+	);
+}

package/src/components/header/back-button.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalUseSlotFills as useSlotFills,
+	createSlotFill,
+} from '@wordpress/components';
+
+// Keeping an old name for backward compatibility.
+const slotName = '__experimentalMainDashboardButton';
+
+const { Fill, Slot } = createSlotFill( slotName );
+
+const BackButton = Fill;
+const BackButtonSlot = ( { children } ) => {
+	const fills = useSlotFills( slotName );
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return children;
+	}
+
+	return <Slot bubblesVirtually />;
+};
+BackButton.Slot = BackButtonSlot;
+
+export default BackButton;

package/src/components/header/index.js

@@ -0,0 +1,169 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+import { __unstableMotion as motion } from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useState } from '@wordpress/element';
+import { PinnedItems } from '@wordpress/interface';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import BackButton from './back-button';
+import CollapsableBlockToolbar from '../collapsible-block-toolbar';
+import DocumentBar from '../document-bar';
+import DocumentTools from '../document-tools';
+import MoreMenu from '../more-menu';
+import PostPreviewButton from '../post-preview-button';
+import PostPublishButtonOrToggle from '../post-publish-button/post-publish-button-or-toggle';
+import PostSavedState from '../post-saved-state';
+import PostTypeSupportCheck from '../post-type-support-check';
+import PostViewLink from '../post-view-link';
+import PreviewDropdown from '../preview-dropdown';
+import { store as editorStore } from '../../store';
+
+const toolbarVariations = {
+	distractionFreeDisabled: { y: '-50px' },
+	distractionFreeHover: { y: 0 },
+	distractionFreeHidden: { y: '-50px' },
+	visible: { y: 0 },
+	hidden: { y: 0 },
+};
+
+const backButtonVariations = {
+	distractionFreeDisabled: { x: '-100%' },
+	distractionFreeHover: { x: 0 },
+	distractionFreeHidden: { x: '-100%' },
+	visible: { x: 0 },
+	hidden: { x: 0 },
+};
+
+function Header( {
+	customSaveButton,
+	forceIsDirty,
+	forceDisableBlockTools,
+	setEntitiesSavedStatesCallback,
+	title,
+} ) {
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const {
+		isTextEditor,
+		isPublishSidebarOpened,
+		showIconLabels,
+		hasFixedToolbar,
+		isNestedEntity,
+		isZoomedOutView,
+	} = useSelect( ( select ) => {
+		const { get: getPreference } = select( preferencesStore );
+		const {
+			getEditorMode,
+			getEditorSettings,
+			isPublishSidebarOpened: _isPublishSidebarOpened,
+		} = select( editorStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+
+		return {
+			isTextEditor: getEditorMode() === 'text',
+			isPublishSidebarOpened: _isPublishSidebarOpened(),
+			showIconLabels: getPreference( 'core', 'showIconLabels' ),
+			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+			isNestedEntity:
+				!! getEditorSettings().onNavigateToPreviousEntityRecord,
+			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
+		};
+	}, [] );
+
+	const hasTopToolbar = isLargeViewport && hasFixedToolbar;
+
+	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
+		useState( true );
+
+	// The edit-post-header classname is only kept for backward compatibilty
+	// as some plugins might be relying on its presence.
+	return (
+		<div className="editor-header edit-post-header">
+			<motion.div
+				variants={ backButtonVariations }
+				transition={ { type: 'tween' } }
+			>
+				<BackButton.Slot />
+			</motion.div>
+			<motion.div
+				variants={ toolbarVariations }
+				className="editor-header__toolbar"
+				transition={ { type: 'tween' } }
+			>
+				<DocumentTools
+					disableBlockTools={ forceDisableBlockTools || isTextEditor }
+				/>
+				{ hasTopToolbar && (
+					<CollapsableBlockToolbar
+						isCollapsed={ isBlockToolsCollapsed }
+						onToggle={ setIsBlockToolsCollapsed }
+					/>
+				) }
+				<div
+					className={ clsx( 'editor-header__center', {
+						'is-collapsed':
+							! isBlockToolsCollapsed && hasTopToolbar,
+					} ) }
+				>
+					{ ! title ? (
+						<PostTypeSupportCheck supportKeys="title">
+							<DocumentBar />
+						</PostTypeSupportCheck>
+					) : (
+						title
+					) }
+				</div>
+			</motion.div>
+			<motion.div
+				variants={ toolbarVariations }
+				transition={ { type: 'tween' } }
+				className="editor-header__settings"
+			>
+				{ ! customSaveButton && ! isPublishSidebarOpened && (
+					// This button isn't completely hidden by the publish sidebar.
+					// We can't hide the whole toolbar when the publish sidebar is open because
+					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+					// We track that DOM node to return focus to the PostPublishButtonOrToggle
+					// when the publish sidebar has been closed.
+					<PostSavedState forceIsDirty={ forceIsDirty } />
+				) }
+				<PreviewDropdown
+					forceIsAutosaveable={ forceIsDirty }
+					disabled={ isNestedEntity || isZoomedOutView }
+				/>
+				<PostPreviewButton
+					className="editor-header__post-preview-button"
+					forceIsAutosaveable={ forceIsDirty }
+				/>
+				<PostViewLink />
+				{ ! customSaveButton && (
+					<PostPublishButtonOrToggle
+						forceIsDirty={ forceIsDirty }
+						setEntitiesSavedStatesCallback={
+							setEntitiesSavedStatesCallback
+						}
+					/>
+				) }
+				{ customSaveButton }
+				{ ( isWideViewport || ! showIconLabels ) && (
+					<PinnedItems.Slot scope="core" />
+				) }
+				<MoreMenu />
+			</motion.div>
+		</div>
+	);
+}
+
+export default Header;

package/src/components/header/style.scss

@@ -0,0 +1,236 @@
+.editor-header {
+	height: $header-height;
+	background: $white;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
+	max-width: 100vw;
+	justify-content: space-between;
+
+	// Make toolbar sticky on larger breakpoints
+	@include break-zoomed-in {
+		flex-wrap: nowrap;
+	}
+}
+
+.editor-header__toolbar {
+	display: flex;
+	// Allow this area to shrink to fit the toolbar buttons.
+	flex-shrink: 8;
+	// Take up the space of the toolbar so it can be justified to the left side of the toolbar.
+	flex-grow: 3;
+	// Hide the overflow so flex will limit its width. Block toolbar will allow scrolling on fixed toolbar.
+	overflow: hidden;
+	// Leave enough room for the focus ring to show.
+	padding: 2px 0;
+	align-items: center;
+	// Allow focus ring to be fully visible on furthest right button.
+	@include break-medium() {
+		padding-right: var(--wp-admin-border-width-focus);
+	}
+
+	.table-of-contents {
+		display: none;
+
+		@include break-small() {
+			display: block;
+		}
+	}
+}
+
+.editor-header__center {
+	flex-grow: 1;
+	display: flex;
+	justify-content: center;
+	// Flex items will, by default, refuse to shrink below a minimum
+	// intrinsic width. In order to shrink this flexbox item, and
+	// subsequently truncate child text, we set an explicit min-width.
+	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
+	min-width: 0;
+
+	&.is-collapsed {
+		display: none;
+	}
+}
+
+/**
+ * Buttons on the right side
+ */
+
+.editor-header__settings {
+	display: inline-flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	padding-right: $grid-unit-05;
+
+	@include break-small () {
+		padding-right: $grid-unit-10;
+	}
+
+	gap: $grid-unit-10;
+}
+
+/**
+ * Show icon labels.
+ */
+
+.show-icon-labels.interface-pinned-items,
+.show-icon-labels .editor-header {
+	.components-button.has-icon {
+		width: auto;
+
+		// Hide the button icons when labels are set to display...
+		svg {
+			display: none;
+		}
+		// ... and display labels.
+		&::after {
+			content: attr(aria-label);
+		}
+		&[aria-disabled="true"] {
+			background-color: transparent;
+		}
+	}
+	.is-tertiary {
+		&:active {
+			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
+			background-color: transparent;
+		}
+	}
+	// Exception for drodpdown toggle buttons.
+	.components-button.has-icon.button-toggle {
+		svg {
+			display: block;
+		}
+		&::after {
+			content: none;
+		}
+	}
+
+	// Don't hide MenuItemsChoice check icons
+	.components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
+		display: block;
+	}
+	.editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
+	.interface-pinned-items .components-button {
+		padding-left: $grid-unit;
+		padding-right: $grid-unit;
+
+		@include break-small {
+			padding-left: $grid-unit-15;
+			padding-right: $grid-unit-15;
+		}
+	}
+
+	.editor-post-save-draft.editor-post-save-draft,
+	.editor-post-saved-state.editor-post-saved-state {
+		&::after {
+			content: none;
+		}
+	}
+}
+
+.show-icon-labels {
+	.editor-header__toolbar .block-editor-block-mover {
+		// Modified group borders.
+		border-left: none;
+
+		&::before {
+			content: "";
+			width: $border-width;
+			height: $grid-unit-30;
+			background-color: $gray-300;
+			margin-top: $grid-unit-05;
+			margin-left: $grid-unit;
+		}
+
+		// Modified block movers horizontal separator.
+		.block-editor-block-mover__move-button-container {
+			&::before {
+				width: calc(100% - #{$grid-unit-30});
+				background: $gray-300;
+				left: calc(50% + 1px);
+			}
+		}
+	}
+}
+
+.show-icon-labels.interface-pinned-items {
+	padding: 6px $grid-unit-15 $grid-unit-15;
+	margin-top: 0;
+	margin-bottom: 0;
+	margin-left: -$grid-unit-15;
+	margin-right: -$grid-unit-15;
+	border-bottom: 1px solid $gray-400;
+	display: block;
+
+	> .components-button.has-icon {
+		margin: 0;
+		padding: 6px 6px 6px $grid-unit;
+		width: 14.625rem;
+		justify-content: flex-start;
+
+		&[aria-expanded="true"] svg {
+			display: block;
+			max-width: $grid-unit-30;
+		}
+		&[aria-expanded="false"] {
+			padding-left: $grid-unit-50;
+		}
+		svg {
+			margin-right: 8px;
+		}
+	}
+}
+
+.editor-header__post-preview-button {
+	@include break-small {
+		display: none;
+	}
+}
+
+.is-distraction-free {
+	.interface-interface-skeleton__header {
+		border-bottom: none;
+	}
+
+	.editor-header {
+		background-color: $white;
+		border-bottom: 1px solid #e0e0e0;
+		position: absolute;
+		width: 100%;
+
+
+		// hide some parts
+		& > .edit-post-header__settings > .edit-post-header__post-preview-button {
+			visibility: hidden;
+		}
+
+		& > .editor-header__toolbar .editor-document-tools__document-overview-toggle,
+		& > .editor-header__settings > .editor-preview-dropdown,
+		& > .editor-header__settings > .interface-pinned-items {
+			display: none;
+		}
+
+	}
+
+	// We need ! important because we override inline styles
+	// set by the motion component.
+	.interface-interface-skeleton__header:focus-within {
+		opacity: 1 !important;
+		div {
+			transform: translateX(0) translateZ(0) !important;
+		}
+
+	}
+
+	.components-editor-notices__dismissible {
+		position: absolute;
+		z-index: 35;
+	}
+}
+
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}