@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.0

package/src/components/block-compare/test/__snapshots__/block-view.js.snap

@@ -1,40 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BlockView should match snapshot 1`] = `
-<div
-  className="class"
->
+<div>
   <div
-    className="block-editor-block-compare__content"
+    class="class"
   >
-    <h2
-      className="block-editor-block-compare__heading"
-    >
-      title
-    </h2>
     <div
-      className="block-editor-block-compare__html"
+      class="block-editor-block-compare__content"
     >
-      raw
+      <h2
+        class="block-editor-block-compare__heading"
+      >
+        title
+      </h2>
+      <div
+        class="block-editor-block-compare__html"
+      >
+        raw
+      </div>
+      <div
+        class="block-editor-block-compare__preview edit-post-visual-editor"
+      >
+        <div>
+          render
+        </div>
+      </div>
     </div>
     <div
-      className="block-editor-block-compare__preview edit-post-visual-editor"
+      class="block-editor-block-compare__action"
     >
-      <RawHTML>
-        render
-      </RawHTML>
+      <button
+        class="components-button is-secondary"
+        tabindex="0"
+        type="button"
+      >
+        action
+      </button>
     </div>
   </div>
-  <div
-    className="block-editor-block-compare__action"
-  >
-    <ForwardRef(Button)
-      onClick={[Function]}
-      tabIndex="0"
-      variant="secondary"
-    >
-      action
-    </ForwardRef(Button)>
-  </div>
 </div>
 `;

package/src/components/block-compare/test/block-view.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -12,7 +12,7 @@ const noop = () => {};
 
 describe( 'BlockView', () => {
 	test( 'should match snapshot', () => {
-		const wrapper = shallow(
+		const { container } = render(
 			<BlockView
 				title="title"
 				rawContent="raw"
@@ -23,6 +23,6 @@ describe( 'BlockView', () => {
 			/>
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/components/block-content-overlay/index.js

@@ -11,14 +11,10 @@ import { store as blockEditorStore } from '../../store';
 export default function useBlockOverlayActive( clientId ) {
 	return useSelect(
 		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock, canEditBlock } =
+			const { __unstableHasActiveBlockOverlayActive } =
 				select( blockEditorStore );
 
-			return (
-				! canEditBlock( clientId ) ||
-				( ! isBlockSelected( clientId ) &&
-					! hasSelectedInnerBlock( clientId, true ) )
-			);
+			return __unstableHasActiveBlockOverlayActive( clientId );
 		},
 		[ clientId ]
 	);

package/src/components/block-content-overlay/style.scss

@@ -1,4 +1,6 @@
-.block-editor-block-content-overlay {
+.block-editor-block-list__block.has-block-overlay {
+	cursor: default;
+
 	&::before {
 		content: "";
 		position: absolute;
@@ -9,11 +11,30 @@
 		background: transparent;
 		border: none;
 		border-radius: $radius-block-ui;
-		z-index: z-index(".block-editor-block-content-overlay__overlay");
+		z-index: z-index(".block-editor-block-list__block.has-block-overlay");
+	}
+
+	&::after {
+		content: none !important;
 	}
 
 	&:hover:not(.is-dragging-blocks)::before {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.3);
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
+	}
+
+	&.is-selected:not(.is-dragging-blocks)::before {
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}
+
+	.block-editor-block-list__block {
+		pointer-events: none;
+	}
+
+	.block-editor-iframe__body.is-zoomed-out &::before {
+		// Unfortunately because of the vw unit, this is not always going to be exact
+		// When the scrollbar is visible, the frame exceeds the canvas by a few pixels.
+		width: calc(100vw);
+		left: calc(( 100% - 100vw ) / 2);
+	}
 }

package/src/components/block-draggable/draggable-chip.js

@@ -13,7 +13,10 @@ import BlockIcon from '../block-icon';
 export default function BlockDraggableChip( { count, icon } ) {
 	return (
 		<div className="block-editor-block-draggable-chip-wrapper">
-			<div className="block-editor-block-draggable-chip">
+			<div
+				className="block-editor-block-draggable-chip"
+				data-testid="block-draggable-chip"
+			>
 				<Flex
 					justify="center"
 					className="block-editor-block-draggable-chip__content"

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

@@ -59,7 +59,11 @@ export const Edit = ( props ) => {
 	const generatedClassName = hasBlockSupport( blockType, 'className', true )
 		? getBlockDefaultClassName( name )
 		: null;
-	const className = classnames( generatedClassName, attributes.className );
+	const className = classnames(
+		generatedClassName,
+		attributes.className,
+		props.className
+	);
 
 	return (
 		<Component { ...props } context={ context } className={ className } />

package/src/components/block-edit/test/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -28,13 +28,14 @@ describe( 'Edit', () => {
 	} );
 
 	it( 'should return null if block type not defined', () => {
-		const wrapper = shallow( <Edit name="core/test-block" /> );
+		const { container } = render( <Edit name="core/test-block" /> );
 
-		expect( wrapper.type() ).toBe( null );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should use edit implementation of block', () => {
-		const edit = () => <div />;
+		const edit = () => <div data-testid="foo-bar" />;
+
 		registerBlockType( 'core/test-block', {
 			save: noop,
 			category: 'text',
@@ -42,29 +43,33 @@ describe( 'Edit', () => {
 			edit,
 		} );
 
-		const wrapper = shallow( <Edit name="core/test-block" /> );
+		render( <Edit name="core/test-block" /> );
 
-		expect( wrapper.exists( edit ) ).toBe( true );
+		expect( screen.getByTestId( 'foo-bar' ) ).toBeVisible();
 	} );
 
 	it( 'should use save implementation of block as fallback', () => {
-		const save = () => <div />;
+		const save = () => <div data-testid="foo-bar" />;
+
 		registerBlockType( 'core/test-block', {
 			save,
 			category: 'text',
 			title: 'block title',
 		} );
 
-		const wrapper = shallow( <Edit name="core/test-block" /> );
+		render( <Edit name="core/test-block" /> );
 
-		expect( wrapper.exists( save ) ).toBe( true );
+		expect( screen.getByTestId( 'foo-bar' ) ).toBeVisible();
 	} );
 
 	it( 'should combine the default class name with a custom one', () => {
-		const edit = ( { className } ) => <div className={ className } />;
+		const edit = ( { className } ) => (
+			<div data-testid="foo-bar" className={ className } />
+		);
 		const attributes = {
 			className: 'my-class',
 		};
+
 		registerBlockType( 'core/test-block', {
 			edit,
 			save: noop,
@@ -72,14 +77,11 @@ describe( 'Edit', () => {
 			title: 'block title',
 		} );
 
-		const wrapper = shallow(
-			<Edit name="core/test-block" attributes={ attributes } />
-		);
+		render( <Edit name="core/test-block" attributes={ attributes } /> );
 
-		expect( wrapper.find( edit ).hasClass( 'wp-block-test-block' ) ).toBe(
-			true
-		);
-		expect( wrapper.find( edit ).hasClass( 'my-class' ) ).toBe( true );
+		const editElement = screen.getByTestId( 'foo-bar' );
+		expect( editElement ).toHaveClass( 'wp-block-test-block' );
+		expect( editElement ).toHaveClass( 'my-class' );
 	} );
 
 	it( 'should assign context', () => {
@@ -92,13 +94,13 @@ describe( 'Edit', () => {
 			save: noop,
 		} );
 
-		const wrapper = mount(
+		const { container } = render(
 			<BlockContextProvider value={ { value: 'Ok' } }>
 				<Edit name="core/test-block" />
 			</BlockContextProvider>
 		);
 
-		expect( wrapper.html() ).toBe( 'Ok' );
+		expect( container ).toHaveTextContent( 'Ok' );
 	} );
 
 	describe( 'light wrapper', () => {
@@ -113,13 +115,13 @@ describe( 'Edit', () => {
 				save: noop,
 			} );
 
-			const wrapper = mount(
+			const { container } = render(
 				<BlockContextProvider value={ { value: 'Ok' } }>
 					<Edit name="core/test-block" />
 				</BlockContextProvider>
 			);
 
-			expect( wrapper.html() ).toBe( 'Ok' );
+			expect( container ).toHaveTextContent( 'Ok' );
 		} );
 	} );
 } );

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