@wordpress/block-editor 14.0.0 → 14.2.0

package/src/store/utils.js

@@ -1,3 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+import { parse as grammarParse } from '@wordpress/block-serialization-default-parser';
+
 /**
  * Internal dependencies
  */
@@ -7,6 +13,50 @@ import { STORE_NAME } from './constants';
 
 export const withRootClientIdOptionKey = Symbol( 'withRootClientId' );
 
+const parsedPatternCache = new WeakMap();
+const grammarMapCache = new WeakMap();
+
+function parsePattern( pattern ) {
+	const blocks = parse( pattern.content, {
+		__unstableSkipMigrationLogs: true,
+	} );
+	if ( blocks.length === 1 ) {
+		blocks[ 0 ].attributes = {
+			...blocks[ 0 ].attributes,
+			metadata: {
+				...( blocks[ 0 ].attributes.metadata || {} ),
+				categories: pattern.categories,
+				patternName: pattern.name,
+				name: blocks[ 0 ].attributes.metadata?.name || pattern.title,
+			},
+		};
+	}
+	return {
+		...pattern,
+		blocks,
+	};
+}
+
+export function getParsedPattern( pattern ) {
+	let parsedPattern = parsedPatternCache.get( pattern );
+	if ( ! parsedPattern ) {
+		parsedPattern = parsePattern( pattern );
+		parsedPatternCache.set( pattern, parsedPattern );
+	}
+	return parsedPattern;
+}
+
+export function getGrammar( pattern ) {
+	let grammarMap = grammarMapCache.get( pattern );
+	if ( ! grammarMap ) {
+		grammarMap = grammarParse( pattern.content );
+		// Block names are null only at the top level for whitespace.
+		grammarMap = grammarMap.filter( ( block ) => block.blockName !== null );
+		grammarMapCache.set( pattern, grammarMap );
+	}
+	return grammarMap;
+}
+
 export const checkAllowList = ( list, item, defaultResult = null ) => {
 	if ( typeof list === 'boolean' ) {
 		return list;

package/src/style.scss

@@ -40,7 +40,6 @@
 @import "./components/multi-selection-inspector/style.scss";
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
-@import "./components/segmented-text-control/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
 @import "./components/tabbed-sidebar/style.scss";
 @import "./components/tool-selector/style.scss";

package/src/utils/block-bindings.js

@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useRegistry } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { useBlockEditContext } from '../components/block-edit';
+
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
+export function useBlockBindingsUtils() {
+	const { clientId } = useBlockEditContext();
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { getBlockAttributes } = useRegistry().select( blockEditorStore );
+
+	/**
+	 * Updates the value of the bindings connected to block attributes.
+	 * It removes the binding when the new value is `undefined`.
+	 *
+	 * @param {Object} bindings        Bindings including the attributes to update and the new object.
+	 * @param {string} bindings.source The source name to connect to.
+	 * @param {Object} [bindings.args] Object containing the arguments needed by the source.
+	 *
+	 * @example
+	 * ```js
+	 * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+	 *
+	 * const { updateBlockBindings } = useBlockBindingsUtils();
+	 * updateBlockBindings( {
+	 *     url: {
+	 *         source: 'core/post-meta',
+	 *         args: {
+	 *             key: 'url_custom_field',
+	 *         },
+	 * 	   },
+	 *     alt: {
+	 *         source: 'core/post-meta',
+	 *         args: {
+	 *             key: 'text_custom_field',
+	 *         },
+	 * 	   }
+	 * } );
+	 * ```
+	 */
+	const updateBlockBindings = ( bindings ) => {
+		const { metadata: { bindings: currentBindings, ...metadata } = {} } =
+			getBlockAttributes( clientId );
+		const newBindings = { ...currentBindings };
+
+		Object.entries( bindings ).forEach( ( [ attribute, binding ] ) => {
+			if ( ! binding && newBindings[ attribute ] ) {
+				delete newBindings[ attribute ];
+				return;
+			}
+			newBindings[ attribute ] = binding;
+		} );
+
+		const newMetadata = {
+			...metadata,
+			bindings: newBindings,
+		};
+
+		if ( isObjectEmpty( newMetadata.bindings ) ) {
+			delete newMetadata.bindings;
+		}
+
+		updateBlockAttributes( clientId, {
+			metadata: isObjectEmpty( newMetadata ) ? undefined : newMetadata,
+		} );
+	};
+
+	/**
+	 * Removes the bindings property of the `metadata` attribute.
+	 *
+	 * @example
+	 * ```js
+	 * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+	 *
+	 * const { removeAllBlockBindings } = useBlockBindingsUtils();
+	 * removeAllBlockBindings();
+	 * ```
+	 */
+	const removeAllBlockBindings = () => {
+		const { metadata: { bindings, ...metadata } = {} } =
+			getBlockAttributes( clientId );
+		updateBlockAttributes( clientId, {
+			metadata: isObjectEmpty( metadata ) ? undefined : metadata,
+		} );
+	};
+
+	return { updateBlockBindings, removeAllBlockBindings };
+}

package/src/utils/dom.js

@@ -57,3 +57,120 @@ export function getBlockClientId( node ) {
 
 	return blockNode.id.slice( 'block-'.length );
 }
+
+/**
+ * Calculates the union of two rectangles.
+ *
+ * @param {DOMRect} rect1 First rectangle.
+ * @param {DOMRect} rect2 Second rectangle.
+ * @return {DOMRect} Union of the two rectangles.
+ */
+export function rectUnion( rect1, rect2 ) {
+	const left = Math.min( rect1.left, rect2.left );
+	const right = Math.max( rect1.right, rect2.right );
+	const bottom = Math.max( rect1.bottom, rect2.bottom );
+	const top = Math.min( rect1.top, rect2.top );
+
+	return new window.DOMRectReadOnly( left, top, right - left, bottom - top );
+}
+
+/**
+ * Returns whether an element is visible.
+ *
+ * @param {Element} element Element.
+ * @return {boolean} Whether the element is visible.
+ */
+function isElementVisible( element ) {
+	const viewport = element.ownerDocument.defaultView;
+	if ( ! viewport ) {
+		return false;
+	}
+
+	// Check for <VisuallyHidden> component.
+	if ( element.classList.contains( 'components-visually-hidden' ) ) {
+		return false;
+	}
+
+	const bounds = element.getBoundingClientRect();
+	if ( bounds.width === 0 || bounds.height === 0 ) {
+		return false;
+	}
+
+	// Older browsers, e.g. Safari < 17.4 may not support the `checkVisibility` method.
+	if ( element.checkVisibility ) {
+		return element.checkVisibility?.( {
+			opacityProperty: true,
+			contentVisibilityAuto: true,
+			visibilityProperty: true,
+		} );
+	}
+
+	const style = viewport.getComputedStyle( element );
+
+	if (
+		style.display === 'none' ||
+		style.visibility === 'hidden' ||
+		style.opacity === '0'
+	) {
+		return false;
+	}
+
+	return true;
+}
+
+/**
+ * Returns the rect of the element including all visible nested elements.
+ *
+ * Visible nested elements, including elements that overflow the parent, are
+ * taken into account.
+ *
+ * This function is useful for calculating the visible area of a block that
+ * contains nested elements that overflow the block, e.g. the Navigation block,
+ * which can contain overflowing Submenu blocks.
+ *
+ * The returned rect represents the full extent of the element and its visible
+ * children, which may extend beyond the viewport.
+ *
+ * @param {Element} element Element.
+ * @return {DOMRect} Bounding client rect of the element and its visible children.
+ */
+export function getVisibleElementBounds( element ) {
+	const viewport = element.ownerDocument.defaultView;
+	if ( ! viewport ) {
+		return new window.DOMRectReadOnly();
+	}
+
+	let bounds = element.getBoundingClientRect();
+
+	const stack = [ element ];
+	let currentElement;
+
+	while ( ( currentElement = stack.pop() ) ) {
+		for ( const child of currentElement.children ) {
+			if ( isElementVisible( child ) ) {
+				const childBounds = child.getBoundingClientRect();
+				bounds = rectUnion( bounds, childBounds );
+				stack.push( child );
+			}
+		}
+	}
+
+	/*
+	 * Take into account the outer horizontal limits of the container in which
+	 * an element is supposed to be "visible". For example, if an element is
+	 * positioned -10px to the left of the window x value (0), this function
+	 * discounts the negative overhang because it's not visible and therefore
+	 * not to be counted in the visibility calculations. Top and bottom values
+	 * are not accounted for to accommodate vertical scroll.
+	 */
+	const left = Math.max( bounds.left, 0 );
+	const right = Math.min( bounds.right, viewport.innerWidth );
+	bounds = new window.DOMRectReadOnly(
+		left,
+		bounds.top,
+		right - left,
+		bounds.height
+	);
+
+	return bounds;
+}

package/src/utils/get-font-styles-and-weights.js

@@ -79,7 +79,10 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 
 	fontFamilyFaces?.forEach( ( face ) => {
 		// Check for variable font by looking for a space in the font weight value. e.g. "100 900"
-		if ( /\s/.test( face.fontWeight.trim() ) ) {
+		if (
+			'string' === typeof face.fontWeight &&
+			/\s/.test( face.fontWeight.trim() )
+		) {
 			isVariableFont = true;
 
 			// Find font weight start and end values.
@@ -105,11 +108,15 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 		}
 
 		// Format font style and weight values.
-		const fontWeight = formatFontWeight( face.fontWeight );
+		const fontWeight = formatFontWeight(
+			'number' === typeof face.fontWeight
+				? face.fontWeight.toString()
+				: face.fontWeight
+		);
 		const fontStyle = formatFontStyle( face.fontStyle );
 
 		// Create font style and font weight lists without duplicates.
-		if ( fontStyle ) {
+		if ( fontStyle && Object.keys( fontStyle ).length ) {
 			if (
 				! fontStyles.some(
 					( style ) => style.value === fontStyle.value
@@ -118,7 +125,8 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 				fontStyles.push( fontStyle );
 			}
 		}
-		if ( fontWeight ) {
+
+		if ( fontWeight && Object.keys( fontWeight ).length ) {
 			if (
 				! fontWeights.some(
 					( weight ) => weight.value === fontWeight.value

package/src/utils/test/get-font-styles-and-weights.js

@@ -343,6 +343,17 @@ describe( 'getFontStylesAndWeights', () => {
 				fontWeight: '400',
 				src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b52SlTPu5rIkWIZjVKKtYtfxYqZ4RJBFzFfYUjkSDdlqZgy7LYxnL31AHfAAy5.woff2',
 			},
+			{
+				fontFamily: 'Piazzolla',
+				fontStyle: 'normal',
+				fontWeight: 600,
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b52SlTPu5rIkWIZjVKKtYtfxYqZ4RJBFzFfYUjkSDdlqZgy7JxwXL31AHfAAy5.woff2',
+			},
+			{
+				fontFamily: 'Piazzolla',
+				fontStyle: 'normal',
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b52SlTPu5rIkWIZjVKKtYtfxYqZ4RJBFzFfYUjkSDdlqZgy7JxwXL31AHfAAy5.woff2',
+			},
 			{
 				fontFamily: 'Piazzolla',
 				fontStyle: 'normal',
@@ -378,6 +389,10 @@ describe( 'getFontStylesAndWeights', () => {
 					name: 'Regular',
 					value: '400',
 				},
+				{
+					name: 'Semi Bold',
+					value: '600',
+				},
 				{
 					name: 'Black',
 					value: '900',
@@ -396,6 +411,14 @@ describe( 'getFontStylesAndWeights', () => {
 						fontWeight: '400',
 					},
 				},
+				{
+					key: 'normal-600',
+					name: 'Semi Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '600',
+					},
+				},
 				{
 					key: 'normal-900',
 					name: 'Black',
@@ -420,6 +443,14 @@ describe( 'getFontStylesAndWeights', () => {
 						fontWeight: '400',
 					},
 				},
+				{
+					key: 'italic-600',
+					name: 'Semi Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '600',
+					},
+				},
 				{
 					key: 'italic-900',
 					name: 'Black Italic',
@@ -510,4 +541,121 @@ describe( 'getFontStylesAndWeights', () => {
 			isVariableFont: false,
 		} );
 	} );
+
+	it( 'should return available styles and weights for a font without fontWeight', () => {
+		const fontFamilyFaces = [
+			{
+				fontFamily: 'AR One Sans',
+				fontStyle: 'normal',
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/AROneSans-VariableFont_ARRRwght.ttf',
+			},
+		];
+		expect( getFontStylesAndWeights( fontFamilyFaces ) ).toEqual( {
+			fontStyles: [
+				{
+					name: 'Regular',
+					value: 'normal',
+				},
+				{
+					name: 'Italic',
+					value: 'italic',
+				},
+			],
+			fontWeights: [
+				{
+					name: 'Bold',
+					value: '700',
+				},
+			],
+			combinedStyleAndWeightOptions: [
+				{
+					key: 'normal-700',
+					name: 'Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '700',
+					},
+				},
+				{
+					key: 'italic-700',
+					name: 'Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '700',
+					},
+				},
+			],
+			isSystemFont: false,
+			isVariableFont: false,
+		} );
+	} );
+
+	it( 'should return available styles and weights for a font with numeric fontWeight', () => {
+		const fontFamilyFaces = [
+			{
+				fontFamily: 'AR One Sans',
+				fontStyle: 'normal',
+				fontWeight: 400,
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/AROneSans-VariableFont_ARRRwght.ttf',
+			},
+		];
+		expect( getFontStylesAndWeights( fontFamilyFaces ) ).toEqual( {
+			fontStyles: [
+				{
+					name: 'Regular',
+					value: 'normal',
+				},
+				{
+					name: 'Italic',
+					value: 'italic',
+				},
+			],
+			fontWeights: [
+				{
+					name: 'Regular',
+					value: '400',
+				},
+				{
+					name: 'Bold',
+					value: '700',
+				},
+			],
+			combinedStyleAndWeightOptions: [
+				{
+					key: 'normal-400',
+					name: 'Regular',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '400',
+					},
+				},
+				{
+					key: 'normal-700',
+					name: 'Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '700',
+					},
+				},
+				{
+					key: 'italic-400',
+					name: 'Regular Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '400',
+					},
+				},
+				{
+					key: 'italic-700',
+					name: 'Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '700',
+					},
+				},
+			],
+			isSystemFont: false,
+			isVariableFont: false,
+		} );
+	} );
 } );