@wordpress/block-editor 16.1.0 → 17.0.0

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

@@ -119,6 +119,14 @@
 				margin-left: 0;
 			}
 		}
+
+		// Make room for the inserter next to the parent selector.
+		&.has-parent:has(.block-editor-block-parent-selector__inserter) {
+			margin-left: calc(#{$grid-unit-60} + #{$grid-unit-30} + #{$grid-unit-15} + #{$grid-unit-10} + 2 * #{$border-width});
+			.show-icon-labels & {
+				margin-left: 0;
+			}
+		}
 	}
 
 	.block-editor-block-toolbar {
@@ -149,6 +157,92 @@
 		position: absolute;
 		left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
 
+		// With the inserter next to the parent button, the border moves to
+		// the shared container so the pair reads as one toolbar segment.
+		// The toolbar group sizing comes from the components-toolbar-group
+		// class the container carries when the inserter is in it; only the
+		// detached position and the full border are its own.
+		&:has(.block-editor-block-parent-selector__inserter) {
+			left: calc(-#{$grid-unit-60} - #{$grid-unit-30} - #{$grid-unit-15} - #{$grid-unit-10} - 3 * #{$border-width});
+			border: $border-width solid $gray-900;
+			border-radius: $radius-small;
+			// The box paints the background, like the toolbar box does for
+			// its groups.
+			background-color: $white;
+
+			// The same rule the Toolbar container has for its last group;
+			// this box stands in for it here.
+			> .components-toolbar-group:last-child {
+				border-right: none;
+			}
+
+			.block-editor-block-parent-selector__button {
+				// Buttons in a toolbar are transparent; the box paints the
+				// background and border behind them.
+				border: none;
+				background: none;
+			}
+		}
+
+		.block-editor-block-parent-selector__inserter.components-button.has-icon {
+			color: $white;
+			background: transparent;
+
+			// The black square every other inserter has, drawn under the
+			// icon in the middle of the target.
+			&::after {
+				content: "";
+				position: absolute;
+				z-index: -1;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: $button-size-small;
+				height: $button-size-small;
+				border-radius: $radius-small;
+				background: $gray-900;
+			}
+
+			&:hover {
+				color: $white;
+
+				&::after {
+					background: var(--wp-admin-theme-color);
+				}
+			}
+
+			// With the text labels preference, the button shows its label
+			// like every other toolbar button, not the black square.
+			.show-icon-labels & {
+				width: auto;
+				padding: 0 $grid-unit-15;
+				color: inherit;
+
+				svg {
+					display: none;
+				}
+
+				&::after {
+					content: attr(aria-label);
+					position: static;
+					transform: none;
+					width: auto;
+					height: auto;
+					border-radius: 0;
+					background: none;
+					white-space: nowrap;
+				}
+
+				&:hover {
+					color: var(--wp-admin-theme-color);
+
+					&::after {
+						background: none;
+					}
+				}
+			}
+		}
+
 		&::before {
 			content: "";
 		}

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { getScrollContainer } from '@wordpress/dom';
@@ -10,10 +7,6 @@ import {
 	useMemo,
 	useState,
 } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { hasStickyOrFixedPositionValue } from '../../hooks/position';

package/src/components/block-tools/use-selected-block-tool-props.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 
 /**

package/src/components/block-tools/use-show-block-tools.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 

package/src/components/block-tools/zoom-out-mode-inserter-button.js

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { Button } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import BlockPopoverInbetween from '../block-popover/inbetween';
 import ZoomOutModeInserterButton from './zoom-out-mode-inserter-button';
 import { store as blockEditorStore } from '../../store';

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

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import InserterListItem from '../inserter-list-item';
 import { InserterListboxGroup, InserterListboxRow } from '../inserter-listbox';
 

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

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { Button, Placeholder } from '@wordpress/components';
 import { layout } from '@wordpress/icons';

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { store as blocksStore } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
 import {
@@ -12,10 +9,6 @@ import {
 import { VisuallyHidden } from '@wordpress/ui';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';

package/src/components/block-vertical-alignment-control/index.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import BlockVerticalAlignmentUI from './ui';
 
 const BlockVerticalAlignmentControl = ( props ) => {

package/src/components/block-vertical-alignment-control/test/index.js

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
 import BlockVerticalAlignmentUI from '../ui';
 
 describe( 'BlockVerticalAlignmentUI', () => {

package/src/components/block-vertical-alignment-control/ui.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, _x } from '@wordpress/i18n';
 import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
 import {

package/src/components/block-visibility/{constants.js → constants.ts}

@@ -1,15 +1,19 @@
-/**
- * WordPress dependencies
- */
+import type { ReactElement } from 'react';
 import { __ } from '@wordpress/i18n';
 import { desktop, tablet, mobile } from '@wordpress/icons';
 
+/**
+ * The viewports for which block visibility can be controlled.
+ */
+export type BlockVisibilityViewport = 'desktop' | 'tablet' | 'mobile';
+
 /**
  * The choices for the block visibility.
  *
- * Duplicated in packages/editor/src/components/preview-dropdown/index.js (choices array)
- * and packages/edit-site/src/components/block-editor/use-viewport-sync.js
- * (VALID_DEVICE_TYPES). Update all three when adding new viewport types.
+ * Duplicated in packages/editor/src/components/preview-dropdown/index.js (choices
+ * array), packages/edit-site/src/components/block-editor/viewport.js and
+ * packages/boot/src/components/canvas/viewport.ts (VALID_VIEWPORTS). Update all
+ * four when adding new viewport types.
  *
  * @todo create a single source of truth for the viewport types.
  */
@@ -29,7 +33,10 @@ export const BLOCK_VISIBILITY_VIEWPORTS = {
 		icon: mobile,
 		key: 'mobile',
 	},
-};
+} satisfies Record<
+	BlockVisibilityViewport,
+	{ label: string; icon: ReactElement; key: BlockVisibilityViewport }
+>;
 
 export const BLOCK_VISIBILITY_VIEWPORT_ENTRIES = Object.entries(
 	BLOCK_VISIBILITY_VIEWPORTS

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

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	useState,
@@ -24,10 +17,6 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
 import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
 import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';

package/src/components/block-visibility/test/use-block-visibility.js

@@ -1,22 +1,10 @@
-/**
- * External dependencies
- */
 import { renderHook } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { useMediaQuery } from '@wordpress/compose';
-
 // Mock WordPress dependencies before importing the hook
 jest.mock( '@wordpress/compose', () => ( {
 	...jest.requireActual( '@wordpress/compose' ),
 	useMediaQuery: jest.fn(),
 } ) );
-
-/**
- * Internal dependencies
- */
 import useBlockVisibility from '../use-block-visibility';
 
 describe( 'useBlockVisibility', () => {

package/src/components/block-visibility/test/utils.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	getBlockVisibilityViewportEntries,
 	getViewportCheckboxState,

package/src/components/block-visibility/use-block-visibility.ts

@@ -0,0 +1,92 @@
+import { useMediaQuery } from '@wordpress/compose';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
+import type { BlockVisibilityViewport } from './constants';
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Viewport breakpoints keyed by viewport. Desktop has no breakpoint: it
+ * applies above the largest configured one.
+ */
+type ViewportBreakpoints = Partial< Record< 'mobile' | 'tablet', string > >;
+
+/**
+ * Block visibility metadata: `false` hides the block on all viewports,
+ * per-viewport `false` flags hide it on specific viewports.
+ */
+export type BlockVisibility =
+	| boolean
+	| {
+			viewport?: Partial< Record< BlockVisibilityViewport, boolean > >;
+	  };
+
+const { getViewportBreakpoints } = unlock< {
+	getViewportBreakpoints: (
+		viewportSettings?: ViewportBreakpoints
+	) => ViewportBreakpoints;
+} >( globalStylesEnginePrivateApis );
+
+type UseBlockVisibilityOptions = {
+	blockVisibility?: BlockVisibility;
+	deviceType?: BlockVisibilityViewport;
+	viewportSettings?: ViewportBreakpoints;
+	view?: Window;
+};
+
+/**
+ * Returns information about the current block visibility state.
+ *
+ * @param options                  Parameters to avoid extra store subscriptions.
+ * @param options.blockVisibility  Block visibility metadata.
+ * @param options.deviceType       Current device type.
+ * @param options.viewportSettings Viewport breakpoint settings.
+ * @param options.view             Window instance in which to perform viewport matching.
+ * @return Object with `isBlockCurrentlyHidden` and `currentViewport` properties.
+ */
+export default function useBlockVisibility( {
+	blockVisibility,
+	deviceType = 'desktop',
+	viewportSettings,
+	view = window,
+}: UseBlockVisibilityOptions = {} ): {
+	isBlockCurrentlyHidden: boolean;
+	currentViewport: BlockVisibilityViewport;
+} {
+	const viewportBreakpoints = getViewportBreakpoints( viewportSettings );
+	const mobileMediaQuery = viewportBreakpoints.mobile
+		? `(width <= ${ viewportBreakpoints.mobile })`
+		: undefined;
+	const isMobileViewport = useMediaQuery( mobileMediaQuery, view );
+	let tabletMediaQuery;
+	if ( viewportBreakpoints.tablet ) {
+		tabletMediaQuery = viewportBreakpoints.mobile
+			? `(${ viewportBreakpoints.mobile } < width <= ${ viewportBreakpoints.tablet })`
+			: `(width <= ${ viewportBreakpoints.tablet })`;
+	}
+	const isTabletViewport = useMediaQuery( tabletMediaQuery, view );
+
+	/*
+	 * Priority:
+	 * 1. Device type override (Mobile/Tablet) - uses device type to determine viewport
+	 * 2. Actual window size (Desktop mode) - uses viewport detection
+	 */
+	let currentViewport: BlockVisibilityViewport;
+	if ( deviceType === 'mobile' && viewportBreakpoints.mobile ) {
+		currentViewport = 'mobile';
+	} else if ( deviceType === 'tablet' && viewportBreakpoints.tablet ) {
+		currentViewport = 'tablet';
+	} else if ( isMobileViewport ) {
+		currentViewport = 'mobile';
+	} else if ( isTabletViewport && viewportBreakpoints.tablet ) {
+		currentViewport = 'tablet';
+	} else {
+		currentViewport = 'desktop';
+	}
+
+	// Determine if block is currently hidden.
+	const isBlockCurrentlyHidden =
+		blockVisibility === false ||
+		( typeof blockVisibility === 'object' &&
+			blockVisibility?.viewport?.[ currentViewport ] === false );
+
+	return { isBlockCurrentlyHidden, currentViewport };
+}

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

@@ -1,12 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import {
 	BLOCK_VISIBILITY_VIEWPORT_ENTRIES,
 	BLOCK_VISIBILITY_VIEWPORTS,

package/src/components/block-visibility/viewport-menu-item.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useSettings } from '../use-settings';

package/src/components/block-visibility/viewport-toolbar.js

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { useRef, useEffect } from '@wordpress/element';
 import { seen, unseen } from '@wordpress/icons';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useSettings } from '../use-settings';

package/src/components/block-visibility/viewport-visibility-info.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	Icon as WCIcon,
 	__experimentalText as WCText,
@@ -10,10 +7,6 @@ import {
 import { useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { unseen } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../../lock-unlock';
 import { store as blockEditorStore } from '../../store';
 import useBlockVisibility from './use-block-visibility';

package/src/components/border-radius-control/README.md

@@ -5,9 +5,6 @@
 ## Usage
 
 ```jsx
-/**
- * WordPress dependencies
- */
 import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 

package/src/components/border-radius-control/constants.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import {
 	cornerAll,

package/src/components/border-radius-control/index.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	BaseControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
@@ -10,10 +7,6 @@ import {
 } from '@wordpress/components';
 import { useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import LinkedButton from './linked-button';
 import { useSettings } from '../use-settings';
 import { hasDefinedValues, hasMixedValues, getAllValue } from './utils';

package/src/components/border-radius-control/linked-button.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { Button } from '@wordpress/components';
 import { link, linkOff } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';

package/src/components/border-radius-control/stories/index.story.jsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import BorderRadiusControl from '../';
 
 const meta = {

package/src/components/border-radius-control/test/index.js

@@ -17,20 +17,8 @@
  * The tests ensure that when the BorderRadiusControl is refactored to use
  * PresetInputControl, the existing user experience and behavior is preserved.
  */
-
-/**
- * External dependencies
- */
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
 import BorderRadiusControl from '../index';
 
 describe( 'BorderRadiusControl', () => {

package/src/components/border-radius-control/test/utils.js

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	getAllUnit,
 	getAllValue,

package/src/components/border-radius-control/utils.js

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import {
 	getCustomValueFromPreset,
 	isValuePreset,

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

@@ -1,20 +1,9 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { Button } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { _x, sprintf } from '@wordpress/i18n';
 import { Icon, plus } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
 import Inserter from '../inserter';
 
 function ButtonBlockAppender(