@wordpress/global-styles-ui 1.1.0

package/src/root-menu.tsx

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import {
+	background,
+	typography,
+	color,
+	layout,
+	shadow as shadowIcon,
+} from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+// @ts-expect-error: Not typed yet.
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import type { GlobalStylesSettings } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationButtonAsItem } from './navigation-button';
+import { useSetting } from './hooks';
+import { unlock } from './lock-unlock';
+
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useHasColorPanel,
+	useSettingsForBlockElement,
+	useHasBackgroundPanel,
+} = unlock( blockEditorPrivateApis );
+
+function RootMenu() {
+	// Get the raw settings from our custom hook
+	const [ rawSettings ] = useSetting< GlobalStylesSettings >( '' );
+
+	// Process settings the same way as Gutenberg
+	const settings = useSettingsForBlockElement( rawSettings );
+
+	// Use the same panel detection logic as Gutenberg
+	const hasBackgroundPanel = useHasBackgroundPanel( rawSettings );
+	const hasTypographyPanel = useHasTypographyPanel( settings );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasShadowPanel = true; // Same as Gutenberg
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasLayoutPanel = hasDimensionsPanel;
+
+	return (
+		<>
+			<ItemGroup>
+				{ hasTypographyPanel && (
+					<NavigationButtonAsItem
+						icon={ typography }
+						path="/typography"
+					>
+						{ __( 'Typography' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasColorPanel && (
+					<NavigationButtonAsItem icon={ color } path="/colors">
+						{ __( 'Colors' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasBackgroundPanel && (
+					<NavigationButtonAsItem
+						icon={ background }
+						path="/background"
+						aria-label={ __( 'Background styles' ) }
+					>
+						{ __( 'Background' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasShadowPanel && (
+					<NavigationButtonAsItem icon={ shadowIcon } path="/shadows">
+						{ __( 'Shadows' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasLayoutPanel && (
+					<NavigationButtonAsItem icon={ layout } path="/layout">
+						{ __( 'Layout' ) }
+					</NavigationButtonAsItem>
+				) }
+			</ItemGroup>
+		</>
+	);
+}
+
+export default RootMenu;

package/src/screen-background.tsx

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+// @ts-expect-error: Not typed yet.
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __experimentalText as Text } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BackgroundPanel from './background-panel';
+import { ScreenHeader } from './screen-header';
+import { useSetting } from './hooks';
+import { unlock } from './lock-unlock';
+
+const { useHasBackgroundPanel } = unlock( blockEditorPrivateApis );
+
+function ScreenBackground() {
+	const [ settings ] = useSetting( '' );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Background' ) }
+				description={
+					<Text>
+						{ __( "Set styles for the site's background." ) }
+					</Text>
+				}
+			/>
+			{ hasBackgroundPanel && <BackgroundPanel /> }
+		</>
+	);
+}
+
+export default ScreenBackground;

package/src/screen-block-list.tsx

@@ -0,0 +1,198 @@
+/**
+ * WordPress dependencies
+ */
+// @ts-expect-error: Not typed yet.
+import { store as blocksStore } from '@wordpress/blocks';
+import { __, sprintf, _n } from '@wordpress/i18n';
+import {
+	FlexItem,
+	SearchControl,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import {
+	useState,
+	useEffect,
+	useRef,
+	useDeferredValue,
+	memo,
+} from '@wordpress/element';
+import {
+	BlockIcon,
+	privateApis as blockEditorPrivateApis,
+	// @ts-expect-error: Not typed yet.
+} from '@wordpress/block-editor';
+import { useDebounce } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockVariations } from './variations/variations-panel';
+import { ScreenHeader } from './screen-header';
+import { NavigationButtonAsItem } from './navigation-button';
+import { useSetting } from './hooks';
+import { unlock } from './lock-unlock';
+
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useHasBorderPanel,
+	useSettingsForBlockElement,
+	useHasColorPanel,
+} = unlock( blockEditorPrivateApis );
+
+function useSortedBlockTypes() {
+	const blockItems = useSelect(
+		( select ) => select( blocksStore ).getBlockTypes(),
+		[]
+	);
+	// Ensure core blocks are prioritized in the returned results,
+	// because third party blocks can be registered earlier than
+	// the core blocks (usually by using the `init` action),
+	// thus affecting the display order.
+	// We don't sort reusable blocks as they are handled differently.
+	const groupByType = ( blocks: any, block: any ) => {
+		const { core, noncore } = blocks;
+		const type = block.name.startsWith( 'core/' ) ? core : noncore;
+		type.push( block );
+		return blocks;
+	};
+	const { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(
+		groupByType,
+		{ core: [], noncore: [] }
+	);
+	return [ ...coreItems, ...nonCoreItems ];
+}
+
+export function useBlockHasGlobalStyles( blockName: string ) {
+	const [ rawSettings ] = useSetting( '', blockName );
+	const settings = useSettingsForBlockElement( rawSettings, blockName );
+	const hasTypographyPanel = useHasTypographyPanel( settings );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasBorderPanel = useHasBorderPanel( settings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+	const hasVariationsPanel = !! useBlockVariations( blockName )?.length;
+	const hasGlobalStyles =
+		hasTypographyPanel ||
+		hasColorPanel ||
+		hasLayoutPanel ||
+		hasVariationsPanel;
+	return hasGlobalStyles;
+}
+
+interface BlockMenuItemProps {
+	block: any;
+}
+
+function BlockMenuItem( { block }: BlockMenuItemProps ) {
+	const hasBlockMenuItem = useBlockHasGlobalStyles( block.name );
+	if ( ! hasBlockMenuItem ) {
+		return null;
+	}
+
+	return (
+		<NavigationButtonAsItem
+			path={ '/blocks/' + encodeURIComponent( block.name ) }
+		>
+			<HStack justify="flex-start">
+				<BlockIcon icon={ block.icon } />
+				<FlexItem>{ block.title }</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
+interface BlockListProps {
+	filterValue: string;
+}
+
+function BlockList( { filterValue }: BlockListProps ) {
+	const sortedBlockTypes = useSortedBlockTypes();
+	const debouncedSpeak = useDebounce( speak, 500 );
+	// @ts-expect-error - useSelect supports single argument calls
+	const { isMatchingSearchTerm } = useSelect( blocksStore );
+
+	const filteredBlockTypes = ! filterValue
+		? sortedBlockTypes
+		: sortedBlockTypes.filter( ( blockType ) =>
+				isMatchingSearchTerm( blockType, filterValue )
+		  );
+
+	const blockTypesListRef = useRef< HTMLDivElement >( null );
+
+	// Announce search results on change
+	useEffect( () => {
+		if ( ! filterValue ) {
+			return;
+		}
+		// We extract the results from the wrapper div's `ref` because
+		// filtered items can contain items that will eventually not
+		// render and there is no reliable way to detect when a child
+		// will return `null`.
+		// TODO: We should find a better way of handling this as it's
+		// fragile and depends on the number of rendered elements of `BlockMenuItem`,
+		// which is now one.
+		// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116
+		const count = blockTypesListRef.current?.childElementCount || 0;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage, 'polite' );
+	}, [ filterValue, debouncedSpeak ] );
+
+	return (
+		<div
+			ref={ blockTypesListRef }
+			className="global-styles-ui-block-types-item-list"
+			// By default, BlockMenuItem has a role=listitem so this div must have a list role.
+			role="list"
+		>
+			{ filteredBlockTypes.length === 0 ? (
+				<Text align="center" as="p">
+					{ __( 'No blocks found.' ) }
+				</Text>
+			) : (
+				filteredBlockTypes.map( ( block ) => (
+					<BlockMenuItem
+						block={ block }
+						key={ 'menu-itemblock-' + block.name }
+					/>
+				) )
+			) }
+		</div>
+	);
+}
+
+const MemoizedBlockList = memo( BlockList );
+
+function ScreenBlockList() {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const deferredFilterValue = useDeferredValue( filterValue );
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Blocks' ) }
+				description={ __(
+					'Customize the appearance of specific blocks and for the whole site.'
+				) }
+			/>
+			<SearchControl
+				__nextHasNoMarginBottom
+				className="global-styles-ui-block-types-search"
+				onChange={ setFilterValue }
+				value={ filterValue }
+				label={ __( 'Search' ) }
+				placeholder={ __( 'Search' ) }
+			/>
+			<MemoizedBlockList filterValue={ deferredFilterValue } />
+		</>
+	);
+}
+
+export default ScreenBlockList;

package/src/screen-block.tsx

@@ -0,0 +1,370 @@
+/**
+ * WordPress dependencies
+ */
+// @ts-expect-error: Not typed yet.
+import { getBlockType } from '@wordpress/blocks';
+// @ts-expect-error: Not typed yet.
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	PanelBody,
+	__experimentalVStack as VStack,
+	__experimentalHasSplitBorders as hasSplitBorders,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { ScreenHeader } from './screen-header';
+import BlockPreviewPanel from './block-preview-panel';
+import { Subtitle } from './subtitle';
+import {
+	useBlockVariations,
+	VariationsPanel,
+} from './variations/variations-panel';
+import { useStyle, useSetting } from './hooks';
+import { unlock } from './lock-unlock';
+
+// Initial control values.
+const BACKGROUND_BLOCK_DEFAULT_VALUES = {
+	backgroundSize: 'cover',
+	backgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.
+};
+
+function applyFallbackStyle( border: any ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	const hasColorOrWidth = border.color || border.width;
+
+	if ( ! border.style && hasColorOrWidth ) {
+		return { ...border, style: 'solid' };
+	}
+
+	if ( border.style && ! hasColorOrWidth ) {
+		return undefined;
+	}
+
+	return border;
+}
+
+function applyAllFallbackStyles( border: any ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
+
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useHasBorderPanel,
+	useSettingsForBlockElement,
+	useHasColorPanel,
+	useHasFiltersPanel,
+	useHasImageSettingsPanel,
+	useHasBackgroundPanel,
+	BackgroundPanel: StylesBackgroundPanel,
+	BorderPanel: StylesBorderPanel,
+	ColorPanel: StylesColorPanel,
+	TypographyPanel: StylesTypographyPanel,
+	DimensionsPanel: StylesDimensionsPanel,
+	FiltersPanel: StylesFiltersPanel,
+	ImageSettingsPanel,
+	AdvancedPanel: StylesAdvancedPanel,
+} = unlock( blockEditorPrivateApis );
+
+interface ScreenBlockProps {
+	name: string;
+	variation?: string;
+}
+
+function ScreenBlock( { name, variation }: ScreenBlockProps ) {
+	let prefixParts: string[] = [];
+	if ( variation ) {
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
+	}
+	const prefix = prefixParts.join( '.' );
+
+	const [ style ] = useStyle( prefix, name, 'user', false );
+	const [ inheritedStyle, setStyle ] = useStyle(
+		prefix,
+		name,
+		'merged',
+		false
+	);
+	const [ userSettings ] = useSetting( '', name, 'user' );
+	const [ rawSettings, setSettings ] = useSetting( '', name );
+	const settingsForBlockElement = useSettingsForBlockElement(
+		rawSettings,
+		name
+	);
+	const blockType = getBlockType( name );
+
+	// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
+	let disableBlockGap = false;
+	if (
+		settingsForBlockElement?.spacing?.blockGap &&
+		blockType?.supports?.spacing?.blockGap &&
+		( blockType?.supports?.spacing?.__experimentalSkipSerialization ===
+			true ||
+			blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
+				( spacingType: string ) => spacingType === 'blockGap'
+			) )
+	) {
+		disableBlockGap = true;
+	}
+
+	// Only allow `aspectRatio` support if the block is not the grouping block.
+	// The grouping block allows the user to use Group, Row and Stack variations,
+	// and it is highly likely that the user will not want to set an aspect ratio
+	// for all three at once. Until there is the ability to set a different aspect
+	// ratio for each variation, we disable the aspect ratio controls for the
+	// grouping block in global styles.
+	let disableAspectRatio = false;
+	if (
+		settingsForBlockElement?.dimensions?.aspectRatio &&
+		name === 'core/group'
+	) {
+		disableAspectRatio = true;
+	}
+
+	const settings = useMemo( () => {
+		const updatedSettings = structuredClone( settingsForBlockElement );
+		if ( disableBlockGap ) {
+			updatedSettings.spacing.blockGap = false;
+		}
+		if ( disableAspectRatio ) {
+			updatedSettings.dimensions.aspectRatio = false;
+		}
+		return updatedSettings;
+	}, [ settingsForBlockElement, disableBlockGap, disableAspectRatio ] );
+
+	const blockVariations = useBlockVariations( name );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	const hasTypographyPanel = useHasTypographyPanel( settings );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasBorderPanel = useHasBorderPanel( settings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasFiltersPanel = useHasFiltersPanel( settings );
+	const hasImageSettingsPanel = useHasImageSettingsPanel(
+		name,
+		userSettings,
+		settings
+	);
+	const hasVariationsPanel = !! blockVariations?.length && ! variation;
+	const { canEditCSS } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			canEditCSS: !! ( globalStyles as GlobalStylesConfig )?._links?.[
+				'wp:action-edit-css'
+			],
+		};
+	}, [] );
+	const currentBlockStyle = variation
+		? blockVariations.find( ( s: any ) => s.name === variation )
+		: null;
+
+	// These intermediary objects are needed because the "layout" property is stored
+	// in settings rather than styles.
+	const inheritedStyleWithLayout = useMemo( () => {
+		return {
+			...inheritedStyle,
+			layout: settings.layout,
+		};
+	}, [ inheritedStyle, settings.layout ] );
+	const styleWithLayout = useMemo( () => {
+		return {
+			...style,
+			layout: userSettings.layout,
+		};
+	}, [ style, userSettings.layout ] );
+	const onChangeDimensions = ( newStyle: any ) => {
+		const updatedStyle = { ...newStyle };
+		delete updatedStyle.layout;
+		setStyle( updatedStyle );
+
+		if ( newStyle.layout !== userSettings.layout ) {
+			setSettings( {
+				...userSettings,
+				layout: newStyle.layout,
+			} );
+		}
+	};
+	const onChangeLightbox = ( newSetting: any ) => {
+		// If the newSetting is undefined, this means that the user has deselected
+		// (reset) the lightbox setting.
+		if ( newSetting === undefined ) {
+			setSettings( {
+				...rawSettings,
+				lightbox: undefined,
+			} );
+
+			// Otherwise, we simply set the lightbox setting to the new value but
+			// taking care of not overriding the other lightbox settings.
+		} else {
+			setSettings( {
+				...rawSettings,
+				lightbox: {
+					...rawSettings.lightbox,
+					...newSetting,
+				},
+			} );
+		}
+	};
+	const onChangeBorders = ( newStyle: any ) => {
+		if ( ! newStyle?.border ) {
+			setStyle( newStyle );
+			return;
+		}
+
+		// As Global Styles can't conditionally generate styles based on if
+		// other style properties have been set, we need to force split
+		// border definitions for user set global border styles. Border
+		// radius is derived from the same property i.e. `border.radius` if
+		// it is a string that is used. The longhand border radii styles are
+		// only generated if that property is an object.
+		//
+		// For borders (color, style, and width) those are all properties on
+		// the `border` style property. This means if the theme.json defined
+		// split borders and the user condenses them into a flat border or
+		// vice-versa we'd get both sets of styles which would conflict.
+		const { radius, ...newBorder } = newStyle.border;
+		const border = applyAllFallbackStyles( newBorder );
+		const updatedBorder = ! hasSplitBorders( border )
+			? {
+					top: border,
+					right: border,
+					bottom: border,
+					left: border,
+			  }
+			: {
+					color: null,
+					style: null,
+					width: null,
+					...border,
+			  };
+
+		setStyle( { ...newStyle, border: { ...updatedBorder, radius } } );
+	};
+
+	return (
+		<>
+			<ScreenHeader
+				title={
+					variation ? currentBlockStyle?.label : blockType?.title
+				}
+			/>
+			<BlockPreviewPanel name={ name } variation={ variation } />
+			{ hasVariationsPanel && (
+				<div className="global-styles-ui-screen-variations">
+					<VStack spacing={ 3 }>
+						<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
+						<VariationsPanel name={ name } />
+					</VStack>
+				</div>
+			) }
+			{ hasColorPanel && (
+				<StylesColorPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
+			{ hasBackgroundPanel && (
+				<StylesBackgroundPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
+				/>
+			) }
+			{ hasTypographyPanel && (
+				<StylesTypographyPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
+			{ hasDimensionsPanel && (
+				<StylesDimensionsPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ onChangeDimensions }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
+			{ hasBorderPanel && (
+				<StylesBorderPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ onChangeBorders }
+					settings={ settings }
+				/>
+			) }
+			{ hasFiltersPanel && (
+				<StylesFiltersPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ setStyle }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
+			{ hasImageSettingsPanel && (
+				<ImageSettingsPanel
+					onChange={ onChangeLightbox }
+					value={ userSettings }
+					inheritedValue={ settings }
+				/>
+			) }
+
+			{ canEditCSS && (
+				<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>
+					<p>
+						{ sprintf(
+							// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+							__(
+								'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'
+							),
+							blockType?.title
+						) }
+					</p>
+					<StylesAdvancedPanel
+						value={ style }
+						onChange={ setStyle }
+						inheritedValue={ inheritedStyle }
+					/>
+				</PanelBody>
+			) }
+		</>
+	);
+}
+
+export default ScreenBlock;