@wordpress/edit-site 6.33.3 → 6.34.0

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

@@ -1,265 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-.edit-site-global-styles-preview {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	line-height: 1;
-	cursor: pointer;
-}
-
-.edit-site-global-styles-preview__wrapper {
-	max-width: 100%;
-	display: block;
-	width: 100%;
-}
-
-.edit-site-typography-preview {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 100px;
-	margin-bottom: $grid-unit-20;
-	background: $gray-100;
-	border-radius: $radius-small;
-	overflow: hidden;
-}
-
-.edit-site-font-size__item {
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	line-break: anywhere;
-}
-
-.edit-site-font-size__item-value {
-	color: $gray-700;
-}
-
-.edit-site-global-styles-screen {
-	margin: $grid-unit-15 $grid-unit-20 $grid-unit-20;
-}
-
-.edit-site-global-styles-screen-typography__indicator {
-	height: 24px;
-	width: 24px;
-	font-size: 14px;
-	display: flex !important;
-	align-items: center;
-	justify-content: center;
-	border-radius: $radius-x-small;
-}
-
-.edit-site-global-styles-screen-typography__font-variants-count {
-	color: $gray-700;
-}
-
-.edit-site-global-styles-font-families__manage-fonts {
-	justify-content: center;
-}
-
-.edit-site-global-styles-screen .color-block-support-panel {
-	padding-left: 0;
-	padding-right: 0;
-	padding-top: 0;
-	border-top: none;
-	row-gap: calc(#{$grid-unit-05} * 3);
-}
-
-.edit-site-global-styles-header__description {
-	padding: 0 $grid-unit-20;
-}
-
-.edit-site-block-types-search {
-	margin-bottom: $grid-unit-10;
-	padding: 0 $grid-unit-20;
-}
-
-.edit-site-global-styles-header {
-	// Need to override the too specific bottom margin for complementary areas.
-	margin-bottom: 0 !important;
-}
-
-.edit-site-global-styles-subtitle {
-	// Need to override the too specific styles for complementary areas.
-	margin-bottom: 0 !important;
-	text-transform: uppercase;
-	font-weight: 500 !important;
-	font-size: 11px !important;
-}
-
-.edit-site-global-styles-section-title {
-	color: $gray-800;
-	font-weight: 600;
-	line-height: 1.2;
-	padding: $grid-unit-20 $grid-unit-20 0;
-	margin: 0;
-}
-
-.edit-site-global-styles-icon-with-current-color {
-	fill: currentColor;
-}
-
-.edit-site-global-styles__color-indicator-wrapper {
-	// Match the height of the rest of the icons (24px).
-	height: $grid-unit * 3;
-	flex-shrink: 0;
-}
-
-.edit-site-global-styles__shadows-panel__options-container,
-.edit-site-global-styles__typography-panel__options-container {
-	height: $grid-unit * 3;
-}
-
-.edit-site-global-styles__block-preview-panel {
-	position: relative;
-	width: 100%;
-	border: $gray-200 $border-width solid;
-	border-radius: $radius-medium;
-	overflow: hidden;
-}
-
-.edit-site-global-styles__shadow-preview-panel {
-	height: $grid-unit-60 * 3;
-	border: $gray-200 $border-width solid;
-	border-radius: $radius-medium;
-	overflow: auto;
-	background-image: repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5), repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5);
-	background-position: 0 0, 8px 8px;
-	background-size: 16px 16px;
-
-	.edit-site-global-styles__shadow-preview-block {
-		border: $gray-200 $border-width solid;
-		border-radius: $radius-small;
-		background-color: $white;
-		width: 60%;
-		height: 60px;
-	}
-}
-
-.edit-site-global-styles__shadow-editor__dropdown-content {
-	width: 280px;
-}
-
-.edit-site-global-styles__shadow-editor-panel {
-	// because tooltip of the range control is too close to the edge and creates overflow
-	margin-bottom: $grid-unit-05;
-}
-
-.edit-site-global-styles__shadow-editor__dropdown {
-	width: 100%;
-	position: relative;
-}
-
-.edit-site-global-styles__shadow-editor__dropdown-toggle {
-	width: 100%;
-	height: auto;
-	padding-top: $grid-unit;
-	padding-bottom: $grid-unit;
-	text-align: left;
-	border-radius: inherit;
-
-	&.is-open {
-		background: $gray-100;
-		color: var(--wp-admin-theme-color);
-	}
-}
-
-.edit-site-global-styles__shadow-editor__remove-button {
-	position: absolute;
-	right: $grid-unit;
-	top: $grid-unit;
-	opacity: 0;
-
-	&.edit-site-global-styles__shadow-editor__remove-button {
-		border: none;
-	}
-
-	.edit-site-global-styles__shadow-editor__dropdown-toggle:hover + &,
-	&:focus,
-	&:hover {
-		opacity: 1;
-	}
-
-	@media (hover: none) {
-		// Show reset button on devices that do not support hover.
-		opacity: 1;
-	}
-}
-
-.edit-site-global-styles-screen-css {
-	flex: 1 1 auto;
-	display: flex;
-	flex-direction: column;
-	margin: $grid-unit-20;
-
-	.components-v-stack {
-		flex: 1 1 auto;
-
-		.block-editor-global-styles-advanced-panel__custom-css-input {
-			flex: 1 1 auto;
-			display: flex;
-			flex-direction: column;
-
-			.components-base-control__field {
-				flex: 1 1 auto;
-				display: flex;
-				flex-direction: column;
-
-				.components-textarea-control__input {
-					flex: 1 1 auto;
-					// CSS input is always LTR regardless of language.
-					/*rtl:ignore*/
-					direction: ltr;
-				}
-			}
-		}
-	}
-}
-
-.edit-site-global-styles-screen-css-help-link {
-	display: inline-block;
-	margin-top: $grid-unit-10;
-}
-.edit-site-global-styles-screen-variations {
-	margin-top: $grid-unit-20;
-	border-top: 1px solid $gray-300;
-
-	& > * {
-		margin: $grid-unit-30 $grid-unit-20;
-	}
-}
-
-.edit-site-global-styles-sidebar__navigator-provider {
-	height: 100%;
-}
-
-.edit-site-global-styles-sidebar__navigator-screen {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-}
-
-.edit-site-global-styles-sidebar__navigator-screen .single-column {
-	grid-column: span 1;
-}
-
-.edit-site-global-styles-screen-root.edit-site-global-styles-screen-root,
-.edit-site-global-styles-screen-style-variations.edit-site-global-styles-screen-style-variations {
-	background: unset;
-	color: inherit;
-}
-
-.edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
-	fill: currentColor;
-}
-
-.edit-site-global-styles-screen-root__active-style-tile {
-	// Todo: revisit use of Card component and/or remove override
-	// The &#{&} is a workaround for the specificity of the Card component.
-	&#{&},
-	&#{&} .edit-site-global-styles-screen-root__active-style-tile-preview {
-		border-radius: $radius-small;
-	}
-}

package/src/components/global-styles/subtitle.js

@@ -1,17 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalHeading as Heading } from '@wordpress/components';
-
-function Subtitle( { children, level } ) {
-	return (
-		<Heading
-			className="edit-site-global-styles-subtitle"
-			level={ level ?? 2 }
-		>
-			{ children }
-		</Heading>
-	);
-}
-
-export default Subtitle;

package/src/components/global-styles/test/shadow-utils.spec.js

@@ -1,251 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getShadowParts, shadowStringToObject } from '../shadow-utils';
-
-const colorFormats = {
-	named: 'red',
-	hex: '#ff0000',
-	hexAlpha: '#ff000077',
-	rgb: 'rgb(255, 0, 0)',
-	rgbSpaced: 'rgb(255 0 0)',
-	rgbMultiSpaced: 'rgb(255  0   0)',
-	rgba: 'rgba(255, 0, 0, 0.5)',
-	rgbp: 'rgb(255 0 0 / 50%)',
-	hsl: 'hsl(0, 100%, 50%)',
-	hsla: 'hsla(0, 100%, 50%, 0.5)',
-	hslp: 'hsl(0 100% 50% / 50%)',
-	currentcolor: 'currentcolor',
-};
-const validShadowFormats = {
-	xy: '{x} {y}',
-	xyInset: '{x} {y} inset',
-	insetXY: 'inset {x} {y}',
-
-	xyColor: '{x} {y} {color}',
-	xyColorInset: '{x} {y} {color} inset',
-	xyInsetColor: '{x} {y} inset {color}',
-	insetXYColor: 'inset {x} {y} {color}',
-
-	colorXY: '{color} {x} {y}',
-	colorXYInset: '{color} {x} {y} inset',
-	colorInsetXY: '{color} inset {x} {y}',
-	insetColorXY: 'inset {color} {x} {y}',
-
-	xyBlur: '{x} {y} {blur}',
-	xyBlurInset: '{x} {y} {blur} inset',
-	insetXYBlur: 'inset {x} {y} {blur}',
-
-	xyBlurColor: '{x} {y} {blur} {color}',
-	xyBlurColorInset: '{x} {y} {blur} {color} inset',
-	xyBlurInsetColor: '{x} {y} {blur} inset {color}',
-	insetXYBlurColor: 'inset {x} {y} {blur} {color}',
-
-	colorXYBlur: '{color} {x} {y} {blur}',
-	colorXYBlurInset: '{color} {x} {y} {blur} inset',
-	colorInsetXYBlur: '{color} inset {x} {y} {blur}',
-	insetColorXYBlur: 'inset {color} {x} {y} {blur}',
-
-	xyBlurSpread: '{x} {y} {blur} {spread}',
-	xyBlurSpreadInset: '{x} {y} {blur} {spread} inset',
-	insetXYBlurSpread: 'inset {x} {y} {blur} {spread}',
-
-	xyBlurSpreadColor: '{x} {y} {blur} {spread} {color}',
-	xyBlurSpreadColorInset: '{x} {y} {blur} {spread} {color} inset',
-	xyBlurSpreadInsetColor: '{x} {y} {blur} {spread} inset {color}',
-	insetXYBlurSpreadColor: 'inset {x} {y} {blur} {spread} {color}',
-
-	colorXYBlurSpread: '{color} {x} {y} {blur} {spread}',
-	colorXYBlurSpreadInset: '{color} {x} {y} {blur} {spread} inset',
-	colorInsetXYBlurSpread: '{color} inset {x} {y} {blur} {spread}',
-	insetColorXYBlurSpread: 'inset {color} {x} {y} {blur} {spread}',
-
-	multipleSpaces: '{x}  {y}   {blur} {spread}',
-	upperInset: 'INSET {x} {y} {blur} {spread} {color}',
-};
-
-const invalidShadowFormats = {
-	oneLength: '{x}',
-	multipleLengthGroups1: '{x} {y} {color} {blur}',
-	multipleLengthGroups2: '{x} {y} {blur} {spread} {color} 5px',
-	multipleInsets: 'inset inset {x} {y} {blur} {spread} {color}',
-	multipleColors: '{x} {y} {blur} {spread} {color} {color}',
-};
-
-const combinedShadows = {
-	onePart: '{1}',
-	twoParts: '{1},{2}',
-	twoPartsSpaced: '{1}, {2}',
-	threeParts: '{1},{2},{3}',
-};
-
-const shadowUnits = {
-	px: '1px',
-	em: '1em',
-	rem: '1rem',
-	halfRem: '0.5rem',
-	percent: '1%',
-	halfPercent: '0.5%',
-	ex: '1ex',
-	inch: '1in',
-	cm: '1cm',
-	mm: '1mm',
-	pt: '1pt',
-	pc: '1pc',
-	vh: '1vh',
-	vw: '1vw',
-	vmin: '1vmin',
-	vmax: '1vmax',
-	ch: '1ch',
-	lh: '1lh',
-	zero: '0',
-};
-
-// Data helper functions
-function getShadowString( formatString, values ) {
-	return formatString.replace( /\{(\w+)\}/g, ( match, placeholder ) => {
-		if ( values.hasOwnProperty( placeholder ) ) {
-			return values[ placeholder ];
-		}
-		return match;
-	} );
-}
-function getCombinedShadowString( format, parts ) {
-	return format.replace( /{(\d+)}/g, ( _, index ) => parts[ index - 1 ] );
-}
-
-describe( 'getShadowParts', () => {
-	Object.entries( validShadowFormats ).forEach( ( [ shadowKey, shadow ] ) => {
-		describe( `test shadow format: ${ shadowKey }`, () => {
-			Object.entries( colorFormats ).forEach( ( [ colorKey, color ] ) => {
-				Object.entries( combinedShadows ).forEach(
-					( [ combinedShadowKey, combinedShadow ] ) => {
-						const shadowCount = combinedShadow.split( ',' ).length;
-						const shadowStrings = Array.from(
-							{ length: shadowCount },
-							() =>
-								getShadowString( shadow, {
-									x: '1px',
-									y: '2px',
-									blur: '3px',
-									spread: '4px',
-									color,
-								} )
-						);
-
-						const input = getCombinedShadowString(
-							combinedShadow,
-							shadowStrings
-						);
-						const output = shadowStrings;
-
-						it( `should return shadow parts for ${ colorKey } color and ${ combinedShadowKey } shadow`, () => {
-							const parts = getShadowParts( input );
-							expect( parts ).toEqual( output );
-						} );
-					}
-				);
-			} );
-		} );
-	} );
-} );
-
-describe( 'shadowStringToObject', () => {
-	const defaultShadow = {
-		x: '0',
-		y: '0',
-		blur: '0',
-		spread: '0',
-		color: '#000',
-		inset: false,
-	};
-
-	Object.entries( validShadowFormats ).forEach( ( [ shadowKey, shadow ] ) => {
-		describe( `test shadow format: ${ shadowKey }`, () => {
-			Object.entries( colorFormats ).forEach( ( [ colorKey, color ] ) => {
-				const hasX = shadow.includes( '{x}' );
-				const hasY = shadow.includes( '{y}' );
-				const hasBlur = shadow.includes( '{blur}' );
-				const hasSpread = shadow.includes( '{spread}' );
-				const hasColor = shadow.includes( '{color}' );
-				const hasInset = shadow.toLowerCase().includes( 'inset' );
-
-				const shadowString = getShadowString( shadow, {
-					x: '1px',
-					y: '2px',
-					blur: '3px',
-					spread: '4px',
-					color,
-				} );
-
-				const input = shadowString;
-				const output = {
-					x: hasX ? '1px' : defaultShadow.x,
-					y: hasY ? '2px' : defaultShadow.y,
-					blur: hasBlur ? '3px' : defaultShadow.blur,
-					spread: hasSpread ? '4px' : defaultShadow.spread,
-					color: hasColor ? color : defaultShadow.color,
-					inset: hasInset,
-				};
-
-				it( `should return shadow object for ${ colorKey } color`, () => {
-					const shadowObj = shadowStringToObject( input );
-					expect( shadowObj ).toEqual( output );
-				} );
-			} );
-		} );
-	} );
-
-	describe( `test invalid shadow formats`, () => {
-		const color = colorFormats.hex;
-		Object.entries( invalidShadowFormats ).forEach(
-			( [ shadowKey, shadow ] ) => {
-				const shadowString = getShadowString( shadow, {
-					x: '1px',
-					y: '2px',
-					blur: '3px',
-					spread: '4px',
-					color,
-				} );
-
-				const input = shadowString;
-				const output = defaultShadow;
-
-				it( `should return default shadow object for ${ shadowKey }`, () => {
-					const shadowObj = shadowStringToObject( input );
-					expect( shadowObj ).toEqual( output );
-				} );
-			}
-		);
-	} );
-
-	describe( `test shadow with all units`, () => {
-		const shadow = validShadowFormats.xyBlurSpreadColor;
-		const color = colorFormats.hex;
-
-		Object.entries( shadowUnits ).forEach( ( [ unitKey, unit ] ) => {
-			const shadowString = getShadowString( shadow, {
-				x: unit,
-				y: unit,
-				blur: unit,
-				spread: unit,
-				color,
-			} );
-
-			const input = shadowString;
-			const output = {
-				x: unit,
-				y: unit,
-				blur: unit,
-				spread: unit,
-				color,
-				inset: false,
-			};
-
-			it( `should return shadow object for the unit: ${ unitKey }`, () => {
-				const shadowObj = shadowStringToObject( input );
-				expect( shadowObj ).toEqual( output );
-			} );
-		} );
-	} );
-} );

package/src/components/global-styles/test/utils.spec.js

@@ -1,59 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getNewIndexFromPresets } from '../utils';
-
-const validPresets = {
-	single: [ { slug: 'preset-1' } ],
-	multiple: [ { slug: 'preset-1' }, { slug: 'preset-2' } ],
-	withGaps: [ { slug: 'preset-1' }, { slug: 'preset-3' } ],
-	mixedPrefixes: [
-		{ slug: 'preset-1' },
-		{ slug: 'shadow-2' },
-		{ slug: 'preset-3' },
-	],
-	nonStringSlug: [ { slug: 'preset-1' }, { slug: 2 } ],
-	emptyArray: [],
-};
-
-const invalidPresets = {
-	noMatch: [ { slug: 'preset-alpha' }, { slug: 'preset-beta' } ],
-	emptySlug: [ { slug: '' } ],
-	nullSlug: [ { slug: null } ],
-	undefinedSlug: [ { slug: undefined } ],
-	nonObjectElements: [ 'preset-1' ],
-};
-
-const getExpectedIndex = ( presetKey, presets ) => {
-	if ( presetKey === 'withGaps' ) {
-		return 4;
-	}
-	if ( presetKey === 'mixedPrefixes' ) {
-		return 4;
-	}
-	if ( presetKey === 'nonStringSlug' ) {
-		return 2;
-	}
-	return presets.length + 1;
-};
-
-describe( 'getNewIndexFromPresets', () => {
-	Object.entries( validPresets ).forEach( ( [ presetKey, presets ] ) => {
-		describe( `test valid preset format: ${ presetKey }`, () => {
-			const newIndex = getNewIndexFromPresets( presets, 'preset-' );
-			it( `should return correct new index for ${ presetKey }`, () => {
-				const expectedIndex = getExpectedIndex( presetKey, presets );
-				expect( newIndex ).toBe( expectedIndex );
-			} );
-		} );
-	} );
-
-	Object.entries( invalidPresets ).forEach( ( [ presetKey, presets ] ) => {
-		describe( `test invalid preset format: ${ presetKey }`, () => {
-			const newIndex = getNewIndexFromPresets( presets, 'preset-' );
-			it( `should return 1 for ${ presetKey }`, () => {
-				expect( newIndex ).toBe( 1 );
-			} );
-		} );
-	} );
-} );

package/src/components/global-styles/typeset.js

@@ -1,73 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import FontLibraryProvider, {
-	FontLibraryContext,
-} from './font-library-modal/context';
-import FontLibraryModal from './font-library-modal';
-import FontFamilyItem from './font-family-item';
-import Subtitle from './subtitle';
-import { getFontFamilies } from './utils';
-import { unlock } from '../../lock-unlock';
-
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
-
-function Typesets() {
-	const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext );
-	const { base } = useContext( GlobalStylesContext );
-	const { user: userConfig } = useContext( GlobalStylesContext );
-	const config = mergeBaseAndUserConfigs( base, userConfig );
-	const allFontFamilies = getFontFamilies( config );
-	const hasFonts =
-		allFontFamilies.filter( ( font ) => font !== null ).length > 0;
-
-	return (
-		hasFonts && (
-			<>
-				{ !! modalTabOpen && (
-					<FontLibraryModal
-						onRequestClose={ () => setModalTabOpen( null ) }
-						defaultTabId={ modalTabOpen }
-					/>
-				) }
-
-				<VStack spacing={ 2 }>
-					<HStack justify="space-between">
-						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-					</HStack>
-					<ItemGroup isBordered isSeparated>
-						{ allFontFamilies.map(
-							( font ) =>
-								font && (
-									<FontFamilyItem
-										key={ font.slug }
-										font={ font }
-									/>
-								)
-						) }
-					</ItemGroup>
-				</VStack>
-			</>
-		)
-	);
-}
-
-export default ( { ...props } ) => (
-	<FontLibraryProvider>
-		<Typesets { ...props } />
-	</FontLibraryProvider>
-);