@wordpress/block-library 7.5.0 → 7.6.0

package/src/query/edit/inspector-controls/parent-control.js

@@ -0,0 +1,133 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { FormTokenField } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { getEntitiesInfo, mapToIHasNameAndId } from '../../utils';
+
+const EMPTY_ARRAY = [];
+const BASE_QUERY = {
+	order: 'asc',
+	_fields: 'id,title',
+	context: 'view',
+};
+
+function ParentControl( { parents, postType, onChange } ) {
+	const [ search, setSearch ] = useState( '' );
+	const [ value, setValue ] = useState( EMPTY_ARRAY );
+	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
+	const debouncedSearch = useDebounce( setSearch, 250 );
+	const { searchResults, searchHasResolved } = useSelect(
+		( select ) => {
+			if ( ! search ) {
+				return { searchResults: EMPTY_ARRAY, searchHasResolved: true };
+			}
+			const { getEntityRecords, hasFinishedResolution } = select(
+				coreStore
+			);
+			const selectorArgs = [
+				'postType',
+				postType,
+				{
+					...BASE_QUERY,
+					search,
+					orderby: 'relevance',
+					exclude: parents,
+					per_page: 20,
+				},
+			];
+			return {
+				searchResults: getEntityRecords( ...selectorArgs ),
+				searchHasResolved: hasFinishedResolution(
+					'getEntityRecords',
+					selectorArgs
+				),
+			};
+		},
+		[ search, parents ]
+	);
+	const currentParents = useSelect(
+		( select ) => {
+			if ( ! parents?.length ) return EMPTY_ARRAY;
+			const { getEntityRecords } = select( coreStore );
+			return getEntityRecords( 'postType', postType, {
+				...BASE_QUERY,
+				include: parents,
+				per_page: parents.length,
+			} );
+		},
+		[ parents ]
+	);
+	// Update the `value` state only after the selectors are resolved
+	// to avoid emptying the input when we're changing parents.
+	useEffect( () => {
+		if ( ! parents?.length ) {
+			setValue( EMPTY_ARRAY );
+		}
+		if ( ! currentParents?.length ) return;
+		const currentParentsInfo = getEntitiesInfo(
+			mapToIHasNameAndId( currentParents, 'title.rendered' )
+		);
+		// Returns only the existing entity ids. This prevents the component
+		// from crashing in the editor, when non existing ids are provided.
+		const sanitizedValue = parents.reduce( ( accumulator, id ) => {
+			const entity = currentParentsInfo.mapById[ id ];
+			if ( entity ) {
+				accumulator.push( {
+					id,
+					value: entity.name,
+				} );
+			}
+			return accumulator;
+		}, [] );
+		setValue( sanitizedValue );
+	}, [ parents, currentParents ] );
+
+	const entitiesInfo = useMemo( () => {
+		if ( ! searchResults?.length ) return EMPTY_ARRAY;
+		return getEntitiesInfo(
+			mapToIHasNameAndId( searchResults, 'title.rendered' )
+		);
+	}, [ searchResults ] );
+	// Update suggestions only when the query has resolved.
+	useEffect( () => {
+		if ( ! searchHasResolved ) return;
+		setSuggestions( entitiesInfo.names );
+	}, [ entitiesInfo.names, searchHasResolved ] );
+
+	const getIdByValue = ( entitiesMappedByName, entity ) => {
+		const id = entity?.id || entitiesMappedByName?.[ entity ]?.id;
+		if ( id ) return id;
+	};
+	const onParentChange = ( newValue ) => {
+		const ids = Array.from(
+			newValue.reduce( ( accumulator, entity ) => {
+				// Verify that new values point to existing entities.
+				const id = getIdByValue( entitiesInfo.mapByName, entity );
+				if ( id ) accumulator.add( id );
+				return accumulator;
+			}, new Set() )
+		);
+		setSuggestions( EMPTY_ARRAY );
+		onChange( { parents: ids } );
+	};
+	return (
+		<FormTokenField
+			label={ __( 'Parents' ) }
+			value={ value }
+			onInputChange={ debouncedSearch }
+			suggestions={ suggestions }
+			onChange={ onParentChange }
+		/>
+	);
+}
+
+export default ParentControl;

package/src/query/edit/inspector-controls/sticky-control.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const stickyOptions = [
+	{ label: __( 'Include' ), value: '' },
+	{ label: __( 'Exclude' ), value: 'exclude' },
+	{ label: __( 'Only' ), value: 'only' },
+];
+
+export default function StickyControl( { value, onChange } ) {
+	return (
+		<SelectControl
+			label={ __( 'Sticky posts' ) }
+			options={ stickyOptions }
+			value={ value }
+			onChange={ onChange }
+			help={ __(
+				'Blog posts can be "stickied", a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published.'
+			) }
+		/>
+	);
+}

package/src/query/utils.js

@@ -1,9 +1,15 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * @typedef IHasNameAndId
@@ -47,6 +53,22 @@ export const getEntitiesInfo = ( entities ) => {
 	};
 };
 
+/**
+ * Helper util to map records to add a `name` prop from a
+ * provided path, in order to handle all entities in the same
+ * fashion(implementing`IHasNameAndId` interface).
+ *
+ * @param {Object[]} entities The array of entities.
+ * @param {string}   path     The path to map a `name` property from the entity.
+ * @return {IHasNameAndId[]} An array of enitities that now implement the `IHasNameAndId` interface.
+ */
+export const mapToIHasNameAndId = ( entities, path ) => {
+	return ( entities || [] ).map( ( entity ) => ( {
+		...entity,
+		name: decodeEntities( get( entity, path ) ),
+	} ) );
+};
+
 /**
  * Returns a helper object that contains:
  * 1. An `options` object from the available post types, to be passed to a `SelectControl`.

package/src/query-title/index.js

@@ -9,7 +9,7 @@ import deprecated from './deprecated';
 /**
  * WordPress dependencies
  */
-import { queryTitle as icon } from '@wordpress/icons';
+import { title as icon } from '@wordpress/icons';
 
 const { name } = metadata;
 export { metadata, name };

package/src/query-title/variations.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { archiveTitle } from '@wordpress/icons';
+import { title } from '@wordpress/icons';
 const variations = [
 	{
 		isDefault: true,
@@ -11,7 +11,7 @@ const variations = [
 		description: __(
 			'Display the archive title based on the queried object.'
 		),
-		icon: archiveTitle,
+		icon: title,
 		attributes: {
 			type: 'archive',
 		},

package/src/quote/edit.js

@@ -14,7 +14,7 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { BlockQuotation } from '@wordpress/components';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
 
 const isWebPlatform = Platform.OS === 'web';
@@ -81,6 +81,7 @@ export default function QuoteEdit( {
 						createBlock( 'core/paragraph' )
 					}
 					textAlign={ align }
+					__unstableEmbedURLOnPaste
 				/>
 				{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
 					<RichText
@@ -102,7 +103,9 @@ export default function QuoteEdit( {
 						className="wp-block-quote__citation"
 						textAlign={ align }
 						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
 						}
 					/>
 				) }

package/src/quote/v2/edit.js

@@ -17,7 +17,7 @@ import {
 } from '@wordpress/block-editor';
 import { BlockQuotation } from '@wordpress/components';
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Platform, useEffect } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 
@@ -128,7 +128,9 @@ export default function QuoteEdit( {
 						}
 						className="wp-block-quote__citation"
 						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
 						}
 						{ ...( ! isWebPlatform ? { textAlign: align } : {} ) }
 					/>

package/src/search/edit.js

@@ -217,6 +217,7 @@ export default function SearchEdit( {
 
 		return (
 			<input
+				type="search"
 				className={ textFieldClasses }
 				style={ textFieldStyles }
 				aria-label={ __( 'Optional placeholder text' ) }

package/src/search/index.php

@@ -86,7 +86,7 @@ function render_block_core_search( $attributes ) {
 			$button_classes .= ' has-icon';
 
 			$button_internal_markup =
-				'<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24">
+				'<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
 					<path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
 				</svg>';
 		}

package/src/separator/editor.scss

@@ -7,5 +7,6 @@
 	// due to the way that color block supports adds additional background color styles.
 	&.wp-block-separator.is-style-dots {
 		background: none !important;
+		border: none;
 	}
 }

package/src/site-logo/edit.js

@@ -469,7 +469,7 @@ export default function LogoEdit( {
 
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
-		createErrorNotice( message[ 2 ], { type: 'snackbar' } );
+		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
 	const controls = canUserEdit && logoUrl && (

package/src/table/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import {
 	InspectorControls,
 	BlockControls,
@@ -40,7 +40,7 @@ import {
 	tableRowDelete,
 	table,
 } from '@wordpress/icons';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -105,6 +105,9 @@ function TableEdit( {
 	const colorProps = useColorProps( attributes );
 	const borderProps = useBorderProps( attributes );
 
+	const tableRef = useRef();
+	const [ hasTableCreated, setHasTableCreated ] = useState( false );
+
 	/**
 	 * Updates the initial column count used for table creation.
 	 *
@@ -137,6 +140,7 @@ function TableEdit( {
 				columnCount: parseInt( initialColumnCount, 10 ) || 2,
 			} )
 		);
+		setHasTableCreated( true );
 	}
 
 	/**
@@ -341,6 +345,15 @@ function TableEdit( {
 		}
 	}, [ isSelected ] );
 
+	useEffect( () => {
+		if ( hasTableCreated ) {
+			tableRef?.current
+				?.querySelector( 'td[contentEditable="true"]' )
+				?.focus();
+			setHasTableCreated( false );
+		}
+	}, [ hasTableCreated ] );
+
 	const sections = [ 'head', 'body', 'foot' ].filter(
 		( name ) => ! isEmptyTableSection( attributes[ name ] )
 	);
@@ -426,7 +439,7 @@ function TableEdit( {
 	const isEmpty = ! sections.length;
 
 	return (
-		<figure { ...useBlockProps() }>
+		<figure { ...useBlockProps( { ref: tableRef } ) }>
 			{ ! isEmpty && (
 				<>
 					<BlockControls group="block">
@@ -505,7 +518,9 @@ function TableEdit( {
 					// Deselect the selected table cell when the caption is focused.
 					unstableOnFocus={ () => setSelectedCell() }
 					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter( createBlock( 'core/paragraph' ) )
+						insertBlocksAfter(
+							createBlock( getDefaultBlockName() )
+						)
 					}
 				/>
 			) }

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

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": true,
 	"name": "core/table-of-contents",
 	"title": "Table of Contents",
 	"category": "layout",
@@ -8,13 +9,19 @@
 	"keywords": [ "document outline", "summary" ],
 	"textdomain": "default",
 	"attributes": {
+		"headings": {
+			"type": "array",
+			"items": {
+				"type": "object"
+			}
+		},
 		"onlyIncludeCurrentPage": {
 			"type": "boolean",
 			"default": false
 		}
 	},
-	"usesContext": [ "postId" ],
 	"supports": {
 		"html": false
-	}
+	},
+	"example": {}
 }