@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

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

@@ -14,6 +14,7 @@
 	display: inline-flex;
 	height: $block-toolbar-height;
 	padding: 0 ( $grid-unit-15 + $border-width );
+	position: relative;
 	user-select: none;
 	width: max-content;
 
@@ -45,3 +46,37 @@
 		font-size: $default-font-size;
 	}
 }
+
+// Specificity bump to override native component style.
+.block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: transparent;
+	transition: all 0.1s linear 0.1s;
+
+	.block-editor-block-draggable-chip__disabled-icon {
+		width: $grid-unit-50 * 0.5;
+		height: $grid-unit-50 * 0.5;
+		box-shadow: inset 0 0 0 1.5px $white;
+		border-radius: 50%;
+		display: inline-block;
+		padding: 0;
+		background: transparent linear-gradient(-45deg, transparent 47.5%, $white 47.5%, $white 52.5%, transparent 52.5%);
+
+	}
+}
+
+.block-draggable-invalid-drag-token {
+	.block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
+		background-color: $gray-700;
+		opacity: 1;
+		box-shadow: 0 4px 8px rgba($black, 0.2);
+	}
+}

package/src/components/block-draggable/test/helpers.native.js

@@ -3,11 +3,12 @@
  */
 import {
 	act,
+	advanceAnimationByFrames,
 	fireEvent,
 	initializeEditor,
+	screen,
 	waitForStoreResolvers,
 	within,
-	advanceAnimationByFrames,
 } from 'test/helpers';
 import { fireGestureHandler } from 'react-native-gesture-handler/jest-utils';
 import { State } from 'react-native-gesture-handler';
@@ -52,15 +53,15 @@ const DEFAULT_TOUCH_EVENTS = [
 export const initializeWithBlocksLayouts = async ( blocks ) => {
 	const initialHtml = blocks.map( ( block ) => block.html ).join( '\n' );
 
-	const screen = await initializeEditor( { initialHtml } );
-	const { getAllByLabelText } = screen;
+	await initializeEditor( { initialHtml } );
 
 	const waitPromises = [];
+	const blockListItems = screen.getAllByTestId( 'block-list-item-cell' );
+	// Check that rendered block list items match expected block count.
+	expect( blockListItems.length ).toBe( blocks.length );
+
 	blocks.forEach( ( block, index ) => {
-		const a11yLabel = new RegExp(
-			`${ block.name } Block\\. Row ${ index + 1 }`
-		);
-		const [ element ] = getAllByLabelText( a11yLabel );
+		const element = blockListItems[ index ];
 		// "onLayout" event will populate the blocks layouts data.
 		fireEvent( element, 'layout', {
 			nativeEvent: { layout: block.layout },

package/src/components/block-draggable/use-scroll-when-dragging.native.js

@@ -34,7 +34,7 @@ const VELOCITY_MULTIPLIER = 5000;
 export default function useScrollWhenDragging() {
 	const { scrollRef } = useBlockListContext();
 	const animatedScrollRef = useAnimatedRef();
-	animatedScrollRef( scrollRef );
+	animatedScrollRef( scrollRef?.scrollViewRef );
 
 	const { height: windowHeight } = useWindowDimensions();
 

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

@@ -3,6 +3,9 @@
  */
 import { createContext, useContext } from '@wordpress/element';
 
+export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
+export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );
+
 export const DEFAULT_BLOCK_EDIT_CONTEXT = {
 	name: '',
 	isSelected: false,

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

@@ -8,7 +8,12 @@ import { hasBlockSupport } from '@wordpress/blocks';
  * Internal dependencies
  */
 import Edit from './edit';
-import { BlockEditContextProvider, useBlockEditContext } from './context';
+import {
+	BlockEditContextProvider,
+	useBlockEditContext,
+	mayDisplayControlsKey,
+	mayDisplayParentControlsKey,
+} from './context';
 
 /**
  * The `useBlockEditContext` hook provides information about the block this hook is being used in.
@@ -20,7 +25,13 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
  */
 export { useBlockEditContext };
 
-export default function BlockEdit( props ) {
+export default function BlockEdit( {
+	mayDisplayControls,
+	mayDisplayParentControls,
+	// The remaining props are passed through the BlockEdit filters and are thus
+	// public API!
+	...props
+} ) {
 	const {
 		name,
 		isSelected,
@@ -32,19 +43,34 @@ export default function BlockEdit( props ) {
 	const layoutSupport =
 		hasBlockSupport( name, 'layout', false ) ||
 		hasBlockSupport( name, '__experimentalLayout', false );
-	const context = {
-		name,
-		isSelected,
-		clientId,
-		layout: layoutSupport ? layout : null,
-		__unstableLayoutClassNames,
-	};
 	return (
 		<BlockEditContextProvider
 			// It is important to return the same object if props haven't
 			// changed to avoid  unnecessary rerenders.
 			// See https://reactjs.org/docs/context.html#caveats.
-			value={ useMemo( () => context, Object.values( context ) ) }
+			value={ useMemo(
+				() => ( {
+					name,
+					isSelected,
+					clientId,
+					layout: layoutSupport ? layout : null,
+					__unstableLayoutClassNames,
+					// We use symbols in favour of an __unstable prefix to avoid
+					// usage outside of the package (this context is exposed).
+					[ mayDisplayControlsKey ]: mayDisplayControls,
+					[ mayDisplayParentControlsKey ]: mayDisplayParentControls,
+				} ),
+				[
+					name,
+					isSelected,
+					clientId,
+					layoutSupport,
+					layout,
+					__unstableLayoutClassNames,
+					mayDisplayControls,
+					mayDisplayParentControls,
+				]
+			) }
 		>
 			<Edit { ...props } />
 		</BlockEditContextProvider>

package/src/components/block-editing-mode/index.js

@@ -2,13 +2,13 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useContext, useEffect } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { BlockListBlockContext } from '../block-list/block-list-block-context';
+import { useBlockEditContext } from '../block-edit/context';
 
 /**
  * @typedef {'disabled'|'contentOnly'|'default'} BlockEditingMode
@@ -45,7 +45,7 @@ import { BlockListBlockContext } from '../block-list/block-list-block-context';
  * @return {BlockEditingMode} The current editing mode.
  */
 export function useBlockEditingMode( mode ) {
-	const { clientId = '' } = useContext( BlockListBlockContext ) ?? {};
+	const { clientId = '' } = useBlockEditContext();
 	const blockEditingMode = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getBlockEditingMode( clientId ),

package/src/components/block-icon/README.md

@@ -6,11 +6,6 @@ The rendered an [Icon](https://github.com/WordPress/gutenberg/tree/HEAD/packages
 
 ![Image block icons in various places](https://make.wordpress.org/core/files/2020/08/image-block-icons-in-various-places.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

package/src/components/block-info-slot-fill/index.js

@@ -7,14 +7,17 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
 
 const { createPrivateSlotFill } = unlock( componentsPrivateApis );
 const { Fill, Slot } = createPrivateSlotFill( 'BlockInformation' );
 
 const BlockInfo = ( props ) => {
-	const isDisplayed = useDisplayBlockControls();
-	if ( ! isDisplayed ) {
+	const context = useBlockEditContext();
+	if ( ! context[ mayDisplayControlsKey ] ) {
 		return null;
 	}
 	return <Fill { ...props } />;

package/src/components/block-inspector/README.md

@@ -4,11 +4,6 @@ The Block inspector is one of the panels that is displayed in the editor; it is
 
 ![Paragraph block inspector](https://make.wordpress.org/core/files/2020/08/paragraph-block-inspector.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -92,7 +92,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			blockType: _blockType,
 			topLevelLockedBlock:
 				__unstableGetContentLockingParent( _selectedBlockClientId ) ||
-				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
+				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
+				( _selectedBlockName === 'core/block' &&
+					window.__experimentalPatternPartialSyncing )
 					? _selectedBlockClientId
 					: undefined ),
 		};

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

@@ -34,10 +34,6 @@
 		// Ensures this PanelBody is treated like the ToolsPanel, removing double borders.
 		margin-top: -$border-width;
 	}
-
-	.block-editor-block-card {
-		padding: $grid-unit-20;
-	}
 }
 
 .block-editor-block-inspector__no-blocks,

package/src/components/block-list/block-list-item-cell.native.js

@@ -52,7 +52,11 @@ function BlockListItemCell( { children, item: clientId, onLayout } ) {
 		[ clientId, rootClientId, updateBlocksLayouts, onLayout ]
 	);
 
-	return <View onLayout={ onCellLayout }>{ children }</View>;
+	return (
+		<View testID="block-list-item-cell" onLayout={ onCellLayout }>
+			{ children }
+		</View>
+	);
 }
 
 export default BlockListItemCell;