@wordpress/block-editor 7.0.1 → 8.0.0

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

@@ -51,10 +51,7 @@ export const Edit = ( props ) => {
 	// them preferentially as the render value for the block.
 	const Component = blockType.edit || blockType.save;
 
-	if (
-		blockType.apiVersion > 1 ||
-		hasBlockSupport( blockType, 'lightBlockWrapper', false )
-	) {
+	if ( blockType.apiVersion > 1 ) {
 		return <Component { ...props } context={ context } />;
 	}
 

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

@@ -8,8 +8,9 @@ import classnames from 'classnames';
  */
 import { Icon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
+import { memo } from '@wordpress/element';
 
-export default function BlockIcon( { icon, showColors = false, className } ) {
+function BlockIcon( { icon, showColors = false, className } ) {
 	if ( icon?.src === 'block-default' ) {
 		icon = {
 			src: blockDefault,
@@ -35,3 +36,5 @@ export default function BlockIcon( { icon, showColors = false, className } ) {
 		</span>
 	);
 }
+
+export default memo( BlockIcon );

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

@@ -8,41 +8,40 @@ import { View } from 'react-native';
  */
 import { Icon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-export function BlockIcon( {
-	icon,
-	showColors = false,
-	getStylesFromColorScheme,
-} ) {
+export function BlockIcon( { icon, fill, size, showColors = false } ) {
 	if ( icon?.src === 'block-default' ) {
 		icon = {
 			src: blockDefault,
 		};
 	}
 
+	const defaultFill = usePreferredColorSchemeStyle(
+		styles.iconPlaceholder,
+		styles.iconPlaceholderDark
+	)?.fill;
+	const iconForeground = showColors ? icon?.foreground : undefined;
+
 	const renderedIcon = (
 		<Icon
 			icon={ icon && icon.src ? icon.src : icon }
-			{ ...getStylesFromColorScheme(
-				styles.iconPlaceholder,
-				styles.iconPlaceholderDark
-			) }
+			fill={ fill || iconForeground || defaultFill }
+			{ ...( size && { size } ) }
 		/>
 	);
 	const style = showColors
 		? {
 				backgroundColor: icon && icon.background,
-				color: icon && icon.foreground,
 		  }
 		: {};
 
 	return <View style={ style }>{ renderedIcon }</View>;
 }
 
-export default withPreferredColorScheme( BlockIcon );
+export default BlockIcon;

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

@@ -19,8 +19,10 @@ import { useSelect } from '@wordpress/data';
  */
 import SkipToSelectedBlock from '../skip-to-selected-block';
 import BlockCard from '../block-card';
-import InspectorControls from '../inspector-controls';
-import InspectorAdvancedControls from '../inspector-advanced-controls';
+import {
+	default as InspectorControls,
+	InspectorAdvancedControls,
+} from '../inspector-controls';
 import BlockStyles from '../block-styles';
 import MultiSelectionInspector from '../multi-selection-inspector';
 import DefaultStylePicker from '../default-style-picker';
@@ -127,19 +129,26 @@ const BlockInspectorSingleBlock = ( {
 				</div>
 			) }
 			<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
+			<InspectorControls.Slot
+				__experimentalGroup="typography"
+				bubblesVirtually={ bubblesVirtually }
+				label={ __( 'Typography' ) }
+			/>
+			<InspectorControls.Slot
+				__experimentalGroup="dimensions"
+				bubblesVirtually={ bubblesVirtually }
+				label={ __( 'Dimensions' ) }
+			/>
 			<div>
-				<AdvancedControls
-					slotName={ InspectorAdvancedControls.slotName }
-					bubblesVirtually={ bubblesVirtually }
-				/>
+				<AdvancedControls bubblesVirtually={ bubblesVirtually } />
 			</div>
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);
 };
 
-const AdvancedControls = ( { slotName, bubblesVirtually } ) => {
-	const slot = useSlot( slotName );
+const AdvancedControls = ( { bubblesVirtually } ) => {
+	const slot = useSlot( InspectorAdvancedControls.slotName );
 	const hasFills = Boolean( slot.fills && slot.fills.length );
 
 	if ( ! hasFills ) {
@@ -152,7 +161,8 @@ const AdvancedControls = ( { slotName, bubblesVirtually } ) => {
 			title={ __( 'Advanced' ) }
 			initialOpen={ false }
 		>
-			<InspectorAdvancedControls.Slot
+			<InspectorControls.Slot
+				__experimentalGroup="advanced"
 				bubblesVirtually={ bubblesVirtually }
 			/>
 		</PanelBody>

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

@@ -30,6 +30,11 @@ function BlockHTML( { clientId } ) {
 	const { updateBlock } = useDispatch( blockEditorStore );
 	const onChange = () => {
 		const blockType = getBlockType( block.name );
+
+		if ( ! blockType ) {
+			return;
+		}
+
 		const attributes = getBlockAttributes(
 			blockType,
 			html,

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

@@ -16,6 +16,8 @@ import { ReadableContentView, alignmentHelpers } from '@wordpress/components';
  */
 import BlockListBlock from './block';
 import BlockInsertionPoint from './insertion-point';
+import Grid from './grid-item';
+
 import styles from './block-list-item.native.scss';
 import { store as blockEditorStore } from '../../store';
 
@@ -104,7 +106,7 @@ export class BlockListItem extends Component {
 		];
 	}
 
-	render() {
+	renderContent() {
 		const {
 			blockAlignment,
 			clientId,
@@ -123,10 +125,6 @@ export class BlockListItem extends Component {
 			contentResizeMode === 'stretch' && stretchStyle;
 		const { isContainerRelated } = alignmentHelpers;
 
-		if ( ! blockWidth ) {
-			return null;
-		}
-
 		return (
 			<ReadableContentView
 				align={ blockAlignment }
@@ -162,6 +160,34 @@ export class BlockListItem extends Component {
 			</ReadableContentView>
 		);
 	}
+
+	render() {
+		const {
+			gridProperties,
+			clientId,
+			parentWidth,
+			items,
+			blockWidth,
+		} = this.props;
+
+		if ( ! blockWidth ) {
+			return null;
+		}
+
+		if ( gridProperties ) {
+			return (
+				<Grid
+					numOfColumns={ gridProperties.numColumns }
+					tileCount={ items.length }
+					index={ items.indexOf( clientId ) }
+					maxWidth={ parentWidth }
+				>
+					{ this.renderContent() }
+				</Grid>
+			);
+		}
+		return this.renderContent();
+	}
 }
 
 export default compose( [
@@ -173,7 +199,7 @@ export default compose( [
 				isBlockInsertionPointVisible,
 				getSettings,
 				getBlockParents,
-				__unstableGetBlockWithoutInnerBlocks,
+				getBlock,
 			} = select( blockEditorStore );
 
 			const blockClientIds = getBlockOrder( rootClientId );
@@ -199,14 +225,11 @@ export default compose( [
 
 			const isReadOnly = getSettings().readOnly;
 
-			const block = __unstableGetBlockWithoutInnerBlocks( clientId );
-			const { attributes, name } = block || {};
+			const { attributes, name } = getBlock( clientId ) || {};
 			const { align } = attributes || {};
 			const parents = getBlockParents( clientId, true );
 			const hasParents = !! parents.length;
-			const parentBlock = hasParents
-				? __unstableGetBlockWithoutInnerBlocks( parents[ 0 ] )
-				: {};
+			const parentBlock = hasParents ? getBlock( parents[ 0 ] ) : {};
 			const { align: parentBlockAlignment } =
 				parentBlock?.attributes || {};
 			const { name: parentBlockName } = parentBlock || {};

package/src/components/block-list/block-list-item.native.scss

@@ -10,3 +10,7 @@
 .fullAlignmentPadding {
 	padding: $block-edge-to-content;
 }
+
+.gridItem {
+	overflow: visible;
+}

package/src/components/block-list/block-selection-button.native.js

@@ -5,6 +5,7 @@ import { Icon } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { getBlockType } from '@wordpress/blocks';
+import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * External dependencies
@@ -58,11 +59,13 @@ const BlockSelectionButton = ( {
 							/>
 						</View>,
 					] }
-				<Icon
-					size={ 24 }
-					icon={ blockInformation?.icon?.src }
-					fill={ styles.icon.color }
-				/>
+				{ blockInformation?.icon && (
+					<BlockIcon
+						size={ 24 }
+						icon={ blockInformation.icon }
+						fill={ styles.icon.color }
+					/>
+				) }
 				<Text
 					maxFontSizeMultiplier={ 1.25 }
 					ellipsizeMode="tail"

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

@@ -17,7 +17,6 @@ import {
 	getBlockType,
 	getSaveContent,
 	isUnmodifiedDefaultBlock,
-	hasBlockSupport,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { withDispatch, withSelect, useDispatch } from '@wordpress/data';
@@ -72,6 +71,7 @@ function Block( { children, isHtml, ...props } ) {
 function BlockListBlock( {
 	mode,
 	isLocked,
+	canRemove,
 	clientId,
 	isSelected,
 	isSelectionEnabled,
@@ -100,9 +100,9 @@ function BlockListBlock( {
 			attributes={ attributes }
 			setAttributes={ setAttributes }
 			insertBlocksAfter={ isLocked ? undefined : onInsertBlocksAfter }
-			onReplace={ isLocked ? undefined : onReplace }
-			onRemove={ isLocked ? undefined : onRemove }
-			mergeBlocks={ isLocked ? undefined : onMerge }
+			onReplace={ canRemove ? onReplace : undefined }
+			onRemove={ canRemove ? onRemove : undefined }
+			mergeBlocks={ canRemove ? onMerge : undefined }
 			clientId={ clientId }
 			isSelectionEnabled={ isSelectionEnabled }
 			toggleSelection={ toggleSelection }
@@ -110,12 +110,9 @@ function BlockListBlock( {
 	);
 
 	const blockType = getBlockType( name );
-	const lightBlockWrapper =
-		blockType.apiVersion > 1 ||
-		hasBlockSupport( blockType, 'lightBlockWrapper', false );
 
 	// Determine whether the block has props to apply to the wrapper.
-	if ( blockType.getEditWrapperProps ) {
+	if ( blockType?.getEditWrapperProps ) {
 		wrapperProps = mergeWrapperProps(
 			wrapperProps,
 			blockType.getEditWrapperProps( attributes )
@@ -159,7 +156,7 @@ function BlockListBlock( {
 				</Block>
 			</>
 		);
-	} else if ( lightBlockWrapper ) {
+	} else if ( blockType?.apiVersion > 1 ) {
 		block = blockEdit;
 	} else {
 		block = <Block { ...wrapperProps }>{ blockEdit }</Block>;
@@ -195,10 +192,15 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
 		isSelectionEnabled,
 		getTemplateLock,
 		__unstableGetBlockWithoutInnerBlocks,
+		canRemoveBlock,
+		canMoveBlock,
 	} = select( blockEditorStore );
 	const block = __unstableGetBlockWithoutInnerBlocks( clientId );
 	const isSelected = isBlockSelected( clientId );
 	const templateLock = getTemplateLock( rootClientId );
+	const canRemove = canRemoveBlock( clientId, rootClientId );
+	const canMove = canMoveBlock( clientId, rootClientId );
+
 	// The fallback to `{}` is a temporary fix.
 	// This function should never be called when a block is not present in
 	// the state. It happens now because the order in withSelect rendering
@@ -211,6 +213,8 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
 		mode: getBlockMode( clientId ),
 		isSelectionEnabled: isSelectionEnabled(),
 		isLocked: !! templateLock,
+		canRemove,
+		canMove,
 		// Users of the editor.BlockListBlock filter used to be able to
 		// access the block prop.
 		// Ideally these blocks would rely on the clientId prop only.

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

@@ -51,6 +51,7 @@ function BlockForType( {
 	baseGlobalStyles,
 } ) {
 	const defaultColors = useSetting( 'color.palette' ) || emptyArray;
+	const fontSizes = useSetting( 'typography.fontSizes' ) || emptyArray;
 	const globalStyle = useGlobalStyles();
 	const mergedStyle = useMemo( () => {
 		return getMergedGlobalStyles(
@@ -59,7 +60,8 @@ function BlockForType( {
 			wrapperProps.style,
 			attributes,
 			defaultColors,
-			name
+			name,
+			fontSizes
 		);
 	}, [
 		defaultColors,
@@ -305,7 +307,7 @@ export default compose( [
 			getBlockIndex,
 			getSettings,
 			isBlockSelected,
-			__unstableGetBlockWithoutInnerBlocks,
+			getBlock,
 			getSelectedBlockClientId,
 			getLowestCommonAncestorWithSelectedBlock,
 			getBlockParents,
@@ -315,12 +317,12 @@ export default compose( [
 		const order = getBlockIndex( clientId, rootClientId );
 		const isSelected = isBlockSelected( clientId );
 		const isInnerBlockSelected = hasSelectedInnerBlock( clientId );
-		const block = __unstableGetBlockWithoutInnerBlocks( clientId );
+		const block = getBlock( clientId );
 		const { name, attributes, isValid } = block || {};
 
 		const blockType = getBlockType( name || 'core/missing' );
-		const title = blockType.title;
-		const icon = blockType.icon;
+		const title = blockType?.title;
+		const icon = blockType?.icon;
 
 		const parents = getBlockParents( clientId, true );
 		const parentId = parents[ 0 ] || '';

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

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import styles from './block-list-item.scss';
+
+function Grid( props ) {
+	/**
+	 * Since we don't have `calc()`, we must calculate our spacings here in
+	 * order to preserve even spacing between tiles and equal width for tiles
+	 * in a given row.
+	 *
+	 * In order to ensure equal sizing of tile contents, we distribute the
+	 * spacing such that each tile has an equal "share" of the fixed spacing. To
+	 * keep the tiles properly aligned within their rows, we calculate the left
+	 * and right paddings based on the tile's relative position within the row.
+	 *
+	 * Note: we use padding instead of margins so that the fixed spacing is
+	 * included within the relative spacing (i.e. width percentage), and
+	 * wrapping behavior is preserved.
+	 *
+	 * - The left most tile in a row must have left padding of zero.
+	 * - The right most tile in a row must have a right padding of zero.
+	 *
+	 * The values of these left and right paddings are interpolated for tiles in
+	 * between. The right padding is complementary with the left padding of the
+	 * next tile (i.e. the right padding of [tile n] + the left padding of
+	 * [tile n + 1] will be equal for all tiles except the last one in a given
+	 * row).
+	 *
+	 */
+	const { numOfColumns, children, tileCount, index, maxWidth } = props;
+	const lastTile = tileCount - 1;
+	const lastRow = Math.floor( lastTile / numOfColumns );
+
+	const row = Math.floor( index / numOfColumns );
+	const rowLength =
+		row === lastRow ? ( lastTile % numOfColumns ) + 1 : numOfColumns;
+
+	return (
+		<View
+			style={ [
+				{
+					width: maxWidth / rowLength,
+				},
+				styles.gridItem,
+			] }
+		>
+			{ children }
+		</View>
+	);
+}
+
+export default Grid;

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

@@ -15,18 +15,24 @@ import { createContext, useState, useMemo } from '@wordpress/element';
  */
 import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
-import useBlockDropZone from '../use-block-drop-zone';
 import { useInBetweenInserter } from './use-in-between-inserter';
 import { store as blockEditorStore } from '../../store';
 import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
 import { LayoutProvider, defaultLayout } from './layout';
 import BlockToolsBackCompat from '../block-tools/back-compat';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
-import { Head } from './head';
+import { useInnerBlocksProps } from '../inner-blocks';
+import {
+	BlockEditContextProvider,
+	DEFAULT_BLOCK_EDIT_CONTEXT,
+} from '../block-edit/context';
+
+const elementContext = createContext();
 
 export const IntersectionObserver = createContext();
 
-function Root( { className, children } ) {
+function Root( { className, ...settings } ) {
+	const [ element, setElement ] = useState();
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { isOutlineMode, isFocusMode, isNavigationMode } = useSelect(
 		( select ) => {
@@ -42,41 +48,41 @@ function Root( { className, children } ) {
 		},
 		[]
 	);
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			ref: useMergeRefs( [
+				useBlockSelectionClearer(),
+				useInBetweenInserter(),
+				setElement,
+			] ),
+			className: classnames( 'is-root-container', className, {
+				'is-outline-mode': isOutlineMode,
+				'is-focus-mode': isFocusMode && isLargeViewport,
+				'is-navigate-mode': isNavigationMode,
+			} ),
+		},
+		settings
+	);
 	return (
-		<Head>
-			<div
-				ref={ useMergeRefs( [
-					useBlockSelectionClearer(),
-					useBlockDropZone(),
-					useInBetweenInserter(),
-				] ) }
-				className={ classnames(
-					'block-editor-block-list__layout is-root-container',
-					className,
-					{
-						'is-outline-mode': isOutlineMode,
-						'is-focus-mode': isFocusMode && isLargeViewport,
-						'is-navigate-mode': isNavigationMode,
-					}
-				) }
-			>
-				{ children }
-			</div>
-		</Head>
+		<elementContext.Provider value={ element }>
+			<div { ...innerBlocksProps } />
+		</elementContext.Provider>
 	);
 }
 
-export default function BlockList( { className, ...props } ) {
+export default function BlockList( settings ) {
 	usePreParsePatterns();
 	return (
 		<BlockToolsBackCompat>
-			<Root className={ className }>
-				<BlockListItems { ...props } />
-			</Root>
+			<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
+				<Root { ...settings } />
+			</BlockEditContextProvider>
 		</BlockToolsBackCompat>
 	);
 }
 
+BlockList.__unstableElementContext = elementContext;
+
 function Items( {
 	placeholder,
 	rootClientId,

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

@@ -24,7 +24,7 @@ import { __ } from '@wordpress/i18n';
  */
 import styles from './style.scss';
 import BlockListAppender from '../block-list-appender';
-import BlockListItem from './block-list-item.native';
+import BlockListItem from './block-list-item';
 import { store as blockEditorStore } from '../../store';
 
 const BlockListContext = createContext();
@@ -47,6 +47,7 @@ const getStyles = (
 	const computedStyles = [
 		isStackedHorizontally && styles.horizontal,
 		horizontalAlignment && styles[ `is-aligned-${ horizontalAlignment }` ],
+		styles.overflowVisible,
 	];
 	stylesMemo[ styleName ] = computedStyles;
 	return computedStyles;
@@ -128,6 +129,7 @@ export class BlockList extends Component {
 			onDeleteBlock,
 			contentStyle,
 			renderAppender,
+			gridProperties,
 		} = this.props;
 		const { blockWidth } = this.state;
 		if (
@@ -136,7 +138,8 @@ export class BlockList extends Component {
 			this.extraData.onDeleteBlock !== onDeleteBlock ||
 			this.extraData.contentStyle !== contentStyle ||
 			this.extraData.renderAppender !== renderAppender ||
-			this.extraData.blockWidth !== blockWidth
+			this.extraData.blockWidth !== blockWidth ||
+			this.extraData.gridProperties !== gridProperties
 		) {
 			this.extraData = {
 				parentWidth,
@@ -145,6 +148,7 @@ export class BlockList extends Component {
 				contentStyle,
 				renderAppender,
 				blockWidth,
+				gridProperties,
 			};
 		}
 		return this.extraData;
@@ -258,8 +262,6 @@ export class BlockList extends Component {
 						{ flex: isRootList ? 1 : 0 },
 						! isRootList && styles.overflowVisible,
 					] }
-					horizontal={ horizontal }
-					numColumns={ 1 }
 					extraData={ this.getExtraData() }
 					scrollEnabled={ isRootList }
 					contentContainerStyle={ [
@@ -312,9 +314,11 @@ export class BlockList extends Component {
 			onDeleteBlock,
 			rootClientId,
 			isStackedHorizontally,
+			blockClientIds,
 			parentWidth,
 			marginVertical = styles.defaultBlock.marginTop,
 			marginHorizontal = styles.defaultBlock.marginLeft,
+			gridProperties,
 		} = this.props;
 		const { blockWidth } = this.state;
 		return (
@@ -333,6 +337,8 @@ export class BlockList extends Component {
 					this.shouldShowInnerBlockAppender
 				}
 				blockWidth={ blockWidth }
+				gridProperties={ gridProperties }
+				items={ blockClientIds }
 			/>
 		);
 	}

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

@@ -6,7 +6,6 @@
 
 .horizontalContentContainer {
 	flex-direction: row;
-	flex-wrap: wrap;
 	justify-content: flex-start;
 	align-items: stretch;
 	overflow: visible;

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

@@ -326,6 +326,21 @@
 	z-index: z-index("{core/image aligned left or right} .wp-block");
 }
 
+.wp-site-blocks > [data-align="left"] {
+	float: left;
+	margin-right: 2em;
+}
+
+.wp-site-blocks > [data-align="right"] {
+	float: right;
+	margin-left: 2em;
+}
+
+.wp-site-blocks > [data-align="center"] {
+	justify-content: center;
+	margin-left: auto;
+	margin-right: auto;
+}
 
 /**
  * In-Canvas Inserter