@wordpress/edit-site 5.6.0 → 5.7.0

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

@@ -1,132 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalColorGradientControl as ColorGradientControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	useSupportedStyles,
-	useColorsPerOrigin,
-	useGradientsPerOrigin,
-} from './hooks';
-import { unlock } from '../../private-apis';
-
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function ScreenBackgroundColor( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = useSupportedStyles( name );
-	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
-	const [ areCustomGradientsEnabled ] = useGlobalSetting(
-		'color.customGradient',
-		name
-	);
-	const colorsPerOrigin = useColorsPerOrigin( name );
-	const gradientsPerOrigin = useGradientsPerOrigin( name );
-
-	const [ isBackgroundEnabled ] = useGlobalSetting(
-		'color.background',
-		name
-	);
-
-	const hasBackgroundColor =
-		supports.includes( 'backgroundColor' ) &&
-		isBackgroundEnabled &&
-		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-	const hasGradientColor =
-		supports.includes( 'background' ) &&
-		( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );
-	const [ backgroundColor, setBackgroundColor ] = useGlobalStyle(
-		prefix + 'color.background',
-		name
-	);
-	const [ userBackgroundColor ] = useGlobalStyle(
-		prefix + 'color.background',
-		name,
-		'user'
-	);
-	const [ gradient, setGradient ] = useGlobalStyle(
-		prefix + 'color.gradient',
-		name
-	);
-	const [ userGradient ] = useGlobalStyle(
-		prefix + 'color.gradient',
-		name,
-		'user'
-	);
-
-	if ( ! hasBackgroundColor && ! hasGradientColor ) {
-		return null;
-	}
-
-	let backgroundSettings = {};
-	if ( hasBackgroundColor ) {
-		backgroundSettings = {
-			colorValue: backgroundColor,
-			onColorChange: setBackgroundColor,
-		};
-		if ( backgroundColor ) {
-			backgroundSettings.clearable =
-				backgroundColor === userBackgroundColor;
-		}
-	}
-
-	let gradientSettings = {};
-	if ( hasGradientColor ) {
-		gradientSettings = {
-			gradientValue: gradient,
-			onGradientChange: setGradient,
-		};
-		if ( gradient ) {
-			gradientSettings.clearable = gradient === userGradient;
-		}
-	}
-
-	const controlProps = {
-		...backgroundSettings,
-		...gradientSettings,
-	};
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Background' ) }
-				description={ __(
-					'Set a background color or gradient for the whole site.'
-				) }
-			/>
-			<ColorGradientControl
-				className={ classnames(
-					'edit-site-screen-background-color__control',
-					{
-						'has-no-tabs':
-							! hasBackgroundColor || ! hasGradientColor,
-					}
-				) }
-				colors={ colorsPerOrigin }
-				gradients={ gradientsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				disableCustomGradients={ ! areCustomGradientsEnabled }
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				headingLevel={ 3 }
-				{ ...controlProps }
-			/>
-		</>
-	);
-}
-
-export default ScreenBackgroundColor;

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

@@ -1,104 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalColorGradientControl as ColorGradientControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import { useSupportedStyles, useColorsPerOrigin } from './hooks';
-import { unlock } from '../../private-apis';
-
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function ScreenButtonColor( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = useSupportedStyles( name );
-	const colorsPerOrigin = useColorsPerOrigin( name );
-	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
-	const [ isBackgroundEnabled ] = useGlobalSetting(
-		'color.background',
-		name
-	);
-
-	const hasButtonColor =
-		supports.includes( 'buttonColor' ) &&
-		isBackgroundEnabled &&
-		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-
-	const [ buttonTextColor, setButtonTextColor ] = useGlobalStyle(
-		prefix + 'elements.button.color.text',
-		name
-	);
-	const [ userButtonTextColor ] = useGlobalStyle(
-		'elements.button.color.text',
-		name,
-		'user'
-	);
-
-	const [ buttonBgColor, setButtonBgColor ] = useGlobalStyle(
-		'elements.button.color.background',
-		name
-	);
-	const [ userButtonBgColor ] = useGlobalStyle(
-		'elements.button.color.background',
-		name,
-		'user'
-	);
-
-	if ( ! hasButtonColor ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Buttons' ) }
-				description={ __(
-					'Set the default colors used for buttons across the site.'
-				) }
-			/>
-
-			<h3 className="edit-site-global-styles-section-title">
-				{ __( 'Text color' ) }
-			</h3>
-
-			<ColorGradientControl
-				className="edit-site-screen-button-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ buttonTextColor }
-				onColorChange={ setButtonTextColor }
-				clearable={ buttonTextColor === userButtonTextColor }
-				headingLevel={ 4 }
-			/>
-
-			<h3 className="edit-site-global-styles-section-title">
-				{ __( 'Background color' ) }
-			</h3>
-
-			<ColorGradientControl
-				className="edit-site-screen-button-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ buttonBgColor }
-				onColorChange={ setButtonBgColor }
-				clearable={ buttonBgColor === userButtonBgColor }
-				headingLevel={ 4 }
-			/>
-		</>
-	);
-}
-
-export default ScreenButtonColor;

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

@@ -1,206 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { sprintf, __ } from '@wordpress/i18n';
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components';
-import {
-	__experimentalColorGradientControl as ColorGradientControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	useSupportedStyles,
-	useColorsPerOrigin,
-	useGradientsPerOrigin,
-} from './hooks';
-import { unlock } from '../../private-apis';
-
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function ScreenHeadingColor( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
-	const supports = useSupportedStyles( name );
-	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
-	const [ areCustomGradientsEnabled ] = useGlobalSetting(
-		'color.customGradient',
-		name
-	);
-	const [ isTextEnabled ] = useGlobalSetting( 'color.text', name );
-	const [ isBackgroundEnabled ] = useGlobalSetting(
-		'color.background',
-		name
-	);
-	const colorsPerOrigin = useColorsPerOrigin( name );
-	const gradientsPerOrigin = useGradientsPerOrigin( name );
-
-	const hasTextColor =
-		supports.includes( 'color' ) &&
-		isTextEnabled &&
-		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-
-	const hasBackgroundColor =
-		supports.includes( 'backgroundColor' ) &&
-		isBackgroundEnabled &&
-		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-	const hasGradientColor =
-		supports.includes( 'background' ) &&
-		( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );
-
-	const [ color, setColor ] = useGlobalStyle(
-		prefix + 'elements.' + selectedLevel + '.color.text',
-		name
-	);
-	const [ userColor ] = useGlobalStyle(
-		prefix + 'elements.' + selectedLevel + '.color.text',
-		name,
-		'user'
-	);
-
-	const [ backgroundColor, setBackgroundColor ] = useGlobalStyle(
-		prefix + 'elements.' + selectedLevel + '.color.background',
-		name
-	);
-	const [ userBackgroundColor ] = useGlobalStyle(
-		prefix + 'elements.' + selectedLevel + '.color.background',
-		name,
-		'user'
-	);
-	const [ gradient, setGradient ] = useGlobalStyle(
-		prefix + 'elements.' + selectedLevel + '.color.gradient',
-		name
-	);
-	const [ userGradient ] = useGlobalStyle(
-		prefix + 'elements.' + selectedLevel + '.color.gradient',
-		name,
-		'user'
-	);
-
-	if ( ! hasTextColor && ! hasBackgroundColor && ! hasGradientColor ) {
-		return null;
-	}
-
-	let backgroundSettings = {};
-	if ( hasBackgroundColor ) {
-		backgroundSettings = {
-			colorValue: backgroundColor,
-			onColorChange: setBackgroundColor,
-		};
-		if ( backgroundColor ) {
-			backgroundSettings.clearable =
-				backgroundColor === userBackgroundColor;
-		}
-	}
-
-	let gradientSettings = {};
-	if ( hasGradientColor ) {
-		gradientSettings = {
-			gradientValue: gradient,
-			onGradientChange: setGradient,
-		};
-		if ( gradient ) {
-			gradientSettings.clearable = gradient === userGradient;
-		}
-	}
-
-	const controlProps = {
-		...backgroundSettings,
-		...gradientSettings,
-	};
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Headings' ) }
-				description={ __(
-					'Set the default color used for headings across the site.'
-				) }
-			/>
-			<div className="edit-site-global-styles-screen-heading-color">
-				<h3>{ __( 'Select heading level' ) }</h3>
-
-				<ToggleGroupControl
-					__nextHasNoMarginBottom
-					label={ __( 'Select heading level' ) }
-					hideLabelFromVision={ true }
-					value={ selectedLevel }
-					onChange={ setCurrentTab }
-					isBlock
-				>
-					<ToggleGroupControlOption
-						value="heading"
-						/* translators: 'All' refers to selecting all heading levels
-						and applying the same style to h1-h6. */
-						label={ __( 'All' ) }
-					/>
-					<ToggleGroupControlOption value="h1" label={ __( 'H1' ) } />
-					<ToggleGroupControlOption value="h2" label={ __( 'H2' ) } />
-					<ToggleGroupControlOption value="h3" label={ __( 'H3' ) } />
-					<ToggleGroupControlOption value="h4" label={ __( 'H4' ) } />
-					<ToggleGroupControlOption value="h5" label={ __( 'H5' ) } />
-					<ToggleGroupControlOption value="h6" label={ __( 'H6' ) } />
-				</ToggleGroupControl>
-			</div>
-			{ hasTextColor && (
-				<div className="edit-site-global-styles-screen-heading-color">
-					<h3>
-						{ selectedLevel === 'heading'
-							? __( 'Text color for all heading levels' )
-							: sprintf(
-									/* translators: %s: heading level (h1-h6) */
-									__( 'Text color for %s' ),
-									selectedLevel.toUpperCase()
-							  ) }
-					</h3>
-					<ColorGradientControl
-						className="edit-site-screen-heading-text-color__control"
-						colors={ colorsPerOrigin }
-						disableCustomColors={ ! areCustomSolidsEnabled }
-						showTitle={ false }
-						enableAlpha
-						__experimentalIsRenderedInSidebar
-						colorValue={ color }
-						onColorChange={ setColor }
-						clearable={ color === userColor }
-						headingLevel={ 4 }
-					/>
-				</div>
-			) }
-			{ hasBackgroundColor && (
-				<div className="edit-site-global-styles-screen-heading-color">
-					<h3>
-						{ selectedLevel === 'heading'
-							? __( 'Background color for all heading levels' )
-							: sprintf(
-									/* translators: %s: heading level (h1-h6) */
-									__( 'Background color for %s' ),
-									selectedLevel.toUpperCase()
-							  ) }
-					</h3>
-					<ColorGradientControl
-						className="edit-site-screen-heading-background-color__control"
-						colors={ colorsPerOrigin }
-						gradients={ gradientsPerOrigin }
-						disableCustomColors={ ! areCustomSolidsEnabled }
-						disableCustomGradients={ ! areCustomGradientsEnabled }
-						showTitle={ false }
-						enableAlpha
-						__experimentalIsRenderedInSidebar
-						headingLevel={ 4 }
-						{ ...controlProps }
-					/>
-				</div>
-			) }
-		</>
-	);
-}
-
-export default ScreenHeadingColor;

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

@@ -1,124 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalColorGradientControl as ColorGradientControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import { TabPanel } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import { useSupportedStyles, useColorsPerOrigin } from './hooks';
-import { unlock } from '../../private-apis';
-
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function ScreenLinkColor( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = useSupportedStyles( name );
-	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
-	const colorsPerOrigin = useColorsPerOrigin( name );
-	const [ isLinkEnabled ] = useGlobalSetting( 'color.link', name );
-
-	const hasLinkColor =
-		supports.includes( 'linkColor' ) &&
-		isLinkEnabled &&
-		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-
-	const pseudoStates = {
-		default: {
-			label: __( 'Default' ),
-			value: useGlobalStyle(
-				prefix + 'elements.link.color.text',
-				name
-			)[ 0 ],
-			handler: useGlobalStyle(
-				prefix + 'elements.link.color.text',
-				name
-			)[ 1 ],
-			userValue: useGlobalStyle(
-				prefix + 'elements.link.color.text',
-				name,
-				'user'
-			)[ 0 ],
-		},
-		hover: {
-			label: __( 'Hover' ),
-			value: useGlobalStyle(
-				prefix + 'elements.link.:hover.color.text',
-				name
-			)[ 0 ],
-			handler: useGlobalStyle(
-				prefix + 'elements.link.:hover.color.text',
-				name
-			)[ 1 ],
-			userValue: useGlobalStyle(
-				prefix + 'elements.link.:hover.color.text',
-				name,
-				'user'
-			)[ 0 ],
-		},
-	};
-
-	if ( ! hasLinkColor ) {
-		return null;
-	}
-
-	const tabs = Object.entries( pseudoStates ).map(
-		( [ selector, config ] ) => {
-			return {
-				name: selector,
-				title: config.label,
-				className: `color-text-${ selector }`,
-			};
-		}
-	);
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Links' ) }
-				description={ __(
-					'Set the colors used for links across the site.'
-				) }
-			/>
-
-			<TabPanel tabs={ tabs }>
-				{ ( tab ) => {
-					const pseudoSelectorConfig =
-						pseudoStates[ tab.name ] ?? null;
-
-					if ( ! pseudoSelectorConfig ) {
-						return null;
-					}
-
-					return (
-						<>
-							<ColorGradientControl
-								className="edit-site-screen-link-color__control"
-								colors={ colorsPerOrigin }
-								disableCustomColors={ ! areCustomSolidsEnabled }
-								showTitle={ false }
-								enableAlpha
-								__experimentalIsRenderedInSidebar
-								colorValue={ pseudoSelectorConfig.value }
-								onColorChange={ pseudoSelectorConfig.handler }
-								clearable={
-									pseudoSelectorConfig.value ===
-									pseudoSelectorConfig.userValue
-								}
-								headingLevel={ 3 }
-							/>
-						</>
-					);
-				} }
-			</TabPanel>
-		</>
-	);
-}
-
-export default ScreenLinkColor;

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

@@ -1,62 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalColorGradientControl as ColorGradientControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import { useSupportedStyles, useColorsPerOrigin } from './hooks';
-import { unlock } from '../../private-apis';
-
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function ScreenTextColor( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = useSupportedStyles( name );
-	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
-	const [ isTextEnabled ] = useGlobalSetting( 'color.text', name );
-	const colorsPerOrigin = useColorsPerOrigin( name );
-
-	const hasTextColor =
-		supports.includes( 'color' ) &&
-		isTextEnabled &&
-		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-
-	const [ color, setColor ] = useGlobalStyle( prefix + 'color.text', name );
-	const [ userColor ] = useGlobalStyle( prefix + 'color.text', name, 'user' );
-
-	if ( ! hasTextColor ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Text' ) }
-				description={ __(
-					'Set the default color used for text across the site.'
-				) }
-			/>
-			<ColorGradientControl
-				className="edit-site-screen-text-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ color }
-				onColorChange={ setColor }
-				clearable={ color === userColor }
-				headingLevel={ 3 }
-			/>
-		</>
-	);
-}
-
-export default ScreenTextColor;