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

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/fit-text.js

@@ -13,7 +13,7 @@ import {
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 const EMPTY_OBJECT = {};
-const MIN_FONT_SIZE_FOR_WARNING = 6;
+const MIN_FONT_SIZE_FOR_WARNING = 12;
 
 /**
  * Internal dependencies

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;
-}