@wordpress/block-editor 12.3.5 → 12.3.7

package/src/components/link-control/search-results.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden, MenuGroup } from '@wordpress/components';
 
 /**
  * External dependencies
@@ -72,59 +72,61 @@ export default function LinkControlSearchResults( {
 				className={ resultsListClasses }
 				aria-labelledby={ searchResultsLabelId }
 			>
-				{ suggestions.map( ( suggestion, index ) => {
-					if (
-						shouldShowCreateSuggestion &&
-						CREATE_TYPE === suggestion.type
-					) {
+				<MenuGroup>
+					{ suggestions.map( ( suggestion, index ) => {
+						if (
+							shouldShowCreateSuggestion &&
+							CREATE_TYPE === suggestion.type
+						) {
+							return (
+								<LinkControlSearchCreate
+									searchTerm={ currentInputValue }
+									buttonText={ createSuggestionButtonText }
+									onClick={ () =>
+										handleSuggestionClick( suggestion )
+									}
+									// Intentionally only using `type` here as
+									// the constant is enough to uniquely
+									// identify the single "CREATE" suggestion.
+									key={ suggestion.type }
+									itemProps={ buildSuggestionItemProps(
+										suggestion,
+										index
+									) }
+									isSelected={ index === selectedSuggestion }
+								/>
+							);
+						}
+
+						// If we're not handling "Create" suggestions above then
+						// we don't want them in the main results so exit early.
+						if ( CREATE_TYPE === suggestion.type ) {
+							return null;
+						}
+
 						return (
-							<LinkControlSearchCreate
-								searchTerm={ currentInputValue }
-								buttonText={ createSuggestionButtonText }
-								onClick={ () =>
-									handleSuggestionClick( suggestion )
-								}
-								// Intentionally only using `type` here as
-								// the constant is enough to uniquely
-								// identify the single "CREATE" suggestion.
-								key={ suggestion.type }
+							<LinkControlSearchItem
+								key={ `${ suggestion.id }-${ suggestion.type }` }
 								itemProps={ buildSuggestionItemProps(
 									suggestion,
 									index
 								) }
+								suggestion={ suggestion }
+								index={ index }
+								onClick={ () => {
+									handleSuggestionClick( suggestion );
+								} }
 								isSelected={ index === selectedSuggestion }
+								isURL={ LINK_ENTRY_TYPES.includes(
+									suggestion.type
+								) }
+								searchTerm={ currentInputValue }
+								shouldShowType={ shouldShowSuggestionsTypes }
+								isFrontPage={ suggestion?.isFrontPage }
 							/>
 						);
-					}
-
-					// If we're not handling "Create" suggestions above then
-					// we don't want them in the main results so exit early.
-					if ( CREATE_TYPE === suggestion.type ) {
-						return null;
-					}
-
-					return (
-						<LinkControlSearchItem
-							key={ `${ suggestion.id }-${ suggestion.type }` }
-							itemProps={ buildSuggestionItemProps(
-								suggestion,
-								index
-							) }
-							suggestion={ suggestion }
-							index={ index }
-							onClick={ () => {
-								handleSuggestionClick( suggestion );
-							} }
-							isSelected={ index === selectedSuggestion }
-							isURL={ LINK_ENTRY_TYPES.includes(
-								suggestion.type
-							) }
-							searchTerm={ currentInputValue }
-							shouldShowType={ shouldShowSuggestionsTypes }
-							isFrontPage={ suggestion?.isFrontPage }
-						/>
-					);
-				} ) }
+					} ) }
+				</MenuGroup>
 			</div>
 		</div>
 	);

package/src/components/link-control/style.scss

@@ -41,6 +41,7 @@ $preview-image-height: 140px;
 // Provides positioning context for reset button. Without this then when an
 // error notice is displayed the input's reset button is incorrectly positioned.
 .block-editor-link-control__search-input-wrapper {
+	margin-bottom: $grid-unit-10;
 	position: relative;
 }
 
@@ -87,36 +88,9 @@ $preview-image-height: 140px;
 	order: 20;
 }
 
-.block-editor-link-control__search-results-wrapper {
-	position: relative;
-
-	&::before,
-	&::after {
-		content: "";
-		position: absolute;
-		left: -1px;
-		right: $grid-unit-20; // avoid overlaying scrollbars
-		display: block;
-		pointer-events: none;
-		z-index: 100;
-	}
-
-	&::before {
-		height: $grid-unit-20 * 0.5;
-		top: 0;
-		bottom: auto;
-	}
-
-	&::after {
-		height: $grid-unit-20;
-		bottom: 0;
-		top: auto;
-	}
-}
-
 .block-editor-link-control__search-results {
-	margin: 0;
-	padding: $grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20 * 0.5;
+	margin-top: -$grid-unit-20;
+	padding: $grid-unit-10;
 	max-height: 200px;
 	overflow-y: auto; // allow results list to scroll
 
@@ -126,39 +100,35 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__search-item {
-	position: relative;
-	display: flex;
-	align-items: flex-start; // when link text is very long it is important this indicator remains visible and thus should be aligned top.
-	font-size: $default-font-size;
-	cursor: pointer;
-	background: $white;
-	width: 100%;
-	border: none;
-	text-align: left;
-	padding: $grid-unit-15 $grid-unit-20;
-	border-radius: 2px;
-	height: auto;
 
-	&:hover,
-	&:focus {
-		background-color: $gray-100;
+	&.components-button.components-menu-item__button {
+		height: auto;
+		text-align: left;
+	}
 
-		.block-editor-link-control__search-item-type {
-			background: $white;
+	.components-menu-item__item {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		// Inline block required to preserve white space
+		// between `<mark>` elements and text nodes.
+		display: inline-block;
+		width: 100%;
+
+		mark {
+			font-weight: 600;
+			color: inherit;
+			background-color: transparent;
 		}
 	}
 
-	// The added specificity is needed to override.
-	&:focus:not(:disabled) {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+	.components-menu-item__shortcut {
+		color: $gray-700;
+		text-transform: capitalize;
+		white-space: nowrap; // tags shouldn't go over two lines.
 	}
 
-	&.is-selected {
+	&[aria-selected] {
 		background: $gray-100;
-
-		.block-editor-link-control__search-item-type {
-			background: $white;
-		}
 	}
 
 	&.is-current {
@@ -198,7 +168,6 @@ $preview-image-height: 140px;
 
 	.block-editor-link-control__search-item-icon {
 		position: relative;
-		top: 0.2em;
 		margin-right: $grid-unit-10;
 		max-height: 24px;
 		flex-shrink: 0;
@@ -217,18 +186,6 @@ $preview-image-height: 140px;
 		max-height: 32px;
 	}
 
-	.block-editor-link-control__search-item-info,
-	.block-editor-link-control__search-item-title {
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-		.components-external-link__icon {
-			position: absolute;
-			right: 0;
-			margin-top: 0;
-		}
-	}
-
 	.block-editor-link-control__search-item-title {
 		display: block;
 		margin-bottom: 0.2em;
@@ -236,7 +193,7 @@ $preview-image-height: 140px;
 		position: relative;
 
 		mark {
-			font-weight: 700;
+			font-weight: 600;
 			color: inherit;
 			background-color: transparent;
 		}
@@ -250,28 +207,6 @@ $preview-image-height: 140px;
 		}
 	}
 
-	.block-editor-link-control__search-item-info {
-		display: block;
-		color: $gray-700;
-		font-size: 0.9em;
-		line-height: 1.3;
-	}
-
-	.block-editor-link-control__search-item-error-notice {
-		font-style: italic;
-		font-size: 1.1em;
-	}
-
-	.block-editor-link-control__search-item-type {
-		display: block;
-		padding: 3px 6px;
-		margin-left: auto;
-		font-size: 0.9em;
-		background-color: $gray-100;
-		border-radius: 2px;
-		white-space: nowrap; // tags shouldn't go over two lines.
-	}
-
 	.block-editor-link-control__search-item-description {
 		padding-top: 12px;
 		margin: 0;
@@ -411,11 +346,6 @@ $preview-image-height: 140px;
 	}
 }
 
-// Specificity override
-.block-editor-link-control__search-results div[role="menu"] > .block-editor-link-control__search-item.block-editor-link-control__search-item {
-	padding: 10px;
-}
-
 .block-editor-link-control__drawer {
 	display: flex; // allow for ordering.
 	order: 30;

package/src/components/link-control/test/index.js

@@ -478,16 +478,16 @@ describe( 'Searching for a link', () => {
 			// The fallback URL suggestion should not be shown when input is not URL-like.
 			expect(
 				searchResultElements[ searchResultElements.length - 1 ]
-			).not.toHaveTextContent( 'URL' );
+			).not.toHaveTextContent( 'Press ENTER to add this link' );
 		}
 	);
 
 	it.each( [
-		[ 'https://wordpress.org', 'URL' ],
-		[ 'http://wordpress.org', 'URL' ],
-		[ 'www.wordpress.org', 'URL' ],
-		[ 'wordpress.org', 'URL' ],
-		[ 'ftp://wordpress.org', 'URL' ],
+		[ 'https://wordpress.org', 'link' ],
+		[ 'http://wordpress.org', 'link' ],
+		[ 'www.wordpress.org', 'link' ],
+		[ 'wordpress.org', 'link' ],
+		[ 'ftp://wordpress.org', 'link' ],
 		[ 'mailto:hello@wordpress.org', 'mailto' ],
 		[ 'tel:123456789', 'tel' ],
 		[ '#internal', 'internal' ],
@@ -667,7 +667,6 @@ describe( 'Manual link entry', () => {
 
 			expect( searchResultElements ).toBeVisible();
 			expect( searchResultElements ).toHaveTextContent( searchTerm );
-			expect( searchResultElements ).toHaveTextContent( 'URL' );
 			expect( searchResultElements ).toHaveTextContent(
 				'Press ENTER to add this link'
 			);

package/src/components/rich-text/content.js

@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { RawHTML } from '@wordpress/element';
-import {
-	children as childrenSource,
-	getSaveElement,
-	__unstableGetBlockProps as getBlockProps,
-} from '@wordpress/blocks';
+import { children as childrenSource } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 
 /**
@@ -42,44 +38,3 @@ export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
 
 	return content;
 };
-
-Content.__unstableIsRichTextContent = {};
-
-function findContent( blocks, richTextValues = [] ) {
-	if ( ! Array.isArray( blocks ) ) {
-		blocks = [ blocks ];
-	}
-
-	for ( const block of blocks ) {
-		if (
-			block?.type?.__unstableIsRichTextContent ===
-			Content.__unstableIsRichTextContent
-		) {
-			richTextValues.push( block.props.value );
-			continue;
-		}
-
-		if ( block?.props?.children ) {
-			findContent( block.props.children, richTextValues );
-		}
-	}
-
-	return richTextValues;
-}
-
-function _getSaveElement( { name, attributes, innerBlocks } ) {
-	return getSaveElement(
-		name,
-		attributes,
-		innerBlocks.map( _getSaveElement )
-	);
-}
-
-export function getRichTextValues( blocks = [] ) {
-	getBlockProps.skipFilters = true;
-	const values = findContent(
-		( Array.isArray( blocks ) ? blocks : [ blocks ] ).map( _getSaveElement )
-	);
-	getBlockProps.skipFilters = false;
-	return values;
-}

package/src/components/rich-text/get-rich-text-values.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML, StrictMode, Fragment } from '@wordpress/element';
+import {
+	getSaveElement,
+	__unstableGetBlockProps as getBlockProps,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import InnerBlocks from '../inner-blocks';
+import { Content } from './content';
+
+/*
+ * This function is similar to `@wordpress/element`'s `renderToString` function,
+ * except that it does not render the elements to a string, but instead collects
+ * the values of all rich text `Content` elements.
+ */
+function addValuesForElement( element, ...args ) {
+	if ( null === element || undefined === element || false === element ) {
+		return;
+	}
+
+	if ( Array.isArray( element ) ) {
+		return addValuesForElements( element, ...args );
+	}
+
+	switch ( typeof element ) {
+		case 'string':
+		case 'number':
+			return;
+	}
+
+	const { type, props } = element;
+
+	switch ( type ) {
+		case StrictMode:
+		case Fragment:
+			return addValuesForElements( props.children, ...args );
+		case RawHTML:
+			return;
+		case InnerBlocks.Content:
+			return addValuesForBlocks( ...args );
+		case Content:
+			const [ values ] = args;
+			values.push( props.value );
+			return;
+	}
+
+	switch ( typeof type ) {
+		case 'string':
+			if ( typeof props.children !== 'undefined' ) {
+				return addValuesForElements( props.children, ...args );
+			}
+			return;
+		case 'function':
+			if (
+				type.prototype &&
+				typeof type.prototype.render === 'function'
+			) {
+				return addValuesForElement(
+					new type( props ).render(),
+					...args
+				);
+			}
+
+			return addValuesForElement( type( props ), ...args );
+	}
+}
+
+function addValuesForElements( children, ...args ) {
+	children = Array.isArray( children ) ? children : [ children ];
+
+	for ( let i = 0; i < children.length; i++ ) {
+		addValuesForElement( children[ i ], ...args );
+	}
+}
+
+function addValuesForBlocks( values, blocks ) {
+	for ( let i = 0; i < blocks.length; i++ ) {
+		const { name, attributes, innerBlocks } = blocks[ i ];
+		const saveElement = getSaveElement( name, attributes );
+		addValuesForElement( saveElement, values, innerBlocks );
+	}
+}
+
+export function getRichTextValues( blocks = [] ) {
+	getBlockProps.skipFilters = true;
+	const values = [];
+	addValuesForBlocks( values, blocks );
+	getBlockProps.skipFilters = false;
+	return values;
+}

package/src/components/use-block-display-information/index.js

@@ -67,8 +67,11 @@ export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {
 			if ( ! clientId ) return null;
-			const { getBlockName, getBlockAttributes } =
-				select( blockEditorStore );
+			const {
+				getBlockName,
+				getBlockAttributes,
+				__experimentalGetReusableBlockTitle,
+			} = select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const blockName = getBlockName( clientId );
@@ -76,12 +79,16 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! blockType ) return null;
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
-			const isSynced =
-				isReusableBlock( blockType ) || isTemplatePart( blockType );
+			const isReusable = isReusableBlock( blockType );
+			const resusableTitle = isReusable
+				? __experimentalGetReusableBlockTitle( attributes.ref )
+				: undefined;
+			const title = resusableTitle || blockType.title;
+			const isSynced = isReusable || isTemplatePart( blockType );
 			const positionLabel = getPositionTypeLabel( attributes );
 			const blockTypeInfo = {
 				isSynced,
-				title: blockType.title,
+				title,
 				icon: blockType.icon,
 				description: blockType.description,
 				anchor: attributes?.anchor,

package/src/hooks/margin.js

@@ -23,7 +23,10 @@ export function MarginVisualizer( { clientId, attributes, forceShow } ) {
 	const margin = attributes?.style?.spacing?.margin;
 
 	useEffect( () => {
-		if ( ! blockElement ) {
+		if (
+			! blockElement ||
+			null === blockElement.ownerDocument.defaultView
+		) {
 			return;
 		}
 

package/src/hooks/padding.js

@@ -23,7 +23,10 @@ export function PaddingVisualizer( { clientId, attributes, forceShow } ) {
 	const padding = attributes?.style?.spacing?.padding;
 
 	useEffect( () => {
-		if ( ! blockElement ) {
+		if (
+			! blockElement ||
+			null === blockElement.ownerDocument.defaultView
+		) {
 			return;
 		}
 

package/src/private-apis.js

@@ -4,7 +4,7 @@
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
-import { getRichTextValues } from './components/rich-text/content';
+import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';

package/src/store/selectors.js

@@ -2018,7 +2018,7 @@ export const getInserterItems = createSelector(
 				title: reusableBlock.title.raw,
 				icon,
 				category: 'reusable',
-				keywords: [],
+				keywords: [ 'reusable' ],
 				isDisabled: false,
 				utility: 1, // Deprecated.
 				frecency,

package/src/store/test/selectors.js

@@ -3351,7 +3351,7 @@ describe( 'selectors', () => {
 				id: 'core/block/1',
 				initialAttributes: { ref: 1 },
 				isDisabled: false,
-				keywords: [],
+				keywords: [ 'reusable' ],
 				name: 'core/block',
 				syncStatus: undefined,
 				title: 'Reusable Block 1',