@wordpress/edit-site 5.18.0 → 5.19.0

package/src/components/global-styles/font-library-modal/utils/test/setUIValuesNeeded.spec.js

@@ -0,0 +1,41 @@
+/**
+ * Internal dependencies
+ */
+import { setUIValuesNeeded } from '../index';
+
+describe( 'setUIValuesNeeded function', () => {
+	test( 'Should set name from fontFamily if name is missing', () => {
+		const font = { fontFamily: 'Arial' };
+		const result = setUIValuesNeeded( font );
+		expect( result.name ).toBe( 'Arial' );
+	} );
+
+	test( 'Should set name from slug if name and fontFamily are missing', () => {
+		const font = { slug: 'arial-slug' };
+		const result = setUIValuesNeeded( font );
+		expect( result.name ).toBe( 'arial-slug' );
+	} );
+
+	test( 'Should not overwrite name if it exists', () => {
+		const font = { name: 'ExistingName', fontFamily: 'Arial' };
+		const result = setUIValuesNeeded( font );
+		expect( result.name ).toBe( 'ExistingName' );
+	} );
+
+	test( 'Should merge extra values', () => {
+		const font = { name: 'Arial', slug: 'arial' };
+		const extraValues = { source: 'custom' };
+		const result = setUIValuesNeeded( font, extraValues );
+		expect( result ).toEqual( {
+			name: 'Arial',
+			slug: 'arial',
+			source: 'custom',
+		} );
+	} );
+
+	test( 'Should return the same object if no conditions met', () => {
+		const font = { randomProperty: 'randomValue' };
+		const result = setUIValuesNeeded( font );
+		expect( result ).toEqual( font );
+	} );
+} );

package/src/components/global-styles/font-library-modal/utils/test/toggleFont.spec.js

@@ -0,0 +1,141 @@
+/**
+ * Internal dependencies
+ */
+import { toggleFont } from '../toggleFont';
+
+describe( 'toggleFont function', () => {
+	const initialCustomFonts = [
+		{
+			slug: 'font1',
+			fontFace: [
+				{ fontWeight: '400', fontStyle: 'normal' },
+				{ fontWeight: '700', fontStyle: 'italic' },
+			],
+		},
+	];
+
+	const newFont = { slug: 'font2', fontFace: [] };
+
+	// Basic Toggles
+	describe( 'Basic Toggles', () => {
+		it( 'should toggle the entire font family on/off', () => {
+			let updatedFonts = toggleFont( newFont, null, initialCustomFonts );
+			expect( updatedFonts ).toEqual( [
+				...initialCustomFonts,
+				newFont,
+			] );
+
+			updatedFonts = toggleFont( newFont, null, updatedFonts );
+			expect( updatedFonts ).toEqual( initialCustomFonts );
+		} );
+
+		it( 'should toggle a specific font face of an activated font family', () => {
+			const face = { fontWeight: '400', fontStyle: 'normal' };
+			let updatedFonts = toggleFont(
+				initialCustomFonts[ 0 ],
+				face,
+				initialCustomFonts
+			);
+			expect( updatedFonts[ 0 ].fontFace ).toEqual( [
+				{ fontWeight: '700', fontStyle: 'italic' },
+			] );
+
+			updatedFonts = toggleFont(
+				initialCustomFonts[ 0 ],
+				face,
+				updatedFonts
+			);
+			expect( updatedFonts[ 0 ].fontFace ).toEqual( [
+				{ fontWeight: '700', fontStyle: 'italic' },
+				{ fontWeight: '400', fontStyle: 'normal' },
+			] );
+		} );
+
+		it( 'should toggle a specific font face of a non-activated font family', () => {
+			const face = { fontWeight: '500', fontStyle: 'normal' };
+			const updatedFonts = toggleFont(
+				newFont,
+				face,
+				initialCustomFonts
+			);
+			expect( updatedFonts ).toEqual( [
+				...initialCustomFonts,
+				{ ...newFont, fontFace: [ face ] },
+			] );
+		} );
+	} );
+
+	// Edge Cases
+	describe( 'Edge Cases', () => {
+		it( 'should handle empty initial fonts', () => {
+			const updatedFonts = toggleFont( newFont, null, [] );
+			expect( updatedFonts ).toEqual( [ newFont ] );
+		} );
+
+		it( 'should deactivate font family when all font faces are deactivated', () => {
+			const face1 = { fontWeight: '400', fontStyle: 'normal' };
+			const face2 = { fontWeight: '700', fontStyle: 'italic' };
+			let updatedFonts = toggleFont(
+				initialCustomFonts[ 0 ],
+				face1,
+				initialCustomFonts
+			);
+			updatedFonts = toggleFont(
+				initialCustomFonts[ 0 ],
+				face2,
+				updatedFonts
+			);
+
+			expect( updatedFonts ).toEqual( [] );
+		} );
+
+		it( 'should not duplicate an already activated font face', () => {
+			const face = { fontWeight: '400', fontStyle: 'normal' };
+			const updatedFonts = toggleFont(
+				initialCustomFonts[ 0 ],
+				face,
+				initialCustomFonts
+			);
+			const furtherUpdatedFonts = toggleFont(
+				initialCustomFonts[ 0 ],
+				face,
+				updatedFonts
+			);
+
+			expect( furtherUpdatedFonts ).toHaveLength( 1 );
+			// Sort the font faces by fontWeight to ensure the order is consistent for the toEqual assertion.
+			expect(
+				furtherUpdatedFonts[ 0 ].fontFace.sort(
+					( a, b ) => a.fontWeight - b.fontWeight
+				)
+			).toEqual( initialCustomFonts[ 0 ].fontFace );
+		} );
+
+		it( 'should handle undefined or null fontFace gracefully', () => {
+			const fontWithoutFaces = { slug: 'font3' }; // no fontFace defined
+			const face = { fontWeight: '500', fontStyle: 'normal' };
+			const updatedFonts = toggleFont(
+				fontWithoutFaces,
+				face,
+				initialCustomFonts
+			);
+			expect( updatedFonts ).toEqual( [
+				...initialCustomFonts,
+				{ ...fontWithoutFaces, fontFace: [ face ] },
+			] );
+		} );
+
+		it( 'should handle fonts with the same slug but different properties', () => {
+			const differentFontWithSameSlug = {
+				slug: 'font1',
+				displayName: 'Different Font with Same Slug',
+			};
+			const updatedFonts = toggleFont(
+				differentFontWithSameSlug,
+				null,
+				initialCustomFonts
+			);
+			expect( updatedFonts ).toEqual( [] );
+		} );
+	} );
+} );

package/src/components/global-styles/font-library-modal/utils/toggleFont.js

@@ -0,0 +1,90 @@
+/**
+ * Toggles the activation of a given font or font variant within a list of custom fonts.
+ *
+ * - If only the font is provided (without face), the entire font family's activation is toggled.
+ * - If both font and face are provided, the activation of the specific font variant is toggled.
+ *
+ * @param {Object} font            - The font to be toggled.
+ * @param {string} font.slug       - The unique identifier for the font.
+ * @param {Array}  [font.fontFace] - The list of font variants (faces) associated with the font.
+ *
+ * @param {Object} [face]          - The specific font variant to be toggled.
+ * @param {string} face.fontWeight - The weight of the font variant.
+ * @param {string} face.fontStyle  - The style of the font variant.
+ *
+ * @param {Array}  initialfonts    - The initial list of custom fonts.
+ *
+ * @return {Array} - The updated list of custom fonts with the font/font variant toggled.
+ *
+ * @example
+ * const customFonts = [
+ *     { slug: 'roboto', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }] }
+ * ];
+ *
+ * toggleFont({ slug: 'roboto' }, null, customFonts);
+ * // This will remove 'roboto' from customFonts
+ *
+ * toggleFont({ slug: 'roboto' }, { fontWeight: '400', fontStyle: 'normal' }, customFonts);
+ * // This will remove the specified face from 'roboto' in customFonts
+ *
+ * toggleFont({ slug: 'roboto' }, { fontWeight: '500', fontStyle: 'normal' }, customFonts);
+ * // This will add the specified face to 'roboto' in customFonts
+ */
+export function toggleFont( font, face, initialfonts ) {
+	// Helper to check if a font is activated based on its slug
+	const isFontActivated = ( f ) => f.slug === font.slug;
+
+	// Helper to get the activated font from a list of fonts
+	const getActivatedFont = ( fonts ) => fonts.find( isFontActivated );
+
+	// Toggle the activation status of an entire font family
+	const toggleEntireFontFamily = ( activatedFont ) => {
+		if ( ! activatedFont ) {
+			// If the font is not active, activate the entire font family
+			return [ ...initialfonts, font ];
+		}
+		// If the font is already active, deactivate the entire font family
+		return initialfonts.filter( ( f ) => ! isFontActivated( f ) );
+	};
+
+	// Toggle the activation status of a specific font variant
+	const toggleFontVariant = ( activatedFont ) => {
+		const isFaceActivated = ( f ) =>
+			f.fontWeight === face.fontWeight && f.fontStyle === face.fontStyle;
+
+		if ( ! activatedFont ) {
+			// If the font family is not active, activate the font family with the font variant
+			return [ ...initialfonts, { ...font, fontFace: [ face ] } ];
+		}
+
+		let newFontFaces = activatedFont.fontFace || [];
+
+		if ( newFontFaces.find( isFaceActivated ) ) {
+			// If the font variant is active, deactivate it
+			newFontFaces = newFontFaces.filter(
+				( f ) => ! isFaceActivated( f )
+			);
+		} else {
+			// If the font variant is not active, activate it
+			newFontFaces = [ ...newFontFaces, face ];
+		}
+
+		// If there are no more font faces, deactivate the font family
+		if ( newFontFaces.length === 0 ) {
+			return initialfonts.filter( ( f ) => ! isFontActivated( f ) );
+		}
+
+		// Return updated fonts list with toggled font variant
+		return initialfonts.map( ( f ) =>
+			isFontActivated( f ) ? { ...f, fontFace: newFontFaces } : f
+		);
+	};
+
+	const activatedFont = getActivatedFont( initialfonts );
+
+	if ( ! face ) {
+		return toggleEntireFontFamily( activatedFont );
+	}
+
+	return toggleFontVariant( activatedFont );
+}

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

@@ -31,7 +31,7 @@ export function mergeBaseAndUserConfigs( base, user ) {
 }
 
 function useGlobalStylesUserConfig() {
-	const { globalStylesId, isReady, settings, styles, behaviors } = useSelect(
+	const { globalStylesId, isReady, settings, styles } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
@@ -65,7 +65,6 @@ function useGlobalStylesUserConfig() {
 				isReady: hasResolved,
 				settings: record?.settings,
 				styles: record?.styles,
-				behaviors: record?.behaviors,
 			};
 		},
 		[]
@@ -77,9 +76,8 @@ function useGlobalStylesUserConfig() {
 		return {
 			settings: settings ?? {},
 			styles: styles ?? {},
-			behaviors: behaviors ?? {},
 		};
-	}, [ settings, styles, behaviors ] );
+	}, [ settings, styles ] );
 
 	const setConfig = useCallback(
 		( callback, options = {} ) => {
@@ -91,7 +89,6 @@ function useGlobalStylesUserConfig() {
 			const currentConfig = {
 				styles: record?.styles ?? {},
 				settings: record?.settings ?? {},
-				behaviors: record?.behaviors ?? {},
 			};
 			const updatedConfig = callback( currentConfig );
 			editEntityRecord(
@@ -101,8 +98,6 @@ function useGlobalStylesUserConfig() {
 				{
 					styles: cleanEmptyObject( updatedConfig.styles ) || {},
 					settings: cleanEmptyObject( updatedConfig.settings ) || {},
-					behaviors:
-						cleanEmptyObject( updatedConfig.behaviors ) || {},
 				},
 				options
 			);

package/src/components/global-styles/screen-block.js

@@ -61,21 +61,20 @@ const {
 	useHasDimensionsPanel,
 	useHasTypographyPanel,
 	useHasBorderPanel,
-	__experimentalUseHasBehaviorsPanel: useHasBehaviorsPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
 	useHasColorPanel,
 	useHasEffectsPanel,
 	useHasFiltersPanel,
+	useHasImageSettingsPanel,
 	useGlobalStyle,
-	__experimentalUseGlobalBehaviors: useGlobalBehaviors,
-	__experimentalBehaviorsPanel: StylesBehaviorsPanel,
 	BorderPanel: StylesBorderPanel,
 	ColorPanel: StylesColorPanel,
 	TypographyPanel: StylesTypographyPanel,
 	DimensionsPanel: StylesDimensionsPanel,
 	EffectsPanel: StylesEffectsPanel,
 	FiltersPanel: StylesFiltersPanel,
+	ImageSettingsPanel,
 	AdvancedPanel: StylesAdvancedPanel,
 } = unlock( blockEditorPrivateApis );
 
@@ -92,11 +91,9 @@ function ScreenBlock( { name, variation } ) {
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
 		shouldDecodeEncode: false,
 	} );
+	const [ userSettings ] = useGlobalSetting( '', name, 'user' );
 	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
-	const { inheritedBehaviors, setBehavior } = useGlobalBehaviors( name );
-	const { behavior } = useGlobalBehaviors( name, 'user' );
-
 	const blockType = getBlockType( name );
 
 	// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
@@ -115,11 +112,15 @@ function ScreenBlock( { name, variation } ) {
 	const blockVariations = useBlockVariations( name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
-	const hasBehaviorsPanel = useHasBehaviorsPanel( rawSettings, name );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasEffectsPanel = useHasEffectsPanel( settings );
 	const hasFiltersPanel = useHasFiltersPanel( settings );
+	const hasImageSettingsPanel = useHasImageSettingsPanel(
+		name,
+		userSettings,
+		settings
+	);
 	const hasVariationsPanel = !! blockVariations?.length && ! variation;
 	const { canEditCSS } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
@@ -150,21 +151,42 @@ function ScreenBlock( { name, variation } ) {
 	const styleWithLayout = useMemo( () => {
 		return {
 			...style,
-			layout: settings.layout,
+			layout: userSettings.layout,
 		};
-	}, [ style, settings.layout ] );
+	}, [ style, userSettings.layout ] );
 	const onChangeDimensions = ( newStyle ) => {
 		const updatedStyle = { ...newStyle };
 		delete updatedStyle.layout;
 		setStyle( updatedStyle );
 
-		if ( newStyle.layout !== settings.layout ) {
+		if ( newStyle.layout !== userSettings.layout ) {
 			setSettings( {
-				...rawSettings,
+				...userSettings,
 				layout: newStyle.layout,
 			} );
 		}
 	};
+	const onChangeLightbox = ( newSetting ) => {
+		// If the newSetting is undefined, this means that the user has deselected
+		// (reset) the lightbox setting.
+		if ( newSetting === undefined ) {
+			setSettings( {
+				...rawSettings,
+				lightbox: undefined,
+			} );
+
+			// Otherwise, we simply set the lightbox setting to the new value but
+			// taking care of not overriding the other lightbox settings.
+		} else {
+			setSettings( {
+				...rawSettings,
+				lightbox: {
+					...rawSettings.lightbox,
+					...newSetting,
+				},
+			} );
+		}
+	};
 	const onChangeBorders = ( newStyle ) => {
 		if ( ! newStyle?.border ) {
 			setStyle( newStyle );
@@ -272,13 +294,21 @@ function ScreenBlock( { name, variation } ) {
 					includeLayoutControls
 				/>
 			) }
+			{ hasImageSettingsPanel && (
+				<ImageSettingsPanel
+					onChange={ onChangeLightbox }
+					value={ userSettings }
+					inheritedValue={ settings }
+				/>
+			) }
+
 			{ canEditCSS && (
 				<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>
 					<p>
 						{ sprintf(
 							// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
 							__(
-								'Add your own CSS to customize the appearance of the %s block.'
+								'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'
 							),
 							blockType?.title
 						) }
@@ -288,14 +318,6 @@ function ScreenBlock( { name, variation } ) {
 						onChange={ setStyle }
 						inheritedValue={ inheritedStyle }
 					/>
-					{ hasBehaviorsPanel && (
-						<StylesBehaviorsPanel
-							value={ behavior }
-							onChange={ setBehavior }
-							behaviors={ inheritedBehaviors }
-							blockName={ name }
-						></StylesBehaviorsPanel>
-					) }
 				</PanelBody>
 			) }
 		</>

package/src/components/global-styles/screen-revisions/index.js

@@ -71,7 +71,6 @@ function ScreenRevisions() {
 		setUserConfig( () => ( {
 			styles: revision?.styles,
 			settings: revision?.settings,
-			behaviors: revision?.behaviors,
 		} ) );
 		setIsLoadingRevisionWithUnsavedChanges( false );
 		onCloseRevisions();
@@ -81,7 +80,6 @@ function ScreenRevisions() {
 		setGlobalStylesRevision( {
 			styles: revision?.styles || {},
 			settings: revision?.settings || {},
-			behaviors: revision?.behaviors || {},
 			id: revision?.id,
 		} );
 		setSelectedRevisionId( revision?.id );

package/src/components/global-styles/screen-revisions/use-global-styles-revisions.js

@@ -89,7 +89,6 @@ export default function useGlobalStylesRevisions() {
 					id: 'unsaved',
 					styles: userConfig?.styles,
 					settings: userConfig?.settings,
-					behaviors: userConfig?.behaviors,
 					author: {
 						name: currentUser?.name,
 						avatar_urls: currentUser?.avatar_urls,

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

@@ -1,79 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-	FlexItem,
-} from '@wordpress/components';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import TypographyElements from './typogrphy-elements';
+import FontFamilies from './font-families';
 import ScreenHeader from './header';
-import { NavigationButtonAsItem } from './navigation-button';
-import Subtitle from './subtitle';
-import { unlock } from '../../lock-unlock';
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function Item( { parentMenu, element, label } ) {
-	const prefix =
-		element === 'text' || ! element ? '' : `elements.${ element }.`;
-	const extraStyles =
-		element === 'link'
-			? {
-					textDecoration: 'underline',
-			  }
-			: {};
-	const [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );
-	const [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );
-	const [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );
-	const [ letterSpacing ] = useGlobalStyle(
-		prefix + 'typography.letterSpacing'
-	);
-	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
-	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
-	const [ color ] = useGlobalStyle( prefix + 'color.text' );
-
-	const navigationButtonLabel = sprintf(
-		// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
-		__( 'Typography %s styles' ),
-		label
-	);
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + '/typography/' + element }
-			aria-label={ navigationButtonLabel }
-		>
-			<HStack justify="flex-start">
-				<FlexItem
-					className="edit-site-global-styles-screen-typography__indicator"
-					style={ {
-						fontFamily: fontFamily ?? 'serif',
-						background: gradientValue ?? backgroundColor,
-						color,
-						fontStyle,
-						fontWeight,
-						letterSpacing,
-						...extraStyles,
-					} }
-				>
-					{ __( 'Aa' ) }
-				</FlexItem>
-				<FlexItem>{ label }</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
 
 function ScreenTypography() {
-	const parentMenu = '';
-
 	return (
 		<>
 			<ScreenHeader
@@ -83,35 +21,9 @@ function ScreenTypography() {
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-typography">
-				<VStack spacing={ 3 }>
-					<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
-					<ItemGroup isBordered isSeparated>
-						<Item
-							parentMenu={ parentMenu }
-							element="text"
-							label={ __( 'Text' ) }
-						/>
-						<Item
-							parentMenu={ parentMenu }
-							element="link"
-							label={ __( 'Links' ) }
-						/>
-						<Item
-							parentMenu={ parentMenu }
-							element="heading"
-							label={ __( 'Headings' ) }
-						/>
-						<Item
-							parentMenu={ parentMenu }
-							element="caption"
-							label={ __( 'Captions' ) }
-						/>
-						<Item
-							parentMenu={ parentMenu }
-							element="button"
-							label={ __( 'Buttons' ) }
-						/>
-					</ItemGroup>
+				<VStack spacing={ 6 }>
+					{ window.__experimentalFontLibrary && <FontFamilies /> }
+					<TypographyElements />
 				</VStack>
 			</div>
 		</>

package/src/components/global-styles/style-variations-container.js

@@ -113,13 +113,11 @@ export default function StyleVariationsContainer() {
 				title: __( 'Default' ),
 				settings: {},
 				styles: {},
-				behaviors: {},
 			},
 			...( variations ?? [] ).map( ( variation ) => ( {
 				...variation,
 				settings: variation.settings ?? {},
 				styles: variation.styles ?? {},
-				behaviors: variation.behaviors ?? {},
 			} ) ),
 		];
 	}, [ variations ] );