@wordpress/block-editor 12.12.0 → 12.13.0

package/src/hooks/background.js

@@ -29,7 +29,7 @@ import { getFilename } from '@wordpress/url';
  */
 import InspectorControls from '../components/inspector-controls';
 import MediaReplaceFlow from '../components/media-replace-flow';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 import { cleanEmptyObject } from './utils';
 import { store as blockEditorStore } from '../store';
 
@@ -281,19 +281,17 @@ function BackgroundImagePanelItem( props ) {
 }
 
 export function BackgroundImagePanel( props ) {
-	const isBackgroundImageSupported =
-		useSetting( 'background.backgroundImage' ) &&
-		hasBackgroundSupport( props.name, 'backgroundImage' );
-
-	if ( ! isBackgroundImageSupported ) {
+	const [ backgroundImage ] = useSettings( 'background.backgroundImage' );
+	if (
+		! backgroundImage ||
+		! hasBackgroundSupport( props.name, 'backgroundImage' )
+	) {
 		return null;
 	}
 
 	return (
 		<InspectorControls group="background">
-			{ isBackgroundImageSupported && (
-				<BackgroundImagePanelItem { ...props } />
-			) }
+			<BackgroundImagePanelItem { ...props } />
 		</InspectorControls>
 	);
 }

package/src/hooks/color.js

@@ -25,7 +25,7 @@ import {
 	shouldSkipSerialization,
 	useBlockSettings,
 } from './utils';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
 import {
 	useHasColorPanel,
@@ -368,9 +368,12 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
 		const { backgroundColor, textColor } = attributes;
-		const userPalette = useSetting( 'color.palette.custom' );
-		const themePalette = useSetting( 'color.palette.theme' );
-		const defaultPalette = useSetting( 'color.palette.default' );
+		const [ userPalette, themePalette, defaultPalette ] = useSettings(
+			'color.palette.custom',
+			'color.palette.theme',
+			'color.palette.default'
+		);
+
 		const colors = useMemo(
 			() => [
 				...( userPalette || [] ),

package/src/hooks/duotone.js

@@ -25,7 +25,7 @@ import {
 	BlockControls,
 	InspectorControls,
 	__experimentalDuotoneControl as DuotoneControl,
-	useSetting,
+	useSettings,
 } from '../components';
 import {
 	getDuotoneFilter,
@@ -56,20 +56,20 @@ const isSafari =
 extend( [ namesPlugin ] );
 
 function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
-	const disableDefault = ! useSetting( defaultSetting );
-	const userPresets =
-		useSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;
-	const themePresets =
-		useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
-	const defaultPresets =
-		useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;
+	const [ enableDefault, userPresets, themePresets, defaultPresets ] =
+		useSettings(
+			defaultSetting,
+			`${ presetSetting }.custom`,
+			`${ presetSetting }.theme`,
+			`${ presetSetting }.default`
+		);
 	return useMemo(
 		() => [
-			...userPresets,
-			...themePresets,
-			...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
+			...( userPresets || EMPTY_ARRAY ),
+			...( themePresets || EMPTY_ARRAY ),
+			...( ( enableDefault && defaultPresets ) || EMPTY_ARRAY ),
 		],
-		[ disableDefault, userPresets, themePresets, defaultPresets ]
+		[ enableDefault, userPresets, themePresets, defaultPresets ]
 	);
 }
 
@@ -102,6 +102,7 @@ function DuotonePanel( { attributes, setAttributes, name } ) {
 	const style = attributes?.style;
 	const duotoneStyle = style?.color?.duotone;
 	const settings = useBlockSettings( name );
+	const blockEditingMode = useBlockEditingMode();
 
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
@@ -111,15 +112,23 @@ function DuotonePanel( { attributes, setAttributes, name } ) {
 		presetSetting: 'color.palette',
 		defaultSetting: 'color.defaultPalette',
 	} );
-	const disableCustomColors = ! useSetting( 'color.custom' );
+	const [ enableCustomColors, enableCustomDuotone ] = useSettings(
+		'color.custom',
+		'color.customDuotone'
+	);
+	const disableCustomColors = ! enableCustomColors;
 	const disableCustomDuotone =
-		! useSetting( 'color.customDuotone' ) ||
+		! enableCustomDuotone ||
 		( colorPalette?.length === 0 && disableCustomColors );
 
 	if ( duotonePalette?.length === 0 && disableCustomDuotone ) {
 		return null;
 	}
 
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
 	const duotonePresetOrColors = ! Array.isArray( duotoneStyle )
 		? getColorsFromDuotonePreset( duotoneStyle, duotonePalette )
 		: duotoneStyle;
@@ -215,17 +224,13 @@ const withDuotoneControls = createHigherOrderComponent(
 			'filter.duotone'
 		);
 
-		const blockEditingMode = useBlockEditingMode();
-
 		// CAUTION: code added before this line will be executed
 		// for all blocks, not just those that support duotone. Code added
 		// above this line should be carefully evaluated for its impact on
 		// performance.
 		return (
 			<>
-				{ hasDuotoneSupport && blockEditingMode === 'default' && (
-					<DuotonePanel { ...props } />
-				) }
+				{ hasDuotoneSupport && <DuotonePanel { ...props } /> }
 				<BlockEdit { ...props } />
 			</>
 		);

package/src/hooks/font-size.js

@@ -22,7 +22,7 @@ import {
 	transformStyles,
 	shouldSkipSerialization,
 } from './utils';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 import { store as blockEditorStore } from '../store';
 import {
 	getTypographyFontSizeValue,
@@ -122,7 +122,7 @@ export function FontSizeEdit( props ) {
 		attributes: { fontSize, style },
 		setAttributes,
 	} = props;
-	const fontSizes = useSetting( 'typography.fontSizes' );
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 
 	const onChange = ( value ) => {
 		const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;
@@ -167,7 +167,7 @@ export function FontSizeEdit( props ) {
  * @return {boolean} Whether setting is disabled.
  */
 export function useIsFontSizeDisabled( { name: blockName } = {} ) {
-	const fontSizes = useSetting( 'typography.fontSizes' );
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 	const hasFontSizes = !! fontSizes?.length;
 
 	return (
@@ -186,7 +186,7 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) {
  */
 const withFontSizeInlineStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const fontSizes = useSetting( 'typography.fontSizes' );
+		const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 		const {
 			name: blockName,
 			attributes: { fontSize, style },

package/src/hooks/layout.js

@@ -24,7 +24,7 @@ import { useEffect } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../store';
 import { InspectorControls } from '../components';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 import { getLayoutType, getLayoutTypes } from '../layouts';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
@@ -123,7 +123,7 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 			? { ...layout, type: 'constrained' }
 			: layout || {};
 	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
-	const blockGapSupport = useSetting( 'spacing.blockGap' );
+	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
 	const css = fullLayoutType?.getLayoutStyle?.( {
 		blockName,
@@ -142,7 +142,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	} = settings;
 
 	const { layout } = attributes;
-	const defaultThemeLayout = useSetting( 'layout' );
+	const [ defaultThemeLayout ] = useSettings( 'layout' );
 	const { themeSupportsLayout } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return {
@@ -151,6 +151,10 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	}, [] );
 	const blockEditingMode = useBlockEditingMode();
 
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
 	const layoutBlockSupport = getBlockSupport(
 		blockName,
 		layoutBlockSupportKey,
@@ -270,7 +274,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			{ ! inherit && blockEditingMode === 'default' && layoutType && (
+			{ ! inherit && layoutType && (
 				<layoutType.toolBarControls
 					layout={ usedLayout }
 					onChange={ onChangeLayout }
@@ -331,14 +335,10 @@ export function addAttribute( settings ) {
  */
 export const withInspectorControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const { name: blockName } = props;
-		const supportLayout = hasLayoutBlockSupport( blockName );
+		const supportLayout = hasLayoutBlockSupport( props.name );
 
-		const blockEditingMode = useBlockEditingMode();
 		return [
-			supportLayout && blockEditingMode === 'default' && (
-				<LayoutPanel key="layout" { ...props } />
-			),
+			supportLayout && <LayoutPanel key="layout" { ...props } />,
 			<BlockEdit key="edit" { ...props } />,
 		];
 	},
@@ -375,7 +375,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 			: null;
 		// Higher specificity to override defaults from theme.json.
 		const selector = `.wp-container-${ id }.wp-container-${ id }`;
-		const blockGapSupport = useSetting( 'spacing.blockGap' );
+		const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
 		const hasBlockGapSupport = blockGapSupport !== null;
 
 		// Get CSS string for the current layout type.

package/src/hooks/line-height.js

@@ -8,7 +8,7 @@ import { hasBlockSupport } from '@wordpress/blocks';
  */
 import LineHeightControl from '../components/line-height-control';
 import { cleanEmptyObject } from './utils';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 
 export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
 
@@ -54,9 +54,9 @@ export function LineHeightEdit( props ) {
  * @return {boolean} Whether setting is disabled.
  */
 export function useIsLineHeightDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'typography.lineHeight' );
+	const [ isEnabled ] = useSettings( 'typography.lineHeight' );
 
 	return (
-		! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled
+		! isEnabled || ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY )
 	);
 }

package/src/hooks/position.js

@@ -26,7 +26,7 @@ import { addFilter } from '@wordpress/hooks';
  * Internal dependencies
  */
 import BlockList from '../components/block-list';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
 import useBlockDisplayInformation from '../components/use-block-display-information';
 import { cleanEmptyObject } from './utils';
@@ -197,8 +197,10 @@ export function resetPosition( { attributes = {}, setAttributes } ) {
  * @return {boolean} Whether padding setting is disabled.
  */
 export function useIsPositionDisabled( { name: blockName } = {} ) {
-	const allowFixed = useSetting( 'position.fixed' );
-	const allowSticky = useSetting( 'position.sticky' );
+	const [ allowFixed, allowSticky ] = useSettings(
+		'position.fixed',
+		'position.sticky'
+	);
 	const isDisabled = ! allowFixed && ! allowSticky;
 
 	return ! hasPositionSupport( blockName ) || isDisabled;

package/src/hooks/use-color-props.js

@@ -20,7 +20,7 @@ import {
 	__experimentalGetGradientClass,
 	getGradientValueBySlug,
 } from '../components/gradients';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 
 // The code in this file has largely been lifted from the color block support
 // hook.
@@ -73,8 +73,6 @@ export function getColorClassesAndStyles( attributes ) {
 	};
 }
 
-const EMPTY_OBJECT = {};
-
 /**
  * Determines the color related props for a block derived from its color block
  * support attributes.
@@ -89,13 +87,22 @@ const EMPTY_OBJECT = {};
 export function useColorProps( attributes ) {
 	const { backgroundColor, textColor, gradient } = attributes;
 
-	// Some color settings have a special handling for deprecated flags in `useSetting`,
-	// so we can't unwrap them by doing const { ... } = useSetting('color')
-	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-	const userPalette = useSetting( 'color.palette.custom' );
-	const themePalette = useSetting( 'color.palette.theme' );
-	const defaultPalette = useSetting( 'color.palette.default' );
-	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+	const [
+		userPalette,
+		themePalette,
+		defaultPalette,
+		userGradients,
+		themeGradients,
+		defaultGradients,
+	] = useSettings(
+		'color.palette.custom',
+		'color.palette.theme',
+		'color.palette.default',
+		'color.gradients.custom',
+		'color.gradients.theme',
+		'color.gradients.default'
+	);
+
 	const colors = useMemo(
 		() => [
 			...( userPalette || [] ),
@@ -106,11 +113,11 @@ export function useColorProps( attributes ) {
 	);
 	const gradients = useMemo(
 		() => [
-			...( gradientsPerOrigin?.custom || [] ),
-			...( gradientsPerOrigin?.theme || [] ),
-			...( gradientsPerOrigin?.default || [] ),
+			...( userGradients || [] ),
+			...( themeGradients || [] ),
+			...( defaultGradients || [] ),
 		],
-		[ gradientsPerOrigin ]
+		[ userGradients, themeGradients, defaultGradients ]
 	);
 
 	const colorProps = getColorClassesAndStyles( attributes );

package/src/hooks/utils.js

@@ -7,7 +7,7 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useSetting } from '../components';
+import { useSettings } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
 import { getValueFromObjectPath, setImmutably } from '../utils/object';
 
@@ -126,48 +126,93 @@ export function shouldSkipSerialization( blockType, featureSet, feature ) {
  * @return {Object} Settings object.
  */
 export function useBlockSettings( name, parentLayout ) {
-	const fontFamilies = useSetting( 'typography.fontFamilies' );
-	const fontSizes = useSetting( 'typography.fontSizes' );
-	const customFontSize = useSetting( 'typography.customFontSize' );
-	const fontStyle = useSetting( 'typography.fontStyle' );
-	const fontWeight = useSetting( 'typography.fontWeight' );
-	const lineHeight = useSetting( 'typography.lineHeight' );
-	const textColumns = useSetting( 'typography.textColumns' );
-	const textDecoration = useSetting( 'typography.textDecoration' );
-	const writingMode = useSetting( 'typography.writingMode' );
-	const textTransform = useSetting( 'typography.textTransform' );
-	const letterSpacing = useSetting( 'typography.letterSpacing' );
-	const padding = useSetting( 'spacing.padding' );
-	const margin = useSetting( 'spacing.margin' );
-	const blockGap = useSetting( 'spacing.blockGap' );
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
-	const units = useSetting( 'spacing.units' );
-	const minHeight = useSetting( 'dimensions.minHeight' );
-	const layout = useSetting( 'layout' );
-	const borderColor = useSetting( 'border.color' );
-	const borderRadius = useSetting( 'border.radius' );
-	const borderStyle = useSetting( 'border.style' );
-	const borderWidth = useSetting( 'border.width' );
-	const customColorsEnabled = useSetting( 'color.custom' );
-	const customColors = useSetting( 'color.palette.custom' );
-	const customDuotone = useSetting( 'color.customDuotone' );
-	const themeColors = useSetting( 'color.palette.theme' );
-	const defaultColors = useSetting( 'color.palette.default' );
-	const defaultPalette = useSetting( 'color.defaultPalette' );
-	const defaultDuotone = useSetting( 'color.defaultDuotone' );
-	const userDuotonePalette = useSetting( 'color.duotone.custom' );
-	const themeDuotonePalette = useSetting( 'color.duotone.theme' );
-	const defaultDuotonePalette = useSetting( 'color.duotone.default' );
-	const userGradientPalette = useSetting( 'color.gradients.custom' );
-	const themeGradientPalette = useSetting( 'color.gradients.theme' );
-	const defaultGradientPalette = useSetting( 'color.gradients.default' );
-	const defaultGradients = useSetting( 'color.defaultGradients' );
-	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
-	const isBackgroundEnabled = useSetting( 'color.background' );
-	const isLinkEnabled = useSetting( 'color.link' );
-	const isTextEnabled = useSetting( 'color.text' );
-	const isHeadingEnabled = useSetting( 'color.heading' );
-	const isButtonEnabled = useSetting( 'color.button' );
+	const [
+		fontFamilies,
+		fontSizes,
+		customFontSize,
+		fontStyle,
+		fontWeight,
+		lineHeight,
+		textColumns,
+		textDecoration,
+		writingMode,
+		textTransform,
+		letterSpacing,
+		padding,
+		margin,
+		blockGap,
+		spacingSizes,
+		units,
+		minHeight,
+		layout,
+		borderColor,
+		borderRadius,
+		borderStyle,
+		borderWidth,
+		customColorsEnabled,
+		customColors,
+		customDuotone,
+		themeColors,
+		defaultColors,
+		defaultPalette,
+		defaultDuotone,
+		userDuotonePalette,
+		themeDuotonePalette,
+		defaultDuotonePalette,
+		userGradientPalette,
+		themeGradientPalette,
+		defaultGradientPalette,
+		defaultGradients,
+		areCustomGradientsEnabled,
+		isBackgroundEnabled,
+		isLinkEnabled,
+		isTextEnabled,
+		isHeadingEnabled,
+		isButtonEnabled,
+	] = useSettings(
+		'typography.fontFamilies',
+		'typography.fontSizes',
+		'typography.customFontSize',
+		'typography.fontStyle',
+		'typography.fontWeight',
+		'typography.lineHeight',
+		'typography.textColumns',
+		'typography.textDecoration',
+		'typography.writingMode',
+		'typography.textTransform',
+		'typography.letterSpacing',
+		'spacing.padding',
+		'spacing.margin',
+		'spacing.blockGap',
+		'spacing.spacingSizes',
+		'spacing.units',
+		'dimensions.minHeight',
+		'layout',
+		'border.color',
+		'border.radius',
+		'border.style',
+		'border.width',
+		'color.custom',
+		'color.palette.custom',
+		'color.customDuotone',
+		'color.palette.theme',
+		'color.palette.default',
+		'color.defaultPalette',
+		'color.defaultDuotone',
+		'color.duotone.custom',
+		'color.duotone.theme',
+		'color.duotone.default',
+		'color.gradients.custom',
+		'color.gradients.theme',
+		'color.gradients.default',
+		'color.defaultGradients',
+		'color.customGradient',
+		'color.background',
+		'color.link',
+		'color.text',
+		'color.heading',
+		'color.button'
+	);
 
 	const rawSettings = useMemo( () => {
 		return {

package/src/layouts/constrained.js

@@ -21,7 +21,7 @@ import { getCSSRules } from '@wordpress/style-engine';
 /**
  * Internal dependencies
  */
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
@@ -60,14 +60,9 @@ export default {
 				label: __( 'Justify items right' ),
 			},
 		];
+		const [ availableUnits ] = useSettings( 'spacing.units' );
 		const units = useCustomUnits( {
-			availableUnits: useSetting( 'spacing.units' ) || [
-				'%',
-				'px',
-				'em',
-				'rem',
-				'vw',
-			],
+			availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 		} );
 		return (
 			<>

package/src/utils/object.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { paramCase } from 'change-case';
+import memoize from 'memize';
 
 /**
  * Converts a path to an array of its fragments.
@@ -112,6 +113,8 @@ export function setImmutably( object, path, value ) {
 	return newObject;
 }
 
+const stringToPath = memoize( ( path ) => path.split( '.' ) );
+
 /**
  * Helper util to return a value from a certain path of the object.
  * Path is specified as either:
@@ -125,7 +128,7 @@ export function setImmutably( object, path, value ) {
  * @return {*} Value of the object property at the specified path.
  */
 export const getValueFromObjectPath = ( object, path, defaultValue ) => {
-	const normalizedPath = Array.isArray( path ) ? path : path.split( '.' );
+	const normalizedPath = Array.isArray( path ) ? path : stringToPath( path );
 	let value = object;
 	normalizedPath.forEach( ( fieldName ) => {
 		value = value?.[ fieldName ];

package/src/utils/test/__snapshots__/transform-styles.js.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`transformStyles URL rewrite should not replace absolute paths 1`] = `
+[
+  "h1 { background: url(/images/test.png); }",
+]
+`;
+
+exports[`transformStyles URL rewrite should not replace remote paths 1`] = `
+[
+  "h1 { background: url(http://wp.org/images/test.png); }",
+]
+`;
+
+exports[`transformStyles URL rewrite should replace complex relative paths 1`] = `
+[
+  "h1 { background: url(http://wp-site.local/themes/gut/images/test.png); }",
+]
+`;
+
+exports[`transformStyles URL rewrite should rewrite relative paths 1`] = `
+[
+  "h1 { background: url(http://wp-site.local/themes/gut/css/images/test.png); }",
+]
+`;
+
+exports[`transformStyles selector wrap should ignore font-face selectors 1`] = `
+[
+  "
+			@font-face {
+				font-family: myFirstFont;
+				src: url(sansation_light.woff);
+			}",
+]
+`;
+
+exports[`transformStyles selector wrap should ignore keyframes 1`] = `
+[
+  "
+			@keyframes edit-post__fade-in-animation {
+				from {
+					opacity: 0;
+				}
+			}",
+]
+`;
+
+exports[`transformStyles selector wrap should ignore selectors 1`] = `
+[
+  ".my-namespace h1, body { color: red; }",
+]
+`;
+
+exports[`transformStyles selector wrap should not double wrap selectors 1`] = `
+[
+  " .my-namespace h1, .my-namespace .red { color: red; }",
+]
+`;
+
+exports[`transformStyles selector wrap should replace :root selectors 1`] = `
+[
+  "
+			.my-namespace {
+				--my-color: #ff0000;
+			}",
+]
+`;
+
+exports[`transformStyles selector wrap should replace root tags 1`] = `
+[
+  ".my-namespace, .my-namespace h1 { color: red; }",
+]
+`;
+
+exports[`transformStyles selector wrap should wrap multiple selectors 1`] = `
+[
+  ".my-namespace h1, .my-namespace h2 { color: red; }",
+]
+`;
+
+exports[`transformStyles selector wrap should wrap regular selectors 1`] = `
+[
+  ".my-namespace h1 { color: red; }",
+]
+`;
+
+exports[`transformStyles selector wrap should wrap selectors inside container queries 1`] = `
+[
+  "
+			@container (width > 400px) {
+				  .my-namespace h1 { color: red; }
+			}",
+]
+`;
+
+exports[`transformStyles should not break with data urls 1`] = `
+[
+  ".wp-block-group {
+			background-image: url("data:image/svg+xml,%3Csvg%3E.b%7Bclip-path:url(test);%7D%3C/svg%3E");
+			color: red !important;
+		  }",
+]
+`;