@wordpress/block-library 8.18.1-next.5a1d1283.0 → 8.19.1

package/src/search/view.js

@@ -1,172 +1,73 @@
-/*eslint-env browser*/
-
-/** @type {?HTMLFormElement} */
-let expandedSearchBlock = null;
-
-const hiddenClass = 'wp-block-search__searchfield-hidden';
-
-/**
- * Toggles aria-label with data-toggled-aria-label.
- *
- * @param {HTMLElement} element
- */
-function toggleAriaLabel( element ) {
-	if ( ! ( 'toggledAriaLabel' in element.dataset ) ) {
-		throw new Error( 'Element lacks toggledAriaLabel in dataset.' );
-	}
-
-	const ariaLabel = element.dataset.toggledAriaLabel;
-	element.dataset.toggledAriaLabel = element.ariaLabel;
-	element.ariaLabel = ariaLabel;
-}
-
-/**
- * Gets search input.
- *
- * @param {HTMLFormElement} block Search block.
- * @return {HTMLInputElement} Search input.
- */
-function getSearchInput( block ) {
-	return block.querySelector( '.wp-block-search__input' );
-}
-
-/**
- * Gets search button.
- *
- * @param {HTMLFormElement} block Search block.
- * @return {HTMLButtonElement} Search button.
- */
-function getSearchButton( block ) {
-	return block.querySelector( '.wp-block-search__button' );
-}
-
-/**
- * Handles keydown event to collapse an expanded Search block (when pressing Escape key).
- *
- * @param {KeyboardEvent} event
- */
-function handleKeydownEvent( event ) {
-	if ( ! expandedSearchBlock ) {
-		// In case the event listener wasn't removed in time.
-		return;
-	}
-
-	if ( event.key === 'Escape' ) {
-		const block = expandedSearchBlock; // This is nullified by collapseExpandedSearchBlock().
-		collapseExpandedSearchBlock();
-		getSearchButton( block ).focus();
-	}
-}
-
-/**
- * Handles keyup event to collapse an expanded Search block (e.g. when tabbing out of expanded Search block).
- *
- * @param {KeyboardEvent} event
- */
-function handleKeyupEvent( event ) {
-	if ( ! expandedSearchBlock ) {
-		// In case the event listener wasn't removed in time.
-		return;
-	}
-
-	if ( event.target.closest( '.wp-block-search' ) !== expandedSearchBlock ) {
-		collapseExpandedSearchBlock();
-	}
-}
-
-/**
- * Expands search block.
- *
- * Inverse of what is done in collapseExpandedSearchBlock().
- *
- * @param {HTMLFormElement} block Search block.
- */
-function expandSearchBlock( block ) {
-	// Make sure only one is open at a time.
-	if ( expandedSearchBlock ) {
-		collapseExpandedSearchBlock();
-	}
-
-	const searchField = getSearchInput( block );
-	const searchButton = getSearchButton( block );
-
-	searchButton.type = 'submit';
-	searchField.ariaHidden = 'false';
-	searchField.tabIndex = 0;
-	searchButton.ariaExpanded = 'true';
-	searchButton.removeAttribute( 'aria-controls' ); // Note: Seemingly not reflected with searchButton.ariaControls.
-	toggleAriaLabel( searchButton );
-	block.classList.remove( hiddenClass );
-
-	searchField.focus(); // Note that Chrome seems to do this automatically.
-
-	// The following two must be inverse of what is done in collapseExpandedSearchBlock().
-	document.addEventListener( 'keydown', handleKeydownEvent, {
-		passive: true,
-	} );
-	document.addEventListener( 'keyup', handleKeyupEvent, {
-		passive: true,
-	} );
-
-	expandedSearchBlock = block;
-}
-
 /**
- * Collapses the expanded search block.
- *
- * Inverse of what is done in expandSearchBlock().
+ * WordPress dependencies
  */
-function collapseExpandedSearchBlock() {
-	if ( ! expandedSearchBlock ) {
-		throw new Error( 'Expected expandedSearchBlock to be defined.' );
-	}
-	const block = expandedSearchBlock;
-	const searchField = getSearchInput( block );
-	const searchButton = getSearchButton( block );
-
-	searchButton.type = 'button';
-	searchField.ariaHidden = 'true';
-	searchField.tabIndex = -1;
-	searchButton.ariaExpanded = 'false';
-	searchButton.setAttribute( 'aria-controls', searchField.id ); // Note: Seemingly not reflected with searchButton.ariaControls.
-	toggleAriaLabel( searchButton );
-	block.classList.add( hiddenClass );
-
-	// The following two must be inverse of what is done in expandSearchBlock().
-	document.removeEventListener( 'keydown', handleKeydownEvent, {
-		passive: true,
-	} );
-	document.removeEventListener( 'keyup', handleKeyupEvent, {
-		passive: true,
-	} );
-
-	expandedSearchBlock = null;
-}
-
-// Listen for click events anywhere on the document so this script can be loaded asynchronously in the head.
-document.addEventListener(
-	'click',
-	( event ) => {
-		// Get the ancestor expandable Search block of the clicked element.
-		const block = event.target.closest(
-			'.wp-block-search__button-behavior-expand'
-		);
-
-		/*
-		 * If there is already an expanded search block and either the current click was not for a Search block or it was
-		 * for another block, then collapse the currently-expanded block.
-		 */
-		if ( expandedSearchBlock && block !== expandedSearchBlock ) {
-			collapseExpandedSearchBlock();
-		}
-
-		// If the click was on or inside a collapsed Search block, expand it.
-		if (
-			block instanceof HTMLFormElement &&
-			block.classList.contains( hiddenClass )
-		) {
-			expandSearchBlock( block );
-		}
+import { store as wpStore } from '@wordpress/interactivity';
+
+wpStore( {
+	selectors: {
+		core: {
+			search: {
+				ariaLabel: ( { context } ) => {
+					const { ariaLabelCollapsed, ariaLabelExpanded } =
+						context.core.search;
+					return context.core.search.isSearchInputVisible
+						? ariaLabelExpanded
+						: ariaLabelCollapsed;
+				},
+				ariaControls: ( { context } ) => {
+					return context.core.search.isSearchInputVisible
+						? null
+						: context.core.search.inputId;
+				},
+				type: ( { context } ) => {
+					return context.core.search.isSearchInputVisible
+						? 'submit'
+						: 'button';
+				},
+				tabindex: ( { context } ) => {
+					return context.core.search.isSearchInputVisible
+						? '0'
+						: '-1';
+				},
+			},
+		},
+	},
+	actions: {
+		core: {
+			search: {
+				openSearchInput: ( { context, event, ref } ) => {
+					if ( ! context.core.search.isSearchInputVisible ) {
+						event.preventDefault();
+						context.core.search.isSearchInputVisible = true;
+						ref.parentElement.querySelector( 'input' ).focus();
+					}
+				},
+				closeSearchInput: ( { context } ) => {
+					context.core.search.isSearchInputVisible = false;
+				},
+				handleSearchKeydown: ( store ) => {
+					const { actions, event, ref } = store;
+					// If Escape close the menu.
+					if ( event?.key === 'Escape' ) {
+						actions.core.search.closeSearchInput( store );
+						ref.querySelector( 'button' ).focus();
+					}
+				},
+				handleSearchFocusout: ( store ) => {
+					const { actions, event, ref } = store;
+					// If focus is outside search form, and in the document, close menu
+					// event.target === The element losing focus
+					// event.relatedTarget === The element receiving focus (if any)
+					// When focusout is outside the document,
+					// `window.document.activeElement` doesn't change.
+					if (
+						! ref.contains( event.relatedTarget ) &&
+						event.target !== window.document.activeElement
+					) {
+						actions.core.search.closeSearchInput( store );
+					}
+				},
+			},
+		},
 	},
-	{ passive: true }
-);
+} );

package/src/social-link/edit.native.js

@@ -158,7 +158,7 @@ const SocialLinkEdit = ( {
 		  );
 
 	return (
-		<View>
+		<View style={ styles.container }>
 			{ isSelected && (
 				<>
 					<BlockControls>

package/src/social-link/editor.native.scss

@@ -21,3 +21,7 @@
 .inactiveIconDark {
 	background-color: $dark-quaternary;
 }
+
+.container {
+	margin: $block-selected-margin;
+}

package/src/table/edit.js

@@ -349,7 +349,7 @@ function TableEdit( {
 	useEffect( () => {
 		if ( hasTableCreated ) {
 			tableRef?.current
-				?.querySelector( 'td[contentEditable="true"]' )
+				?.querySelector( 'td div[contentEditable="true"]' )
 				?.focus();
 			setHasTableCreated( false );
 		}
@@ -414,31 +414,33 @@ function TableEdit( {
 							},
 							columnIndex
 						) => (
-							<RichText
-								tagName={ CellTag }
+							<CellTag
 								key={ columnIndex }
+								scope={ CellTag === 'th' ? scope : undefined }
+								colSpan={ colspan }
+								rowSpan={ rowspan }
 								className={ classnames(
 									{
 										[ `has-text-align-${ align }` ]: align,
 									},
 									'wp-block-table__cell-content'
 								) }
-								scope={ CellTag === 'th' ? scope : undefined }
-								colSpan={ colspan }
-								rowSpan={ rowspan }
-								value={ content }
-								onChange={ onChange }
-								onFocus={ () => {
-									setSelectedCell( {
-										sectionName: name,
-										rowIndex,
-										columnIndex,
-										type: 'cell',
-									} );
-								} }
-								aria-label={ cellAriaLabel[ name ] }
-								placeholder={ placeholder[ name ] }
-							/>
+							>
+								<RichText
+									value={ content }
+									onChange={ onChange }
+									onFocus={ () => {
+										setSelectedCell( {
+											sectionName: name,
+											rowIndex,
+											columnIndex,
+											type: 'cell',
+										} );
+									} }
+									aria-label={ cellAriaLabel[ name ] }
+									placeholder={ placeholder[ name ] }
+								/>
+							</CellTag>
 						)
 					) }
 				</tr>

package/src/table-of-contents/block.json

@@ -13,7 +13,8 @@
 			"type": "array",
 			"items": {
 				"type": "object"
-			}
+			},
+			"default": []
 		},
 		"onlyIncludeCurrentPage": {
 			"type": "boolean",

package/src/table-of-contents/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import fastDeepEqual from 'fast-deep-equal/es6';
-
 /**
  * WordPress dependencies
  */
@@ -22,10 +17,8 @@ import {
 	ToolbarGroup,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { renderToString, useEffect } from '@wordpress/element';
+import { renderToString } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -33,6 +26,7 @@ import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
 import icon from './icon';
 import TableOfContentsList from './list';
 import { linearToNestedHeadingList } from './utils';
+import { useObserveHeadings } from './hooks';
 
 /** @typedef {import('./utils').HeadingData} HeadingData */
 
@@ -53,6 +47,8 @@ export default function TableOfContentsEdit( {
 	clientId,
 	setAttributes,
 } ) {
+	useObserveHeadings( clientId );
+
 	const blockProps = useBlockProps();
 
 	const canInsertList = useSelect(
@@ -66,160 +62,7 @@ export default function TableOfContentsEdit( {
 		[ clientId ]
 	);
 
-	const { __unstableMarkNextChangeAsNotPersistent, replaceBlocks } =
-		useDispatch( blockEditorStore );
-
-	/**
-	 * The latest heading data, or null if the new data deeply equals the saved
-	 * headings attribute.
-	 *
-	 * Since useSelect forces a re-render when its return value is shallowly
-	 * inequal to its prior call, we would be re-rendering this block every time
-	 * the stores change, even if the latest headings were deeply equal to the
-	 * ones saved in the block attributes.
-	 *
-	 * By returning null when they're equal, we reduce that to 2 renders: one
-	 * when there are new latest headings (and so it returns them), and one when
-	 * they haven't changed (so it returns null). As long as the latest heading
-	 * data remains the same, further calls of the useSelect callback will
-	 * continue to return null, thus preventing any forced re-renders.
-	 */
-	const latestHeadings = useSelect(
-		( select ) => {
-			const {
-				getBlockAttributes,
-				getBlockName,
-				getClientIdsWithDescendants,
-				__experimentalGetGlobalBlocksByName: getGlobalBlocksByName,
-			} = select( blockEditorStore );
-
-			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-			// Blocks can be loaded into a *non-post* block editor, so to avoid
-			// declaring @wordpress/editor as a dependency, we must access its
-			// store by string. When the store is not available, editorSelectors
-			// will be null, and the block's saved markup will lack permalinks.
-			// eslint-disable-next-line @wordpress/data-no-store-string-literals
-			const editorSelectors = select( 'core/editor' );
-
-			const pageBreakClientIds = getGlobalBlocksByName( 'core/nextpage' );
-
-			const isPaginated = pageBreakClientIds.length !== 0;
-
-			// Get the client ids of all blocks in the editor.
-			const allBlockClientIds = getClientIdsWithDescendants();
-
-			// If onlyIncludeCurrentPage is true, calculate the page (of a paginated post) this block is part of, so we know which headings to include; otherwise, skip the calculation.
-			let tocPage = 1;
-
-			if ( isPaginated && onlyIncludeCurrentPage ) {
-				// We can't use getBlockIndex because it only returns the index
-				// relative to sibling blocks.
-				const tocIndex = allBlockClientIds.indexOf( clientId );
-
-				for ( const [
-					blockIndex,
-					blockClientId,
-				] of allBlockClientIds.entries() ) {
-					// If we've reached blocks after the Table of Contents, we've
-					// finished calculating which page the block is on.
-					if ( blockIndex >= tocIndex ) {
-						break;
-					}
-					if ( getBlockName( blockClientId ) === 'core/nextpage' ) {
-						tocPage++;
-					}
-				}
-			}
-
-			const _latestHeadings = [];
-
-			/** The page (of a paginated post) a heading will be part of. */
-			let headingPage = 1;
-
-			/**
-			 * A permalink to the current post. If the core/editor store is
-			 * unavailable, this variable will be null.
-			 */
-			const permalink = editorSelectors?.getPermalink() ?? null;
-
-			let headingPageLink = null;
-
-			// If the core/editor store is available, we can add permalinks to the
-			// generated table of contents.
-			if ( typeof permalink === 'string' ) {
-				headingPageLink = isPaginated
-					? addQueryArgs( permalink, { page: headingPage } )
-					: permalink;
-			}
-
-			for ( const blockClientId of allBlockClientIds ) {
-				const blockName = getBlockName( blockClientId );
-				if ( blockName === 'core/nextpage' ) {
-					headingPage++;
-
-					// If we're only including headings from the current page (of
-					// a paginated post), then exit the loop if we've reached the
-					// pages after the one with the Table of Contents block.
-					if ( onlyIncludeCurrentPage && headingPage > tocPage ) {
-						break;
-					}
-
-					if ( typeof permalink === 'string' ) {
-						headingPageLink = addQueryArgs(
-							removeQueryArgs( permalink, [ 'page' ] ),
-							{ page: headingPage }
-						);
-					}
-				}
-				// If we're including all headings or we've reached headings on
-				// the same page as the Table of Contents block, add them to the
-				// list.
-				else if (
-					! onlyIncludeCurrentPage ||
-					headingPage === tocPage
-				) {
-					if ( blockName === 'core/heading' ) {
-						const headingAttributes =
-							getBlockAttributes( blockClientId );
-
-						const canBeLinked =
-							typeof headingPageLink === 'string' &&
-							typeof headingAttributes.anchor === 'string' &&
-							headingAttributes.anchor !== '';
-
-						_latestHeadings.push( {
-							// Convert line breaks to spaces, and get rid of HTML tags in the headings.
-							content: stripHTML(
-								headingAttributes.content.replace(
-									/(<br *\/?>)+/g,
-									' '
-								)
-							),
-							level: headingAttributes.level,
-							link: canBeLinked
-								? `${ headingPageLink }#${ headingAttributes.anchor }`
-								: null,
-						} );
-					}
-				}
-			}
-
-			if ( fastDeepEqual( headings, _latestHeadings ) ) {
-				return null;
-			}
-			return _latestHeadings;
-		},
-		[ clientId, onlyIncludeCurrentPage, headings ]
-	);
-
-	useEffect( () => {
-		if ( latestHeadings !== null ) {
-			// This is required to keep undo working and not create 2 undo steps
-			// for each heading change.
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { headings: latestHeadings } );
-		}
-	}, [ latestHeadings ] );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
 
 	const headingTree = linearToNestedHeadingList( headings );
 

package/src/table-of-contents/hooks.js

@@ -0,0 +1,156 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { useEffect } from '@wordpress/element';
+import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+function getLatestHeadings( select, clientId ) {
+	const {
+		getBlockAttributes,
+		getBlockName,
+		getClientIdsWithDescendants,
+		__experimentalGetGlobalBlocksByName: getGlobalBlocksByName,
+	} = select( blockEditorStore );
+
+	// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
+	// Blocks can be loaded into a *non-post* block editor, so to avoid
+	// declaring @wordpress/editor as a dependency, we must access its
+	// store by string. When the store is not available, editorSelectors
+	// will be null, and the block's saved markup will lack permalinks.
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const permalink = select( 'core/editor' ).getPermalink() ?? null;
+
+	const isPaginated = getGlobalBlocksByName( 'core/nextpage' ).length !== 0;
+	const { onlyIncludeCurrentPage } = getBlockAttributes( clientId ) ?? {};
+
+	// Get the client ids of all blocks in the editor.
+	const allBlockClientIds = getClientIdsWithDescendants();
+
+	// If onlyIncludeCurrentPage is true, calculate the page (of a paginated post) this block is part of, so we know which headings to include; otherwise, skip the calculation.
+	let tocPage = 1;
+
+	if ( isPaginated && onlyIncludeCurrentPage ) {
+		// We can't use getBlockIndex because it only returns the index
+		// relative to sibling blocks.
+		const tocIndex = allBlockClientIds.indexOf( clientId );
+
+		for ( const [
+			blockIndex,
+			blockClientId,
+		] of allBlockClientIds.entries() ) {
+			// If we've reached blocks after the Table of Contents, we've
+			// finished calculating which page the block is on.
+			if ( blockIndex >= tocIndex ) {
+				break;
+			}
+			if ( getBlockName( blockClientId ) === 'core/nextpage' ) {
+				tocPage++;
+			}
+		}
+	}
+
+	const latestHeadings = [];
+
+	/** The page (of a paginated post) a heading will be part of. */
+	let headingPage = 1;
+	let headingPageLink = null;
+
+	// If the core/editor store is available, we can add permalinks to the
+	// generated table of contents.
+	if ( typeof permalink === 'string' ) {
+		headingPageLink = isPaginated
+			? addQueryArgs( permalink, { page: headingPage } )
+			: permalink;
+	}
+
+	for ( const blockClientId of allBlockClientIds ) {
+		const blockName = getBlockName( blockClientId );
+		if ( blockName === 'core/nextpage' ) {
+			headingPage++;
+
+			// If we're only including headings from the current page (of
+			// a paginated post), then exit the loop if we've reached the
+			// pages after the one with the Table of Contents block.
+			if ( onlyIncludeCurrentPage && headingPage > tocPage ) {
+				break;
+			}
+
+			if ( typeof permalink === 'string' ) {
+				headingPageLink = addQueryArgs(
+					removeQueryArgs( permalink, [ 'page' ] ),
+					{ page: headingPage }
+				);
+			}
+		}
+		// If we're including all headings or we've reached headings on
+		// the same page as the Table of Contents block, add them to the
+		// list.
+		else if ( ! onlyIncludeCurrentPage || headingPage === tocPage ) {
+			if ( blockName === 'core/heading' ) {
+				const headingAttributes = getBlockAttributes( blockClientId );
+
+				const canBeLinked =
+					typeof headingPageLink === 'string' &&
+					typeof headingAttributes.anchor === 'string' &&
+					headingAttributes.anchor !== '';
+
+				latestHeadings.push( {
+					// Convert line breaks to spaces, and get rid of HTML tags in the headings.
+					content: stripHTML(
+						headingAttributes.content.replace(
+							/(<br *\/?>)+/g,
+							' '
+						)
+					),
+					level: headingAttributes.level,
+					link: canBeLinked
+						? `${ headingPageLink }#${ headingAttributes.anchor }`
+						: null,
+				} );
+			}
+		}
+	}
+
+	return latestHeadings;
+}
+
+function observeCallback( select, dispatch, clientId ) {
+	const { getBlockAttributes } = select( blockEditorStore );
+	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+		dispatch( blockEditorStore );
+
+	/**
+	 * If the block no longer exists in the store, skip the update.
+	 * The "undo" action recreates the block and provides a new `clientId`.
+	 * The hook still might be observing the changes while the old block unmounts.
+	 */
+	const attributes = getBlockAttributes( clientId );
+	if ( attributes === null ) {
+		return;
+	}
+
+	const headings = getLatestHeadings( select, clientId );
+	if ( ! fastDeepEqual( headings, attributes.headings ) ) {
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( clientId, { headings } );
+	}
+}
+
+export function useObserveHeadings( clientId ) {
+	const registry = useRegistry();
+	useEffect( () => {
+		// Todo: Limit subscription to block editor store when data no longer depends on `getPermalink`.
+		// See: https://github.com/WordPress/gutenberg/pull/45513
+		return registry.subscribe( () =>
+			observeCallback( registry.select, registry.dispatch, clientId )
+		);
+	}, [ registry, clientId ] );
+}