@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

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

@@ -0,0 +1,161 @@
+/**
+ * Internal dependencies
+ */
+import { getFamilyPreviewStyle, formatFontFamily } from '../preview-styles';
+
+describe( 'getFamilyPreviewStyle', () => {
+	it( 'should return default fontStyle and fontWeight if fontFace is not provided', () => {
+		const family = { fontFamily: 'Rosario' };
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontWeight: '400',
+			fontStyle: 'normal',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return fontStyle as "normal" if fontFace contains "normal" style', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'normal', fontWeight: '600' },
+			],
+		};
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '600',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return fontStyle as "itaic" if fontFace does not contain "normal" style', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'italic', fontWeight: '600' },
+			],
+		};
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'italic',
+			fontWeight: '500',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return fontWeight as string', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'normal', fontWeight: '700' },
+			],
+		};
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '700',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return fontWeight as "400" if fontFace contains "normal" style with "400" weight', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'normal', fontWeight: '400' },
+			],
+		};
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '400',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return the fontWeight of the nearest "normal" style if no "400" weight is found', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'normal', fontWeight: '800' },
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'normal', fontWeight: '600' },
+			],
+		};
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '600',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return 400 or the the nearest "normal" style if it using a variable weight font', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'normal', fontWeight: '100' },
+				{ fontStyle: 'normal', fontWeight: '200 900' },
+				{ fontStyle: 'italic', fontWeight: '200 900' },
+			],
+		};
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '400',
+		};
+		expect( result ).toEqual( expected );
+	} );
+} );
+
+describe( 'formatFontFamily', () => {
+	it( 'should transform "Baloo 2, system-ui" correctly', () => {
+		expect( formatFontFamily( 'Baloo 2, system-ui' ) ).toBe(
+			"'Baloo 2', system-ui"
+		);
+	} );
+
+	it( 'should ignore extra spaces', () => {
+		expect( formatFontFamily( '  Baloo 2   , system-ui' ) ).toBe(
+			"'Baloo 2', system-ui"
+		);
+	} );
+
+	it( 'should keep quoted strings unchanged', () => {
+		expect(
+			formatFontFamily(
+				"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
+			)
+		).toBe(
+			"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
+		);
+	} );
+
+	it( 'should wrap single font name with spaces in quotes', () => {
+		expect( formatFontFamily( 'Baloo 2' ) ).toBe( "'Baloo 2'" );
+	} );
+
+	it( 'should wrap multiple font names with spaces in quotes', () => {
+		expect( formatFontFamily( 'Baloo Bhai 2, Baloo 2' ) ).toBe(
+			"'Baloo Bhai 2', 'Baloo 2'"
+		);
+	} );
+
+	it( 'should wrap only those font names with spaces which are not already quoted', () => {
+		expect( formatFontFamily( 'Baloo Bhai 2, Arial' ) ).toBe(
+			"'Baloo Bhai 2', Arial"
+		);
+	} );
+} );

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/sort-font-faces.js

@@ -0,0 +1,74 @@
+/**
+ * Internal dependencies
+ */
+import { sortFontFaces } from '../sort-font-faces';
+
+describe( 'sortFontFaces', () => {
+	it( 'should prioritize "normal" fontStyle and then sort by numeric fontWeight values', () => {
+		const input = [
+			{ fontStyle: 'normal', fontWeight: '500' },
+			{ fontStyle: 'normal', fontWeight: '400' },
+		];
+		const expected = [
+			{ fontStyle: 'normal', fontWeight: '400' },
+			{ fontStyle: 'normal', fontWeight: '500' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+
+	it( 'should correctly sort named fontWeight values within the same fontStyle', () => {
+		const input = [
+			{ fontStyle: 'italic', fontWeight: 'bold' },
+			{ fontStyle: 'italic', fontWeight: 'normal' },
+		];
+		const expected = [
+			{ fontStyle: 'italic', fontWeight: 'normal' },
+			{ fontStyle: 'italic', fontWeight: 'bold' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+
+	it( 'should prioritize fontStyle "normal" over other styles', () => {
+		const input = [
+			{ fontStyle: 'italic', fontWeight: '400' },
+			{ fontStyle: 'normal', fontWeight: '500' },
+		];
+		const expected = [
+			{ fontStyle: 'normal', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: '400' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+
+	it( 'should sort other fontStyles alphabetically after "normal"', () => {
+		const input = [
+			{ fontStyle: 'oblique', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: '500' },
+		];
+		const expected = [
+			{ fontStyle: 'italic', fontWeight: '500' },
+			{ fontStyle: 'oblique', fontWeight: '500' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+
+	it( 'should correctly handle multiple test cases', () => {
+		const input = [
+			{ fontStyle: 'oblique', fontWeight: '300' },
+			{ fontStyle: 'normal', fontWeight: '400' },
+			{ fontStyle: 'italic', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: 'bold' },
+			{ fontStyle: 'italic', fontWeight: '600 900' },
+			{ fontStyle: 'normal', fontWeight: '500' },
+		];
+		const expected = [
+			{ fontStyle: 'normal', fontWeight: '400' },
+			{ fontStyle: 'normal', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: '600 900' },
+			{ fontStyle: 'italic', fontWeight: 'bold' },
+			{ fontStyle: 'oblique', fontWeight: '300' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+} );

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>
 			) }
 		</>