@wordpress/edit-site 5.9.0 → 5.11.0

package/src/components/add-new-template/add-custom-generic-template-modal.js

@@ -1,101 +0,0 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	Modal,
-	TextControl,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import TemplateActionsLoadingScreen from './template-actions-loading-screen';
-
-function AddCustomGenericTemplateModal( {
-	onClose,
-	createTemplate,
-	isCreatingTemplate,
-} ) {
-	const [ title, setTitle ] = useState( '' );
-	const defaultTitle = __( 'Custom Template' );
-	const [ isBusy, setIsBusy ] = useState( false );
-	async function onCreateTemplate( event ) {
-		event.preventDefault();
-		if ( isBusy ) {
-			return;
-		}
-		setIsBusy( true );
-		try {
-			await createTemplate(
-				{
-					slug:
-						'wp-custom-template-' +
-						kebabCase( title || defaultTitle ),
-					title: title || defaultTitle,
-				},
-				false
-			);
-		} finally {
-			setIsBusy( false );
-		}
-	}
-	return (
-		<Modal
-			title={ __( 'Create custom template' ) }
-			onRequestClose={ () => {
-				onClose();
-			} }
-			overlayClassName="edit-site-custom-generic-template__modal"
-		>
-			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
-			<form onSubmit={ onCreateTemplate }>
-				<VStack spacing={ 6 }>
-					<TextControl
-						__nextHasNoMarginBottom
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-						placeholder={ defaultTitle }
-						disabled={ isBusy }
-						help={ __(
-							'Describe the template, e.g. "Post with sidebar".'
-						) }
-					/>
-					<HStack
-						className="edit-site-custom-generic-template__modal-actions"
-						justify="right"
-					>
-						<Button
-							variant="tertiary"
-							onClick={ () => {
-								onClose();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							type="submit"
-							isBusy={ isBusy }
-							aria-disabled={ isBusy }
-						>
-							{ __( 'Create' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		</Modal>
-	);
-}
-
-export default AddCustomGenericTemplateModal;

package/src/components/global-styles/border-panel.js

@@ -1,112 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-
-const {
-	useGlobalStyle,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-	BorderPanel: StylesBorderPanel,
-} = unlock( blockEditorPrivateApis );
-
-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 );
-}
-
-export default function BorderPanel( { name, variation = '' } ) {
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-
-	const onChange = ( 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 (
-		<StylesBorderPanel
-			inheritedValue={ inheritedStyle }
-			value={ style }
-			onChange={ onChange }
-			settings={ settings }
-		/>
-	);
-}

package/src/components/global-styles/context-menu.js

@@ -1,175 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
-	FlexItem,
-	CardBody,
-	CardDivider,
-} from '@wordpress/components';
-import {
-	typography,
-	border,
-	filter,
-	shadow,
-	color,
-	layout,
-	chevronLeft,
-	chevronRight,
-} from '@wordpress/icons';
-import { isRTL, __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { useHasVariationsPanel } from './variations-panel';
-import { NavigationButtonAsItem } from './navigation-button';
-import { IconWithCurrentColor } from './icon-with-current-color';
-import { ScreenVariations } from './screen-variations';
-import { unlock } from '../../private-apis';
-
-const {
-	useHasDimensionsPanel,
-	useHasTypographyPanel,
-	useHasBorderPanel,
-	useHasColorPanel,
-	useHasEffectsPanel,
-	useHasFiltersPanel,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-} = unlock( blockEditorPrivateApis );
-
-function ContextMenu( { name, parentMenu = '' } ) {
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-	const hasTypographyPanel = useHasTypographyPanel( settings );
-	const hasColorPanel = useHasColorPanel( settings );
-	const hasBorderPanel = useHasBorderPanel( settings );
-	const hasEffectsPanel = useHasEffectsPanel( settings );
-	const hasFilterPanel = useHasFiltersPanel( settings );
-	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	const hasLayoutPanel = hasDimensionsPanel;
-	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
-
-	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' ] ?? false,
-		};
-	}, [] );
-
-	const isBlocksPanel =
-		parentMenu.includes( 'blocks' ) &&
-		! parentMenu.includes( 'variations' );
-
-	return (
-		<>
-			<ItemGroup>
-				{ hasTypographyPanel && (
-					<NavigationButtonAsItem
-						icon={ typography }
-						path={ parentMenu + '/typography' }
-						aria-label={ __( 'Typography styles' ) }
-					>
-						{ __( 'Typography' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasColorPanel && (
-					<NavigationButtonAsItem
-						icon={ color }
-						path={ parentMenu + '/colors' }
-						aria-label={ __( 'Colors styles' ) }
-					>
-						{ __( 'Colors' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasBorderPanel && (
-					<NavigationButtonAsItem
-						icon={ border }
-						path={ parentMenu + '/border' }
-						aria-label={ __( 'Border' ) }
-					>
-						{ __( 'Border' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasEffectsPanel && (
-					<NavigationButtonAsItem
-						icon={ shadow }
-						path={ parentMenu + '/effects' }
-						aria-label={ __( 'Effects' ) }
-					>
-						{ __( 'Effects' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasFilterPanel && (
-					<NavigationButtonAsItem
-						icon={ filter }
-						path={ parentMenu + '/filters' }
-						aria-label={ __( 'Filters styles' ) }
-					>
-						{ __( 'Filters' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasLayoutPanel && (
-					<NavigationButtonAsItem
-						icon={ layout }
-						path={ parentMenu + '/layout' }
-						aria-label={ __( 'Layout styles' ) }
-					>
-						{ __( 'Layout' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasVariationsPanel && (
-					<ScreenVariations name={ name } path={ parentMenu } />
-				) }
-				{ isBlocksPanel && canEditCSS && (
-					<>
-						<CardDivider />
-						<CardBody>
-							<Spacer as="p" paddingTop={ 2 } marginBottom={ 4 }>
-								{ __(
-									'Add your own CSS to customize the block appearance.'
-								) }
-							</Spacer>
-							<ItemGroup>
-								<NavigationButtonAsItem
-									path={ parentMenu + '/css' }
-									aria-label={ __( 'Additional block CSS' ) }
-								>
-									<HStack justify="space-between">
-										<FlexItem>
-											{ __( 'Additional block CSS' ) }
-										</FlexItem>
-										<IconWithCurrentColor
-											icon={
-												isRTL()
-													? chevronLeft
-													: chevronRight
-											}
-										/>
-									</HStack>
-								</NavigationButtonAsItem>
-							</ItemGroup>
-						</CardBody>
-						<CardDivider />
-					</>
-				) }
-			</ItemGroup>
-		</>
-	);
-}
-
-export default ContextMenu;

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

@@ -1,131 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import {
-	TextareaControl,
-	Panel,
-	PanelBody,
-	__experimentalVStack as VStack,
-	Tooltip,
-	Icon,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import {
-	privateApis as blockEditorPrivateApis,
-	transformStyles,
-} from '@wordpress/block-editor';
-import { info } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-import Subtitle from './subtitle';
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-function CustomCSSControl( { blockName } ) {
-	// If blockName is defined, we are customizing CSS at the block level:
-	// styles.blocks.blockName.css
-	const block = !! blockName ? blockName : null;
-
-	const [ customCSS, setCustomCSS ] = useGlobalStyle( 'css', block );
-	const [ themeCSS ] = useGlobalStyle( 'css', block, 'base' );
-	const [ cssError, setCSSError ] = useState( null );
-	const ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';
-
-	// If there is custom css from theme.json show it in the edit box
-	// so the user can selectively overwrite it, rather than have the user CSS
-	// completely overwrite the theme CSS by default.
-	const themeCustomCSS =
-		! customCSS && themeCSS
-			? `/* ${ __(
-					'Theme Custom CSS start'
-			  ) } */\n${ themeCSS }\n/* ${ __( 'Theme Custom CSS end' ) } */`
-			: undefined;
-
-	function handleOnChange( value ) {
-		// If there is theme custom CSS, but the user clears the input box then save the
-		// ignoreThemeCustomCSS string so that the theme custom CSS is not re-applied.
-		if ( themeCSS && value === '' ) {
-			setCustomCSS( ignoreThemeCustomCSS );
-			return;
-		}
-		setCustomCSS( value );
-		if ( cssError ) {
-			const [ transformed ] = transformStyles(
-				[ { css: value } ],
-				'.editor-styles-wrapper'
-			);
-			if ( transformed ) {
-				setCSSError( null );
-			}
-		}
-	}
-
-	function handleOnBlur( event ) {
-		if ( ! event?.target?.value ) {
-			setCSSError( null );
-			return;
-		}
-
-		const [ transformed ] = transformStyles(
-			[ { css: event.target.value } ],
-			'.editor-styles-wrapper'
-		);
-
-		setCSSError(
-			transformed === null
-				? __( 'There is an error with your CSS structure.' )
-				: null
-		);
-	}
-
-	const originalThemeCustomCSS =
-		themeCSS && customCSS && themeCustomCSS !== customCSS
-			? themeCSS
-			: undefined;
-
-	return (
-		<>
-			{ originalThemeCustomCSS && (
-				<Panel>
-					<PanelBody
-						title={ __( 'Original Theme Custom CSS' ) }
-						initialOpen={ false }
-					>
-						<pre className="edit-site-global-styles__custom-css-theme-css">
-							{ originalThemeCustomCSS }
-						</pre>
-					</PanelBody>
-				</Panel>
-			) }
-			<VStack spacing={ 3 }>
-				<Subtitle>{ __( 'Additional CSS' ) }</Subtitle>
-				<TextareaControl
-					__nextHasNoMarginBottom
-					value={
-						customCSS?.replace( ignoreThemeCustomCSS, '' ) ||
-						themeCustomCSS
-					}
-					onChange={ ( value ) => handleOnChange( value ) }
-					onBlur={ handleOnBlur }
-					className="edit-site-global-styles__custom-css-input"
-					spellCheck={ false }
-				/>
-				{ cssError && (
-					<Tooltip text={ cssError }>
-						<div className="edit-site-global-styles__custom-css-validation-wrapper">
-							<Icon
-								icon={ info }
-								className="edit-site-global-styles__custom-css-validation-icon"
-							/>
-						</div>
-					</Tooltip>
-				) }
-			</VStack>
-		</>
-	);
-}
-
-export default CustomCSSControl;

package/src/components/global-styles/effects-panel.js

@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-
-const {
-	useGlobalSetting,
-	useGlobalStyle,
-	EffectsPanel: StylesEffectsPanel,
-	useSettingsForBlockElement,
-} = unlock( blockEditorPrivateApis );
-
-export default function EffectsPanel( { name, variation = '' } ) {
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-
-	return (
-		<StylesEffectsPanel
-			inheritedValue={ inheritedStyle }
-			value={ style }
-			onChange={ setStyle }
-			settings={ settings }
-		/>
-	);
-}

package/src/components/global-styles/filters-panel.js

@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-const {
-	useGlobalStyle,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-	FiltersPanel: StylesFiltersPanel,
-} = unlock( blockEditorPrivateApis );
-
-export default function FiltersPanel( { name } ) {
-	const [ style ] = useGlobalStyle( '', name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', name, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-
-	return (
-		<StylesFiltersPanel
-			inheritedValue={ inheritedStyle }
-			value={ style }
-			onChange={ setStyle }
-			settings={ {
-				...settings,
-				color: {
-					...settings.color,
-					customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
-				},
-			} }
-		/>
-	);
-}

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

@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import BorderPanel from './border-panel';
-import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
-import { unlock } from '../../private-apis';
-
-const { useHasBorderPanel, useGlobalSetting, useSettingsForBlockElement } =
-	unlock( blockEditorPrivateApis );
-
-function ScreenBorder( { name, variation = '' } ) {
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-	const hasBorderPanel = useHasBorderPanel( settings );
-	const variationClassName = getVariationClassName( variation );
-	return (
-		<>
-			<ScreenHeader title={ __( 'Border' ) } />
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
-			{ hasBorderPanel && (
-				<BorderPanel name={ name } variation={ variation } />
-			) }
-		</>
-	);
-}
-
-export default ScreenBorder;

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

@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
-import { unlock } from '../../private-apis';
-import EffectsPanel from './effects-panel';
-
-const { useGlobalSetting, useSettingsForBlockElement, useHasEffectsPanel } =
-	unlock( blockEditorPrivateApis );
-
-function ScreenEffects( { name, variation = '' } ) {
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-	const variationClassName = getVariationClassName( variation );
-	const hasEffectsPanel = useHasEffectsPanel( settings );
-	return (
-		<>
-			<ScreenHeader title={ __( 'Effects' ) } />
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
-			{ hasEffectsPanel && (
-				<EffectsPanel name={ name } variation={ variation } />
-			) }
-		</>
-	);
-}
-
-export default ScreenEffects;

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

@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import FiltersPanel from './filters-panel';
-import BlockPreviewPanel from './block-preview-panel';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-
-function ScreenFilters( { name } ) {
-	return (
-		<>
-			<ScreenHeader title={ __( 'Filters' ) } />
-			<BlockPreviewPanel name={ name } />
-			<FiltersPanel name={ name } />
-		</>
-	);
-}
-
-export default ScreenFilters;