@wordpress/edit-site 5.9.0 → 5.10.0

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;

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

@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalVStack as VStack } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import {
-	VariationPanel,
-	VariationsPanel,
-	useHasVariationsPanel,
-} from './variations-panel';
-import ScreenHeader from './header';
-import BlockPreviewPanel from './block-preview-panel';
-import Subtitle from './subtitle';
-
-export function ScreenVariations( { name, path = '' } ) {
-	const hasVariationsPanel = useHasVariationsPanel( name, path );
-
-	if ( ! hasVariationsPanel ) {
-		return null;
-	}
-	return (
-		<div className="edit-site-global-styles-screen-variations">
-			<VStack spacing={ 3 }>
-				<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
-				<VariationsPanel name={ name } />
-			</VStack>
-		</div>
-	);
-}
-
-export function ScreenVariation( { blockName, style } ) {
-	const { name: styleName, label: styleLabel } = style;
-	return (
-		<>
-			<ScreenHeader title={ styleLabel } />
-			<BlockPreviewPanel
-				name={ blockName }
-				variation={ `is-style-${ styleName }` }
-			/>
-			<VariationPanel blockName={ blockName } styleName={ styleName } />
-		</>
-	);
-}

package/src/components/routes/index.js

@@ -1,53 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createContext,
-	useState,
-	useEffect,
-	useContext,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import history from '../../utils/history';
-
-const RoutesContext = createContext();
-const HistoryContext = createContext();
-
-export function useLocation() {
-	return useContext( RoutesContext );
-}
-
-export function useHistory() {
-	return useContext( HistoryContext );
-}
-
-function getLocationWithParams( location ) {
-	const searchParams = new URLSearchParams( location.search );
-	return {
-		...location,
-		params: Object.fromEntries( searchParams.entries() ),
-	};
-}
-
-export function Routes( { children } ) {
-	const [ location, setLocation ] = useState( () =>
-		getLocationWithParams( history.location )
-	);
-
-	useEffect( () => {
-		return history.listen( ( { location: updatedLocation } ) => {
-			setLocation( getLocationWithParams( updatedLocation ) );
-		} );
-	}, [] );
-
-	return (
-		<HistoryContext.Provider value={ history }>
-			<RoutesContext.Provider value={ location }>
-				{ children }
-			</RoutesContext.Provider>
-		</HistoryContext.Provider>
-	);
-}

package/src/hooks/commands/index.js

@@ -1,10 +0,0 @@
-/**
- * Internal dependencies
- */
-import { useNavigationCommands } from './use-navigation-commands';
-import { useWPAdminCommands } from './use-wp-admin-commands';
-
-export function useCommands() {
-	useWPAdminCommands();
-	useNavigationCommands();
-}

package/src/hooks/commands/use-navigation-commands.js

@@ -1,112 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis } from '@wordpress/commands';
-import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { post, page, layout, symbolFilled } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
-import { useHistory } from '../../components/routes';
-
-const { useCommandLoader } = unlock( privateApis );
-
-const icons = {
-	post,
-	page,
-	wp_template: layout,
-	wp_template_part: symbolFilled,
-};
-
-const getNavigationCommandLoaderPerPostType = ( postType ) =>
-	function useNavigationCommandLoader( { search } ) {
-		const supportsSearch = ! [ 'wp_template', 'wp_template_part' ].includes(
-			postType
-		);
-		const deps = supportsSearch ? [ search ] : [];
-		const history = useHistory();
-		const { canvasMode, records, isLoading } = useSelect( ( select ) => {
-			const { getEntityRecords } = select( coreStore );
-			const query = supportsSearch
-				? {
-						search: !! search ? search : undefined,
-						per_page: 10,
-						orderby: search ? 'relevance' : 'date',
-				  }
-				: {
-						per_page: -1,
-				  };
-			return {
-				records: getEntityRecords( 'postType', postType, query ),
-				isLoading: ! select( coreStore ).hasFinishedResolution(
-					'getEntityRecords',
-					[ 'postType', postType, query ]
-				),
-				canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-			};
-		}, deps );
-
-		const commands = useMemo( () => {
-			return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
-				return {
-					name: record.title?.rendered + ' ' + record.id,
-					label: record.title?.rendered
-						? record.title?.rendered
-						: __( '(no title)' ),
-					icon: icons[ postType ],
-					callback: ( { close } ) => {
-						history.push( {
-							postType,
-							postId: record.id,
-							canvas:
-								canvasMode === 'edit' ? canvasMode : undefined,
-						} );
-						close();
-					},
-				};
-			} );
-		}, [ records, history, canvasMode ] );
-
-		return {
-			commands,
-			isLoading,
-		};
-	};
-
-const usePageNavigationCommandLoader =
-	getNavigationCommandLoaderPerPostType( 'page' );
-const usePostNavigationCommandLoader =
-	getNavigationCommandLoaderPerPostType( 'post' );
-const useTemplateNavigationCommandLoader =
-	getNavigationCommandLoaderPerPostType( 'wp_template' );
-const useTemplatePartNavigationCommandLoader =
-	getNavigationCommandLoaderPerPostType( 'wp_template_part' );
-
-export function useNavigationCommands() {
-	useCommandLoader( {
-		name: 'core/edit-site/navigate-pages',
-		group: __( 'Pages' ),
-		hook: usePageNavigationCommandLoader,
-	} );
-	useCommandLoader( {
-		name: 'core/edit-site/navigate-posts',
-		group: __( 'Posts' ),
-		hook: usePostNavigationCommandLoader,
-	} );
-	useCommandLoader( {
-		name: 'core/edit-site/navigate-templates',
-		group: __( 'Templates' ),
-		hook: useTemplateNavigationCommandLoader,
-	} );
-	useCommandLoader( {
-		name: 'core/edit-site/navigate-template-parts',
-		group: __( 'Template Parts' ),
-		hook: useTemplatePartNavigationCommandLoader,
-	} );
-}

package/src/hooks/commands/use-wp-admin-commands.js

@@ -1,79 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis } from '@wordpress/commands';
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { addQueryArgs } from '@wordpress/url';
-import { useMemo } from '@wordpress/element';
-import { plus } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
-
-const { useCommandLoader } = unlock( privateApis );
-
-const getWPAdminAddCommandLoader = ( postType ) =>
-	function useAddCommandLoader( { search } ) {
-		let label;
-		if ( postType === 'post' ) {
-			label = __( 'Add a new post' );
-		} else if ( postType === 'page' ) {
-			label = __( 'Add a new page' );
-		} else {
-			throw 'unsupported post type ' + postType;
-		}
-		const hasRecordTitle =
-			!! search && ! label.toLowerCase().includes( search.toLowerCase() );
-		if ( postType === 'post' && hasRecordTitle ) {
-			/* translators: %s: Post title placeholder */
-			label = sprintf( __( 'Add a new post "%s"' ), search );
-		} else if ( postType === 'page' && hasRecordTitle ) {
-			/* translators: %s: Page title placeholder */
-			label = sprintf( __( 'Add a new page "%s"' ), search );
-		}
-
-		const newPostLink = useSelect( ( select ) => {
-			const { getSettings } = unlock( select( editSiteStore ) );
-			return getSettings().newPostLink ?? 'post-new.php';
-		}, [] );
-
-		const commands = useMemo(
-			() => [
-				{
-					name: 'core/wp-admin/add-' + postType + '-' + search,
-					label,
-					icon: plus,
-					callback: () => {
-						document.location.href = addQueryArgs( newPostLink, {
-							post_type: postType,
-							post_title: hasRecordTitle ? search : undefined,
-						} );
-					},
-				},
-			],
-			[ newPostLink, hasRecordTitle, search, label ]
-		);
-
-		return {
-			isLoading: false,
-			commands,
-		};
-	};
-
-const useAddPostLoader = getWPAdminAddCommandLoader( 'post' );
-const useAddPageLoader = getWPAdminAddCommandLoader( 'page' );
-
-export function useWPAdminCommands() {
-	useCommandLoader( {
-		name: 'core/wp-admin/add-post-loader',
-		hook: useAddPostLoader,
-	} );
-	useCommandLoader( {
-		name: 'core/wp-admin/add-page-loader',
-		hook: useAddPageLoader,
-	} );
-}

package/src/utils/history.js

@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { createBrowserHistory } from 'history';
-
-/**
- * WordPress dependencies
- */
-import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url';
-
-const history = createBrowserHistory();
-
-const originalHistoryPush = history.push;
-const originalHistoryReplace = history.replace;
-
-function push( params, state ) {
-	const currentArgs = getQueryArgs( window.location.href );
-	const currentUrlWithoutArgs = removeQueryArgs(
-		window.location.href,
-		...Object.keys( currentArgs )
-	);
-	const newUrl = addQueryArgs( currentUrlWithoutArgs, params );
-	return originalHistoryPush.call( history, newUrl, state );
-}
-
-function replace( params, state ) {
-	const currentArgs = getQueryArgs( window.location.href );
-	const currentUrlWithoutArgs = removeQueryArgs(
-		window.location.href,
-		...Object.keys( currentArgs )
-	);
-	const newUrl = addQueryArgs( currentUrlWithoutArgs, params );
-	return originalHistoryReplace.call( history, newUrl, state );
-}
-
-history.push = push;
-history.replace = replace;
-
-export default history;