@wordpress/block-editor 14.3.4 → 14.3.5

package/build-style/style.css

@@ -339,6 +339,8 @@ iframe[name=editor-canvas] {
 
 .block-editor-block-inspector__tab-item {
   flex: 1 1 0px;
+  display: flex;
+  justify-content: center;
 }
 
 /**
@@ -562,6 +564,9 @@ iframe[name=editor-canvas] {
   background: none;
   border: none;
 }
+.zoom-out-toolbar .zoom-out-toolbar-button {
+  height: 40px;
+}
 
 .block-editor-block-tools__zoom-out-mode-inserter-button {
   visibility: hidden;
@@ -1668,10 +1673,14 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-global-styles__shadow-indicator {
+  appearance: none;
+  background: none;
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
   border-radius: 2px;
   cursor: pointer;
+  display: inline-flex;
+  align-items: center;
   padding: 0;
   height: 26px;
   width: 26px;
@@ -2037,17 +2046,6 @@ iframe[name=editor-canvas] {
   margin-bottom: 16px;
 }
 
-[class].block-editor-inspector-popover-header__action {
-  height: 24px;
-}
-[class].block-editor-inspector-popover-header__action.has-icon {
-  min-width: 24px;
-  padding: 0;
-}
-[class].block-editor-inspector-popover-header__action:not(.has-icon) {
-  text-decoration: underline;
-}
-
 .items-justified-left {
   justify-content: flex-start;
 }
@@ -2575,6 +2573,15 @@ iframe[name=editor-canvas] {
   text-align: left;
   position: relative;
   white-space: nowrap;
+  border-radius: 2px;
+  box-sizing: border-box;
+  color: inherit;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  margin: 0;
+  text-decoration: none;
+  transition: box-shadow 0.1s linear;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block-contents.is-dropping-before::before {
   content: "";
@@ -3078,18 +3085,9 @@ iframe[name=editor-canvas] {
   top: -9999em;
 }
 .block-editor-skip-to-selected-block:focus {
-  height: auto;
-  width: auto;
-  display: block;
   font-size: 14px;
   font-weight: 600;
-  padding: 15px 23px 14px;
   background: #f1f1f1;
-  color: var(--wp-admin-theme-color);
-  line-height: normal;
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-  text-decoration: none;
-  outline: none;
   z-index: 100000;
 }
 
@@ -3253,11 +3251,6 @@ iframe[name=editor-canvas] {
   min-width: 0;
   align-items: flex-start;
 }
-.block-editor-url-input__button-modal-line .components-button {
-  flex-shrink: 0;
-  width: 36px;
-  height: 36px;
-}
 
 .block-editor-url-popover__additional-controls {
   border-top: 1px solid #1e1e1e;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.3.4",
+	"version": "14.3.5",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,8 +41,8 @@
 		"@wordpress/blob": "^4.8.1",
 		"@wordpress/block-serialization-default-parser": "^5.8.1",
 		"@wordpress/blocks": "^13.8.4",
-		"@wordpress/commands": "^1.8.4",
-		"@wordpress/components": "^28.8.4",
+		"@wordpress/commands": "^1.8.5",
+		"@wordpress/components": "^28.8.5",
 		"@wordpress/compose": "^7.8.3",
 		"@wordpress/data": "^10.8.3",
 		"@wordpress/date": "^5.8.2",
@@ -58,7 +58,7 @@
 		"@wordpress/keyboard-shortcuts": "^5.8.3",
 		"@wordpress/keycodes": "^4.8.2",
 		"@wordpress/notices": "^5.8.3",
-		"@wordpress/preferences": "^4.8.4",
+		"@wordpress/preferences": "^4.8.5",
 		"@wordpress/private-apis": "^1.8.1",
 		"@wordpress/rich-text": "^7.8.3",
 		"@wordpress/style-engine": "^2.8.1",
@@ -88,5 +88,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "07c75154341d1e5a1b8aaa1c226029b6666a52a9"
+	"gitHead": "21b3c2e9abda74edab42455041edc6e82fccc388"
 }

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

@@ -49,4 +49,6 @@
 
 .block-editor-block-inspector__tab-item {
 	flex: 1 1 0px;
+	display: flex;
+	justify-content: center;
 }

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

@@ -283,6 +283,11 @@
 		background: none;
 		border: none;
 	}
+
+	// Make the spacing consistent between controls.
+	.zoom-out-toolbar-button {
+		height: $button-size-next-default-40px;
+	}
 }
 
 .block-editor-block-tools__zoom-out-mode-inserter-button {

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

@@ -64,8 +64,7 @@ function BlockVariationPicker( {
 			{ allowSkip && (
 				<div className="block-editor-block-variation-picker__skip">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="link"
 						onClick={ () => onSelect() }
 					>

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

@@ -36,8 +36,8 @@ function VariationsButtons( {
 			</VisuallyHidden>
 			{ variations.map( ( variation ) => (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
+					size="compact"
 					key={ variation.name }
 					icon={ <BlockIcon icon={ variation.icon } showColors /> }
 					isPressed={ selectedValue === variation.name }

package/src/components/button-block-appender/content.scss

@@ -8,11 +8,6 @@
 	color: $gray-900;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 
-	// Needs specificity to override button styles.
-	&.components-button.components-button {
-		padding: $grid-unit-15;
-	}
-
 	.is-dark-theme & {
 		color: $light-gray-placeholder;
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;

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

@@ -60,8 +60,7 @@ function ButtonBlockAppender(
 
 				return (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						ref={ mergedInserterButtonRef }
 						onFocus={ onFocus }
 						tabIndex={ tabIndex }

package/src/components/colors-gradients/dropdown.js

@@ -88,11 +88,7 @@ const renderToggle =
 		};
 
 		return (
-			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				{ ...toggleProps }
-			>
+			<Button __next40pxDefaultSize { ...toggleProps }>
 				<LabeledColorIndicator
 					colorValue={ colorValue }
 					label={ label }

package/src/components/global-styles/color-panel.js

@@ -239,11 +239,7 @@ function ColorPanelDropdown( {
 					};
 
 					return (
-						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
-							{ ...toggleProps }
-						>
+						<Button __next40pxDefaultSize { ...toggleProps }>
 							<LabeledColorIndicators
 								indicators={ indicators }
 								label={ label }

package/src/components/global-styles/filters-panel.js

@@ -190,8 +190,7 @@ export default function FiltersPanel( {
 							return (
 								<ItemGroup isBordered isSeparated>
 									<Button
-										// TODO: Switch to `true` (40px size) if possible
-										__next40pxDefaultSize={ false }
+										__next40pxDefaultSize
 										{ ...toggleProps }
 									>
 										<LabeledColorIndicator

package/src/components/global-styles/shadow-panel-components.js

@@ -11,6 +11,7 @@ import {
 	FlexItem,
 	Dropdown,
 	Composite,
+	Tooltip,
 } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
@@ -42,8 +43,7 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 				/>
 				<div className="block-editor-global-styles__clear-shadow">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => onShadowChange( undefined ) }
 					>
@@ -80,32 +80,31 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 
 export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
 	return (
-		<Composite.Item
-			role="option"
-			aria-label={ label }
-			aria-selected={ isActive }
-			className={ clsx( 'block-editor-global-styles__shadow__item', {
-				'is-active': isActive,
-			} ) }
-			render={
-				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
-					className={ clsx(
-						'block-editor-global-styles__shadow-indicator',
-						{
-							unset: type === 'unset',
-						}
-					) }
-					onClick={ onSelect }
-					label={ label }
-					style={ { boxShadow: shadow } }
-					showTooltip
-				>
-					{ isActive && <Icon icon={ check } /> }
-				</Button>
-			}
-		/>
+		<Tooltip text={ label }>
+			<Composite.Item
+				role="option"
+				aria-label={ label }
+				aria-selected={ isActive }
+				className={ clsx( 'block-editor-global-styles__shadow__item', {
+					'is-active': isActive,
+				} ) }
+				render={
+					<button
+						className={ clsx(
+							'block-editor-global-styles__shadow-indicator',
+							{
+								unset: type === 'unset',
+							}
+						) }
+						onClick={ onSelect }
+						style={ { boxShadow: shadow } }
+						aria-label={ label }
+					>
+						{ isActive && <Icon icon={ check } /> }
+					</button>
+				}
+			/>
+		</Tooltip>
 	);
 }
 
@@ -143,11 +142,7 @@ function renderShadowToggle() {
 		};
 
 		return (
-			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				{ ...toggleProps }
-			>
+			<Button __next40pxDefaultSize { ...toggleProps }>
 				<HStack justify="flex-start">
 					<Icon
 						className="block-editor-global-styles__toggle-icon"

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

@@ -37,10 +37,15 @@
 
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
+	appearance: none;
+	background: none;
 	color: $gray-800;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-small;
 	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+
 	padding: 0;
 
 	height: $button-size-small + 2 * $border-width;

package/src/components/inspector-controls-tabs/index.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import {
-	Button,
+	Icon,
+	Tooltip,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -43,27 +44,27 @@ export default function InspectorControlsTabs( {
 		<div className="block-editor-block-inspector__tabs">
 			<Tabs defaultTabId={ initialTabName } key={ clientId }>
 				<Tabs.TabList>
-					{ tabs.map( ( tab ) => (
-						<Tabs.Tab
-							key={ tab.name }
-							tabId={ tab.name }
-							render={
-								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
-									icon={
-										! showIconLabels ? tab.icon : undefined
-									}
-									label={
-										! showIconLabels ? tab.title : undefined
-									}
+					{ tabs.map( ( tab ) =>
+						showIconLabels ? (
+							<Tabs.Tab
+								key={ tab.name }
+								tabId={ tab.name }
+								className={ tab.className }
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) : (
+							<Tooltip text={ tab.title } key={ tab.name }>
+								<Tabs.Tab
+									tabId={ tab.name }
 									className={ tab.className }
+									aria-label={ tab.title }
 								>
-									{ showIconLabels && tab.title }
-								</Button>
-							}
-						/>
-					) ) }
+									<Icon icon={ tab.icon } />
+								</Tabs.Tab>
+							</Tooltip>
+						)
+					) }
 				</Tabs.TabList>
 				<Tabs.TabPanel tabId={ TAB_SETTINGS.name } focusable={ false }>
 					<SettingsTab showAdvancedControls={ !! blockName } />

package/src/components/inspector-popover-header/index.js

@@ -31,8 +31,7 @@ export default function InspectorPopoverHeader( {
 				<Spacer />
 				{ actions.map( ( { label, icon, onClick } ) => (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						size="small"
 						key={ label }
 						className="block-editor-inspector-popover-header__action"
 						label={ label }
@@ -45,8 +44,7 @@ export default function InspectorPopoverHeader( {
 				) ) }
 				{ onClose && (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						size="small"
 						className="block-editor-inspector-popover-header__action"
 						label={ __( 'Close' ) }
 						icon={ closeSmall }

package/src/components/inspector-popover-header/style.scss

@@ -1,16 +1,3 @@
 .block-editor-inspector-popover-header {
 	margin-bottom: $grid-unit-20;
 }
-
-[class].block-editor-inspector-popover-header__action {
-	height: $icon-size;
-
-	&.has-icon {
-		min-width: $icon-size;
-		padding: 0;
-	}
-
-	&:not(.has-icon) {
-		text-decoration: underline;
-	}
-}

package/src/components/link-control/index.js

@@ -475,16 +475,14 @@ function LinkControl( {
 					className="block-editor-link-control__search-actions"
 				>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ handleCancel }
 					>
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ isDisabled ? noop : handleSubmit }
 						className="block-editor-link-control__search-submit"

package/src/components/link-control/settings-drawer.js

@@ -25,8 +25,7 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 	return (
 		<>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				className="block-editor-link-control__drawer-toggle"
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }

package/src/components/list-view/block-select-button.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	Button,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
@@ -82,9 +81,7 @@ function ListViewBlockSelectButton(
 	}
 
 	return (
-		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+		<a
 			className={ clsx(
 				'block-editor-list-view-block-select-button',
 				className
@@ -156,7 +153,7 @@ function ListViewBlockSelectButton(
 					</span>
 				) }
 			</HStack>
-		</Button>
+		</a>
 	);
 }
 

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

@@ -216,6 +216,15 @@
 		text-align: left;
 		position: relative;
 		white-space: nowrap;
+		border-radius: 2px;
+		box-sizing: border-box;
+		color: inherit;
+		font-family: inherit;
+		font-size: 13px;
+		font-weight: 400;
+		margin: 0;
+		text-decoration: none;
+		transition: box-shadow 0.1s linear;
 
 		&.is-dropping-before::before {
 			content: "";

package/src/components/media-placeholder/index.js

@@ -91,8 +91,7 @@ const URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => {
 	return (
 		<div className="block-editor-media-placeholder__url-input-container">
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				className="block-editor-media-placeholder__button"
 				onClick={ openURLInput }
 				isPressed={ isURLInputVisible }
@@ -389,8 +388,7 @@ export function MediaPlaceholder( {
 		return (
 			onCancel && (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					className="block-editor-media-placeholder__cancel-button"
 					title={ __( 'Cancel' ) }
 					variant="link"
@@ -419,8 +417,7 @@ export function MediaPlaceholder( {
 			onToggleFeaturedImage && (
 				<div className="block-editor-media-placeholder__url-input-container">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						className="block-editor-media-placeholder__button"
 						onClick={ onToggleFeaturedImage }
 						variant="secondary"
@@ -436,8 +433,7 @@ export function MediaPlaceholder( {
 		const defaultButton = ( { open } ) => {
 			return (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					variant="secondary"
 					onClick={ () => {
 						open();
@@ -477,8 +473,7 @@ export function MediaPlaceholder( {
 							const content = (
 								<>
 									<Button
-										// TODO: Switch to `true` (40px size) if possible
-										__next40pxDefaultSize={ false }
+										__next40pxDefaultSize
 										variant="primary"
 										className={ clsx(
 											'block-editor-media-placeholder__button',
@@ -508,8 +503,7 @@ export function MediaPlaceholder( {
 					<FormFileUpload
 						render={ ( { openFileDialog } ) => (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								onClick={ openFileDialog }
 								variant="primary"
 								className={ clsx(

package/src/components/skip-to-selected-block/index.js

@@ -28,8 +28,7 @@ export default function SkipToSelectedBlock() {
 
 	return selectedBlockClientId ? (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			variant="secondary"
 			className="block-editor-skip-to-selected-block"
 			onClick={ onClick }

package/src/components/skip-to-selected-block/style.scss

@@ -3,18 +3,9 @@
 	top: -9999em;
 
 	&:focus {
-		height: auto;
-		width: auto;
-		display: block;
 		font-size: 14px;
 		font-weight: 600;
-		padding: 15px 23px 14px;
 		background: #f1f1f1;
-		color: var(--wp-admin-theme-color);
-		line-height: normal;
-		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-		text-decoration: none;
-		outline: none;
 		z-index: z-index(".skip-to-selected-block");
 	}
 }

package/src/components/tool-selector/index.js

@@ -44,8 +44,7 @@ function ToolSelector( props, ref ) {
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					size="compact"
 					{ ...props }
 					ref={ ref }
 					icon={ mode === 'navigation' ? selectIcon : editIcon }

package/src/components/url-input/button.js

@@ -3,7 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+} from '@wordpress/components';
 import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';
 
 /**
@@ -38,8 +41,7 @@ class URLInputButton extends Component {
 		return (
 			<div className="block-editor-url-input__button">
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					size="compact"
 					icon={ link }
 					label={ buttonLabel }
 					onClick={ this.toggle }
@@ -53,8 +55,7 @@ class URLInputButton extends Component {
 					>
 						<div className="block-editor-url-input__button-modal-line">
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								className="block-editor-url-input__back"
 								icon={ arrowLeft }
 								label={ __( 'Close' ) }
@@ -63,13 +64,16 @@ class URLInputButton extends Component {
 							<URLInput
 								value={ url || '' }
 								onChange={ onChange }
-							/>
-							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
-								icon={ keyboardReturn }
-								label={ __( 'Submit' ) }
-								type="submit"
+								suffix={
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											size="small"
+											icon={ keyboardReturn }
+											label={ __( 'Submit' ) }
+											type="submit"
+										/>
+									</InputControlSuffixWrapper>
+								}
 							/>
 						</div>
 					</form>