@wordpress/edit-site 6.33.5 → 6.34.1-next.2f1c7c01b.0

package/src/components/editor-canvas-container/index.js

@@ -1,149 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Children, cloneElement, useState } from '@wordpress/element';
-import {
-	Button,
-	__experimentalUseSlotFills as useSlotFills,
-} from '@wordpress/components';
-import { ESCAPE } from '@wordpress/keycodes';
-import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { closeSmall } from '@wordpress/icons';
-import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-
-const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis );
-
-/**
- * Returns a translated string for the title of the editor canvas container.
- *
- * @param {string} view Editor canvas container view.
- *
- * @return {Object} Translated string for the view title and associated icon, both defaulting to ''.
- */
-function getEditorCanvasContainerTitle( view ) {
-	switch ( view ) {
-		case 'style-book':
-			return __( 'Style Book' );
-		case 'global-styles-revisions':
-		case 'global-styles-revisions:style-book':
-			return __( 'Style Revisions' );
-		default:
-			return '';
-	}
-}
-
-function EditorCanvasContainer( {
-	children,
-	closeButtonLabel,
-	onClose,
-	enableResizing = false,
-} ) {
-	const { editorCanvasContainerView, showListViewByDefault } = useSelect(
-		( select ) => {
-			const _editorCanvasContainerView = unlock(
-				select( editSiteStore )
-			).getEditorCanvasContainerView();
-
-			const _showListViewByDefault = select( preferencesStore ).get(
-				'core',
-				'showListViewByDefault'
-			);
-
-			return {
-				editorCanvasContainerView: _editorCanvasContainerView,
-				showListViewByDefault: _showListViewByDefault,
-			};
-		},
-		[]
-	);
-	const [ isClosed, setIsClosed ] = useState( false );
-	const { setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const { setIsListViewOpened } = useDispatch( editorStore );
-
-	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-	const sectionFocusReturnRef = useFocusReturn();
-
-	function onCloseContainer() {
-		setIsListViewOpened( showListViewByDefault );
-		setEditorCanvasContainerView( undefined );
-		setIsClosed( true );
-		if ( typeof onClose === 'function' ) {
-			onClose();
-		}
-	}
-
-	function closeOnEscape( event ) {
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			event.preventDefault();
-			onCloseContainer();
-		}
-	}
-
-	const childrenWithProps = Array.isArray( children )
-		? Children.map( children, ( child, index ) =>
-				index === 0
-					? cloneElement( child, {
-							ref: sectionFocusReturnRef,
-					  } )
-					: child
-		  )
-		: cloneElement( children, {
-				ref: sectionFocusReturnRef,
-		  } );
-
-	if ( isClosed ) {
-		return null;
-	}
-
-	const title = getEditorCanvasContainerTitle( editorCanvasContainerView );
-	const shouldShowCloseButton = onClose || closeButtonLabel;
-
-	return (
-		<EditorContentSlotFill.Fill>
-			<div className="edit-site-editor-canvas-container">
-				<ResizableEditor enableResizing={ enableResizing }>
-					{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
-					<section
-						className="edit-site-editor-canvas-container__section"
-						ref={ shouldShowCloseButton ? focusOnMountRef : null }
-						onKeyDown={ closeOnEscape }
-						aria-label={ title }
-					>
-						{ shouldShowCloseButton && (
-							<Button
-								size="compact"
-								className="edit-site-editor-canvas-container__close-button"
-								icon={ closeSmall }
-								label={ closeButtonLabel || __( 'Close' ) }
-								onClick={ onCloseContainer }
-							/>
-						) }
-						{ childrenWithProps }
-					</section>
-				</ResizableEditor>
-			</div>
-		</EditorContentSlotFill.Fill>
-	);
-}
-
-function useHasEditorCanvasContainer() {
-	const fills = useSlotFills( EditorContentSlotFill.name );
-	return !! fills?.length;
-}
-
-export default EditorCanvasContainer;
-export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };

package/src/components/editor-canvas-container/style.scss

@@ -1,43 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-.edit-site-editor-canvas-container {
-	height: 100%;
-
-	// This is the gray background color that's applied behind "isolation mode".
-	// The color normally comes from .editor-visual-editor, but that class is missing here.
-	background-color: var(--wp-editor-canvas-background);
-
-	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
-	iframe {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
-
-	.edit-site-layout.is-full-canvas & {
-		padding: $grid-unit-30 $grid-unit-30 0;
-	}
-}
-
-.edit-site-editor-canvas-container__section {
-	background: $white; // Fallback color, overridden by JavaScript.
-	border-radius: $radius-large;
-	bottom: 0;
-	left: 0;
-	overflow: hidden;
-	position: absolute;
-	right: 0;
-	top: 0;
-	@media not (prefers-reduced-motion) {
-		transition: all 0.3s; // Match .block-editor-iframe__body transition.
-	}
-}
-
-.edit-site-editor-canvas-container__close-button {
-	position: absolute;
-	right: $grid-unit-10;
-	top: $grid-unit-10;
-	z-index: 2;
-	background: $white;
-}

package/src/components/global-styles/README.md

@@ -1,17 +0,0 @@
-# Global Styles
-
-This folder contains the global styles UI.
-
-# Available public APIs
-
-## GlobalStylesUI
-
-A component used to render the Global Styles UI. It's current used in the sidebar of the site editor.
-
-```js
-import { GlobalStylesUI } from './global-styles';
-
-function MyComponent() {
-	return <GlobalStylesUI />;
-}
-```

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

@@ -1,55 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-// Initial control values where no block style is set.
-const BACKGROUND_DEFAULT_VALUES = {
-	backgroundSize: 'auto',
-};
-
-const {
-	useGlobalStyle,
-	useGlobalSetting,
-	BackgroundPanel: StylesBackgroundPanel,
-} = unlock( blockEditorPrivateApis );
-
-/**
- * Checks if there is a current value in the background image block support
- * attributes.
- *
- * @param {Object} style Style attribute.
- * @return {boolean}     Whether the block has a background image value set.
- */
-export function hasBackgroundImageValue( style ) {
-	return (
-		!! style?.background?.backgroundImage?.id ||
-		!! style?.background?.backgroundImage?.url ||
-		typeof style?.background?.backgroundImage === 'string'
-	);
-}
-
-export default function BackgroundPanel() {
-	const [ style ] = useGlobalStyle( '', undefined, 'user', {
-		shouldDecodeEncode: false,
-	} );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ settings ] = useGlobalSetting( '' );
-
-	return (
-		<StylesBackgroundPanel
-			inheritedValue={ inheritedStyle }
-			value={ style }
-			onChange={ setStyle }
-			settings={ settings }
-			defaultValues={ BACKGROUND_DEFAULT_VALUES }
-		/>
-	);
-}

package/src/components/global-styles/block-preview-panel.js

@@ -1,81 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { BlockPreview } from '@wordpress/block-editor';
-import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
-import { __experimentalSpacer as Spacer } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { getVariationClassName } from './utils';
-
-const BlockPreviewPanel = ( { name, variation = '' } ) => {
-	const blockExample = getBlockType( name )?.example;
-	const blocks = useMemo( () => {
-		if ( ! blockExample ) {
-			return null;
-		}
-
-		const example = {
-			...blockExample,
-			attributes: {
-				...blockExample.attributes,
-				style: undefined,
-				className: variation
-					? getVariationClassName( variation )
-					: blockExample.attributes?.className,
-			},
-		};
-
-		return getBlockFromExample( name, example );
-	}, [ name, blockExample, variation ] );
-
-	const viewportWidth = blockExample?.viewportWidth ?? 500;
-	// Same as height of InserterPreviewPanel.
-	const previewHeight = 144;
-	const sidebarWidth = 235;
-	const scale = sidebarWidth / viewportWidth;
-	const minHeight =
-		scale !== 0 && scale < 1 && previewHeight
-			? previewHeight / scale
-			: previewHeight;
-
-	if ( ! blockExample ) {
-		return null;
-	}
-
-	return (
-		<Spacer marginX={ 4 } marginBottom={ 4 }>
-			<div
-				className="edit-site-global-styles__block-preview-panel"
-				style={ { maxHeight: previewHeight, boxSizing: 'initial' } }
-			>
-				<BlockPreview
-					blocks={ blocks }
-					viewportWidth={ viewportWidth }
-					minHeight={ previewHeight }
-					additionalStyles={
-						//We want this CSS to be in sync with the one in InserterPreviewPanel.
-						[
-							{
-								css: `
-								body{
-									padding: 24px;
-									min-height:${ Math.round( minHeight ) }px;
-									display:flex;
-									align-items:center;
-								}
-								.is-root-container { width: 100%; }
-							`,
-							},
-						]
-					}
-				/>
-			</div>
-		</Spacer>
-	);
-};
-
-export default BlockPreviewPanel;

package/src/components/global-styles/color-indicator-wrapper.js

@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { Flex } from '@wordpress/components';
-
-function ColorIndicatorWrapper( { className, ...props } ) {
-	return (
-		<Flex
-			className={ clsx(
-				'edit-site-global-styles__color-indicator-wrapper',
-				className
-			) }
-			{ ...props }
-		/>
-	);
-}
-
-export default ColorIndicatorWrapper;

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

@@ -1,110 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useViewportMatch } from '@wordpress/compose';
-import {
-	__experimentalPaletteEdit as PaletteEdit,
-	__experimentalVStack as VStack,
-	Button,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { shuffle } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import ColorVariations from './variations/variations-color';
-import { useColorRandomizer } from './hooks';
-
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
-const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
-
-export default function ColorPalettePanel( { name } ) {
-	const [ themeColors, setThemeColors ] = useGlobalSetting(
-		'color.palette.theme',
-		name
-	);
-	const [ baseThemeColors ] = useGlobalSetting(
-		'color.palette.theme',
-		name,
-		'base'
-	);
-	const [ defaultColors, setDefaultColors ] = useGlobalSetting(
-		'color.palette.default',
-		name
-	);
-	const [ baseDefaultColors ] = useGlobalSetting(
-		'color.palette.default',
-		name,
-		'base'
-	);
-	const [ customColors, setCustomColors ] = useGlobalSetting(
-		'color.palette.custom',
-		name
-	);
-
-	const [ defaultPaletteEnabled ] = useGlobalSetting(
-		'color.defaultPalette',
-		name
-	);
-	const isMobileViewport = useViewportMatch( 'small', '<' );
-	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
-
-	const [ randomizeThemeColors ] = useColorRandomizer();
-
-	return (
-		<VStack
-			className="edit-site-global-styles-color-palette-panel"
-			spacing={ 8 }
-		>
-			<VStack spacing={ 4 }>
-				{ !! themeColors && !! themeColors.length && (
-					<PaletteEdit
-						canReset={ themeColors !== baseThemeColors }
-						canOnlyChangeValues
-						colors={ themeColors }
-						onChange={ setThemeColors }
-						paletteLabel={ __( 'Theme' ) }
-						paletteLabelHeadingLevel={ 3 }
-						popoverProps={ popoverProps }
-					/>
-				) }
-				{ window.__experimentalEnableColorRandomizer &&
-					themeColors?.length > 0 && (
-						<Button
-							__next40pxDefaultSize
-							variant="secondary"
-							icon={ shuffle }
-							onClick={ randomizeThemeColors }
-						>
-							{ __( 'Randomize colors' ) }
-						</Button>
-					) }
-			</VStack>
-			{ !! defaultColors &&
-				!! defaultColors.length &&
-				!! defaultPaletteEnabled && (
-					<PaletteEdit
-						canReset={ defaultColors !== baseDefaultColors }
-						canOnlyChangeValues
-						colors={ defaultColors }
-						onChange={ setDefaultColors }
-						paletteLabel={ __( 'Default' ) }
-						paletteLabelHeadingLevel={ 3 }
-						popoverProps={ popoverProps }
-					/>
-				) }
-			<PaletteEdit
-				colors={ customColors }
-				onChange={ setCustomColors }
-				paletteLabel={ __( 'Custom' ) }
-				paletteLabelHeadingLevel={ 3 }
-				slugPrefix="custom-"
-				popoverProps={ popoverProps }
-			/>
-			<ColorVariations title={ __( 'Palettes' ) } />
-		</VStack>
-	);
-}

package/src/components/global-styles/confirm-reset-shadow-dialog.js

@@ -1,37 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-function ConfirmResetShadowDialog( {
-	text,
-	confirmButtonText,
-	isOpen,
-	toggleOpen,
-	onConfirm,
-} ) {
-	const handleConfirm = async () => {
-		toggleOpen();
-		onConfirm();
-	};
-
-	const handleCancel = () => {
-		toggleOpen();
-	};
-
-	return (
-		<ConfirmDialog
-			isOpen={ isOpen }
-			cancelButtonText={ __( 'Cancel' ) }
-			confirmButtonText={ confirmButtonText }
-			onCancel={ handleCancel }
-			onConfirm={ handleConfirm }
-			size="medium"
-		>
-			{ text }
-		</ConfirmDialog>
-	);
-}
-
-export default ConfirmResetShadowDialog;

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

@@ -1,86 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const {
-	useGlobalStyle,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-	DimensionsPanel: StylesDimensionsPanel,
-} = unlock( blockEditorPrivateApis );
-
-const DEFAULT_CONTROLS = {
-	contentSize: true,
-	wideSize: true,
-	padding: true,
-	margin: true,
-	blockGap: true,
-	minHeight: true,
-	childLayout: false,
-};
-
-export default function DimensionsPanel() {
-	const [ style ] = useGlobalStyle( '', undefined, 'user', {
-		shouldDecodeEncode: false,
-	} );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ userSettings ] = useGlobalSetting( '', undefined, 'user' );
-	const [ rawSettings, setSettings ] = useGlobalSetting( '' );
-	const settings = useSettingsForBlockElement( rawSettings );
-
-	// 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 onChange = ( newStyle ) => {
-		const updatedStyle = { ...newStyle };
-		delete updatedStyle.layout;
-		setStyle( updatedStyle );
-
-		if ( newStyle.layout !== userSettings.layout ) {
-			const updatedSettings = {
-				...userSettings,
-				layout: newStyle.layout,
-			};
-
-			// Ensure any changes to layout definitions are not persisted.
-			if ( updatedSettings.layout?.definitions ) {
-				delete updatedSettings.layout.definitions;
-			}
-
-			setSettings( updatedSettings );
-		}
-	};
-
-	return (
-		<StylesDimensionsPanel
-			inheritedValue={ inheritedStyleWithLayout }
-			value={ styleWithLayout }
-			onChange={ onChange }
-			settings={ settings }
-			includeLayoutControls
-			defaultControls={ DEFAULT_CONTROLS }
-		/>
-	);
-}