@wordpress/block-editor 15.10.1-next.ba3aee3a2.0 → 15.10.1-next.v.0

package/src/hooks/block-fields/media/index.js

@@ -24,9 +24,9 @@ import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement
 import { getMediaSelectKey } from '../../../store/private-keys';
 import { store as blockEditorStore } from '../../../store';
 
-function MediaThumbnail( { data, field, attachment } ) {
-	const config = field.config || {};
-	const { allowedTypes = [], multiple = false } = config;
+function MediaThumbnail( { data, field, attachment, config } ) {
+	const { fieldDef } = config;
+	const { allowedTypes = [], multiple = false } = fieldDef.args || {};
 
 	if ( multiple ) {
 		return 'todo multiple';
@@ -53,7 +53,7 @@ function MediaThumbnail( { data, field, attachment } ) {
 		const value = field.getValue( { item: data } );
 		const url = value?.url;
 
-		if ( url ) {
+		if ( allowedTypes[ 0 ] === 'image' && url ) {
 			return (
 				<div className="block-editor-content-only-controls__media-thumbnail">
 					<img alt="" width={ 24 } height={ 24 } src={ url } />
@@ -85,15 +85,8 @@ export default function Media( { data, field, onChange, config = {} } ) {
 		isControl: true,
 	} );
 	const value = field.getValue( { item: data } );
-	const { allowedTypes = [], multiple = false } = field.config || {};
 	const { fieldDef } = config;
-	const updateAttributes = ( newFieldValue ) => {
-		const mappedChanges = field.setValue( {
-			item: data,
-			value: newFieldValue,
-		} );
-		onChange( mappedChanges );
-	};
+	const { allowedTypes = [], multiple = false } = fieldDef.args || {};
 
 	// Check if featured image is supported by checking if it's in the mapping
 	const hasFeaturedImageSupport =
@@ -152,102 +145,49 @@ export default function Media( { data, field, onChange, config = {} } ) {
 
 					if ( fieldDef?.mapping ) {
 						Object.keys( fieldDef.mapping ).forEach( ( key ) => {
-							if (
-								key === 'id' ||
-								key === 'src' ||
-								key === 'url'
-							) {
-								resetValue[ key ] = undefined;
-							} else if ( key === 'caption' || key === 'alt' ) {
-								resetValue[ key ] = '';
-							}
+							resetValue[ key ] = undefined;
 						} );
 					}
 
-					// Turn off featured image when resetting (only if it's in the mapping)
-					if ( hasFeaturedImageSupport ) {
-						resetValue.featuredImage = false;
-					}
-
-					// Merge with existing value to preserve other field properties
-					updateAttributes( { ...value, ...resetValue } );
+					onChange(
+						field.setValue( {
+							item: data,
+							value: resetValue,
+						} )
+					);
 				} }
 				{ ...( hasFeaturedImageSupport && {
 					useFeaturedImage: !! value?.featuredImage,
 					onToggleFeaturedImage: () => {
-						updateAttributes( {
-							...value,
-							featuredImage: ! value?.featuredImage,
-						} );
+						onChange(
+							field.setValue( {
+								item: data,
+								value: {
+									featuredImage: ! value?.featuredImage,
+								},
+							} )
+						);
 					},
 				} ) }
 				onSelect={ ( selectedMedia ) => {
 					if ( selectedMedia.id && selectedMedia.url ) {
-						// Determine mediaType from MIME type, not from object type
-						let mediaType = 'image'; // default
-						if ( selectedMedia.mime_type ) {
-							if (
-								selectedMedia.mime_type.startsWith( 'video/' )
-							) {
-								mediaType = 'video';
-							} else if (
-								selectedMedia.mime_type.startsWith( 'audio/' )
-							) {
-								mediaType = 'audio';
-							}
-						}
-
 						// Build new value dynamically based on what's in the mapping
-						const newValue = {};
-
-						// Iterate over mapping keys and set values for supported properties
-						if ( fieldDef?.mapping ) {
-							Object.keys( fieldDef.mapping ).forEach(
-								( key ) => {
-									if ( key === 'id' ) {
-										newValue[ key ] = selectedMedia.id;
-									} else if (
-										key === 'src' ||
-										key === 'url'
-									) {
-										newValue[ key ] = selectedMedia.url;
-									} else if ( key === 'type' ) {
-										newValue[ key ] = mediaType;
-									} else if (
-										key === 'link' &&
-										selectedMedia.link
-									) {
-										newValue[ key ] = selectedMedia.link;
-									} else if (
-										key === 'caption' &&
-										! value?.caption &&
-										selectedMedia.caption
-									) {
-										newValue[ key ] = selectedMedia.caption;
-									} else if (
-										key === 'alt' &&
-										! value?.alt &&
-										selectedMedia.alt
-									) {
-										newValue[ key ] = selectedMedia.alt;
-									} else if (
-										key === 'poster' &&
-										selectedMedia.poster
-									) {
-										newValue[ key ] = selectedMedia.poster;
-									}
-								}
-							);
-						}
+						const newValue = {
+							...selectedMedia,
+							mediaType: selectedMedia.media_type,
+						};
 
 						// Turn off featured image when manually selecting media
 						if ( hasFeaturedImageSupport ) {
 							newValue.featuredImage = false;
 						}
 
-						// Merge with existing value to preserve other field properties
-						const finalValue = { ...value, ...newValue };
-						updateAttributes( finalValue );
+						onChange(
+							field.setValue( {
+								item: data,
+								value: newValue,
+							} )
+						);
 					}
 				} }
 				renderToggle={ ( buttonProps ) => (
@@ -268,6 +208,7 @@ export default function Media( { data, field, onChange, config = {} } ) {
 										attachment={ attachment }
 										field={ field }
 										data={ data }
+										config={ config }
 									/>
 									<span className="block-editor-content-only-controls__media-title">
 										{

package/src/hooks/block-fields/rich-text/index.js

@@ -33,10 +33,6 @@ export default function RichTextControl( {
 	const attrValue = field.getValue( { item: data } );
 	const fieldConfig = field.config || {};
 	const { clientId } = config;
-	const updateAttributes = ( html ) => {
-		const mappedChanges = field.setValue( { item: data, value: html } );
-		onChange( mappedChanges );
-	};
 	const [ selection, setSelection ] = useState( {
 		start: undefined,
 		end: undefined,
@@ -107,7 +103,7 @@ export default function RichTextControl( {
 	} = useRichText( {
 		value: attrValue,
 		onChange( html, { __unstableFormats, __unstableText } ) {
-			updateAttributes( html );
+			onChange( field.setValue( { item: data, value: html } ) );
 			Object.values( changeHandlers ).forEach( ( changeHandler ) => {
 				changeHandler( __unstableFormats, __unstableText );
 			} );

package/src/hooks/block-fields/styles.scss

@@ -30,4 +30,6 @@
 
 .block-editor-block-fields__header-title {
 	flex: 1;
+	// Override the default margin on a h2 element.
+	margin: 0 !important;
 }

package/src/hooks/cross-origin-isolation.js

@@ -0,0 +1,143 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Adds crossorigin and credentialless attributes to elements as needed.
+ *
+ * @param {Element} el The element to modify.
+ */
+function addCrossOriginAttributes( el ) {
+	// Add the crossorigin attribute if missing.
+	if ( ! el.hasAttribute( 'crossorigin' ) ) {
+		el.setAttribute( 'crossorigin', 'anonymous' );
+	}
+
+	// For iframes, add the credentialless attribute.
+	if ( el.nodeName === 'IFRAME' && ! el.hasAttribute( 'credentialless' ) ) {
+		// Do not modify the iframed editor canvas.
+		if ( el.getAttribute( 'src' )?.startsWith( 'blob:' ) ) {
+			return;
+		}
+
+		el.setAttribute( 'credentialless', '' );
+
+		// Reload the iframe to ensure the new attribute is taken into account.
+		const origSrc = el.getAttribute( 'src' ) || '';
+		el.setAttribute( 'src', '' );
+		el.setAttribute( 'src', origSrc );
+	}
+}
+
+// Only add the mutation observer if the site is cross-origin isolated.
+if ( window.crossOriginIsolated ) {
+	/*
+	 * Detects dynamically added DOM nodes that are missing the `crossorigin` attribute.
+	 */
+	const observer = new window.MutationObserver( ( mutations ) => {
+		mutations.forEach( ( mutation ) => {
+			[ mutation.addedNodes, mutation.target ].forEach( ( value ) => {
+				const nodes =
+					value instanceof window.NodeList ? value : [ value ];
+				nodes.forEach( ( node ) => {
+					const el = node;
+
+					if ( ! el.querySelectorAll ) {
+						// Most likely a text node.
+						return;
+					}
+
+					el.querySelectorAll(
+						'img,source,script,video,link,iframe'
+					).forEach( ( v ) => {
+						addCrossOriginAttributes( v );
+					} );
+
+					if ( el.nodeName === 'IFRAME' ) {
+						const iframeNode = el;
+
+						/*
+						 * Sandboxed iframes should not get modified. For example embedding a tweet served in a sandboxed
+						 * iframe, the tweet itself would not be modified.
+						 */
+						const isEmbedSandboxIframe =
+							iframeNode.classList.contains(
+								'components-sandbox'
+							);
+
+						if ( ! isEmbedSandboxIframe ) {
+							iframeNode.addEventListener( 'load', () => {
+								if ( iframeNode.contentDocument ) {
+									observer.observe(
+										iframeNode.contentDocument,
+										{
+											childList: true,
+											attributes: true,
+											subtree: true,
+										}
+									);
+								}
+							} );
+						}
+					}
+
+					if (
+						[
+							'IMG',
+							'SOURCE',
+							'SCRIPT',
+							'VIDEO',
+							'LINK',
+							'IFRAME',
+						].includes( el.nodeName )
+					) {
+						addCrossOriginAttributes( el );
+					}
+				} );
+			} );
+		} );
+	} );
+
+	observer.observe( document.body, {
+		childList: true,
+		attributes: true,
+		subtree: true,
+	} );
+}
+
+// Only apply the embed preview filter when cross-origin isolated.
+if ( window.crossOriginIsolated ) {
+	const supportsCredentialless =
+		'credentialless' in window.HTMLIFrameElement.prototype;
+
+	const disableEmbedPreviews = createHigherOrderComponent(
+		( BlockEdit ) => ( props ) => {
+			if ( 'core/embed' !== props.name ) {
+				return <BlockEdit { ...props } />;
+			}
+
+			// List of embeds that do not support a preview is from packages/block-library/src/embed/variations.js.
+			const previewable =
+				supportsCredentialless &&
+				! [ 'facebook', 'smugmug' ].includes(
+					props.attributes.providerNameSlug
+				);
+
+			return (
+				<BlockEdit
+					{ ...props }
+					attributes={ { ...props.attributes, previewable } }
+				/>
+			);
+		},
+		'withDisabledEmbedPreview'
+	);
+
+	addFilter(
+		'editor.BlockEdit',
+		'media-experiments/disable-embed-previews',
+		disableEmbedPreviews
+	);
+}

package/src/hooks/index.js

@@ -7,6 +7,7 @@ import {
 	createBlockSaveFilter,
 } from './utils';
 import './compat';
+import './cross-origin-isolation';
 import align from './align';
 import background from './background';
 import './lock';

package/src/layouts/flex.js

@@ -71,8 +71,11 @@ export default {
 		onChange,
 		layoutBlockSupport = {},
 	} ) {
-		const { allowOrientation = true, allowJustification = true } =
-			layoutBlockSupport;
+		const {
+			allowOrientation = true,
+			allowJustification = true,
+			allowWrap = true,
+		} = layoutBlockSupport;
 		return (
 			<>
 				<Flex>
@@ -93,7 +96,9 @@ export default {
 						</FlexItem>
 					) }
 				</Flex>
-				<FlexWrapControl layout={ layout } onChange={ onChange } />
+				{ allowWrap && (
+					<FlexWrapControl layout={ layout } onChange={ onChange } />
+				) }
 			</>
 		);
 	},

package/src/layouts/test/flex.js

@@ -1,8 +1,15 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
 /**
  * Internal dependencies
  */
 import flex from '../flex';
 
+const FlexLayoutInspectorControls = flex.inspectorControls;
+
 describe( 'getLayoutStyle', () => {
 	it( 'should return an empty string if no non-default params are provided', () => {
 		const expected = '';
@@ -19,3 +26,49 @@ describe( 'getLayoutStyle', () => {
 		expect( result ).toBe( expected );
 	} );
 } );
+
+describe( 'FlexLayoutInspectorControls', () => {
+	it( 'should render the wrap toggle by default', () => {
+		render(
+			<FlexLayoutInspectorControls layout={ {} } onChange={ jest.fn() } />
+		);
+
+		expect(
+			screen.getByRole( 'checkbox', {
+				name: 'Allow to wrap to multiple lines',
+			} )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should render the wrap toggle when allowWrap is true', () => {
+		render(
+			<FlexLayoutInspectorControls
+				layout={ {} }
+				onChange={ jest.fn() }
+				layoutBlockSupport={ { allowWrap: true } }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'checkbox', {
+				name: 'Allow to wrap to multiple lines',
+			} )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should not render the wrap toggle when allowWrap is false', () => {
+		render(
+			<FlexLayoutInspectorControls
+				layout={ {} }
+				onChange={ jest.fn() }
+				layoutBlockSupport={ { allowWrap: false } }
+			/>
+		);
+
+		expect(
+			screen.queryByRole( 'checkbox', {
+				name: 'Allow to wrap to multiple lines',
+			} )
+		).not.toBeInTheDocument();
+	} );
+} );

package/src/store/private-selectors.js

@@ -38,6 +38,10 @@ import {
 	isIsolatedEditorKey,
 	deviceTypeKey,
 } from './private-keys';
+import {
+	BLOCK_VISIBILITY_VIEWPORT_ENTRIES,
+	BLOCK_VISIBILITY_VIEWPORTS,
+} from '../components/block-visibility/constants';
 
 const { isContentBlock } = unlock( blocksPrivateApis );
 
@@ -730,7 +734,8 @@ export const isBlockHidden = ( state, clientId ) => {
 	// Only apply when a device is explicitly selected.
 	if ( typeof blockVisibility === 'object' && blockVisibility !== null ) {
 		const settings = getSettings( state );
-		const viewportType = settings[ deviceTypeKey ] ?? 'Desktop';
+		const viewportType =
+			settings[ deviceTypeKey ] ?? BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
 		const viewportKey = viewportType.toLowerCase();
 		return blockVisibility?.[ viewportKey ] === false;
 	}
@@ -738,6 +743,64 @@ export const isBlockHidden = ( state, clientId ) => {
 	return false;
 };
 
+/**
+ * Returns true if any of the provided blocks are hidden.
+ *
+ * @param {Object} state     Global application state.
+ * @param {Array}  clientIds Array of block client IDs to check.
+ * @return {boolean} Whether any block is hidden.
+ */
+export const areBlocksHidden = ( state, clientIds ) => {
+	if ( ! clientIds || clientIds.length === 0 ) {
+		return false;
+	}
+	return clientIds.some( ( clientId ) => isBlockHidden( state, clientId ) );
+};
+
+/**
+ * Checks if at least one block in an array is hidden according to viewport visibility metadata.
+ *
+ * This is typically used to determine if the block visibility button should be shown in the toolbar.
+ * TODO: This is temporary for now. Later the UI will
+ * want to know where exactly the block is hidden, e.g., to display icons or other things.
+ *
+ * A block is considered hidden if:
+ * - Its `blockVisibility` metadata is `false` (hidden everywhere), or
+ * - Any viewport is set to `false`
+ *
+ * @param {Object} state     Global application state.
+ * @param {Array}  clientIds Array of block client IDs to check.
+ * @return {boolean} `true` if at least one block meets the visibility criteria, `false` otherwise.
+ */
+export const areBlocksHiddenAnywhere = ( state, clientIds ) => {
+	if ( ! clientIds?.length ) {
+		return false;
+	}
+	return clientIds.some( ( clientId ) => {
+		if ( ! clientId ) {
+			return false;
+		}
+
+		const attributes = state.blocks.attributes.get( clientId );
+		const blockVisibility = attributes?.metadata?.blockVisibility;
+
+		// If explicitly hidden everywhere (false), return true.
+		if ( typeof blockVisibility === 'boolean' ) {
+			return blockVisibility === false;
+		}
+
+		// If not an object, block is not hidden in any viewport.
+		if ( 'object' !== typeof blockVisibility ) {
+			return false;
+		}
+
+		// Check viewport-specific visibility.
+		return BLOCK_VISIBILITY_VIEWPORT_ENTRIES.some(
+			( [ , { key } ] ) => blockVisibility?.[ key ] === false
+		);
+	} );
+};
+
 /**
  * Returns true if there is a spotlighted block.
  *

package/src/store/reducer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import fastDeepEqual from 'fast-deep-equal/es6';
+import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 
 /**
  * WordPress dependencies

package/src/store/selectors.js

@@ -2154,24 +2154,22 @@ const buildBlockTypeItem =
 			'inserter'
 		);
 		const blockVariations = getBlockVariations( blockType.name, 'block' );
-		// Combine inserter and block variations. Block-scope variations without
-		// inserter scope are searchable via slash commands but hidden from browse.
-		const inserterVariationNames = new Set(
-			inserterVariations.map( ( variation ) => variation.name )
-		);
 		const allVariations = [
 			...inserterVariations,
+			// Built-in heading level variations have block scope but allow
+			// insertion via slash inserter.
+			// See https://github.com/WordPress/gutenberg/issues/74233.
 			...blockVariations
 				.filter(
 					( variation ) =>
-						! inserterVariationNames.has( variation.name )
+						blockType.name === 'core/heading' &&
+						[ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ].includes(
+							variation.name
+						)
 				)
 				.map( ( variation ) => ( {
 					...variation,
 					isSearchOnly: true,
-					// Block-scope `isDefault` is for the placeholder picker,
-					// not for the inserter, so don't carry it over.
-					isDefault: false,
 				} ) ),
 		];
 		return {

package/src/store/test/private-selectors.js

@@ -20,6 +20,7 @@ import {
 	isRemoveLockedBlock,
 	isLockedBlock,
 	isBlockHidden,
+	areBlocksHiddenAnywhere,
 } from '../private-selectors';
 import { getBlockEditingMode } from '../selectors';
 import { deviceTypeKey } from '../private-keys';
@@ -1244,4 +1245,83 @@ describe( 'private selectors', () => {
 			expect( result ).toBe( false );
 		} );
 	} );
+
+	describe( 'areBlocksHiddenAnywhere', () => {
+		it( 'should return false when clientIds array is empty', () => {
+			const state = {
+				blocks: {
+					attributes: new Map(),
+				},
+			};
+			expect( areBlocksHiddenAnywhere( state, [] ) ).toBe( false );
+			expect( areBlocksHiddenAnywhere( state, null ) ).toBe( false );
+			expect( areBlocksHiddenAnywhere( state, undefined ) ).toBe( false );
+		} );
+
+		it( 'should return false when no blocks are hidden', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { metadata: { blockVisibility: true } } ],
+						[ 'block-2', { metadata: {} } ],
+					] ),
+				},
+			};
+			expect(
+				areBlocksHiddenAnywhere( state, [ 'block-1', 'block-2' ] )
+			).toBe( false );
+		} );
+
+		it( 'should return true when a block is hidden everywhere', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { metadata: { blockVisibility: false } } ],
+						[ 'block-2', { metadata: { blockVisibility: true } } ],
+					] ),
+				},
+			};
+			expect(
+				areBlocksHiddenAnywhere( state, [ 'block-1', 'block-2' ] )
+			).toBe( true );
+		} );
+
+		it( 'should return true when a block is hidden in any viewport', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[
+							'block-1',
+							{
+								metadata: {
+									blockVisibility: {
+										mobile: false,
+										tablet: true,
+									},
+								},
+							},
+						],
+						[ 'block-2', { metadata: { blockVisibility: true } } ],
+					] ),
+				},
+			};
+			expect(
+				areBlocksHiddenAnywhere( state, [ 'block-1', 'block-2' ] )
+			).toBe( true );
+		} );
+
+		it( 'should return false when clientId is null or undefined', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { metadata: { blockVisibility: false } } ],
+					] ),
+				},
+			};
+			expect( areBlocksHiddenAnywhere( state, [ null ] ) ).toBe( false );
+			expect( areBlocksHiddenAnywhere( state, [ undefined ] ) ).toBe(
+				false
+			);
+		} );
+	} );
 } );

package/src/style.scss

@@ -67,3 +67,4 @@
 @use "./components/block-toolbar/style.scss" as *;
 @use "./components/inserter/style.scss" as *;
 @use "./components/spacing-sizes-control/style.scss" as *;
+@use "./components/block-visibility/style.scss" as *;

package/src/components/block-visibility/styles.scss

@@ -1,10 +0,0 @@
-@use "@wordpress/base-styles/variables" as *;
-
-.block-editor-block-visibility-info {
-	padding-top: $grid-unit-05;
-	padding-bottom: $grid-unit-05;
-	margin: 0 $grid-unit-20 $grid-unit-20;
-	display: flex;
-	align-items: center;
-	justify-content: start;
-}