@wordpress/block-editor 9.7.1-next.d6164808d3.0 → 10.0.0

package/src/components/block-icon/test/__snapshots__/index.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockIcon renders a Icon 1`] = `
+<div>
+  <span
+    class="block-editor-block-icon"
+  >
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 4.5h14c.3 0 .5.2.5.5v8.4l-3-2.9c-.3-.3-.8-.3-1 0L11.9 14 9 12c-.3-.2-.6-.2-.8 0l-3.6 2.6V5c-.1-.3.1-.5.4-.5zm14 15H5c-.3 0-.5-.2-.5-.5v-2.4l4.1-3 3 1.9c.3.2.7.2.9-.1L16 12l3.5 3.4V19c0 .3-.2.5-.5.5z"
+      />
+    </svg>
+  </span>
+</div>
+`;

package/src/components/block-icon/test/index.js

@@ -1,12 +1,11 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
 import { image } from '@wordpress/icons';
 
 /**
@@ -16,42 +15,58 @@ import BlockIcon from '../';
 
 describe( 'BlockIcon', () => {
 	it( 'renders a Icon', () => {
-		const wrapper = shallow( <BlockIcon icon={ image } /> );
+		const { container } = render( <BlockIcon icon={ image } /> );
 
-		expect(
-			wrapper.containsMatchingElement( <Icon icon={ image } /> )
-		).toBe( true );
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'renders a span without the has-colors classname', () => {
-		const wrapper = shallow( <BlockIcon icon={ image } /> );
+		const { container } = render( <BlockIcon icon={ image } /> );
 
-		expect( wrapper.find( 'span' ).hasClass( 'has-colors' ) ).toBe( false );
+		expect( container.firstChild ).not.toHaveClass( 'has-colors' );
 	} );
 
 	it( 'renders a span with the has-colors classname', () => {
-		const wrapper = shallow( <BlockIcon icon={ image } showColors /> );
+		const { container } = render( <BlockIcon icon={ image } showColors /> );
 
-		expect( wrapper.find( 'span' ).hasClass( 'has-colors' ) ).toBe( true );
+		expect( container.firstChild ).toHaveClass( 'has-colors' );
+	} );
+
+	it( 'supports adding a className to the wrapper', () => {
+		const { container } = render(
+			<BlockIcon icon={ image } className="foo-bar" />
+		);
+
+		expect( container.firstChild ).toHaveClass( 'foo-bar' );
 	} );
 
 	it( 'skips adding background and foreground styles when colors are not enabled', () => {
-		const wrapper = shallow(
-			<BlockIcon icon={ { background: 'white', foreground: 'black' } } />
+		const { container } = render(
+			<BlockIcon
+				icon={ {
+					background: 'white',
+					foreground: 'black',
+					src: 'image',
+				} }
+			/>
 		);
 
-		expect( wrapper.find( 'span' ).prop( 'style' ) ).toEqual( {} );
+		expect( container.firstChild ).not.toHaveAttribute( 'style' );
 	} );
 
 	it( 'adds background and foreground styles when colors are enabled', () => {
-		const wrapper = shallow(
+		const { container } = render(
 			<BlockIcon
-				icon={ { background: 'white', foreground: 'black' } }
+				icon={ {
+					background: 'white',
+					foreground: 'black',
+					src: 'image',
+				} }
 				showColors
 			/>
 		);
 
-		expect( wrapper.find( 'span' ).prop( 'style' ) ).toEqual( {
+		expect( container.firstChild ).toHaveStyle( {
 			backgroundColor: 'white',
 			color: 'black',
 		} );

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

@@ -11,8 +11,13 @@ import {
 import {
 	PanelBody,
 	__experimentalUseSlot as useSlot,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,36 +34,135 @@ import DefaultStylePicker from '../default-style-picker';
 import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
+
+function useContentBlocks( blockTypes, block ) {
+	const contenBlocksObjectAux = useMemo( () => {
+		return blockTypes.reduce( ( result, blockType ) => {
+			if (
+				Object.entries( blockType.attributes ).some(
+					( [ , { __experimentalRole } ] ) =>
+						__experimentalRole === 'content'
+				)
+			) {
+				result[ blockType.name ] = true;
+			}
+			return result;
+		}, {} );
+	}, [ blockTypes ] );
+	const isContentBlock = useCallback(
+		( blockName ) => {
+			return !! contenBlocksObjectAux[ blockName ];
+		},
+		[ blockTypes ]
+	);
+	return useMemo( () => {
+		return getContentBlocks( [ block ], isContentBlock );
+	}, [ block, isContentBlock ] );
+}
+
+function getContentBlocks( blocks, isContentBlock ) {
+	const result = [];
+	for ( const block of blocks ) {
+		if ( isContentBlock( block.name ) ) {
+			result.push( block );
+		}
+		result.push( ...getContentBlocks( block.innerBlocks, isContentBlock ) );
+	}
+	return result;
+}
+
+function BlockNavigationButton( { blockTypes, block, selectedBlock } ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const blockType = blockTypes.find( ( { name } ) => name === block.name );
+	const isSelected =
+		selectedBlock && selectedBlock.clientId === block.clientId;
+	return (
+		<Button
+			isPressed={ isSelected }
+			onClick={ () => selectBlock( block.clientId ) }
+		>
+			<HStack justify="flex-start">
+				<BlockIcon icon={ blockType.icon } />
+				<FlexItem>{ blockType.title }</FlexItem>
+			</HStack>
+		</Button>
+	);
+}
+
+function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
+	const { blockTypes, block, selectedBlock } = useSelect(
+		( select ) => {
+			return {
+				blockTypes: select( blocksStore ).getBlockTypes(),
+				block: select( blockEditorStore ).getBlock(
+					topLevelLockedBlock
+				),
+				selectedBlock: select( blockEditorStore ).getSelectedBlock(),
+			};
+		},
+		[ topLevelLockedBlock ]
+	);
+	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
+	const contentBlocks = useContentBlocks( blockTypes, block );
+	return (
+		<div className="block-editor-block-inspector">
+			<BlockCard { ...blockInformation } />
+			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
+			<VStack
+				spacing={ 1 }
+				padding={ 4 }
+				className="block-editor-block-inspector__block-buttons-container"
+			>
+				<h2 className="block-editor-block-card__title">
+					{ __( 'Content' ) }
+				</h2>
+				{ contentBlocks.map( ( contentBlock ) => (
+					<BlockNavigationButton
+						selectedBlock={ selectedBlock }
+						key={ contentBlock.clientId }
+						block={ contentBlock }
+						blockTypes={ blockTypes }
+					/>
+				) ) }
+			</VStack>
+		</div>
+	);
+}
 
 const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const {
 		count,
-		hasBlockStyles,
 		selectedBlockName,
 		selectedBlockClientId,
 		blockType,
+		topLevelLockedBlock,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
 			getSelectedBlockCount,
 			getBlockName,
+			__unstableGetContentLockingParent,
+			getTemplateLock,
 		} = select( blockEditorStore );
-		const { getBlockStyles } = select( blocksStore );
 
 		const _selectedBlockClientId = getSelectedBlockClientId();
 		const _selectedBlockName =
 			_selectedBlockClientId && getBlockName( _selectedBlockClientId );
 		const _blockType =
 			_selectedBlockName && getBlockType( _selectedBlockName );
-		const blockStyles =
-			_selectedBlockName && getBlockStyles( _selectedBlockName );
 
 		return {
 			count: getSelectedBlockCount(),
 			selectedBlockClientId: _selectedBlockClientId,
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
-			hasBlockStyles: blockStyles && blockStyles.length > 0,
+			topLevelLockedBlock:
+				getTemplateLock( _selectedBlockClientId ) === 'noContent'
+					? _selectedBlockClientId
+					: __unstableGetContentLockingParent(
+							_selectedBlockClientId
+					  ),
 		};
 	}, [] );
 
@@ -109,20 +213,30 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		}
 		return null;
 	}
+	if ( topLevelLockedBlock ) {
+		return (
+			<BlockInspectorLockedBlocks
+				topLevelLockedBlock={ topLevelLockedBlock }
+			/>
+		);
+	}
 	return (
 		<BlockInspectorSingleBlock
 			clientId={ selectedBlockClientId }
 			blockName={ blockType.name }
-			hasBlockStyles={ hasBlockStyles }
 		/>
 	);
 };
 
-const BlockInspectorSingleBlock = ( {
-	clientId,
-	blockName,
-	hasBlockStyles,
-} ) => {
+const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
+	const hasBlockStyles = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			const blockStyles = getBlockStyles( blockName );
+			return blockStyles && blockStyles.length > 0;
+		},
+		[ blockName ]
+	);
 	const blockInformation = useBlockDisplayInformation( clientId );
 	return (
 		<div className="block-editor-block-inspector">

package/src/components/block-inspector/style.scss

@@ -1,5 +1,5 @@
 .block-editor-block-inspector {
-	p {
+	p:not(.components-base-control__help) {
 		margin-top: 0;
 	}
 
@@ -34,3 +34,9 @@
 	padding: ($grid-unit-20 * 2) $grid-unit-20;
 	text-align: center;
 }
+
+
+.block-editor-block-inspector__block-buttons-container {
+	border-top: $border-width solid $gray-200;
+	padding: $grid-unit-20;
+}

package/src/components/block-list/block-list-compact.native.js

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import BlockListBlock from './block';
+
+/**
+ * NOTE: This is a component currently used by the List block (V2)
+ * It only passes the needed props for this block, if other blocks will use it
+ * make sure you pass other props that might be required coming from:
+ * components/inner-blocks/index.native.js
+ */
+
+function BlockListCompact( props ) {
+	const {
+		marginHorizontal = styles.defaultBlock.marginLeft,
+		marginVertical = styles.defaultBlock.marginTop,
+		rootClientId,
+	} = props;
+	const { blockClientIds } = useSelect(
+		( select ) => {
+			const { getBlockOrder } = select( blockEditorStore );
+			const blockOrder = getBlockOrder( rootClientId );
+
+			return {
+				blockClientIds: blockOrder,
+			};
+		},
+		[ rootClientId ]
+	);
+
+	const containerStyle = {
+		marginVertical: -marginVertical,
+		marginHorizontal: -marginHorizontal,
+	};
+
+	return (
+		<View style={ containerStyle }>
+			{ blockClientIds.map( ( currentClientId ) => (
+				<BlockListBlock
+					clientId={ currentClientId }
+					key={ currentClientId }
+					marginHorizontal={ marginHorizontal }
+					marginVertical={ marginVertical }
+				/>
+			) ) }
+		</View>
+	);
+}
+
+export default BlockListCompact;

package/src/components/block-list/block.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,6 +18,7 @@ import {
 	isUnmodifiedDefaultBlock,
 	serializeRawBlock,
 	switchToBlockType,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import {
@@ -94,10 +94,38 @@ function BlockListBlock( {
 	onMerge,
 	toggleSelection,
 } ) {
-	const themeSupportsLayout = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().supportsLayout;
-	}, [] );
+	const {
+		themeSupportsLayout,
+		hasContentLockedParent,
+		isContentBlock,
+		isContentLocking,
+		isTemporarilyEditingAsBlocks,
+	} = useSelect(
+		( select ) => {
+			const {
+				getSettings,
+				__unstableGetContentLockingParent,
+				getTemplateLock,
+				__unstableGetTemporarilyEditingAsBlocks,
+			} = select( blockEditorStore );
+			const _hasContentLockedParent =
+				!! __unstableGetContentLockingParent( clientId );
+			return {
+				themeSupportsLayout: getSettings().supportsLayout,
+				isContentBlock:
+					select( blocksStore ).__experimentalHasContentRoleAttribute(
+						name
+					),
+				hasContentLockedParent: _hasContentLockedParent,
+				isContentLocking:
+					getTemplateLock( clientId ) === 'noContent' &&
+					! _hasContentLockedParent,
+				isTemporarilyEditingAsBlocks:
+					__unstableGetTemporarilyEditingAsBlocks() === clientId,
+			};
+		},
+		[ name, clientId ]
+	);
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
@@ -123,6 +151,12 @@ function BlockListBlock( {
 
 	const blockType = getBlockType( name );
 
+	if ( hasContentLockedParent && ! isContentBlock ) {
+		wrapperProps = {
+			...wrapperProps,
+			tabIndex: -1,
+		};
+	}
 	// Determine whether the block has props to apply to the wrapper.
 	if ( blockType?.getEditWrapperProps ) {
 		wrapperProps = mergeWrapperProps(
@@ -185,18 +219,24 @@ function BlockListBlock( {
 		block = <Block { ...wrapperProps }>{ blockEdit }</Block>;
 	}
 
+	const { 'data-align': dataAlign, ...restWrapperProps } = wrapperProps ?? {};
+
 	const value = {
 		clientId,
-		className:
-			wrapperProps?.[ 'data-align' ] && themeSupportsLayout
-				? classnames(
-						className,
-						`align${ wrapperProps[ 'data-align' ] }`
-				  )
-				: className,
-		wrapperProps: omit( wrapperProps, [ 'data-align' ] ),
+		className: classnames(
+			{
+				'is-content-locked': isContentLocking,
+				'is-content-locked-temporarily-editing-as-blocks':
+					isTemporarilyEditingAsBlocks,
+				'is-content-block': hasContentLockedParent && isContentBlock,
+			},
+			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
+			className
+		),
+		wrapperProps: restWrapperProps,
 		isAligned,
 	};
+
 	const memoizedValue = useMemo( () => value, Object.values( value ) );
 
 	return (

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

@@ -34,15 +34,15 @@ export const IntersectionObserver = createContext();
 function Root( { className, ...settings } ) {
 	const [ element, setElement ] = useState();
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { isOutlineMode, isFocusMode, isNavigationMode } = useSelect(
+	const { isOutlineMode, isFocusMode, editorMode } = useSelect(
 		( select ) => {
-			const { getSettings, isNavigationMode: _isNavigationMode } =
+			const { getSettings, __unstableGetEditorMode } =
 				select( blockEditorStore );
 			const { outlineMode, focusMode } = getSettings();
 			return {
 				isOutlineMode: outlineMode,
 				isFocusMode: focusMode,
-				isNavigationMode: _isNavigationMode(),
+				editorMode: __unstableGetEditorMode(),
 			};
 		},
 		[]
@@ -74,7 +74,7 @@ function Root( { className, ...settings } ) {
 			className: classnames( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
 				'is-focus-mode': isFocusMode && isLargeViewport,
-				'is-navigate-mode': isNavigationMode,
+				'is-navigate-mode': editorMode === 'navigation',
 			} ),
 		},
 		settings

package/src/components/block-list/style.scss

@@ -4,10 +4,6 @@
 	margin: 0;
 }
 
-/**
- * Notices & Block Selected/Hover Styles.
- */
-
 /**
  * Cross-Block Selection
  */
@@ -17,15 +13,8 @@
 .block-editor-block-list__layout {
 	position: relative;
 
-	// Select tool/navigation mode shows the default cursor until an additional click edits.
-	&.is-navigate-mode {
-		cursor: default;
-	}
-
 	// The primary indicator of selection in text is the native selection marker.
 	// When selecting multiple blocks, we provide an additional selection indicator.
-	&.is-navigate-mode .block-editor-block-list__block.is-selected,
-	&.is-navigate-mode .block-editor-block-list__block.is-hovered,
 	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected),
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
@@ -54,17 +43,14 @@
 		}
 
 		// Provide exceptions for placeholders.
-		.components-placeholder {
+		.components-placeholder,
+		.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
 			::selection {
 				background: transparent;
 			}
 		}
 	}
 
-	&.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-	}
-
 	.block-editor-block-list__block.is-highlighted::after {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		outline: $border-width solid transparent;
@@ -104,8 +90,20 @@
 			border-color: var(--wp-admin-theme-color);
 		}
 	}
-}
 
+	// Ensure an accurate partial text selection.
+	// To do this, we disable text selection on the main container, then re-enable it only on the
+	// elements that actually get selected.
+	// To keep in mind: user-select is currently inherited to all nodes inside.
+	.has-multi-selection & {
+		user-select: none;
+	}
+
+	// Re-enable it on components inside.
+	[class^="components-"] {
+		user-select: text;
+	}
+}
 
 .is-block-moving-mode.block-editor-block-list__block-selection-button {
 	// Should be invisible but not unfocusable.
@@ -115,9 +113,31 @@
 	padding: 0;
 }
 
+.is-content-locked {
+	.block-editor-block-list__block {
+		pointer-events: none;
+	}
+	.is-content-block {
+		pointer-events: initial;
+	}
+}
+
 .block-editor-block-list__layout .block-editor-block-list__block {
 	position: relative;
 
+	// Re-enable text-selection on editable blocks.
+	user-select: text;
+
+	// Hide the select style pseudo element as it interferes with the style.
+	&.is-partially-selected::after {
+		height: 0;
+	}
+
+	&.is-highlighted::after,
+	&.is-highlighted ~ .is-multi-selected::after {
+		height: auto;
+	}
+
 	// Break long strings of text without spaces so they don't overflow the block.
 	overflow-wrap: break-word;
 
@@ -192,7 +212,9 @@
 		bottom: 0;
 		left: 0;
 		border-radius: $radius-block-ui;
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) transparent;
+		box-shadow: 0 0 0 0 transparent;
+		transition: box-shadow 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
 	// Warnings
@@ -308,6 +330,14 @@
 	}
 }
 
+.is-focus-mode .block-editor-block-list__block.is-content-locked.has-child-selected,
+.is-focus-mode .block-editor-block-list__block.is-content-locked-temporarily-editing-as-blocks.has-child-selected {
+	&,
+	& .block-editor-block-list__block {
+		opacity: 1;
+	}
+}
+
 .wp-block[data-align="left"] > *,
 .wp-block[data-align="right"] > *,
 .wp-block.alignleft,
@@ -408,3 +438,23 @@
 		margin-bottom: auto;
 	}
 }
+
+/** Zoom Out mode styles **/
+.block-editor-iframe__body {
+	transition: all 0.3s;
+	transform-origin: top center;
+
+	&.is-zoomed-out {
+		margin: 100px 0;
+		transform: scale(0.45);
+
+		// Add a bit more space between the top level blocks.
+		.wp-site-blocks > * + * {
+			margin-block-start: 2.5rem;
+		}
+
+		> .block-list-appender {
+			display: none;
+		}
+	}
+}