@wordpress/block-editor 12.11.1 → 12.12.2-next.f8d8eceb.0

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 {
@@ -279,6 +324,8 @@ export function useBlockSettings( name, parentLayout ) {
 		isBackgroundEnabled,
 		isLinkEnabled,
 		isTextEnabled,
+		isHeadingEnabled,
+		isButtonEnabled,
 	] );
 
 	return useSettingsForBlockElement( rawSettings, name );

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/layouts/grid.js

@@ -27,6 +27,28 @@ const RANGE_CONTROL_MAX_VALUES = {
 	vh: 100,
 	em: 38,
 	rem: 38,
+	svw: 100,
+	lvw: 100,
+	dvw: 100,
+	svh: 100,
+	lvh: 100,
+	dvh: 100,
+	vi: 100,
+	svi: 100,
+	lvi: 100,
+	dvi: 100,
+	vb: 100,
+	svb: 100,
+	lvb: 100,
+	dvb: 100,
+	vmin: 100,
+	svmin: 100,
+	lvmin: 100,
+	dvmin: 100,
+	vmax: 100,
+	svmax: 100,
+	lvmax: 100,
+	dvmax: 100,
 };
 
 export default {
@@ -131,10 +153,36 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 			// Convert to pixel value assuming a root size of 16px.
 			newValue = Math.round( quantity * 16 ) + newUnit;
 		} else if (
-			[ 'vh', 'vw', '%' ].includes( newUnit ) &&
+			[
+				'vh',
+				'vw',
+				'%',
+				'svw',
+				'lvw',
+				'dvw',
+				'svh',
+				'lvh',
+				'dvh',
+				'vi',
+				'svi',
+				'lvi',
+				'dvi',
+				'vb',
+				'svb',
+				'lvb',
+				'dvb',
+				'vmin',
+				'svmin',
+				'lvmin',
+				'dvmin',
+				'vmax',
+				'svmax',
+				'lvmax',
+				'dvmax',
+			].includes( newUnit ) &&
 			quantity > 100
 		) {
-			// When converting to `vh`, `vw`, or `%` units, cap the new value at 100.
+			// When converting to `%` or viewport-relative units, cap the new value at 100.
 			newValue = 100 + newUnit;
 		}
 

package/src/layouts/utils.js

@@ -90,7 +90,8 @@ export function getBlockGapCSS(
 export function getAlignmentsInfo( layout ) {
 	const { contentSize, wideSize, type = 'default' } = layout;
 	const alignmentInfo = {};
-	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
+	const sizeRegex =
+		/^(?!0)\d+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
 	if ( sizeRegex.test( contentSize ) && type === 'constrained' ) {
 		// translators: %s: container size (i.e. 600px etc)
 		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
 		'@wordpress/block-editor'
 	);

package/src/store/actions.js

@@ -13,6 +13,7 @@ import {
 	switchToBlockType,
 	synchronizeBlocksWithTemplate,
 	getBlockSupport,
+	isUnmodifiedDefaultBlock,
 } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -1013,17 +1014,12 @@ export const mergeBlocks =
 
 		if ( ! blockAType ) return;
 
+		const blockB = select.getBlock( clientIdB );
+
 		if (
 			! blockAType.merge &&
-			! getBlockSupport( blockA.name, '__experimentalOnMerge' )
+			getBlockSupport( blockA.name, '__experimentalOnMerge' )
 		) {
-			dispatch.selectBlock( blockA.clientId );
-			return;
-		}
-
-		const blockB = select.getBlock( clientIdB );
-
-		if ( ! blockAType.merge ) {
 			// If there's no merge function defined, attempt merging inner
 			// blocks.
 			const blocksWithTheSameType = switchToBlockType(
@@ -1090,6 +1086,27 @@ export const mergeBlocks =
 			return;
 		}
 
+		if ( isUnmodifiedDefaultBlock( blockA ) ) {
+			dispatch.removeBlock(
+				clientIdA,
+				select.isBlockSelected( clientIdA )
+			);
+			return;
+		}
+
+		if ( isUnmodifiedDefaultBlock( blockB ) ) {
+			dispatch.removeBlock(
+				clientIdB,
+				select.isBlockSelected( clientIdB )
+			);
+			return;
+		}
+
+		if ( ! blockAType.merge ) {
+			dispatch.selectBlock( blockA.clientId );
+			return;
+		}
+
 		const blockBType = getBlockType( blockB.name );
 		const { clientId, attributeKey, offset } = select.getSelectionStart();
 		const selectedBlockType =

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/parse-css-unit-to-px.js

@@ -211,6 +211,26 @@ function convertParsedUnitToPx( parsedUnit, options ) {
 		ex: 7.15625, // X-height of the element's font. Approximate.
 		lh: setOptions.lineHeight,
 	};
+	relativeUnits.svw = relativeUnits.vmin;
+	relativeUnits.lvw = relativeUnits.vmax;
+	relativeUnits.dvw = relativeUnits.vw;
+	relativeUnits.svh = relativeUnits.vmin;
+	relativeUnits.lvh = relativeUnits.vmax;
+	relativeUnits.dvh = relativeUnits.vh;
+	relativeUnits.vi = relativeUnits.vh;
+	relativeUnits.svi = relativeUnits.vmin;
+	relativeUnits.lvi = relativeUnits.vmax;
+	relativeUnits.dvi = relativeUnits.vw;
+	relativeUnits.vb = relativeUnits.vh;
+	relativeUnits.svb = relativeUnits.vmin;
+	relativeUnits.lvb = relativeUnits.vmax;
+	relativeUnits.dvb = relativeUnits.vh;
+	relativeUnits.svmin = relativeUnits.vmin;
+	relativeUnits.lvmin = relativeUnits.vmin;
+	relativeUnits.dvmin = relativeUnits.vmin;
+	relativeUnits.svmax = relativeUnits.vmax;
+	relativeUnits.lvmax = relativeUnits.vmax;
+	relativeUnits.dvmax = relativeUnits.vmax;
 
 	const absoluteUnits = {
 		in: PIXELS_PER_INCH,

package/src/utils/pasting.js

@@ -77,10 +77,7 @@ export function getPasteEventData( { clipboardData } ) {
 
 	const files = getFilesFromDataTransfer( clipboardData );
 
-	if (
-		files.length &&
-		! shouldDismissPastedFiles( files, html, plainText )
-	) {
+	if ( files.length && ! shouldDismissPastedFiles( files, html ) ) {
 		return { files };
 	}
 

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;
+		  }",
+]
+`;

package/src/utils/test/pasting.js

@@ -11,20 +11,19 @@ const mocks = {
 
 describe( 'shouldDismissPastedFiles', () => {
 	it( 'should return false when no HTML is present', () => {
-		expect(
-			shouldDismissPastedFiles( [ mocks.pngImageFile ], '', '' )
-		).toBe( false );
+		expect( shouldDismissPastedFiles( [ mocks.pngImageFile ], '' ) ).toBe(
+			false
+		);
 	} );
 	it( 'should return false when file is not an image', () => {
-		expect(
-			shouldDismissPastedFiles( [ mocks.documentFile ], '', '' )
-		).toBe( false );
+		expect( shouldDismissPastedFiles( [ mocks.documentFile ], '' ) ).toBe(
+			false
+		);
 	} );
 	it( 'should return false when multiple images are present', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile, mocks.jpgImageFile ],
-				'',
 				''
 			)
 		).toBe( false );
@@ -33,8 +32,7 @@ describe( 'shouldDismissPastedFiles', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile ],
-				'<img src="path.png">',
-				''
+				'<img src="path.png">'
 			)
 		).toBe( false );
 	} );
@@ -42,8 +40,7 @@ describe( 'shouldDismissPastedFiles', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile ],
-				'<img src="1.png"><br><img src="2.png">',
-				''
+				'<img src="1.png"><br><img src="2.png">'
 			)
 		).toBe( true );
 	} );
@@ -56,8 +53,7 @@ describe( 'shouldDismissPastedFiles', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile ],
-				'<img src="https://lh3.googleusercontent.com/ab/SOMESTRING?authuser=0">',
-				'https://lh3.googleusercontent.com/ab/SOMESTRING?authuser=0'
+				'<img src="https://lh3.googleusercontent.com/ab/SOMESTRING?authuser=0">'
 			)
 		).toBe( false );
 	} );
@@ -66,8 +62,7 @@ describe( 'shouldDismissPastedFiles', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile ],
-				'<figure><img src="blob:..."></figure>',
-				''
+				'<figure><img src="blob:..."></figure>'
 			)
 		).toBe( false );
 	} );
@@ -76,8 +71,7 @@ describe( 'shouldDismissPastedFiles', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile ],
-				'<meta charset="UTF-8"><table>Some table text</table>',
-				'Some table text'
+				'<meta charset="UTF-8"><table>Some table text</table>'
 			)
 		).toBe( true );
 	} );
@@ -86,8 +80,7 @@ describe( 'shouldDismissPastedFiles', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile ],
-				'<p>A</p><img src="file:////.../clip_image001.png" alt="..."><p>B</p>',
-				'A\nB'
+				'<p>A</p><img src="file:////.../clip_image001.png" alt="..."><p>B</p>'
 			)
 		).toBe( true );
 	} );