@wordpress/block-library 8.8.0 → 8.10.0

package/src/social-links/edit.js

@@ -195,7 +195,7 @@ export function SocialLinksEdit( props ) {
 				</ToolbarDropdownMenu>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Open links in new tab' ) }
@@ -214,37 +214,39 @@ export function SocialLinksEdit( props ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls group="color">
-				{ colorSettings.map(
-					( { onChange, label, value, resetAllFilter } ) => (
-						<ColorGradientSettingsDropdown
-							key={ `social-links-color-${ label }` }
-							__experimentalIsRenderedInSidebar
-							settings={ [
-								{
-									colorValue: value,
-									label,
-									onColorChange: onChange,
-									isShownByDefault: true,
-									resetAllFilter,
-									enableAlpha: true,
-								},
-							] }
-							panelId={ clientId }
-							{ ...colorGradientSettings }
+			{ colorGradientSettings.hasColorsOrGradients && (
+				<InspectorControls group="color">
+					{ colorSettings.map(
+						( { onChange, label, value, resetAllFilter } ) => (
+							<ColorGradientSettingsDropdown
+								key={ `social-links-color-${ label }` }
+								__experimentalIsRenderedInSidebar
+								settings={ [
+									{
+										colorValue: value,
+										label,
+										onColorChange: onChange,
+										isShownByDefault: true,
+										resetAllFilter,
+										enableAlpha: true,
+									},
+								] }
+								panelId={ clientId }
+								{ ...colorGradientSettings }
+							/>
+						)
+					) }
+					{ ! logosOnly && (
+						<ContrastChecker
+							{ ...{
+								textColor: iconColorValue,
+								backgroundColor: iconBackgroundColorValue,
+							} }
+							isLargeText={ false }
 						/>
-					)
-				) }
-				{ ! logosOnly && (
-					<ContrastChecker
-						{ ...{
-							textColor: iconColorValue,
-							backgroundColor: iconBackgroundColorValue,
-						} }
-						isLargeText={ false }
-					/>
-				) }
-			</InspectorControls>
+					) }
+				</InspectorControls>
+			) }
 			<ul { ...innerBlocksProps } />
 		</>
 	);

package/src/spacer/edit.js

@@ -8,6 +8,8 @@ import classnames from 'classnames';
  */
 import {
 	useBlockProps,
+	useSetting,
+	getCustomValueFromPreset,
 	getSpacingPresetCssVar,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -92,13 +94,20 @@ const SpacerEdit = ( {
 	} );
 	const { orientation } = context;
 	const { orientation: parentOrientation, type } = parentLayout || {};
+	// Check if the spacer is inside a flex container.
+	const isFlexLayout = type === 'flex';
 	// If the spacer is inside a flex container, it should either inherit the orientation
 	// of the parent or use the flex default orientation.
 	const inheritedOrientation =
-		! parentOrientation && type === 'flex'
+		! parentOrientation && isFlexLayout
 			? 'horizontal'
 			: parentOrientation || orientation;
-	const { height, width } = attributes;
+	const { height, width, style: blockStyle = {} } = attributes;
+
+	const { layout = {} } = blockStyle;
+	const { selfStretch, flexSize } = layout;
+
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
 
 	const [ isResizing, setIsResizing ] = useState( false );
 	const [ temporaryHeight, setTemporaryHeight ] = useState( null );
@@ -110,32 +119,80 @@ const SpacerEdit = ( {
 	const handleOnVerticalResizeStop = ( newHeight ) => {
 		onResizeStop();
 
+		if ( isFlexLayout ) {
+			setAttributes( {
+				style: {
+					...blockStyle,
+					layout: {
+						...layout,
+						flexSize: newHeight,
+						selfStretch: 'fixed',
+					},
+				},
+			} );
+		}
+
 		setAttributes( { height: newHeight } );
 		setTemporaryHeight( null );
 	};
 
 	const handleOnHorizontalResizeStop = ( newWidth ) => {
 		onResizeStop();
+
+		if ( isFlexLayout ) {
+			setAttributes( {
+				style: {
+					...blockStyle,
+					layout: {
+						...layout,
+						flexSize: newWidth,
+						selfStretch: 'fixed',
+					},
+				},
+			} );
+		}
+
 		setAttributes( { width: newWidth } );
 		setTemporaryWidth( null );
 	};
 
+	const getHeightForVerticalBlocks = () => {
+		if ( isFlexLayout ) {
+			return undefined;
+		}
+		return temporaryHeight || getSpacingPresetCssVar( height ) || undefined;
+	};
+
+	const getWidthForHorizontalBlocks = () => {
+		if ( isFlexLayout ) {
+			return undefined;
+		}
+		return temporaryWidth || getSpacingPresetCssVar( width ) || undefined;
+	};
+
+	const sizeConditionalOnOrientation =
+		inheritedOrientation === 'horizontal'
+			? temporaryWidth || flexSize
+			: temporaryHeight || flexSize;
+
 	const style = {
 		height:
 			inheritedOrientation === 'horizontal'
 				? 24
-				: temporaryHeight ||
-				  getSpacingPresetCssVar( height ) ||
-				  undefined,
+				: getHeightForVerticalBlocks(),
 		width:
 			inheritedOrientation === 'horizontal'
-				? temporaryWidth || getSpacingPresetCssVar( width ) || undefined
+				? getWidthForHorizontalBlocks()
 				: undefined,
 		// In vertical flex containers, the spacer shrinks to nothing without a minimum width.
 		minWidth:
-			inheritedOrientation === 'vertical' && type === 'flex'
+			inheritedOrientation === 'vertical' && isFlexLayout
 				? 48
 				: undefined,
+		// Add flex-basis so temporary sizes are respected.
+		flexBasis: isFlexLayout ? sizeConditionalOnOrientation : undefined,
+		// Remove flex-grow when resizing.
+		flexGrow: isFlexLayout && isResizing ? 0 : undefined,
 	};
 
 	const resizableBoxWithOrientation = ( blockOrientation ) => {
@@ -191,13 +248,93 @@ const SpacerEdit = ( {
 	};
 
 	useEffect( () => {
-		if ( inheritedOrientation === 'horizontal' && ! width ) {
+		if (
+			isFlexLayout &&
+			selfStretch !== 'fill' &&
+			selfStretch !== 'fit' &&
+			! flexSize
+		) {
+			if ( inheritedOrientation === 'horizontal' ) {
+				// If spacer is moving from a vertical container to a horizontal container,
+				// it might not have width but have height instead.
+				const newSize =
+					getCustomValueFromPreset( width, spacingSizes ) ||
+					getCustomValueFromPreset( height, spacingSizes ) ||
+					'100px';
+				setAttributes( {
+					width: '0px',
+					style: {
+						...blockStyle,
+						layout: {
+							...layout,
+							flexSize: newSize,
+							selfStretch: 'fixed',
+						},
+					},
+				} );
+			} else {
+				const newSize =
+					getCustomValueFromPreset( height, spacingSizes ) ||
+					getCustomValueFromPreset( width, spacingSizes ) ||
+					'100px';
+				setAttributes( {
+					height: '0px',
+					style: {
+						...blockStyle,
+						layout: {
+							...layout,
+							flexSize: newSize,
+							selfStretch: 'fixed',
+						},
+					},
+				} );
+			}
+		} else if (
+			isFlexLayout &&
+			( selfStretch === 'fill' || selfStretch === 'fit' )
+		) {
+			if ( inheritedOrientation === 'horizontal' ) {
+				setAttributes( {
+					width: undefined,
+				} );
+			} else {
+				setAttributes( {
+					height: undefined,
+				} );
+			}
+		} else if ( ! isFlexLayout && ( selfStretch || flexSize ) ) {
+			if ( inheritedOrientation === 'horizontal' ) {
+				setAttributes( {
+					width: flexSize,
+				} );
+			} else {
+				setAttributes( {
+					height: flexSize,
+				} );
+			}
 			setAttributes( {
-				height: '0px',
-				width: '72px',
+				style: {
+					...blockStyle,
+					layout: {
+						...layout,
+						flexSize: undefined,
+						selfStretch: undefined,
+					},
+				},
 			} );
 		}
-	}, [] );
+	}, [
+		blockStyle,
+		flexSize,
+		height,
+		inheritedOrientation,
+		isFlexLayout,
+		layout,
+		selfStretch,
+		setAttributes,
+		spacingSizes,
+		width,
+	] );
 
 	return (
 		<>
@@ -211,13 +348,15 @@ const SpacerEdit = ( {
 			>
 				{ resizableBoxWithOrientation( inheritedOrientation ) }
 			</View>
-			<SpacerControls
-				setAttributes={ setAttributes }
-				height={ temporaryHeight || height }
-				width={ temporaryWidth || width }
-				orientation={ inheritedOrientation }
-				isResizing={ isResizing }
-			/>
+			{ ! isFlexLayout && (
+				<SpacerControls
+					setAttributes={ setAttributes }
+					height={ temporaryHeight || height }
+					width={ temporaryWidth || width }
+					orientation={ inheritedOrientation }
+					isResizing={ isResizing }
+				/>
+			) }
 		</>
 	);
 };

package/src/style.scss

@@ -12,7 +12,6 @@
 @import "./comment-template/style.scss";
 @import "./cover/style.scss";
 @import "./details/style.scss";
-@import "./details-summary/style.scss";
 @import "./embed/style.scss";
 @import "./file/style.scss";
 @import "./gallery/style.scss";

package/src/template-part/edit/index.js

@@ -205,6 +205,7 @@ export default function TemplatePartEdit( {
 					onRequestClose={ () =>
 						setIsTemplatePartSelectionOpen( false )
 					}
+					isFullScreen={ true }
 				>
 					<TemplatePartSelectionModal
 						templatePartId={ templatePartId }

package/src/template-part/edit/utils/hooks.js

@@ -37,7 +37,7 @@ export function useAlternativeTemplateParts( area, excludedId ) {
 				'wp_template_part',
 				query
 			),
-			isLoading: _isResolving( 'getEntityRecords', [
+			isResolving: _isResolving( 'getEntityRecords', [
 				'postType',
 				'wp_template_part',
 				query,
@@ -61,7 +61,7 @@ export function useAlternativeTemplateParts( area, excludedId ) {
 						templatePart.area === area )
 			) || []
 		);
-	}, [ templateParts, area ] );
+	}, [ templateParts, area, excludedId ] );
 
 	return {
 		templateParts: filteredTemplateParts,

package/src/template-part/editor.scss

@@ -1,18 +1,16 @@
 .block-editor-template-part__selection-modal {
 	z-index: z-index(".block-editor-template-part__selection-modal");
 
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	.components-modal__frame {
-		@include break-small() {
-			width: calc(100% - #{$grid-unit-20 * 2});
-			height: calc(100% - #{$header-height * 2});
-		}
-		@include break-medium() {
-			width: $break-medium - $grid-unit-20 * 2;
+	.block-editor-block-patterns-list {
+		column-count: 2;
+		column-gap: $grid-unit-30;
+
+		@include break-wide() {
+			column-count: 3;
 		}
-		@include break-large() {
-			height: 70%;
+
+		.block-editor-block-patterns-list__list-item {
+			break-inside: avoid-column;
 		}
 	}
 }

package/src/template-part/index.php

@@ -173,21 +173,34 @@ function render_block_core_template_part( $attributes ) {
 /**
  * Returns an array of area variation objects for the template part block.
  *
+ * @param array $instance_variations The variations for instances.
+ *
  * @return array Array containing the block variation objects.
  */
-function build_template_part_block_area_variations() {
+function build_template_part_block_area_variations( $instance_variations ) {
 	$variations    = array();
 	$defined_areas = get_allowed_block_template_part_areas();
+
 	foreach ( $defined_areas as $area ) {
 		if ( 'uncategorized' !== $area['area'] ) {
+			$has_instance_for_area = false;
+			foreach ( $instance_variations as $variation ) {
+				if ( $variation['attributes']['area'] === $area['area'] ) {
+					$has_instance_for_area = true;
+					break;
+				}
+			}
+
+			$scope = $has_instance_for_area ? array() : array( 'inserter' );
+
 			$variations[] = array(
-				'name'        => $area['area'],
+				'name'        => 'area_' . $area['area'],
 				'title'       => $area['label'],
 				'description' => $area['description'],
 				'attributes'  => array(
 					'area' => $area['area'],
 				),
-				'scope'       => array( 'inserter' ),
+				'scope'       => $scope,
 				'icon'        => $area['icon'],
 			);
 		}
@@ -223,7 +236,7 @@ function build_template_part_block_instance_variations() {
 
 	foreach ( $template_parts as $template_part ) {
 		$variations[] = array(
-			'name'        => sanitize_title( $template_part->slug ),
+			'name'        => 'instance_' . sanitize_title( $template_part->slug ),
 			'title'       => $template_part->title,
 			// If there's no description for the template part don't show the
 			// block description. This is a bit hacky, but prevent the fallback
@@ -255,7 +268,9 @@ function build_template_part_block_instance_variations() {
  * @return array Array containing the block variation objects.
  */
 function build_template_part_block_variations() {
-	return array_merge( build_template_part_block_area_variations(), build_template_part_block_instance_variations() );
+	$instance_variations = build_template_part_block_instance_variations();
+	$area_variations     = build_template_part_block_area_variations( $instance_variations );
+	return array_merge( $area_variations, $instance_variations );
 }
 
 /**

package/src/utils/interactivity/constants.js

@@ -0,0 +1 @@
+export const directivePrefix = 'data-wp-';

package/src/utils/interactivity/directives.js

@@ -0,0 +1,179 @@
+/**
+ * External dependencies
+ */
+import { useContext, useMemo, useEffect } from 'preact/hooks';
+import { deepSignal, peek } from 'deepsignal';
+
+/**
+ * Internal dependencies
+ */
+import { useSignalEffect } from './utils';
+import { directive } from './hooks';
+
+const isObject = ( item ) =>
+	item && typeof item === 'object' && ! Array.isArray( item );
+
+const mergeDeepSignals = ( target, source ) => {
+	for ( const k in source ) {
+		if ( typeof peek( target, k ) === 'undefined' ) {
+			target[ `$${ k }` ] = source[ `$${ k }` ];
+		} else if (
+			isObject( peek( target, k ) ) &&
+			isObject( peek( source, k ) )
+		) {
+			mergeDeepSignals(
+				target[ `$${ k }` ].peek(),
+				source[ `$${ k }` ].peek()
+			);
+		}
+	}
+};
+
+export default () => {
+	// data-wp-context
+	directive(
+		'context',
+		( {
+			directives: {
+				context: { default: context },
+			},
+			props: { children },
+			context: inherited,
+		} ) => {
+			const { Provider } = inherited;
+			const inheritedValue = useContext( inherited );
+			const value = useMemo( () => {
+				const localValue = deepSignal( context );
+				mergeDeepSignals( localValue, inheritedValue );
+				return localValue;
+			}, [ context, inheritedValue ] );
+
+			return <Provider value={ value }>{ children }</Provider>;
+		}
+	);
+
+	// data-wp-effect.[name]
+	directive( 'effect', ( { directives: { effect }, context, evaluate } ) => {
+		const contextValue = useContext( context );
+		Object.values( effect ).forEach( ( path ) => {
+			useSignalEffect( () => {
+				return evaluate( path, { context: contextValue } );
+			} );
+		} );
+	} );
+
+	// data-wp-init.[name]
+	directive( 'init', ( { directives: { init }, context, evaluate } ) => {
+		const contextValue = useContext( context );
+		Object.values( init ).forEach( ( path ) => {
+			useEffect( () => {
+				return evaluate( path, { context: contextValue } );
+			}, [] );
+		} );
+	} );
+
+	// data-wp-on.[event]
+	directive( 'on', ( { directives: { on }, element, evaluate, context } ) => {
+		const contextValue = useContext( context );
+		Object.entries( on ).forEach( ( [ name, path ] ) => {
+			element.props[ `on${ name }` ] = ( event ) => {
+				evaluate( path, { event, context: contextValue } );
+			};
+		} );
+	} );
+
+	// data-wp-class.[classname]
+	directive(
+		'class',
+		( {
+			directives: { class: className },
+			element,
+			evaluate,
+			context,
+		} ) => {
+			const contextValue = useContext( context );
+			Object.keys( className )
+				.filter( ( n ) => n !== 'default' )
+				.forEach( ( name ) => {
+					const result = evaluate( className[ name ], {
+						className: name,
+						context: contextValue,
+					} );
+					const currentClass = element.props.class || '';
+					const classFinder = new RegExp(
+						`(^|\\s)${ name }(\\s|$)`,
+						'g'
+					);
+					if ( ! result )
+						element.props.class = currentClass
+							.replace( classFinder, ' ' )
+							.trim();
+					else if ( ! classFinder.test( currentClass ) )
+						element.props.class = currentClass
+							? `${ currentClass } ${ name }`
+							: name;
+
+					useEffect( () => {
+						// This seems necessary because Preact doesn't change the class
+						// names on the hydration, so we have to do it manually. It doesn't
+						// need deps because it only needs to do it the first time.
+						if ( ! result ) {
+							element.ref.current.classList.remove( name );
+						} else {
+							element.ref.current.classList.add( name );
+						}
+					}, [] );
+				} );
+		}
+	);
+
+	// data-wp-bind.[attribute]
+	directive(
+		'bind',
+		( { directives: { bind }, element, context, evaluate } ) => {
+			const contextValue = useContext( context );
+			Object.entries( bind )
+				.filter( ( n ) => n !== 'default' )
+				.forEach( ( [ attribute, path ] ) => {
+					const result = evaluate( path, {
+						context: contextValue,
+					} );
+					element.props[ attribute ] = result;
+
+					useEffect( () => {
+						// This seems necessary because Preact doesn't change the attributes
+						// on the hydration, so we have to do it manually. It doesn't need
+						// deps because it only needs to do it the first time.
+						if ( result === false ) {
+							element.ref.current.removeAttribute( attribute );
+						} else {
+							element.ref.current.setAttribute(
+								attribute,
+								result === true ? '' : result
+							);
+						}
+					}, [] );
+				} );
+		}
+	);
+
+	// data-wp-ignore
+	directive(
+		'ignore',
+		( {
+			element: {
+				type: Type,
+				props: { innerHTML, ...rest },
+			},
+		} ) => {
+			// Preserve the initial inner HTML.
+			const cached = useMemo( () => innerHTML, [] );
+			return (
+				<Type
+					dangerouslySetInnerHTML={ { __html: cached } }
+					{ ...rest }
+				/>
+			);
+		}
+	);
+};

package/src/utils/interactivity/hooks.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { h, options, createContext } from 'preact';
+import { useRef, useMemo } from 'preact/hooks';
+/**
+ * Internal dependencies
+ */
+import { rawStore as store } from './store';
+
+// Main context.
+const context = createContext( {} );
+
+// WordPress Directives.
+const directiveMap = {};
+export const directive = ( name, cb ) => {
+	directiveMap[ name ] = cb;
+};
+
+// Resolve the path to some property of the store object.
+const resolve = ( path, ctx ) => {
+	// If path starts with !, remove it and save a flag.
+	const hasNegationOperator =
+		path[ 0 ] === '!' && !! ( path = path.slice( 1 ) );
+	let current = { ...store, context: ctx };
+	path.split( '.' ).forEach( ( p ) => ( current = current[ p ] ) );
+	return hasNegationOperator ? ! current : current;
+};
+
+// Generate the evaluate function.
+const getEvaluate =
+	( { ref } = {} ) =>
+	( path, extraArgs = {} ) => {
+		const value = resolve( path, extraArgs.context );
+		return typeof value === 'function'
+			? value( {
+					ref: ref.current,
+					...store,
+					...extraArgs,
+			  } )
+			: value;
+	};
+
+// Directive wrapper.
+const Directive = ( { type, directives, props: originalProps } ) => {
+	const ref = useRef( null );
+	const element = h( type, { ...originalProps, ref } );
+	const props = { ...originalProps, children: element };
+	const evaluate = useMemo( () => getEvaluate( { ref } ), [] );
+	const directiveArgs = { directives, props, element, context, evaluate };
+
+	for ( const d in directives ) {
+		const wrapper = directiveMap[ d ]?.( directiveArgs );
+		if ( wrapper !== undefined ) props.children = wrapper;
+	}
+
+	return props.children;
+};
+
+// Preact Options Hook called each time a vnode is created.
+const old = options.vnode;
+options.vnode = ( vnode ) => {
+	if ( vnode.props.__directives ) {
+		const props = vnode.props;
+		const directives = props.__directives;
+		delete props.__directives;
+		vnode.props = {
+			type: vnode.type,
+			directives,
+			props,
+		};
+		vnode.type = Directive;
+	}
+
+	if ( old ) old( vnode );
+};