@wordpress/block-editor 8.0.17 → 8.1.2-next.f435e9e01b.0

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

@@ -9,6 +9,14 @@ import { useMemo } from '@wordpress/element';
 import Edit from './edit';
 import { BlockEditContextProvider, useBlockEditContext } from './context';
 
+/**
+ * The `useBlockEditContext` hook provides information about the block this hook is being used in.
+ * It returns an object with the `name`, `isSelected` state, and the `clientId` of the block.
+ * It is useful if you want to create custom hooks that need access to the current blocks clientId
+ * but don't want to rely on the data getting passed in as a parameter.
+ *
+ * @return {Object} Block edit context
+ */
 export { useBlockEditContext };
 
 export default function BlockEdit( props ) {

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { render } from 'test/helpers';
+import { Text } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -26,26 +27,26 @@ describe( 'Edit', () => {
 	} );
 
 	it( 'should return null if block type not defined', () => {
-		const wrapper = shallow( <Edit name="core/test-block" /> );
+		const screen = render( <Edit name="core/test-block" /> );
 
-		expect( wrapper.type() ).toBe( null );
+		expect( screen.toJSON() ).toBe( null );
 	} );
 
 	it( 'should use edit implementation of block', () => {
-		const edit = () => <div />;
+		const edit = () => <Text>core/test-block</Text>;
 		registerBlockType( 'core/test-block', {
 			category: 'text',
 			title: 'block title',
 			edit,
 		} );
 
-		const wrapper = shallow( <Edit name="core/test-block" /> );
+		const screen = render( <Edit name="core/test-block" /> );
 
-		expect( wrapper.exists( edit ) ).toBe( true );
+		expect( screen.getByText( 'core/test-block' ) ).toBeDefined();
 	} );
 
 	it( 'should assign context', () => {
-		const edit = ( { context } ) => context.value;
+		const edit = ( { context } ) => <Text>{ context.value }</Text>;
 		registerBlockType( 'core/test-block', {
 			category: 'text',
 			title: 'block title',
@@ -53,12 +54,12 @@ describe( 'Edit', () => {
 			edit,
 		} );
 
-		const wrapper = mount(
+		const screen = render(
 			<BlockContextProvider value={ { value: 'Ok' } }>
 				<Edit name="core/test-block" />
 			</BlockContextProvider>
 		);
 
-		expect( wrapper.html() ).toBe( 'Ok' );
+		expect( screen.getByText( 'Ok' ) ).toBeDefined();
 	} );
 } );

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

@@ -30,10 +30,7 @@ import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
-const BlockInspector = ( {
-	showNoBlockSelectedMessage = true,
-	bubblesVirtually = true,
-} ) => {
+const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const {
 		count,
 		hasBlockStyles,
@@ -70,6 +67,10 @@ const BlockInspector = ( {
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
 				<InspectorControls.Slot />
+				<InspectorControls.Slot
+					__experimentalGroup="color"
+					label={ __( 'Color' ) }
+				/>
 				<InspectorControls.Slot
 					__experimentalGroup="typography"
 					label={ __( 'Typography' ) }
@@ -112,7 +113,6 @@ const BlockInspector = ( {
 			clientId={ selectedBlockClientId }
 			blockName={ blockType.name }
 			hasBlockStyles={ hasBlockStyles }
-			bubblesVirtually={ bubblesVirtually }
 		/>
 	);
 };
@@ -121,7 +121,6 @@ const BlockInspectorSingleBlock = ( {
 	clientId,
 	blockName,
 	hasBlockStyles,
-	bubblesVirtually,
 } ) => {
 	const blockInformation = useBlockDisplayInformation( clientId );
 	return (
@@ -131,7 +130,10 @@ const BlockInspectorSingleBlock = ( {
 			{ hasBlockStyles && (
 				<div>
 					<PanelBody title={ __( 'Styles' ) }>
-						<BlockStyles clientId={ clientId } />
+						<BlockStyles
+							scope="core/block-inspector"
+							clientId={ clientId }
+						/>
 						{ hasBlockSupport(
 							blockName,
 							'defaultStylePicker',
@@ -140,15 +142,18 @@ const BlockInspectorSingleBlock = ( {
 					</PanelBody>
 				</div>
 			) }
-			<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
+			<InspectorControls.Slot />
+			<InspectorControls.Slot
+				__experimentalGroup="color"
+				label={ __( 'Color' ) }
+				className="color-block-support-panel__inner-wrapper"
+			/>
 			<InspectorControls.Slot
 				__experimentalGroup="typography"
-				bubblesVirtually={ bubblesVirtually }
 				label={ __( 'Typography' ) }
 			/>
 			<InspectorControls.Slot
 				__experimentalGroup="dimensions"
-				bubblesVirtually={ bubblesVirtually }
 				label={ __( 'Dimensions' ) }
 			/>
 			<InspectorControls.Slot
@@ -156,14 +161,14 @@ const BlockInspectorSingleBlock = ( {
 				label={ __( 'Border' ) }
 			/>
 			<div>
-				<AdvancedControls bubblesVirtually={ bubblesVirtually } />
+				<AdvancedControls />
 			</div>
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);
 };
 
-const AdvancedControls = ( { bubblesVirtually } ) => {
+const AdvancedControls = () => {
 	const slot = useSlot( InspectorAdvancedControls.slotName );
 	const hasFills = Boolean( slot.fills && slot.fills.length );
 
@@ -177,10 +182,7 @@ const AdvancedControls = ( { bubblesVirtually } ) => {
 			title={ __( 'Advanced' ) }
 			initialOpen={ false }
 		>
-			<InspectorControls.Slot
-				__experimentalGroup="advanced"
-				bubblesVirtually={ bubblesVirtually }
-			/>
+			<InspectorControls.Slot __experimentalGroup="advanced" />
 		</PanelBody>
 	);
 };

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { last } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -18,7 +17,6 @@ import ButtonBlockAppender from '../button-block-appender';
 import { store as blockEditorStore } from '../../store';
 
 function BlockListAppender( {
-	blockClientIds,
 	rootClientId,
 	canInsertDefaultBlock,
 	isLocked,
@@ -36,30 +34,18 @@ function BlockListAppender( {
 		// Prefer custom render prop if provided.
 		appender = <CustomAppender />;
 	} else {
-		const isDocumentAppender = ! rootClientId;
-		const isParentSelected = selectedBlockClientId === rootClientId;
-		const isAnotherDefaultAppenderAlreadyDisplayed =
-			selectedBlockClientId &&
-			! blockClientIds.includes( selectedBlockClientId );
+		const isParentSelected =
+			selectedBlockClientId === rootClientId ||
+			( ! rootClientId && ! selectedBlockClientId );
 
-		if (
-			! isDocumentAppender &&
-			! isParentSelected &&
-			( ! selectedBlockClientId ||
-				isAnotherDefaultAppenderAlreadyDisplayed )
-		) {
+		if ( ! isParentSelected ) {
 			return null;
 		}
 
 		if ( canInsertDefaultBlock ) {
 			// Render the default block appender when renderAppender has not been
 			// provided and the context supports use of the default appender.
-			appender = (
-				<DefaultBlockAppender
-					rootClientId={ rootClientId }
-					lastBlockClientId={ last( blockClientIds ) }
-				/>
-			);
+			appender = <DefaultBlockAppender rootClientId={ rootClientId } />;
 		} else {
 			// Fallback in the case no renderAppender has been provided and the
 			// default block can't be inserted.
@@ -103,7 +89,6 @@ function BlockListAppender( {
 
 export default withSelect( ( select, { rootClientId } ) => {
 	const {
-		getBlockOrder,
 		canInsertBlockType,
 		getTemplateLock,
 		getSelectedBlockClientId,
@@ -111,7 +96,6 @@ export default withSelect( ( select, { rootClientId } ) => {
 
 	return {
 		isLocked: !! getTemplateLock( rootClientId ),
-		blockClientIds: getBlockOrder( rootClientId ),
 		canInsertDefaultBlock: canInsertBlockType(
 			getDefaultBlockName(),
 			rootClientId

package/src/components/block-media-update-progress/index.native.js

@@ -281,7 +281,7 @@ export class BlockMediaUpdateProgress extends Component {
 			<View style={ styles.mediaUploadProgress } pointerEvents="box-none">
 				{ showSpinner && (
 					<View style={ styles.progressBar }>
-						<Spinner progress={ progress } />
+						<Spinner progress={ progress } testID="spinner" />
 					</View>
 				) }
 				{ renderContent( {