@wordpress/block-editor 15.22.1 → 16.0.0

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

@@ -10,5 +10,5 @@
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 }

package/src/components/block-patterns-list/stories/index.story.jsx

@@ -11,7 +11,7 @@ import { ExperimentalBlockEditorProvider } from '../../provider';
 import patterns from './fixtures';
 // Reason: Styles are contained in ExperimentalBlockEditorProvider iframe.
 // eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
-import blockLibraryStyles from '../../../../../block-library/build-style/style.css?raw';
+import blockLibraryStyles from '@wordpress/block-library/build-style/style.css?raw';
 
 const blockEditorSettings = {
 	styles: [ { css: blockLibraryStyles } ],

package/src/components/block-quick-navigation/style.scss

@@ -1,5 +1,3 @@
-@use "@wordpress/base-styles/variables";
-
 .block-editor-block-quick-navigation__item {
-	font-weight: variables.$font-weight-regular;
+	font-weight: var(--wpds-typography-font-weight-default);
 }

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

@@ -30,7 +30,7 @@
 
 	button.components-button.block-editor-block-styles__item {
 		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-300;
+		border-color: $gray-300;
 		display: inline-block;
 		width: calc(50% - #{$grid-unit-05});
 
@@ -52,7 +52,7 @@
 
 		&:focus,
 		&.is-active:focus {
-			@include block-toolbar-button-style__focus();
+			@include outset-ring__focus();
 		}
 	}
 

package/src/components/block-styles/use-styles-for-block.js

@@ -31,6 +31,7 @@ function useGenericPreviewBlock( block, type ) {
 			return getBlockFromExample( blockName, {
 				attributes: example.attributes,
 				innerBlocks: example.innerBlocks,
+				innerContent: example.innerContent,
 			} );
 		}
 

package/src/components/block-title/use-block-display-title.js

@@ -39,7 +39,7 @@ export default function useBlockDisplayTitle( {
 				return null;
 			}
 
-			const { getBlockName, getBlockAttributes } =
+			const { getBlockName, getBlockAttributes, getBlock } =
 				select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
@@ -57,7 +57,12 @@ export default function useBlockDisplayTitle( {
 				return label;
 			}
 
-			const match = getActiveBlockVariation( blockName, attributes );
+			const match = getActiveBlockVariation(
+				blockName,
+				attributes,
+				undefined,
+				getBlock?.( clientId )?.innerContent
+			);
 			// Label will fallback to the title if no label is defined for the current label context.
 			return match?.title || blockType.title;
 		},

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

@@ -19,7 +19,6 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { store as blockEditorStore } from '../../store';
 import { hasPatternOverridesDefaultBinding } from '../../utils/block-bindings';
 import { unlock } from '../../lock-unlock';
-import { isIsolatedEditorKey } from '../../store/private-keys';
 
 function getBlockIconVariant( { select, clientIds } ) {
 	const {
@@ -30,11 +29,9 @@ function getBlockIconVariant( { select, clientIds } ) {
 		getTemplateLock,
 		getBlockEditingMode,
 		canEditBlock,
-		isWithinEditedContentOnlySection,
-		getSettings,
+		isSectionBlock,
 	} = unlock( select( blockEditorStore ) );
 	const { getBlockStyles } = select( blocksStore );
-	const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
 
 	const hasTemplateLock = clientIds.some(
 		( id ) => getTemplateLock( id ) === 'contentOnly'
@@ -48,8 +45,7 @@ function getBlockIconVariant( { select, clientIds } ) {
 	const hasPatternNameInSelection = clientIds.some(
 		( id ) =>
 			!! getBlockAttributes( id )?.metadata?.patternName &&
-			! isWithinEditedContentOnlySection( id ) &&
-			! isIsolatedEditor
+			isSectionBlock( id )
 	);
 	const hasPatternOverrides = clientIds.every( ( clientId ) =>
 		hasPatternOverridesDefaultBinding(
@@ -93,13 +89,8 @@ function getBlockIconVariant( { select, clientIds } ) {
 }
 
 function getBlockIcon( { select, clientIds } ) {
-	const {
-		getBlockName,
-		getBlockAttributes,
-		isWithinEditedContentOnlySection,
-		getSettings,
-	} = unlock( select( blockEditorStore ) );
-	const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
+	const { getBlockName, getBlockAttributes, getBlock, isSectionBlock } =
+		unlock( select( blockEditorStore ) );
 
 	const _isSingleBlock = clientIds.length === 1;
 	const firstClientId = clientIds[ 0 ];
@@ -108,8 +99,7 @@ function getBlockIcon( { select, clientIds } ) {
 	if (
 		_isSingleBlock &&
 		blockAttributes?.metadata?.patternName &&
-		! isWithinEditedContentOnlySection( firstClientId ) &&
-		! isIsolatedEditor
+		isSectionBlock( firstClientId )
 	) {
 		return symbol;
 	}
@@ -118,7 +108,12 @@ function getBlockIcon( { select, clientIds } ) {
 	const blockType = getBlockType( blockName );
 	if ( _isSingleBlock ) {
 		const { getActiveBlockVariation } = select( blocksStore );
-		const match = getActiveBlockVariation( blockName, blockAttributes );
+		const match = getActiveBlockVariation(
+			blockName,
+			blockAttributes,
+			undefined,
+			getBlock?.( firstClientId )?.innerContent
+		);
 		return match?.icon || blockType?.icon;
 	}
 

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

@@ -40,6 +40,7 @@ import EditSectionButton from './edit-section-button';
 import { unlock } from '../../lock-unlock';
 import { deviceTypeKey } from '../../store/private-keys';
 import BlockToolbarIcon from './block-toolbar-icon';
+import { hasViewportBlockStyleState } from '../../hooks/block-style-state';
 
 /**
  * Renders the block toolbar.
@@ -78,6 +79,7 @@ export function PrivateBlockToolbar( {
 		showBlockVisibilityButton,
 		showSwitchSectionStyleButton,
 		areSelectedBlocksHiddenOnViewport,
+		showStyleStateSlot,
 		canEdit,
 	} = useSelect( ( select ) => {
 		const { canEditBlock } = select( blockEditorStore );
@@ -95,6 +97,8 @@ export function PrivateBlockToolbar( {
 			isZoomOut,
 			isSectionBlock,
 			isBlockHiddenAtViewport,
+			getSelectedBlockStyleState,
+			isResponsiveEditing,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -135,6 +139,11 @@ export function PrivateBlockToolbar( {
 			selectedBlockClientIds.every( ( id ) =>
 				isBlockHiddenAtViewport( id, _currentDeviceType )
 			);
+		const _isEditingResponsiveStyleState =
+			isResponsiveEditing() &&
+			hasViewportBlockStyleState(
+				getSelectedBlockStyleState( selectedBlockClientId )
+			);
 
 		return {
 			blockClientId: selectedBlockClientId,
@@ -158,7 +167,8 @@ export function PrivateBlockToolbar( {
 			isSectionContainer: _isSectionBlock,
 			hasContentOnlyLocking: _hasTemplateLock,
 			showShuffleButton: _isZoomOut,
-			showSlots: ! _isZoomOut,
+			showSlots: ! _isZoomOut && ! _isEditingResponsiveStyleState,
+			showStyleStateSlot: ! _isZoomOut && _isEditingResponsiveStyleState,
 			showGroupButtons: ! _isZoomOut,
 			showLockButtons: ! _isZoomOut,
 			showBlockVisibilityButton: ! _isZoomOut,
@@ -261,31 +271,44 @@ export function PrivateBlockToolbar( {
 						<SwitchSectionStyle clientId={ blockClientIds[ 0 ] } />
 					) }
 				{ ! areSelectedBlocksHiddenOnViewport &&
-					shouldShowVisualToolbar &&
-					showSlots && (
+					shouldShowVisualToolbar && (
 						<>
 							{ ! isSectionContainer && (
+								<>
+									{ showSlots && (
+										<>
+											<BlockControls.Slot
+												group="parent"
+												className="block-editor-block-toolbar__slot"
+											/>
+											<BlockControls.Slot
+												group="block"
+												className="block-editor-block-toolbar__slot"
+											/>
+											<BlockControls.Slot className="block-editor-block-toolbar__slot" />
+											<BlockControls.Slot
+												group="inline"
+												className="block-editor-block-toolbar__slot"
+											/>
+										</>
+									) }
+									{ showStyleStateSlot && (
+										<BlockControls.Slot
+											group="style-state"
+											className="block-editor-block-toolbar__slot"
+										/>
+									) }
+								</>
+							) }
+							{ showSlots && (
 								<>
 									<BlockControls.Slot
-										group="parent"
-										className="block-editor-block-toolbar__slot"
-									/>
-									<BlockControls.Slot
-										group="block"
-										className="block-editor-block-toolbar__slot"
-									/>
-									<BlockControls.Slot className="block-editor-block-toolbar__slot" />
-									<BlockControls.Slot
-										group="inline"
+										group="other"
 										className="block-editor-block-toolbar__slot"
 									/>
+									<__unstableBlockToolbarLastItem.Slot />
 								</>
 							) }
-							<BlockControls.Slot
-								group="other"
-								className="block-editor-block-toolbar__slot"
-							/>
-							<__unstableBlockToolbarLastItem.Slot />
 						</>
 					) }
 				<BlockEditVisuallyButton clientIds={ blockClientIds } />

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

@@ -13,7 +13,6 @@ import { paragraph } from '@wordpress/icons';
  * Internal dependencies
  */
 import BlockToolbarIcon from '../block-toolbar-icon';
-import { isIsolatedEditorKey } from '../../../store/private-keys';
 
 jest.mock( '@wordpress/blocks', () => {
 	const actualImplementation = jest.requireActual( '@wordpress/blocks' );
@@ -68,15 +67,13 @@ describe( 'BlockToolbarIcon', () => {
 		},
 		blockName = 'core/group',
 		getActiveBlockVariation = () => null,
-		settings = {},
-		isWithinEditedSection = false,
+		isSectionBlock = true,
 	} = {} ) => {
 		useSelect.mockImplementation( ( mapSelect ) =>
 			mapSelect( () => ( {
 				get: () => false,
 				getBlockName: () => blockName,
 				getBlockAttributes: () => attributes,
-				getSettings: () => settings,
 				getBlockParentsByBlockName: () => [],
 				canRemoveBlocks: () => true,
 				getTemplateLock: () => undefined,
@@ -84,7 +81,7 @@ describe( 'BlockToolbarIcon', () => {
 				canEditBlock: () => true,
 				getBlockStyles: () => [ {} ],
 				getActiveBlockVariation,
-				isWithinEditedContentOnlySection: () => isWithinEditedSection,
+				isSectionBlock: () => isSectionBlock,
 			} ) )
 		);
 	};
@@ -210,7 +207,7 @@ describe( 'BlockToolbarIcon', () => {
 		} );
 
 		it( 'should show the block switcher when the section is being edited', () => {
-			setupToolbarSelectors( { isWithinEditedSection: true } );
+			setupToolbarSelectors( { isSectionBlock: false } );
 
 			render( <BlockToolbarIcon { ...defaultProps } /> );
 
@@ -227,9 +224,7 @@ describe( 'BlockToolbarIcon', () => {
 						patternName: 'theme/header-wrapper',
 					},
 				},
-				settings: {
-					[ isIsolatedEditorKey ]: true,
-				},
+				isSectionBlock: false,
 			} );
 
 			render( <BlockToolbarIcon { ...defaultProps } /> );
@@ -241,6 +236,34 @@ describe( 'BlockToolbarIcon', () => {
 				'core/group-icon'
 			);
 		} );
+
+		it( 'should show the block switcher when content-only editing is disabled', () => {
+			setupToolbarSelectors( {
+				isSectionBlock: false,
+			} );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect(
+				screen.getByTestId( 'block-switcher' )
+			).toBeInTheDocument();
+			expect( screen.getByTestId( 'block-icon' ) ).toHaveTextContent(
+				'core/group-icon'
+			);
+		} );
+
+		it( 'should show the block icon for section blocks without pattern metadata', () => {
+			setupToolbarSelectors( {
+				attributes: {},
+				blockName: 'core/template-part',
+			} );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect( screen.getByTestId( 'block-icon' ) ).toHaveTextContent(
+				'core/template-part-icon'
+			);
+		} );
 	} );
 
 	describe( 'label calculation', () => {

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

@@ -58,6 +58,9 @@ function selector( select ) {
 		isZoomOutMode: isZoomOut(),
 		isDragging: isDragging(),
 		viewportModalClientIds: getViewportModalClientIds(),
+		blockVisibilitySetting:
+			select( blockEditorStore ).getSettings().__experimentalFeatures
+				?.blockVisibility?.allowEditing,
 	};
 }
 
@@ -82,6 +85,7 @@ export default function BlockTools( {
 		isZoomOutMode,
 		isDragging,
 		viewportModalClientIds,
+		blockVisibilitySetting,
 	} = useSelect( selector, [] );
 	const isMatch = useShortcutEventMatch();
 	const {
@@ -247,6 +251,9 @@ export default function BlockTools( {
 		} else if (
 			isMatch( 'core/block-editor/toggle-block-visibility', event )
 		) {
+			if ( blockVisibilitySetting === false ) {
+				return;
+			}
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();

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

@@ -1,5 +1,4 @@
 .block-editor-block-types-list > [role="presentation"] {
-	overflow: hidden;
 	display: flex;
 	flex-wrap: wrap;
 }

package/src/components/block-variation-transforms/index.js

@@ -119,7 +119,6 @@ function VariationsToggleGroupControl( {
 				value={ selectedValue }
 				hideLabelFromVision
 				onChange={ onSelectVariation }
-				__next40pxDefaultSize
 			>
 				{ variations.map( ( variation ) => (
 					<ToggleGroupControlOptionIcon

package/src/components/block-visibility/modal.js

@@ -28,13 +28,11 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import {
-	BLOCK_VISIBILITY_VIEWPORT_ENTRIES,
-	BLOCK_VISIBILITY_VIEWPORTS,
-} from './constants';
+import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
 import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
 import {
+	getBlockVisibilityViewportEntries,
 	getViewportCheckboxState,
 	getHideEverywhereCheckboxState,
 } from './utils';
@@ -74,6 +72,16 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			'core/editor/toggle-list-view'
 		);
 	}, [] );
+	const viewportSettings = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().__experimentalFeatures
+				?.viewport,
+		[]
+	);
+	const viewportEntries = useMemo(
+		() => getBlockVisibilityViewportEntries( viewportSettings ),
+		[ viewportSettings ]
+	);
 
 	const initialViewportValues = useMemo( () => {
 		if ( blocks?.length === 0 ) {
@@ -85,7 +93,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 
 		const viewportValues = {};
 
-		BLOCK_VISIBILITY_VIEWPORT_ENTRIES.forEach( ( [ , { key } ] ) => {
+		viewportEntries.forEach( ( [ , { key } ] ) => {
 			viewportValues[ key ] = getViewportCheckboxState( blocks, key );
 		} );
 
@@ -93,7 +101,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			hideEverywhere: getHideEverywhereCheckboxState( blocks ),
 			viewportChecked: viewportValues,
 		};
-	}, [ blocks ] );
+	}, [ blocks, viewportEntries ] );
 
 	const [ viewportChecked, setViewportChecked ] = useState(
 		initialViewportValues?.viewportChecked ?? {}
@@ -149,12 +157,17 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 		if ( hideEverywhere !== initialViewportValues.hideEverywhere ) {
 			return true;
 		}
-		return BLOCK_VISIBILITY_VIEWPORT_ENTRIES.some(
+		return viewportEntries.some(
 			( [ , { key } ] ) =>
 				viewportChecked[ key ] !==
 				initialViewportValues.viewportChecked[ key ]
 		);
-	}, [ hideEverywhere, viewportChecked, initialViewportValues ] );
+	}, [
+		hideEverywhere,
+		viewportChecked,
+		initialViewportValues,
+		viewportEntries,
+	] );
 
 	const hasIndeterminateValues = useMemo( () => {
 		if ( hideEverywhere === null ) {
@@ -171,7 +184,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			const newVisibility = hideEverywhere
 				? false
 				: {
-						viewport: BLOCK_VISIBILITY_VIEWPORT_ENTRIES.reduce(
+						viewport: viewportEntries.reduce(
 							( acc, [ , { key } ] ) => {
 								if ( viewportChecked[ key ] ) {
 									// Values are inverted to hide the block on the selected viewport.
@@ -215,6 +228,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			noticeMessage,
 			onClose,
 			updateBlockAttributes,
+			viewportEntries,
 			viewportChecked,
 		]
 	);
@@ -258,7 +272,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 							/>
 							{ hideEverywhere !== true && (
 								<ul className="block-editor-block-visibility-modal__sub-options">
-									{ BLOCK_VISIBILITY_VIEWPORT_ENTRIES.map(
+									{ viewportEntries.map(
 										( [ , { label, icon, key } ] ) => (
 											<li
 												key={ key }

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

@@ -29,7 +29,7 @@
 		}
 
 		&-checkbox--everywhere {
-			font-weight: 600;
+			font-weight: var(--wpds-typography-font-weight-emphasis);
 		}
 
 		&-icon--checked {