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

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

@@ -24,9 +24,8 @@ 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 { allowedTypes = [], multiple = false } = config || {};
 
 	if ( multiple ) {
 		return 'todo multiple';
@@ -53,7 +52,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,19 +84,11 @@ 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 );
-	};
-
-	// Check if featured image is supported by checking if it's in the mapping
-	const hasFeaturedImageSupport =
-		fieldDef?.mapping && 'featuredImage' in fieldDef.mapping;
+	const {
+		allowedTypes = [],
+		multiple = false,
+		useFeaturedImage = false,
+	} = config;
 
 	const id = value?.id;
 	const url = value?.url;
@@ -147,107 +138,44 @@ export default function Media( { data, field, onChange, config = {} } ) {
 				multiple={ multiple }
 				popoverProps={ popoverProps }
 				onReset={ () => {
-					// Build reset value dynamically based on mapping
-					const resetValue = {};
-
-					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 ] = '';
-							}
-						} );
-					}
-
-					// 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: {},
+						} )
+					);
 				} }
-				{ ...( hasFeaturedImageSupport && {
+				{ ...( useFeaturedImage && {
 					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 ) {
+						if ( useFeaturedImage ) {
 							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 +196,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,13 +7,14 @@ import {
 	createBlockSaveFilter,
 } from './utils';
 import './compat';
+import './cross-origin-isolation';
 import align from './align';
 import background from './background';
 import './lock';
 import allowedBlocks from './allowed-blocks';
 import anchor from './anchor';
 import ariaLabel from './aria-label';
-import './block-fields';
+import blockFields from './block-fields';
 import customClassName from './custom-class-name';
 import './generated-class-name';
 import style from './style';
@@ -55,6 +56,7 @@ createBlockEditFilter(
 		blockBindingsPanel,
 		childLayout,
 		allowedBlocks,
+		blockFields,
 		listView,
 		autoInspectorControls,
 	].filter( Boolean )

package/src/hooks/list-view.js

@@ -5,13 +5,15 @@ import { __ } from '@wordpress/i18n';
 import { PanelBody } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore, hasBlockSupport } from '@wordpress/blocks';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import InspectorControls from '../components/inspector-controls';
 import { store as blockEditorStore } from '../store';
 import { PrivateListView } from '../components/list-view';
+import InspectorControls from '../components/inspector-controls/fill';
+import { PrivateBlockContext } from '../components/block-list/private-block-context';
 
 export const LIST_VIEW_SUPPORT_KEY = 'listView';
 
@@ -34,23 +36,50 @@ export function hasListViewSupport( nameOrType ) {
  * @return {Element|null} List view inspector controls or null.
  */
 export function ListViewPanel( { clientId, name } ) {
+	const { isSelectionWithinCurrentSection } =
+		useContext( PrivateBlockContext );
 	const isEnabled = hasListViewSupport( name );
-	const { hasChildren, blockTitle } = useSelect(
-		( select ) => ( {
-			hasChildren:
-				!! select( blockEditorStore ).getBlockCount( clientId ),
-			blockTitle: select( blocksStore ).getBlockType( name )?.title,
-		} ),
-		[ clientId, name ]
+	const { hasChildren, blockTitle, isNestedListView } = useSelect(
+		( select ) => {
+			const { getBlockCount, getBlockParents, getBlockName } =
+				select( blockEditorStore );
+
+			// When the ListView is shown in a section, avoid showing List Views
+			// for both parent and child blocks that have support. In this situation
+			// the parent will show the child anyway in its List.
+			// Search parents to see if there's one that also has support, and if so
+			// skip rendering.
+			// This matches closely the logic in the `BlockCard` component.
+			let _isNestedListView = false;
+			if ( isSelectionWithinCurrentSection ) {
+				const parents = getBlockParents( clientId, true );
+				_isNestedListView = parents.find( ( parentId ) => {
+					const parentName = getBlockName( parentId );
+					return (
+						parentName === 'core/navigation' ||
+						hasBlockSupport( parentName, 'listView' )
+					);
+				} );
+			}
+
+			return {
+				hasChildren: !! getBlockCount( clientId ),
+				blockTitle: select( blocksStore ).getBlockType( name )?.title,
+				isNestedListView: _isNestedListView,
+			};
+		},
+		[ clientId, name, isSelectionWithinCurrentSection ]
 	);
 
-	if ( ! isEnabled ) {
+	if ( ! isEnabled || isNestedListView ) {
 		return null;
 	}
 
+	const showBlockTitle = isSelectionWithinCurrentSection;
+
 	return (
 		<InspectorControls group="list">
-			<PanelBody title={ null }>
+			<PanelBody title={ showBlockTitle ? blockTitle : undefined }>
 				{ ! hasChildren && (
 					<p className="block-editor-block-inspector__no-blocks">
 						{ __( 'No items yet.' ) }
@@ -74,4 +103,5 @@ export default {
 	edit: ListViewPanel,
 	hasSupport: hasListViewSupport,
 	attributeKeys: [],
+	supportsPatternEditing: true,
 };

package/src/hooks/utils.js

@@ -19,6 +19,7 @@ import {
 	useBlockEditContext,
 	mayDisplayControlsKey,
 	mayDisplayParentControlsKey,
+	mayDisplayPatternEditingControlsKey,
 } from '../components/block-edit/context';
 import { useSettings } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
@@ -534,8 +535,11 @@ export function createBlockEditFilter( features ) {
 						hasSupport,
 						attributeKeys = [],
 						shareWithChildBlocks,
+						supportsPatternEditing,
 					} = feature;
 					const shouldDisplayControls =
+						( supportsPatternEditing &&
+							context[ mayDisplayPatternEditingControlsKey ] ) ||
 						context[ mayDisplayControlsKey ] ||
 						( context[ mayDisplayParentControlsKey ] &&
 							shareWithChildBlocks );

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