@wordpress/edit-site 6.33.3 → 6.34.0

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

@@ -1,45 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalGrid as Grid,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import StylesPreviewColors from '../preview-colors';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import Subtitle from '../subtitle';
-import Variation from './variation';
-
-export default function ColorVariations( { title, gap = 2 } ) {
-	const propertiesToFilter = [ 'color' ];
-	const colorVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
-
-	// Return null if there is only one variation (the default).
-	if ( colorVariations?.length <= 1 ) {
-		return null;
-	}
-
-	return (
-		<VStack spacing={ 3 }>
-			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
-			<Grid spacing={ gap }>
-				{ colorVariations.map( ( variation, index ) => (
-					<Variation
-						key={ index }
-						variation={ variation }
-						isPill
-						properties={ propertiesToFilter }
-						showTooltip
-					>
-						{ () => <StylesPreviewColors /> }
-					</Variation>
-				) ) }
-			</Grid>
-		</VStack>
-	);
-}

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

@@ -1,65 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as blocksStore } from '@wordpress/blocks';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { NavigationButtonAsItem } from '../navigation-button';
-import { unlock } from '../../../lock-unlock';
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-// Only core block styles (source === block) or block styles with a matching
-// theme.json style variation will be configurable via Global Styles.
-function getFilteredBlockStyles( blockStyles, variations ) {
-	return blockStyles?.filter(
-		( style ) =>
-			style.source === 'block' || variations.includes( style.name )
-	);
-}
-
-export function useBlockVariations( name ) {
-	const blockStyles = useSelect(
-		( select ) => {
-			const { getBlockStyles } = select( blocksStore );
-			return getBlockStyles( name );
-		},
-		[ name ]
-	);
-	const [ variations ] = useGlobalStyle( 'variations', name );
-	const variationNames = Object.keys( variations ?? {} );
-
-	return getFilteredBlockStyles( blockStyles, variationNames );
-}
-
-export function VariationsPanel( { name } ) {
-	const coreBlockStyles = useBlockVariations( name );
-
-	return (
-		<ItemGroup isBordered isSeparated>
-			{ coreBlockStyles.map( ( style, index ) => {
-				if ( style?.isDefault ) {
-					return null;
-				}
-				return (
-					<NavigationButtonAsItem
-						key={ index }
-						path={
-							'/blocks/' +
-							encodeURIComponent( name ) +
-							'/variations/' +
-							encodeURIComponent( style.name )
-						}
-					>
-						{ style.label }
-					</NavigationButtonAsItem>
-				);
-			} ) }
-		</ItemGroup>
-	);
-}

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

@@ -1,54 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalGrid as Grid,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import StylesPreviewTypography from '../preview-typography';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import Subtitle from '../subtitle';
-import Variation from './variation';
-
-export default function TypographyVariations( { title, gap = 2 } ) {
-	const propertiesToFilter = [ 'typography' ];
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
-
-	// Return null if there is only one variation (the default).
-	if ( typographyVariations?.length <= 1 ) {
-		return null;
-	}
-
-	return (
-		<VStack spacing={ 3 }>
-			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
-			<Grid
-				columns={ 3 }
-				gap={ gap }
-				className="edit-site-global-styles-style-variations-container"
-			>
-				{ typographyVariations.map( ( variation, index ) => {
-					return (
-						<Variation
-							key={ index }
-							variation={ variation }
-							properties={ propertiesToFilter }
-							showTooltip
-						>
-							{ () => (
-								<StylesPreviewTypography
-									variation={ variation }
-								/>
-							) }
-						</Variation>
-					);
-				} ) }
-			</Grid>
-		</VStack>
-	);
-}

package/src/components/global-styles-renderer/index.js

@@ -1,42 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
-
-function useGlobalStylesRenderer( disableRootPadding ) {
-	const [ styles, settings ] = useGlobalStylesOutput( disableRootPadding );
-	const { getSettings } = useSelect( editSiteStore );
-	const { updateSettings } = useDispatch( editSiteStore );
-
-	useEffect( () => {
-		if ( ! styles || ! settings ) {
-			return;
-		}
-
-		const currentStoreSettings = getSettings();
-		const nonGlobalStyles = Object.values(
-			currentStoreSettings.styles ?? []
-		).filter( ( style ) => ! style.isGlobalStyles );
-		updateSettings( {
-			...currentStoreSettings,
-			styles: [ ...nonGlobalStyles, ...styles ],
-			__experimentalFeatures: settings,
-		} );
-	}, [ styles, settings, updateSettings, getSettings ] );
-}
-
-export function GlobalStylesRenderer( { disableRootPadding } ) {
-	useGlobalStylesRenderer( disableRootPadding );
-
-	return null;
-}

package/src/components/global-styles-sidebar/default-sidebar.js

@@ -1,51 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { ComplementaryArea, ComplementaryAreaMoreMenuItem } =
-	unlock( editorPrivateApis );
-
-export default function DefaultSidebar( {
-	className,
-	identifier,
-	title,
-	icon,
-	children,
-	closeLabel,
-	header,
-	headerClassName,
-	panelClassName,
-	isActiveByDefault,
-} ) {
-	return (
-		<>
-			<ComplementaryArea
-				className={ className }
-				scope="core"
-				identifier={ identifier }
-				title={ title }
-				icon={ icon }
-				closeLabel={ closeLabel }
-				header={ header }
-				headerClassName={ headerClassName }
-				panelClassName={ panelClassName }
-				isActiveByDefault={ isActiveByDefault }
-			>
-				{ children }
-			</ComplementaryArea>
-			<ComplementaryAreaMoreMenuItem
-				scope="core"
-				identifier={ identifier }
-				icon={ icon }
-			>
-				{ title }
-			</ComplementaryAreaMoreMenuItem>
-		</>
-	);
-}

package/src/components/global-styles-sidebar/index.js

@@ -1,206 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { FlexItem, Flex, Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { styles, seen, backup } from '@wordpress/icons';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { useViewportMatch } from '@wordpress/compose';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import { GlobalStylesUI } from '../global-styles';
-import { store as editSiteStore } from '../../store';
-import { GlobalStylesMenuSlot } from '../global-styles/ui';
-import { unlock } from '../../lock-unlock';
-import { store as coreStore } from '@wordpress/core-data';
-import DefaultSidebar from './default-sidebar';
-
-const { interfaceStore } = unlock( editorPrivateApis );
-const { useLocation } = unlock( routerPrivateApis );
-
-export default function GlobalStylesSidebar() {
-	const { query } = useLocation();
-	const { canvas = 'view', name } = query;
-	const {
-		shouldClearCanvasContainerView,
-		isStyleBookOpened,
-		showListViewByDefault,
-		hasRevisions,
-		isRevisionsOpened,
-		isRevisionsStyleBookOpened,
-	} = useSelect(
-		( select ) => {
-			const { getActiveComplementaryArea } = select( interfaceStore );
-			const { getEditorCanvasContainerView } = unlock(
-				select( editSiteStore )
-			);
-			const canvasContainerView = getEditorCanvasContainerView();
-			const _isVisualEditorMode =
-				'visual' === select( editorStore ).getEditorMode();
-			const _isEditCanvasMode = 'edit' === canvas;
-			const _showListViewByDefault = select( preferencesStore ).get(
-				'core',
-				'showListViewByDefault'
-			);
-			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-				select( coreStore );
-
-			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-			const globalStyles = globalStylesId
-				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-				: undefined;
-
-			return {
-				isStyleBookOpened: 'style-book' === canvasContainerView,
-				shouldClearCanvasContainerView:
-					'edit-site/global-styles' !==
-						getActiveComplementaryArea( 'core' ) ||
-					! _isVisualEditorMode ||
-					! _isEditCanvasMode,
-				showListViewByDefault: _showListViewByDefault,
-				hasRevisions:
-					!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]
-						?.count,
-				isRevisionsStyleBookOpened:
-					'global-styles-revisions:style-book' ===
-					canvasContainerView,
-				isRevisionsOpened:
-					'global-styles-revisions' === canvasContainerView,
-			};
-		},
-		[ canvas ]
-	);
-	const { setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-
-	useEffect( () => {
-		if ( shouldClearCanvasContainerView ) {
-			setEditorCanvasContainerView( undefined );
-		}
-	}, [ shouldClearCanvasContainerView, setEditorCanvasContainerView ] );
-
-	const { setIsListViewOpened } = useDispatch( editorStore );
-
-	const toggleRevisions = () => {
-		setIsListViewOpened( false );
-		if ( isRevisionsStyleBookOpened ) {
-			setEditorCanvasContainerView( 'style-book' );
-			return;
-		}
-		if ( isRevisionsOpened ) {
-			setEditorCanvasContainerView( undefined );
-			return;
-		}
-
-		if ( isStyleBookOpened ) {
-			setEditorCanvasContainerView(
-				'global-styles-revisions:style-book'
-			);
-		} else {
-			setEditorCanvasContainerView( 'global-styles-revisions' );
-		}
-	};
-	const toggleStyleBook = () => {
-		if ( isRevisionsOpened ) {
-			setEditorCanvasContainerView(
-				'global-styles-revisions:style-book'
-			);
-			return;
-		}
-		if ( isRevisionsStyleBookOpened ) {
-			setEditorCanvasContainerView( 'global-styles-revisions' );
-			return;
-		}
-		setIsListViewOpened( isStyleBookOpened && showListViewByDefault );
-		setEditorCanvasContainerView(
-			isStyleBookOpened ? undefined : 'style-book'
-		);
-	};
-
-	const { getActiveComplementaryArea } = useSelect( interfaceStore );
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const previousActiveAreaRef = useRef( null );
-
-	useEffect( () => {
-		if ( name === 'styles' && canvas === 'edit' ) {
-			previousActiveAreaRef.current =
-				getActiveComplementaryArea( 'core' );
-			enableComplementaryArea( 'core', 'edit-site/global-styles' );
-		} else if ( previousActiveAreaRef.current ) {
-			enableComplementaryArea( 'core', previousActiveAreaRef.current );
-		}
-	}, [ name, enableComplementaryArea, canvas, getActiveComplementaryArea ] );
-
-	return (
-		<DefaultSidebar
-			className="edit-site-global-styles-sidebar"
-			identifier="edit-site/global-styles"
-			title={ __( 'Styles' ) }
-			icon={ styles }
-			closeLabel={ __( 'Close Styles' ) }
-			panelClassName="edit-site-global-styles-sidebar__panel"
-			header={
-				<Flex
-					className="edit-site-global-styles-sidebar__header"
-					gap={ 1 }
-				>
-					<FlexItem>
-						<h2 className="edit-site-global-styles-sidebar__header-title">
-							{ __( 'Styles' ) }
-						</h2>
-					</FlexItem>
-					<Flex
-						justify="flex-end"
-						gap={ 1 }
-						className="edit-site-global-styles-sidebar__header-actions"
-					>
-						{ ! isMobileViewport && (
-							<FlexItem>
-								<Button
-									icon={ seen }
-									label={ __( 'Style Book' ) }
-									isPressed={
-										isStyleBookOpened ||
-										isRevisionsStyleBookOpened
-									}
-									accessibleWhenDisabled
-									disabled={ shouldClearCanvasContainerView }
-									onClick={ toggleStyleBook }
-									size="compact"
-								/>
-							</FlexItem>
-						) }
-						<FlexItem>
-							<Button
-								label={ __( 'Revisions' ) }
-								icon={ backup }
-								onClick={ toggleRevisions }
-								accessibleWhenDisabled
-								disabled={ ! hasRevisions }
-								isPressed={
-									isRevisionsOpened ||
-									isRevisionsStyleBookOpened
-								}
-								size="compact"
-							/>
-						</FlexItem>
-						<GlobalStylesMenuSlot />
-					</Flex>
-				</Flex>
-			}
-		>
-			<GlobalStylesUI />
-		</DefaultSidebar>
-	);
-}

package/src/components/global-styles-sidebar/style.scss

@@ -1,80 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-.edit-site-global-styles-sidebar {
-	display: flex;
-	flex-direction: column;
-	min-height: 100%;
-
-	&__panel {
-		flex: 1;
-	}
-}
-
-.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-title {
-	margin: 0;
-}
-
-.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-actions {
-	flex: 1;
-}
-
-.edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
-	font-size: $default-font-size * 1.2;
-	font-weight: 500;
-}
-
-.edit-site-global-styles-sidebar .components-navigation__item > button span {
-	font-weight: 500;
-}
-
-.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
-	border: 0;
-}
-
-.edit-site-global-styles-sidebar .single-column {
-	grid-column: span 1;
-}
-
-.edit-site-global-styles-sidebar .components-tools-panel .span-columns {
-	grid-column: 1 / -1;
-}
-
-.edit-site-global-styles-sidebar__blocks-group {
-	padding-top: $grid-unit-30;
-	border-top: $border-width solid $gray-200;
-}
-
-.edit-site-global-styles-sidebar__blocks-group-help {
-	padding: 0 $grid-unit-20;
-}
-
-.edit-site-global-styles-color-palette-panel,
-.edit-site-global-styles-gradient-palette-panel {
-	padding: $grid-unit-20;
-}
-
-// Override the `hr` styles defined in the `ComplementaryArea` component
-// from the `@wordpress/interface` package.
-.edit-site-global-styles-sidebar hr {
-	margin: 0;
-}
-
-.show-icon-labels {
-	.edit-site-global-styles-sidebar__header {
-		.components-button.has-icon {
-			width: auto;
-
-			// Hide the button icons when labels are set to display...
-			svg {
-				display: none;
-			}
-			// ... and display labels.
-			&::after {
-				content: attr(aria-label);
-				font-size: $helptext-font-size;
-			}
-		}
-	}
-}
-

package/src/components/revisions/index.js

@@ -1,109 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Disabled } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import {
-	BlockList,
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-	__unstableEditorStyles as EditorStyles,
-	__unstableIframe as Iframe,
-} from '@wordpress/block-editor';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
-import { useContext, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-
-import { unlock } from '../../lock-unlock';
-import EditorCanvasContainer from '../editor-canvas-container';
-
-const {
-	ExperimentalBlockEditorProvider,
-	GlobalStylesContext,
-	useGlobalStylesOutputWithConfig,
-	__unstableBlockStyleVariationOverridesWithConfig,
-} = unlock( blockEditorPrivateApis );
-const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
-
-function isObjectEmpty( object ) {
-	return ! object || Object.keys( object ).length === 0;
-}
-
-function Revisions( { userConfig, blocks } ) {
-	const { base: baseConfig } = useContext( GlobalStylesContext );
-
-	const mergedConfig = useMemo( () => {
-		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
-			return mergeBaseAndUserConfigs( baseConfig, userConfig );
-		}
-		return {};
-	}, [ baseConfig, userConfig ] );
-
-	const renderedBlocksArray = useMemo(
-		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
-		[ blocks ]
-	);
-
-	const originalSettings = useSelect(
-		( select ) => select( blockEditorStore ).getSettings(),
-		[]
-	);
-	const settings = useMemo(
-		() => ( {
-			...originalSettings,
-			isPreviewMode: true,
-		} ),
-		[ originalSettings ]
-	);
-
-	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
-
-	const editorStyles =
-		! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
-			? globalStyles
-			: settings.styles;
-
-	return (
-		<EditorCanvasContainer
-			title={ __( 'Revisions' ) }
-			closeButtonLabel={ __( 'Close revisions' ) }
-			enableResizing
-		>
-			<Iframe
-				className="edit-site-revisions__iframe"
-				name="revisions"
-				tabIndex={ 0 }
-			>
-				<style>
-					{
-						// Forming a "block formatting context" to prevent margin collapsing.
-						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-						`.is-root-container { display: flow-root; }`
-					}
-				</style>
-				<Disabled className="edit-site-revisions__example-preview__content">
-					<ExperimentalBlockEditorProvider
-						value={ renderedBlocksArray }
-						settings={ settings }
-					>
-						<BlockList renderAppender={ false } />
-						{ /*
-						 * Styles are printed inside the block editor provider,
-						 * so they can access any registered style overrides.
-						 */ }
-						<EditorStyles styles={ editorStyles } />
-						<__unstableBlockStyleVariationOverridesWithConfig
-							config={ mergedConfig }
-						/>
-					</ExperimentalBlockEditorProvider>
-				</Disabled>
-			</Iframe>
-		</EditorCanvasContainer>
-	);
-}
-
-export default Revisions;