@wordpress/block-editor 15.7.0 → 15.7.1-next.2f1c7c01b.0

package/src/components/block-variation-transforms/style.scss

@@ -1,49 +1,19 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/colors" as *;
 
-.block-editor-block-variation-transforms:where(fieldset) {
-	// Reset `fieldset` browser defaults.
-	border: 0;
-	padding: 0;
-	margin: 0;
-}
-
 .block-editor-block-variation-transforms {
 	box-sizing: border-box;
 	padding: 0 $grid-unit-20 $grid-unit-20 52px;
-	width: 100%;
-
-	.components-dropdown-menu__toggle {
-		border: $border-width solid $gray-700;
-		border-radius: $radius-small;
-		min-height: 30px;
-		width: 100%;
-		position: relative;
-		text-align: left;
-		justify-content: left;
-		padding: 6px 12px;
 
-		// For all button sizes allow sufficient space for the
-		// dropdown "arrow" icon to display.
-		&.components-dropdown-menu__toggle {
-			padding-right: $icon-size;
-		}
-
-		&:focus:not(:disabled) {
-			border-color: var(--wp-admin-theme-color);
-			box-shadow: 0 0 0 calc(var(--wp-admin-border-width-focus) - #{ $border-width }) var(--wp-admin-theme-color);
-		}
-
-		svg {
-			height: 100%;
-			padding: 0;
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
+	&:where(fieldset) {
+		// Reset `fieldset` browser defaults.
+		border: 0;
+		padding: 0;
+		margin: 0;
 	}
 }
 
-.block-editor-block-variation-transforms__popover .components-popover__content {
-	min-width: 230px;
+.block-editor-block-variation-transforms__button {
+	width: 100%;
+	justify-content: center;
 }

package/src/components/content-lock/index.js

@@ -1 +1 @@
-export { ModifyContentLockMenuItem } from './modify-content-lock-menu-item';
+export { ModifyContentOnlySectionMenuItem } from './modify-content-lock-menu-item';

package/src/components/content-lock/modify-content-lock-menu-item.js

@@ -12,42 +12,45 @@ import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 // The implementation of content locking is mainly in this file, although the mechanism
-// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
-// at block-editor/src/components/block-list/index.js.
+// to stop editing a content only section when an outside block is selected is in the component
+// `StopEditingContentOnlySectionOnOutsideSelect` at block-editor/src/components/block-list/index.js.
 // Besides the components on this file and the file referenced above the implementation
 // also includes artifacts on the store (actions, reducers, and selector).
 
-export function ModifyContentLockMenuItem( { clientId, onClose } ) {
-	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
-		( select ) => {
-			const {
-				getContentLockingParent,
-				getTemplateLock,
-				getTemporarilyEditingAsBlocks,
-			} = unlock( select( blockEditorStore ) );
-			return {
-				templateLock: getTemplateLock( clientId ),
-				isLockedByParent: !! getContentLockingParent( clientId ),
-				isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId,
-			};
-		},
-		[ clientId ]
-	);
+export function ModifyContentOnlySectionMenuItem( { clientId, onClose } ) {
+	const { templateLock, isLockedByParent, isEditingContentOnlySection } =
+		useSelect(
+			( select ) => {
+				const {
+					getContentLockingParent,
+					getTemplateLock,
+					getEditedContentOnlySection,
+				} = unlock( select( blockEditorStore ) );
+				return {
+					templateLock: getTemplateLock( clientId ),
+					isLockedByParent: !! getContentLockingParent( clientId ),
+					isEditingContentOnlySection:
+						getEditedContentOnlySection() === clientId,
+				};
+			},
+			[ clientId ]
+		);
 	const blockEditorActions = useDispatch( blockEditorStore );
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
-	if ( ! isContentLocked && ! isEditingAsBlocks ) {
+	if ( ! isContentLocked && ! isEditingContentOnlySection ) {
 		return null;
 	}
 
-	const { modifyContentLockBlock } = unlock( blockEditorActions );
-	const showStartEditingAsBlocks = ! isEditingAsBlocks && isContentLocked;
+	const { editContentOnlySection } = unlock( blockEditorActions );
+	const showStartEditingAsBlocks =
+		! isEditingContentOnlySection && isContentLocked;
 
 	return (
 		showStartEditingAsBlocks && (
 			<MenuItem
 				onClick={ () => {
-					modifyContentLockBlock( clientId );
+					editContentOnlySection( clientId );
 					onClose();
 				} }
 			>

package/src/components/iframe/index.js

@@ -342,9 +342,6 @@ function Iframe( {
 			>
 				{ iframeDocument &&
 					createPortal(
-						// We want to prevent React events from bubbling through the iframe
-						// we bubble these manually.
-						/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
 						<body
 							ref={ bodyRef }
 							className={ clsx(

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

@@ -49,13 +49,11 @@ import deprecated from '@wordpress/deprecated';
  *                                    providing a custom `settings` prop.
  */
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Custom settings values associated with a link.
  *
  * @typedef {{[setting:string]:any}} WPLinkControlSettingsValue
  */
-/* eslint-enable */
 
 /**
  * Custom settings values associated with a link.

package/src/components/list-view/expander.js

@@ -13,8 +13,6 @@ export default function ListViewExpander( { onClick } ) {
 		//
 		// We've mimicked this by adding an icon with aria-hidden set to true to hide this from the accessibility tree.
 		// For the current tree grid implementation, please do not try to make this a button.
-		//
-		// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
 		<span
 			className="block-editor-list-view__expander"
 			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }

package/src/components/media-replace-flow/index.js

@@ -257,7 +257,6 @@ const MediaReplaceFlow = ( {
 							: children }
 					</NavigableMenu>
 					{ onSelectURL && (
-						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
 						<form className="block-editor-media-flow__url-input">
 							<span className="block-editor-media-replace-flow__image-url-label">
 								{ __( 'Current media URL:' ) }

package/src/components/rich-text/index.native.js

@@ -414,8 +414,6 @@ export function RichTextWrapper(
 					preserveWhiteSpace,
 				} );
 
-				// Allows us to ask for this information when we get a report.
-				// eslint-disable-next-line no-console
 				window.console.log( 'Received items:\n\n', files );
 
 				if ( onReplace && isEmpty( value ) ) {

package/src/hooks/allowed-blocks.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { hasBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport, getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -64,3 +64,91 @@ addFilter(
 	'core/allowedBlocks/attribute',
 	addAttribute
 );
+
+/**
+ * Add transforms to preserve allowedBlocks on block transformations.
+ *
+ * @param {Object} result  The transformed block.
+ * @param {Array}  source  Original blocks transformed.
+ * @param {number} index   Index of the transformed block.
+ * @param {Array}  results All blocks that resulted from the transformation.
+ * @return {Object} Modified transformed block.
+ */
+export function addTransforms( result, source, index, results ) {
+	if ( ! hasBlockSupport( result.name, 'allowedBlocks' ) ) {
+		return result;
+	}
+
+	// If the condition verifies we are probably in the presence of a wrapping transform
+	// e.g: nesting paragraphs in a group or columns and in that case the attribute should not be kept.
+	if (
+		source.length !== 1 &&
+		results.length === 1 &&
+		result.innerBlocks.length === source.length
+	) {
+		return result;
+	}
+
+	// If we are transforming one block to multiple blocks or multiple blocks to one block,
+	// we ignore the attribute during the transform.
+	if (
+		( results.length === 1 && source.length > 1 ) ||
+		( results.length > 1 && source.length === 1 )
+	) {
+		return result;
+	}
+
+	// If we are transforming multiple blocks to multiple blocks with different counts,
+	// we ignore the attribute during the transform.
+	if (
+		results.length > 1 &&
+		source.length > 1 &&
+		results.length !== source.length
+	) {
+		return result;
+	}
+
+	// If the target block already has allowedBlocks, we don't need to preserve
+	// the source allowedBlocks.
+	if ( result.attributes.allowedBlocks ) {
+		return result;
+	}
+
+	const sourceAllowedBlocks = source[ index ]?.attributes?.allowedBlocks;
+
+	if ( ! sourceAllowedBlocks ) {
+		return result;
+	}
+
+	const blockType = getBlockType( result.name );
+	const destinationAllowedBlocks = blockType?.allowedBlocks || [];
+
+	if ( ! destinationAllowedBlocks.length ) {
+		return {
+			...result,
+			attributes: {
+				...result.attributes,
+				allowedBlocks: sourceAllowedBlocks,
+			},
+		};
+	}
+
+	// Filter out any source allowed blocks that are not defined in the destination allowed blocks.
+	const filteredSourceAllowedBlocks = sourceAllowedBlocks.filter( ( block ) =>
+		destinationAllowedBlocks.includes( block )
+	);
+
+	return {
+		...result,
+		attributes: {
+			...result.attributes,
+			allowedBlocks: filteredSourceAllowedBlocks,
+		},
+	};
+}
+
+addFilter(
+	'blocks.switchToBlockType.transformedBlock',
+	'core/allowedBlocks/addTransforms',
+	addTransforms
+);

package/src/hooks/block-bindings.js

@@ -449,7 +449,11 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 export default {
 	edit: BlockBindingsPanel,
 	attributeKeys: [ 'metadata' ],
-	hasSupport() {
-		return true;
+	hasSupport( name ) {
+		return ! [
+			'core/post-date',
+			'core/navigation-link',
+			'core/navigation-submenu',
+		].includes( name );
 	},
 };

package/src/hooks/content-lock-ui.js

@@ -14,44 +14,48 @@ import { BlockControls } from '../components';
 import { unlock } from '../lock-unlock';
 
 // The implementation of content locking is mainly in this file, although the mechanism
-// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
-// at block-editor/src/components/block-list/index.js.
+// to stop editing a content only section when an outside block is selected is in the component
+// `StopEditingContentOnlySectionOnOutsideSelect` at block-editor/src/components/block-list/index.js.
 // Besides the components on this file and the file referenced above the implementation
 // also includes artifacts on the store (actions, reducers, and selector).
 
 function ContentLockControlsPure( { clientId } ) {
-	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
-		( select ) => {
-			const {
-				getContentLockingParent,
-				getTemplateLock,
-				getTemporarilyEditingAsBlocks,
-			} = unlock( select( blockEditorStore ) );
-			return {
-				templateLock: getTemplateLock( clientId ),
-				isLockedByParent: !! getContentLockingParent( clientId ),
-				isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId,
-			};
-		},
-		[ clientId ]
-	);
+	const { templateLock, isLockedByParent, isEditingContentOnlySection } =
+		useSelect(
+			( select ) => {
+				const {
+					getContentLockingParent,
+					getTemplateLock,
+					getEditedContentOnlySection,
+				} = unlock( select( blockEditorStore ) );
+				return {
+					templateLock: getTemplateLock( clientId ),
+					isLockedByParent: !! getContentLockingParent( clientId ),
+					isEditingContentOnlySection:
+						getEditedContentOnlySection() === clientId,
+				};
+			},
+			[ clientId ]
+		);
 
-	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
+	const { stopEditingContentOnlySection } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
 
 	const stopEditingAsBlockCallback = useCallback( () => {
-		stopEditingAsBlocks( clientId );
-	}, [ clientId, stopEditingAsBlocks ] );
+		stopEditingContentOnlySection( clientId );
+	}, [ clientId, stopEditingContentOnlySection ] );
 
-	if ( ! isContentLocked && ! isEditingAsBlocks ) {
+	if ( ! isContentLocked && ! isEditingContentOnlySection ) {
 		return null;
 	}
 
-	const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
+	const showDoneButton = isEditingContentOnlySection && ! isContentLocked;
 
 	return (
-		showStopEditingAsBlocks && (
+		showDoneButton && (
 			<BlockControls group="other">
 				<ToolbarButton onClick={ stopEditingAsBlockCallback }>
 					{ __( 'Done' ) }

package/src/hooks/fit-text.js

@@ -90,11 +90,15 @@ function useFitText( { fitText, name, clientId } ) {
 
 		const blockSelector = `#block-${ clientId }`;
 
-		const applyStylesFn = ( css ) => {
-			styleElement.textContent = css;
+		const applyFontSize = ( fontSize ) => {
+			if ( fontSize === 0 ) {
+				styleElement.textContent = '';
+			} else {
+				styleElement.textContent = `${ blockSelector } { font-size: ${ fontSize }px !important; }`;
+			}
 		};
 
-		optimizeFitText( blockElement, blockSelector, applyStylesFn );
+		optimizeFitText( blockElement, applyFontSize );
 	}, [ blockElement, clientId, hasFitTextSupport, fitText ] );
 
 	useEffect( () => {
@@ -107,11 +111,32 @@ function useFitText( { fitText, name, clientId } ) {
 			return;
 		}
 
-		// Apply initially
-		applyFitText();
-
 		// Store current element value for cleanup
 		const currentElement = blockElement;
+		const previousVisibility = currentElement.style.visibility;
+
+		// Store IDs for cleanup
+		let hideFrameId = null;
+		let calculateFrameId = null;
+		let showTimeoutId = null;
+
+		// We are hiding the element doing the calculation of fit text
+		// and then showing it again to avoid the user noticing a flash of potentially
+		// big fitText while the binary search is happening.
+		hideFrameId = window.requestAnimationFrame( () => {
+			currentElement.style.visibility = 'hidden';
+			// Wait for browser to render the hidden state
+			calculateFrameId = window.requestAnimationFrame( () => {
+				applyFitText();
+
+				// Using a timeout instead of requestAnimationFrame, because
+				// with requestAnimationFrame a flash of very high size
+				// can still occur although rare.
+				showTimeoutId = setTimeout( () => {
+					currentElement.style.visibility = previousVisibility;
+				}, 10 );
+			} );
+		} );
 
 		// Watch for size changes
 		let resizeObserver;
@@ -122,6 +147,17 @@ function useFitText( { fitText, name, clientId } ) {
 
 		// Cleanup function
 		return () => {
+			// Cancel pending async operations
+			if ( hideFrameId !== null ) {
+				window.cancelAnimationFrame( hideFrameId );
+			}
+			if ( calculateFrameId !== null ) {
+				window.cancelAnimationFrame( calculateFrameId );
+			}
+			if ( showTimeoutId !== null ) {
+				clearTimeout( showTimeoutId );
+			}
+
 			if ( resizeObserver ) {
 				resizeObserver.disconnect();
 			}