@wordpress/edit-site 5.5.0 → 5.7.0

package/build-module/components/navigation-inspector/navigation-menu.js

@@ -1,69 +0,0 @@
-import { createElement, Fragment } from "@wordpress/element";
-
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis, store as blockEditorStore, BlockList, BlockTools } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-/**
- * Internal dependencies
- */
-
-import { unlock } from '../../private-apis';
-const ALLOWED_BLOCKS = {
-  'core/navigation': ['core/navigation-link', 'core/search', 'core/social-links', 'core/page-list', 'core/spacer', 'core/home-link', 'core/site-title', 'core/site-logo', 'core/navigation-submenu'],
-  'core/social-links': ['core/social-link'],
-  'core/navigation-submenu': ['core/navigation-link', 'core/navigation-submenu'],
-  'core/navigation-link': ['core/navigation-link', 'core/navigation-submenu'],
-  'core/page-list': ['core/page-list-item']
-};
-export default function NavigationMenu(_ref) {
-  let {
-    innerBlocks,
-    onSelect
-  } = _ref;
-  const {
-    clientIdsTree
-  } = useSelect(select => {
-    const {
-      __unstableGetClientIdsTree
-    } = select(blockEditorStore);
-    return {
-      clientIdsTree: __unstableGetClientIdsTree()
-    };
-  });
-  const {
-    updateBlockListSettings
-  } = useDispatch(blockEditorStore);
-  const {
-    OffCanvasEditor,
-    LeafMoreMenu
-  } = unlock(blockEditorPrivateApis); //TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
-  //Think through a better way of doing this, possible with adding allowed blocks to block library metadata
-
-  useEffect(() => {
-    updateBlockListSettings('', {
-      allowedBlocks: ALLOWED_BLOCKS['core/navigation']
-    });
-    innerBlocks.forEach(block => {
-      if (ALLOWED_BLOCKS[block.name]) {
-        updateBlockListSettings(block.clientId, {
-          allowedBlocks: ALLOWED_BLOCKS[block.name]
-        });
-      }
-    });
-  }, [updateBlockListSettings, innerBlocks]); // The hidden block is needed because it makes block edit side effects trigger.
-  // For example a navigation page list load its items has an effect on edit to load its items.
-
-  return createElement(Fragment, null, createElement(OffCanvasEditor, {
-    blocks: clientIdsTree,
-    onSelect: onSelect,
-    LeafMoreMenu: LeafMoreMenu
-  }), createElement("div", {
-    style: {
-      display: 'none'
-    }
-  }, createElement(BlockTools, null, createElement(BlockList, null))));
-}
-//# sourceMappingURL=navigation-menu.js.map

package/build-module/components/navigation-inspector/navigation-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/navigation-inspector/navigation-menu.js"],"names":["privateApis","blockEditorPrivateApis","store","blockEditorStore","BlockList","BlockTools","useEffect","useSelect","useDispatch","unlock","ALLOWED_BLOCKS","NavigationMenu","innerBlocks","onSelect","clientIdsTree","select","__unstableGetClientIdsTree","updateBlockListSettings","OffCanvasEditor","LeafMoreMenu","allowedBlocks","forEach","block","name","clientId","display"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,WAAW,IAAIC,sBADhB,EAECC,KAAK,IAAIC,gBAFV,EAGCC,SAHD,EAICC,UAJD,QAKO,yBALP;AAMA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAMC,cAAc,GAAG;AACtB,qBAAmB,CAClB,sBADkB,EAElB,aAFkB,EAGlB,mBAHkB,EAIlB,gBAJkB,EAKlB,aALkB,EAMlB,gBANkB,EAOlB,iBAPkB,EAQlB,gBARkB,EASlB,yBATkB,CADG;AAYtB,uBAAqB,CAAE,kBAAF,CAZC;AAatB,6BAA2B,CAC1B,sBAD0B,EAE1B,yBAF0B,CAbL;AAiBtB,0BAAwB,CACvB,sBADuB,EAEvB,yBAFuB,CAjBF;AAqBtB,oBAAkB,CAAE,qBAAF;AArBI,CAAvB;AAwBA,eAAe,SAASC,cAAT,OAAqD;AAAA,MAA5B;AAAEC,IAAAA,WAAF;AAAeC,IAAAA;AAAf,GAA4B;AACnE,QAAM;AAAEC,IAAAA;AAAF,MAAoBP,SAAS,CAAIQ,MAAF,IAAc;AAClD,UAAM;AAAEC,MAAAA;AAAF,QAAiCD,MAAM,CAAEZ,gBAAF,CAA7C;AACA,WAAO;AACNW,MAAAA,aAAa,EAAEE,0BAA0B;AADnC,KAAP;AAGA,GALkC,CAAnC;AAMA,QAAM;AAAEC,IAAAA;AAAF,MAA8BT,WAAW,CAAEL,gBAAF,CAA/C;AAEA,QAAM;AAAEe,IAAAA,eAAF;AAAmBC,IAAAA;AAAnB,MAAoCV,MAAM,CAAER,sBAAF,CAAhD,CATmE,CAWnE;AACA;;AACAK,EAAAA,SAAS,CAAE,MAAM;AAChBW,IAAAA,uBAAuB,CAAE,EAAF,EAAM;AAC5BG,MAAAA,aAAa,EAAEV,cAAc,CAAE,iBAAF;AADD,KAAN,CAAvB;AAGAE,IAAAA,WAAW,CAACS,OAAZ,CAAuBC,KAAF,IAAa;AACjC,UAAKZ,cAAc,CAAEY,KAAK,CAACC,IAAR,CAAnB,EAAoC;AACnCN,QAAAA,uBAAuB,CAAEK,KAAK,CAACE,QAAR,EAAkB;AACxCJ,UAAAA,aAAa,EAAEV,cAAc,CAAEY,KAAK,CAACC,IAAR;AADW,SAAlB,CAAvB;AAGA;AACD,KAND;AAOA,GAXQ,EAWN,CAAEN,uBAAF,EAA2BL,WAA3B,CAXM,CAAT,CAbmE,CA0BnE;AACA;;AACA,SACC,8BACC,cAAC,eAAD;AACC,IAAA,MAAM,EAAGE,aADV;AAEC,IAAA,QAAQ,EAAGD,QAFZ;AAGC,IAAA,YAAY,EAAGM;AAHhB,IADD,EAMC;AAAK,IAAA,KAAK,EAAG;AAAEM,MAAAA,OAAO,EAAE;AAAX;AAAb,KACC,cAAC,UAAD,QACC,cAAC,SAAD,OADD,CADD,CAND,CADD;AAcA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\tBlockList,\n\tBlockTools,\n} from '@wordpress/block-editor';\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst ALLOWED_BLOCKS = {\n\t'core/navigation': [\n\t\t'core/navigation-link',\n\t\t'core/search',\n\t\t'core/social-links',\n\t\t'core/page-list',\n\t\t'core/spacer',\n\t\t'core/home-link',\n\t\t'core/site-title',\n\t\t'core/site-logo',\n\t\t'core/navigation-submenu',\n\t],\n\t'core/social-links': [ 'core/social-link' ],\n\t'core/navigation-submenu': [\n\t\t'core/navigation-link',\n\t\t'core/navigation-submenu',\n\t],\n\t'core/navigation-link': [\n\t\t'core/navigation-link',\n\t\t'core/navigation-submenu',\n\t],\n\t'core/page-list': [ 'core/page-list-item' ],\n};\n\nexport default function NavigationMenu( { innerBlocks, onSelect } ) {\n\tconst { clientIdsTree } = useSelect( ( select ) => {\n\t\tconst { __unstableGetClientIdsTree } = select( blockEditorStore );\n\t\treturn {\n\t\t\tclientIdsTree: __unstableGetClientIdsTree(),\n\t\t};\n\t} );\n\tconst { updateBlockListSettings } = useDispatch( blockEditorStore );\n\n\tconst { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );\n\n\t//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList\n\t//Think through a better way of doing this, possible with adding allowed blocks to block library metadata\n\tuseEffect( () => {\n\t\tupdateBlockListSettings( '', {\n\t\t\tallowedBlocks: ALLOWED_BLOCKS[ 'core/navigation' ],\n\t\t} );\n\t\tinnerBlocks.forEach( ( block ) => {\n\t\t\tif ( ALLOWED_BLOCKS[ block.name ] ) {\n\t\t\t\tupdateBlockListSettings( block.clientId, {\n\t\t\t\t\tallowedBlocks: ALLOWED_BLOCKS[ block.name ],\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\t}, [ updateBlockListSettings, innerBlocks ] );\n\n\t// The hidden block is needed because it makes block edit side effects trigger.\n\t// For example a navigation page list load its items has an effect on edit to load its items.\n\treturn (\n\t\t<>\n\t\t\t<OffCanvasEditor\n\t\t\t\tblocks={ clientIdsTree }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tLeafMoreMenu={ LeafMoreMenu }\n\t\t\t/>\n\t\t\t<div style={ { display: 'none' } }>\n\t\t\t\t<BlockTools>\n\t\t\t\t\t<BlockList />\n\t\t\t\t</BlockTools>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}

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

@@ -1,14 +0,0 @@
-/**
- * Internal dependencies
- */
-import { useSupportedStyles } from './hooks';
-
-export function useHasColorPanel( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		supports.includes( 'color' ) ||
-		supports.includes( 'backgroundColor' ) ||
-		supports.includes( 'background' ) ||
-		supports.includes( 'linkColor' )
-	);
-}

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;