@wordpress/edit-site 6.33.3 → 6.34.0

package/src/components/global-styles/screen-block-list.js

@@ -1,187 +0,0 @@
-/**
- * WordPress dependencies
- */
-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,
-} 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 './header';
-import { NavigationButtonAsItem } from './navigation-button';
-import { unlock } from '../../lock-unlock';
-
-const {
-	useHasDimensionsPanel,
-	useHasTypographyPanel,
-	useHasBorderPanel,
-	useGlobalSetting,
-	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, block ) => {
-		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 ) {
-	const [ rawSettings ] = useGlobalSetting( '', 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;
-}
-
-function BlockMenuItem( { block } ) {
-	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>
-	);
-}
-
-function BlockList( { filterValue } ) {
-	const sortedBlockTypes = useSortedBlockTypes();
-	const debouncedSpeak = useDebounce( speak, 500 );
-	const { isMatchingSearchTerm } = useSelect( blocksStore );
-
-	const filteredBlockTypes = ! filterValue
-		? sortedBlockTypes
-		: sortedBlockTypes.filter( ( blockType ) =>
-				isMatchingSearchTerm( blockType, filterValue )
-		  );
-
-	const blockTypesListRef = useRef();
-
-	// 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;
-		const resultsFoundMessage = sprintf(
-			/* translators: %d: number of results. */
-			_n( '%d result found.', '%d results found.', count ),
-			count
-		);
-		debouncedSpeak( resultsFoundMessage, count );
-	}, [ filterValue, debouncedSpeak ] );
-
-	return (
-		<div
-			ref={ blockTypesListRef }
-			className="edit-site-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="edit-site-block-types-search"
-				onChange={ setFilterValue }
-				value={ filterValue }
-				label={ __( 'Search' ) }
-				placeholder={ __( 'Search' ) }
-			/>
-			<MemoizedBlockList filterValue={ deferredFilterValue } />
-		</>
-	);
-}
-
-export default ScreenBlockList;

package/src/components/global-styles/screen-block.js

@@ -1,358 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { getBlockType } from '@wordpress/blocks';
-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';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import BlockPreviewPanel from './block-preview-panel';
-import { unlock } from '../../lock-unlock';
-import Subtitle from './subtitle';
-import {
-	useBlockVariations,
-	VariationsPanel,
-} from './variations/variations-panel';
-
-// Initial control values.
-const BACKGROUND_BLOCK_DEFAULT_VALUES = {
-	backgroundSize: 'cover',
-	backgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.
-};
-
-function applyFallbackStyle( border ) {
-	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 ) {
-	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,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-	useHasColorPanel,
-	useHasFiltersPanel,
-	useHasImageSettingsPanel,
-	useGlobalStyle,
-	useHasBackgroundPanel,
-	BackgroundPanel: StylesBackgroundPanel,
-	BorderPanel: StylesBorderPanel,
-	ColorPanel: StylesColorPanel,
-	TypographyPanel: StylesTypographyPanel,
-	DimensionsPanel: StylesDimensionsPanel,
-	FiltersPanel: StylesFiltersPanel,
-	ImageSettingsPanel,
-	AdvancedPanel: StylesAdvancedPanel,
-} = unlock( blockEditorPrivateApis );
-
-function ScreenBlock( { name, variation } ) {
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', {
-		shouldDecodeEncode: false,
-	} );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ userSettings ] = useGlobalSetting( '', name, 'user' );
-	const [ rawSettings, setSettings ] = useGlobalSetting( '', 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 ) => 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?._links?.[ 'wp:action-edit-css' ],
-		};
-	}, [] );
-	const currentBlockStyle = variation
-		? blockVariations.find( ( s ) => 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 ) => {
-		const updatedStyle = { ...newStyle };
-		delete updatedStyle.layout;
-		setStyle( updatedStyle );
-
-		if ( newStyle.layout !== userSettings.layout ) {
-			setSettings( {
-				...userSettings,
-				layout: newStyle.layout,
-			} );
-		}
-	};
-	const onChangeLightbox = ( newSetting ) => {
-		// 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 ) => {
-		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="edit-site-global-styles-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;

package/src/components/global-styles/screen-color-palette.js

@@ -1,42 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import ColorPalettePanel from './color-palette-panel';
-import GradientPalettePanel from './gradients-palette-panel';
-import ScreenHeader from './header';
-import { unlock } from '../../lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
-
-function ScreenColorPalette( { name } ) {
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Edit palette' ) }
-				description={ __(
-					'The combination of colors used across the site and in color pickers.'
-				) }
-			/>
-			<Tabs>
-				<Tabs.TabList>
-					<Tabs.Tab tabId="color">{ __( 'Color' ) }</Tabs.Tab>
-					<Tabs.Tab tabId="gradient">{ __( 'Gradient' ) }</Tabs.Tab>
-				</Tabs.TabList>
-				<Tabs.TabPanel tabId="color" focusable={ false }>
-					<ColorPalettePanel name={ name } />
-				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId="gradient" focusable={ false }>
-					<GradientPalettePanel name={ name } />
-				</Tabs.TabPanel>
-			</Tabs>
-		</>
-	);
-}
-
-export default ScreenColorPalette;

package/src/components/global-styles/screen-colors.js

@@ -1,55 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalVStack as VStack } from '@wordpress/components';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import Palette from './palette';
-import { unlock } from '../../lock-unlock';
-
-const {
-	useGlobalStyle,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-	ColorPanel: StylesColorPanel,
-} = unlock( blockEditorPrivateApis );
-
-function ScreenColors() {
-	const [ style ] = useGlobalStyle( '', undefined, 'user', {
-		shouldDecodeEncode: false,
-	} );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ rawSettings ] = useGlobalSetting( '' );
-	const settings = useSettingsForBlockElement( rawSettings );
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Colors' ) }
-				description={ __(
-					'Palette colors and the application of those colors on site elements.'
-				) }
-			/>
-			<div className="edit-site-global-styles-screen">
-				<VStack spacing={ 7 }>
-					<Palette />
-					<StylesColorPanel
-						inheritedValue={ inheritedStyle }
-						value={ style }
-						onChange={ setStyle }
-						settings={ settings }
-					/>
-				</VStack>
-			</div>
-		</>
-	);
-}
-
-export default ScreenColors;

package/src/components/global-styles/screen-css.js

@@ -1,67 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { ExternalLink } from '@wordpress/components';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import ScreenHeader from './header';
-
-const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
-	blockEditorPrivateApis
-);
-
-function ScreenCSS() {
-	const [ style ] = useGlobalStyle( '', undefined, 'user', {
-		shouldDecodeEncode: false,
-	} );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
-		shouldDecodeEncode: false,
-	} );
-
-	const { setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Additional CSS' ) }
-				description={
-					<>
-						{ __(
-							'You can add custom CSS to further customize the appearance and layout of your site.'
-						) }
-						<br />
-						<ExternalLink
-							href={ __(
-								'https://developer.wordpress.org/advanced-administration/wordpress/css/'
-							) }
-							className="edit-site-global-styles-screen-css-help-link"
-						>
-							{ __( 'Learn more about CSS' ) }
-						</ExternalLink>
-					</>
-				}
-				onBack={ () => {
-					setEditorCanvasContainerView( undefined );
-				} }
-			/>
-			<div className="edit-site-global-styles-screen-css">
-				<StylesAdvancedPanel
-					value={ style }
-					onChange={ setStyle }
-					inheritedValue={ inheritedStyle }
-				/>
-			</div>
-		</>
-	);
-}
-
-export default ScreenCSS;