@wordpress/block-library 8.9.0 → 8.11.0

package/src/social-link/edit.js

@@ -6,11 +6,15 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+import { useDispatch } from '@wordpress/data';
+
 import {
 	InspectorControls,
 	URLPopover,
 	URLInput,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import {
@@ -32,40 +36,60 @@ const SocialLinkURLPopover = ( {
 	setAttributes,
 	setPopover,
 	popoverAnchor,
-} ) => (
-	<URLPopover anchor={ popoverAnchor } onClose={ () => setPopover( false ) }>
-		<form
-			className="block-editor-url-popover__link-editor"
-			onSubmit={ ( event ) => {
-				event.preventDefault();
-				setPopover( false );
-			} }
+	clientId,
+} ) => {
+	const { removeBlock } = useDispatch( blockEditorStore );
+	return (
+		<URLPopover
+			anchor={ popoverAnchor }
+			onClose={ () => setPopover( false ) }
 		>
-			<div className="block-editor-url-input">
-				<URLInput
-					__nextHasNoMarginBottom
-					value={ url }
-					onChange={ ( nextURL ) =>
-						setAttributes( { url: nextURL } )
-					}
-					placeholder={ __( 'Enter address' ) }
-					disableSuggestions={ true }
+			<form
+				className="block-editor-url-popover__link-editor"
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					setPopover( false );
+				} }
+			>
+				<div className="block-editor-url-input">
+					<URLInput
+						__nextHasNoMarginBottom
+						value={ url }
+						onChange={ ( nextURL ) =>
+							setAttributes( { url: nextURL } )
+						}
+						placeholder={ __( 'Enter address' ) }
+						disableSuggestions={ true }
+						onKeyDown={ ( event ) => {
+							if (
+								!! url ||
+								event.defaultPrevented ||
+								! [ BACKSPACE, DELETE ].includes(
+									event.keyCode
+								)
+							) {
+								return;
+							}
+							removeBlock( clientId );
+						} }
+					/>
+				</div>
+				<Button
+					icon={ keyboardReturn }
+					label={ __( 'Apply' ) }
+					type="submit"
 				/>
-			</div>
-			<Button
-				icon={ keyboardReturn }
-				label={ __( 'Apply' ) }
-				type="submit"
-			/>
-		</form>
-	</URLPopover>
-);
+			</form>
+		</URLPopover>
+	);
+};
 
 const SocialLinkEdit = ( {
 	attributes,
 	context,
 	isSelected,
 	setAttributes,
+	clientId,
 } ) => {
 	const { url, service, label, rel } = attributes;
 	const { showLabels, iconColorValue, iconBackgroundColorValue } = context;
@@ -143,6 +167,7 @@ const SocialLinkEdit = ( {
 							setAttributes={ setAttributes }
 							setPopover={ setPopover }
 							popoverAnchor={ popoverAnchor }
+							clientId={ clientId }
 						/>
 					) }
 				</Button>

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -75,7 +70,10 @@ export default function TemplatePartEdit( {
 			return {
 				innerBlocks: getBlocks( clientId ),
 				isResolved: hasResolvedEntity,
-				isMissing: hasResolvedEntity && isEmpty( entityRecord ),
+				isMissing:
+					hasResolvedEntity &&
+					( ! entityRecord ||
+						Object.keys( entityRecord ).length === 0 ),
 				area: _area,
 			};
 		},

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
+import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies

package/src/template-part/index.php

@@ -143,14 +143,14 @@ function render_block_core_template_part( $attributes ) {
 	}
 
 	// Run through the actions that are typically taken on the_content.
+	$content                       = shortcode_unautop( $content );
+	$content                       = do_shortcode( $content );
 	$seen_ids[ $template_part_id ] = true;
 	$content                       = do_blocks( $content );
 	unset( $seen_ids[ $template_part_id ] );
 	$content = wptexturize( $content );
 	$content = convert_smilies( $content );
-	$content = shortcode_unautop( $content );
 	$content = wp_filter_content_tags( $content, "template_part_{$area}" );
-	$content = do_shortcode( $content );
 
 	// Handle embeds for block template parts.
 	global $wp_embed;
@@ -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,200 @@
+/**
+ * External dependencies
+ */
+import { useContext, useMemo, useEffect } from 'preact/hooks';
+import { deepSignal, peek } from 'deepsignal';
+/**
+ * Internal dependencies
+ */
+import { createPortal } from './portals.js';
+
+/**
+ * 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>;
+		},
+		{ priority: 5 }
+	);
+
+	// data-wp-body
+	directive( 'body', ( { props: { children }, context: inherited } ) => {
+		const { Provider } = inherited;
+		const inheritedValue = useContext( inherited );
+		return createPortal(
+			<Provider value={ inheritedValue }>{ children }</Provider>,
+			document.body
+		);
+	} );
+
+	// 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;
+
+					// 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.
+					useEffect( () => {
+						// aria- and data- attributes have no boolean representation.
+						// A `false` value is different from the attribute not being
+						// present, so we can't remove it.
+						// We follow Preact's logic: https://github.com/preactjs/preact/blob/ea49f7a0f9d1ff2c98c0bdd66aa0cbc583055246/src/diff/props.js#L131C24-L136
+						if ( result === false && attribute[ 4 ] !== '-' ) {
+							element.ref.current.removeAttribute( attribute );
+						} else {
+							element.ref.current.setAttribute(
+								attribute,
+								result === true && attribute[ 4 ] !== '-'
+									? ''
+									: 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,145 @@
+/**
+ * External dependencies
+ */
+import { h, options, createContext, cloneElement } 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 = {};
+const directivePriorities = {};
+export const directive = ( name, cb, { priority = 10 } = {} ) => {
+	directiveMap[ name ] = cb;
+	directivePriorities[ name ] = priority;
+};
+
+// Resolve the path to some property of the store object.
+const resolve = ( path, ctx ) => {
+	let current = { ...store, context: ctx };
+	path.split( '.' ).forEach( ( p ) => ( current = current[ p ] ) );
+	return current;
+};
+
+// Generate the evaluate function.
+const getEvaluate =
+	( { ref } = {} ) =>
+	( path, extraArgs = {} ) => {
+		// If path starts with !, remove it and save a flag.
+		const hasNegationOperator =
+			path[ 0 ] === '!' && !! ( path = path.slice( 1 ) );
+		const value = resolve( path, extraArgs.context );
+		const returnValue =
+			typeof value === 'function'
+				? value( {
+						ref: ref.current,
+						...store,
+						...extraArgs,
+				  } )
+				: value;
+		return hasNegationOperator ? ! returnValue : returnValue;
+	};
+
+// Separate directives by priority. The resulting array contains objects
+// of directives grouped by same priority, and sorted in ascending order.
+const usePriorityLevels = ( directives ) =>
+	useMemo( () => {
+		const byPriority = Object.entries( directives ).reduce(
+			( acc, [ name, values ] ) => {
+				const priority = directivePriorities[ name ];
+				if ( ! acc[ priority ] ) acc[ priority ] = {};
+				acc[ priority ][ name ] = values;
+
+				return acc;
+			},
+			{}
+		);
+
+		return Object.entries( byPriority )
+			.sort( ( [ p1 ], [ p2 ] ) => p1 - p2 )
+			.map( ( [ , obj ] ) => obj );
+	}, [ directives ] );
+
+// Directive wrapper.
+const Directive = ( { type, directives, props: originalProps } ) => {
+	const ref = useRef( null );
+	const element = h( type, { ...originalProps, ref } );
+	const evaluate = useMemo( () => getEvaluate( { ref } ), [] );
+
+	// Add wrappers recursively for each priority level.
+	const byPriorityLevel = usePriorityLevels( directives );
+	return (
+		<RecursivePriorityLevel
+			directives={ byPriorityLevel }
+			element={ element }
+			evaluate={ evaluate }
+			originalProps={ originalProps }
+		/>
+	);
+};
+
+// Priority level wrapper.
+const RecursivePriorityLevel = ( {
+	directives: [ directives, ...rest ],
+	element,
+	evaluate,
+	originalProps,
+} ) => {
+	// This element needs to be a fresh copy so we are not modifying an already
+	// rendered element with Preact's internal properties initialized. This
+	// prevents an error with changes in `element.props.children` not being
+	// reflected in `element.__k`.
+	element = cloneElement( element );
+
+	// Recursively render the wrapper for the next priority level.
+	//
+	// Note that, even though we're instantiating a vnode with a
+	// `RecursivePriorityLevel` here, its render function will not be executed
+	// just yet. Actually, it will be delayed until the current render function
+	// has finished. That ensures directives in the current priorty level have
+	// run (and thus modified the passed `element`) before the next level.
+	const children =
+		rest.length > 0 ? (
+			<RecursivePriorityLevel
+				directives={ rest }
+				element={ element }
+				evaluate={ evaluate }
+				originalProps={ originalProps }
+			/>
+		) : (
+			element
+		);
+
+	const props = { ...originalProps, children };
+	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 );
+};

package/src/utils/interactivity/hydration.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { hydrate } from 'preact';
+/**
+ * Internal dependencies
+ */
+import { toVdom, hydratedIslands } from './vdom';
+import { createRootFragment } from './utils';
+import { directivePrefix } from './constants';
+
+export const init = async () => {
+	document
+		.querySelectorAll( `[${ directivePrefix }island]` )
+		.forEach( ( node ) => {
+			if ( ! hydratedIslands.has( node ) ) {
+				const fragment = createRootFragment( node.parentNode, node );
+				const vdom = toVdom( node );
+				hydrate( vdom, fragment );
+			}
+		} );
+};

package/src/utils/interactivity/index.js

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import registerDirectives from './directives';
+import { init } from './hydration';
+export { store } from './store';
+
+/**
+ * Initialize the Interactivity API.
+ */
+registerDirectives();
+
+document.addEventListener( 'DOMContentLoaded', async () => {
+	await init();
+	// eslint-disable-next-line no-console
+	console.log( 'Interactivity API started' );
+} );