@wordpress/block-editor 12.3.5 → 12.3.7

package/build-style/style-rtl.css

@@ -1897,6 +1897,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 
 .block-editor-link-control__search-input-wrapper {
+  margin-bottom: 8px;
   position: relative;
 }
 
@@ -1973,32 +1974,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   order: 20;
 }
 
-.block-editor-link-control__search-results-wrapper {
-  position: relative;
-}
-.block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
-  content: "";
-  position: absolute;
-  right: -1px;
-  left: 16px;
-  display: block;
-  pointer-events: none;
-  z-index: 100;
-}
-.block-editor-link-control__search-results-wrapper::before {
-  height: 8px;
-  top: 0;
-  bottom: auto;
-}
-.block-editor-link-control__search-results-wrapper::after {
-  height: 16px;
-  bottom: 0;
-  top: auto;
-}
-
 .block-editor-link-control__search-results {
-  margin: 0;
-  padding: 8px 16px 8px;
+  margin-top: -16px;
+  padding: 8px;
   max-height: 200px;
   overflow-y: auto;
 }
@@ -2006,35 +1984,29 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   opacity: 0.2;
 }
 
-.block-editor-link-control__search-item {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  font-size: 13px;
-  cursor: pointer;
-  background: #fff;
-  width: 100%;
-  border: none;
-  text-align: right;
-  padding: 12px 16px;
-  border-radius: 2px;
+.block-editor-link-control__search-item.components-button.components-menu-item__button {
   height: auto;
+  text-align: right;
 }
-.block-editor-link-control__search-item:hover, .block-editor-link-control__search-item:focus {
-  background-color: #f0f0f0;
+.block-editor-link-control__search-item .components-menu-item__item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  width: 100%;
 }
-.block-editor-link-control__search-item:hover .block-editor-link-control__search-item-type, .block-editor-link-control__search-item:focus .block-editor-link-control__search-item-type {
-  background: #fff;
+.block-editor-link-control__search-item .components-menu-item__item mark {
+  font-weight: 600;
+  color: inherit;
+  background-color: transparent;
 }
-.block-editor-link-control__search-item:focus:not(:disabled) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+.block-editor-link-control__search-item .components-menu-item__shortcut {
+  color: #757575;
+  text-transform: capitalize;
+  white-space: nowrap;
 }
-.block-editor-link-control__search-item.is-selected {
+.block-editor-link-control__search-item[aria-selected] {
   background: #f0f0f0;
 }
-.block-editor-link-control__search-item.is-selected .block-editor-link-control__search-item-type {
-  background: #fff;
-}
 .block-editor-link-control__search-item.is-current {
   flex-direction: column;
   background: transparent;
@@ -2063,7 +2035,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
   position: relative;
-  top: 0.2em;
   margin-left: 8px;
   max-height: 24px;
   flex-shrink: 0;
@@ -2079,17 +2050,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   width: 32px;
   max-height: 32px;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-info,
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-info .components-external-link__icon,
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title .components-external-link__icon {
-  position: absolute;
-  left: 0;
-  margin-top: 0;
-}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
   display: block;
   margin-bottom: 0.2em;
@@ -2097,7 +2057,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   position: relative;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
-  font-weight: 700;
+  font-weight: 600;
   color: inherit;
   background-color: transparent;
 }
@@ -2107,25 +2067,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title svg {
   display: none;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-info {
-  display: block;
-  color: #757575;
-  font-size: 0.9em;
-  line-height: 1.3;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-error-notice {
-  font-style: italic;
-  font-size: 1.1em;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-type {
-  display: block;
-  padding: 3px 6px;
-  margin-right: auto;
-  font-size: 0.9em;
-  background-color: #f0f0f0;
-  border-radius: 2px;
-  white-space: nowrap;
-}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-description {
   padding-top: 12px;
   margin: 0;
@@ -2240,10 +2181,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   top: 0;
 }
 
-.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;
   order: 30;

package/build-style/style.css

@@ -1898,6 +1898,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 
 .block-editor-link-control__search-input-wrapper {
+  margin-bottom: 8px;
   position: relative;
 }
 
@@ -1974,32 +1975,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   order: 20;
 }
 
-.block-editor-link-control__search-results-wrapper {
-  position: relative;
-}
-.block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
-  content: "";
-  position: absolute;
-  left: -1px;
-  right: 16px;
-  display: block;
-  pointer-events: none;
-  z-index: 100;
-}
-.block-editor-link-control__search-results-wrapper::before {
-  height: 8px;
-  top: 0;
-  bottom: auto;
-}
-.block-editor-link-control__search-results-wrapper::after {
-  height: 16px;
-  bottom: 0;
-  top: auto;
-}
-
 .block-editor-link-control__search-results {
-  margin: 0;
-  padding: 8px 16px 8px;
+  margin-top: -16px;
+  padding: 8px;
   max-height: 200px;
   overflow-y: auto;
 }
@@ -2007,35 +1985,29 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   opacity: 0.2;
 }
 
-.block-editor-link-control__search-item {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  font-size: 13px;
-  cursor: pointer;
-  background: #fff;
-  width: 100%;
-  border: none;
-  text-align: left;
-  padding: 12px 16px;
-  border-radius: 2px;
+.block-editor-link-control__search-item.components-button.components-menu-item__button {
   height: auto;
+  text-align: left;
 }
-.block-editor-link-control__search-item:hover, .block-editor-link-control__search-item:focus {
-  background-color: #f0f0f0;
+.block-editor-link-control__search-item .components-menu-item__item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  width: 100%;
 }
-.block-editor-link-control__search-item:hover .block-editor-link-control__search-item-type, .block-editor-link-control__search-item:focus .block-editor-link-control__search-item-type {
-  background: #fff;
+.block-editor-link-control__search-item .components-menu-item__item mark {
+  font-weight: 600;
+  color: inherit;
+  background-color: transparent;
 }
-.block-editor-link-control__search-item:focus:not(:disabled) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+.block-editor-link-control__search-item .components-menu-item__shortcut {
+  color: #757575;
+  text-transform: capitalize;
+  white-space: nowrap;
 }
-.block-editor-link-control__search-item.is-selected {
+.block-editor-link-control__search-item[aria-selected] {
   background: #f0f0f0;
 }
-.block-editor-link-control__search-item.is-selected .block-editor-link-control__search-item-type {
-  background: #fff;
-}
 .block-editor-link-control__search-item.is-current {
   flex-direction: column;
   background: transparent;
@@ -2064,7 +2036,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
   position: relative;
-  top: 0.2em;
   margin-right: 8px;
   max-height: 24px;
   flex-shrink: 0;
@@ -2080,17 +2051,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   width: 32px;
   max-height: 32px;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-info,
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-info .components-external-link__icon,
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title .components-external-link__icon {
-  position: absolute;
-  right: 0;
-  margin-top: 0;
-}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
   display: block;
   margin-bottom: 0.2em;
@@ -2098,7 +2058,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   position: relative;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
-  font-weight: 700;
+  font-weight: 600;
   color: inherit;
   background-color: transparent;
 }
@@ -2108,25 +2068,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title svg {
   display: none;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-info {
-  display: block;
-  color: #757575;
-  font-size: 0.9em;
-  line-height: 1.3;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-error-notice {
-  font-style: italic;
-  font-size: 1.1em;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-type {
-  display: block;
-  padding: 3px 6px;
-  margin-left: auto;
-  font-size: 0.9em;
-  background-color: #f0f0f0;
-  border-radius: 2px;
-  white-space: nowrap;
-}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-description {
   padding-top: 12px;
   margin: 0;
@@ -2241,10 +2182,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   top: 0;
 }
 
-.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;
   order: 30;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.3.5",
+	"version": "12.3.7",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,7 +38,7 @@
 		"@wordpress/api-fetch": "^6.32.1",
 		"@wordpress/blob": "^3.35.1",
 		"@wordpress/blocks": "^12.12.3",
-		"@wordpress/components": "^25.1.5",
+		"@wordpress/components": "^25.1.7",
 		"@wordpress/compose": "^6.12.1",
 		"@wordpress/data": "^9.5.3",
 		"@wordpress/date": "^4.35.1",
@@ -54,9 +54,9 @@
 		"@wordpress/keyboard-shortcuts": "^4.12.3",
 		"@wordpress/keycodes": "^3.35.1",
 		"@wordpress/notices": "^4.3.3",
-		"@wordpress/preferences": "^3.12.5",
+		"@wordpress/preferences": "^3.12.7",
 		"@wordpress/private-apis": "^0.17.1",
-		"@wordpress/rich-text": "^6.12.3",
+		"@wordpress/rich-text": "^6.12.4",
 		"@wordpress/shortcode": "^3.35.1",
 		"@wordpress/style-engine": "^1.18.1",
 		"@wordpress/token-list": "^2.35.1",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3eeb607ebb76c3bf06cb8acb462f0dc068f340f9"
+	"gitHead": "5a52ea1ed29bbf8f3ead96f83b17d2c1cf84c880"
 }

package/src/components/block-draggable/index.js

@@ -22,16 +22,25 @@ const BlockDraggable = ( {
 } ) => {
 	const { srcRootClientId, isDraggable, icon } = useSelect(
 		( select ) => {
-			const { canMoveBlocks, getBlockRootClientId, getBlockName } =
-				select( blockEditorStore );
-			const { getBlockType } = select( blocksStore );
+			const {
+				canMoveBlocks,
+				getBlockRootClientId,
+				getBlockName,
+				getBlockAttributes,
+			} = select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 			const blockName = getBlockName( clientIds[ 0 ] );
+			const variation = getActiveBlockVariation(
+				blockName,
+				getBlockAttributes( clientIds[ 0 ] )
+			);
 
 			return {
 				srcRootClientId: rootClientId,
 				isDraggable: canMoveBlocks( clientIds, rootClientId ),
-				icon: getBlockType( blockName )?.icon,
+				icon: variation?.icon || getBlockType( blockName )?.icon,
 			};
 		},
 		[ clientIds ]

package/src/components/iframe/index.js

@@ -11,7 +11,6 @@ import {
 	createPortal,
 	forwardRef,
 	useMemo,
-	useReducer,
 	useEffect,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -78,29 +77,6 @@ function bubbleEvents( doc ) {
 	}
 }
 
-function useParsedAssets( html ) {
-	return useMemo( () => {
-		const doc = document.implementation.createHTMLDocument( '' );
-		doc.body.innerHTML = html;
-		return Array.from( doc.body.children );
-	}, [ html ] );
-}
-
-async function loadScript( head, { id, src } ) {
-	return new Promise( ( resolve, reject ) => {
-		const script = head.ownerDocument.createElement( 'script' );
-		script.id = id;
-		if ( src ) {
-			script.src = src;
-			script.onload = () => resolve();
-			script.onerror = () => reject();
-		} else {
-			resolve();
-		}
-		head.appendChild( script );
-	} );
-}
-
 function Iframe( {
 	contentRef,
 	children,
@@ -112,21 +88,22 @@ function Iframe( {
 	forwardedRef: ref,
 	...props
 } ) {
-	const assets = useSelect(
+	const { styles = '', scripts = '' } = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings().__unstableResolvedAssets,
 		[]
 	);
-	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const compatStyles = useCompatibilityStyles();
-	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
 	const setRef = useRefEffect( ( node ) => {
+		node._load = () => {
+			setIframeDocument( node.contentDocument );
+		};
 		let iFrameDocument;
 		// Prevent the default browser action for files dropped outside of dropzones.
 		function preventFileDropDefault( event ) {
@@ -138,7 +115,6 @@ function Iframe( {
 			iFrameDocument = contentDocument;
 
 			bubbleEvents( contentDocument );
-			setIframeDocument( contentDocument );
 			clearerRef( documentElement );
 
 			// Ideally ALL classes that are added through get_body_class should
@@ -154,7 +130,6 @@ function Iframe( {
 			);
 
 			contentDocument.dir = ownerDocument.dir;
-			documentElement.removeChild( contentDocument.body );
 
 			for ( const compatStyle of compatStyles ) {
 				if ( contentDocument.getElementById( compatStyle.id ) ) {
@@ -199,35 +174,29 @@ function Iframe( {
 		};
 	}, [] );
 
-	const headRef = useRefEffect( ( element ) => {
-		scripts
-			.reduce(
-				( promise, script ) =>
-					promise.then( () => loadScript( element, script ) ),
-				Promise.resolve()
-			)
-			.finally( () => {
-				// When script are loaded, re-render blocks to allow them
-				// to initialise.
-				forceRender();
-			} );
-	}, [] );
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
 		contentRef,
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
-		headRef,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
 	// mode. Also preload the styles to avoid a flash of unstyled
 	// content.
-	const html =
-		'<!doctype html>' +
-		'<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>' +
-		( assets?.styles ?? '' );
+	const html = `<!doctype html>
+<html>
+	<head>
+		<script>window.frameElement._load()</script>
+		<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>
+		${ styles }
+		${ scripts }
+	</head>
+	<body>
+		<script>document.currentScript.parentElement.remove()</script>
+	</body>
+</html>`;
 
 	const [ src, cleanup ] = useMemo( () => {
 		const _src = URL.createObjectURL(

package/src/components/inserter/reusable-block-rename-hint.js

@@ -29,7 +29,7 @@ export default function ReusableBlocksRenameHint() {
 		<div ref={ ref } className="reusable-blocks-menu-items__rename-hint">
 			<div className="reusable-blocks-menu-items__rename-hint-content">
 				{ __(
-					'Reusable blocks are now called patterns. A synced pattern will behave in exactly the same way as a reusable block.'
+					'Reusable blocks are now synced patterns. A synced pattern will behave in exactly the same way as a reusable block.'
 				) }
 			</div>
 			<Button

package/src/components/link-control/constants.js

@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
 // order to handle it as a unique case.
 export const CREATE_TYPE = '__CREATE__';
 export const TEL_TYPE = 'tel';
-export const URL_TYPE = 'URL';
+export const URL_TYPE = 'link';
 export const MAILTO_TYPE = 'mailto';
 export const INTERNAL_TYPE = 'internal';
 

package/src/components/link-control/search-create-button.js

@@ -1,21 +1,15 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { MenuItem } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
-import { Icon, plus } from '@wordpress/icons';
+import { plus } from '@wordpress/icons';
 
 export const LinkControlSearchCreate = ( {
 	searchTerm,
 	onClick,
 	itemProps,
-	isSelected,
 	buttonText,
 } ) => {
 	if ( ! searchTerm ) {
@@ -40,27 +34,15 @@ export const LinkControlSearchCreate = ( {
 	}
 
 	return (
-		<Button
+		<MenuItem
 			{ ...itemProps }
-			className={ classnames(
-				'block-editor-link-control__search-create block-editor-link-control__search-item',
-				{
-					'is-selected': isSelected,
-				}
-			) }
+			iconPosition="left"
+			icon={ plus }
+			className="block-editor-link-control__search-item"
 			onClick={ onClick }
 		>
-			<Icon
-				className="block-editor-link-control__search-item-icon"
-				icon={ plus }
-			/>
-
-			<span className="block-editor-link-control__search-item-header">
-				<span className="block-editor-link-control__search-item-title">
-					{ text }
-				</span>
-			</span>
-		</Button>
+			{ text }
+		</MenuItem>
 	);
 };
 

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

@@ -1,14 +1,8 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
-import { Button, TextHighlight } from '@wordpress/components';
+import { MenuItem, TextHighlight } from '@wordpress/components';
 import {
 	Icon,
 	globe,
@@ -19,6 +13,7 @@ import {
 	file,
 } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 
 const ICONS_MAP = {
 	post: postList,
@@ -52,50 +47,33 @@ function SearchItemIcon( { isURL, suggestion } ) {
 export const LinkControlSearchItem = ( {
 	itemProps,
 	suggestion,
-	isSelected = false,
+	searchTerm,
 	onClick,
 	isURL = false,
-	searchTerm = '',
 	shouldShowType = false,
 } ) => {
+	const info = isURL
+		? __( 'Press ENTER to add this link' )
+		: filterURLForDisplay( safeDecodeURI( suggestion?.url ) );
+
 	return (
-		<Button
+		<MenuItem
 			{ ...itemProps }
+			info={ info }
+			iconPosition="left"
+			icon={
+				<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />
+			}
 			onClick={ onClick }
-			className={ classnames( 'block-editor-link-control__search-item', {
-				'is-selected': isSelected,
-				'is-url': isURL,
-				'is-entity': ! isURL,
-			} ) }
+			shortcut={ shouldShowType && getVisualTypeName( suggestion ) }
+			className="block-editor-link-control__search-item"
 		>
-			<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />
-
-			<span className="block-editor-link-control__search-item-header">
-				<span className="block-editor-link-control__search-item-title">
-					<TextHighlight
-						// The component expects a plain text string.
-						text={ stripHTML( suggestion.title ) }
-						highlight={ searchTerm }
-					/>
-				</span>
-				<span
-					aria-hidden={ ! isURL }
-					className="block-editor-link-control__search-item-info"
-				>
-					{ ! isURL &&
-						( filterURLForDisplay(
-							safeDecodeURI( suggestion.url )
-						) ||
-							'' ) }
-					{ isURL && __( 'Press ENTER to add this link' ) }
-				</span>
-			</span>
-			{ shouldShowType && suggestion.type && (
-				<span className="block-editor-link-control__search-item-type">
-					{ getVisualTypeName( suggestion ) }
-				</span>
-			) }
-		</Button>
+			<TextHighlight
+				// The component expects a plain text string.
+				text={ stripHTML( suggestion.title ) }
+				highlight={ searchTerm }
+			/>
+		</MenuItem>
 	);
 };