@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

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

@@ -85,178 +85,6 @@
 	}
 }
 
-/**
- * Block Toolbar when contextual.
- */
-
-.block-editor-block-contextual-toolbar {
-	// Block UI appearance.
-	display: inline-flex;
-	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
-	background-color: $white;
-
-	.block-editor-block-toolbar .components-toolbar-group,
-	.block-editor-block-toolbar .components-toolbar {
-		border-right-color: $gray-900;
-	}
-
-	&.is-fixed {
-		overflow: hidden;
-
-		.block-editor-block-toolbar {
-			overflow: auto;
-			overflow-y: hidden;
-		}
-
-		border-bottom: $border-width solid $gray-200;
-		border-radius: 0;
-
-		.block-editor-block-toolbar .components-toolbar-group,
-		.block-editor-block-toolbar .components-toolbar {
-			border-right-color: $gray-200;
-		}
-	}
-
-	@include break-medium() {
-		&.is-fixed {
-			& > .block-editor-block-toolbar {
-				flex-grow: initial;
-				width: initial;
-
-				// Add a border as separator in the block toolbar.
-				&::before {
-					content: "";
-					width: $border-width;
-					height: 3 * $grid-unit;
-					margin-top: $grid-unit + $grid-unit-05;
-					margin-right: 0;
-					background-color: $gray-300;
-					position: relative;
-					left: math.div(-$grid-unit-05, 2);
-					top: -1px;
-				}
-			}
-
-			& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
-				border: none;
-
-				.show-icon-labels & {
-					.components-button.has-icon {
-						// Hide the button icons when labels are set to display...
-						svg {
-							display: none;
-						}
-						// ... and display labels.
-						&::after {
-							content: attr(aria-label);
-							font-size: $helptext-font-size;
-						}
-					}
-				}
-
-				// Add a border as separator in the block toolbar.
-				&::before {
-					content: "";
-					width: $border-width;
-					height: 3 * $grid-unit;
-					margin-top: $grid-unit + $grid-unit-05;
-					margin-right: $grid-unit-10;
-					background-color: $gray-300;
-					position: relative;
-					left: 0;
-					top: -1px;
-				}
-			}
-
-			& > .block-editor-block-toolbar__group-expand-fixed-toolbar {
-				border: none;
-
-				.show-icon-labels & {
-					width: $grid-unit-80 * 4;
-					.components-button.has-icon {
-						// Hide the button icons when labels are set to display...
-						svg {
-							display: none;
-						}
-						// ... and display labels.
-						&::after {
-							content: attr(aria-label);
-							font-size: $helptext-font-size;
-						}
-					}
-				}
-
-				// Add a border as separator in the block toolbar.
-				&::before {
-					content: "";
-					width: $border-width;
-					margin-top: $grid-unit + $grid-unit-05;
-					margin-bottom: $grid-unit + $grid-unit-05;
-					background-color: $gray-300;
-					position: relative;
-					left: -8px;
-					height: 3 * $grid-unit;
-					top: -1px;
-				}
-			}
-
-			.show-icon-labels & {
-				.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
-					left: 0;
-				}
-
-				.block-editor-block-toolbar__block-controls .block-editor-block-mover {
-					border-left: none;
-					&::before {
-						content: "";
-						width: $border-width;
-						margin-top: $grid-unit + $grid-unit-05;
-						margin-bottom: $grid-unit + $grid-unit-05;
-						background-color: $gray-300;
-						position: relative;
-					}
-				}
-			}
-		}
-
-		&.is-fixed .block-editor-block-parent-selector {
-
-			.block-editor-block-parent-selector__button {
-				position: relative;
-				top: -1px;
-				border: 0;
-				padding-right: 6px;
-				padding-left: 6px;
-
-				&::after {
-					content: "\00B7";
-					font-size: 16px;
-					line-height: $grid-unit-40 + $grid-unit-10;
-					position: absolute;
-					left: $grid-unit-40 + $grid-unit-15 + 2px;
-					bottom: $grid-unit-05;
-				}
-			}
-		}
-
-		&:not(.is-fixed) .block-editor-block-parent-selector {
-			position: absolute;
-			top: -$border-width;
-			left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
-
-			.show-icon-labels & {
-				position: relative;
-				left: auto;
-				top: auto;
-				margin-top: -$border-width;
-				margin-left: -$border-width;
-				margin-bottom: -$border-width;
-			}
-		}
-	}
-}
-
 /**
  * Block Label for Navigation/Selection Mode
  */
@@ -349,6 +177,7 @@
 }
 
 .components-popover.block-editor-block-list__block-popover {
+
 	// Position the block toolbar.
 	.block-editor-block-list__block-selection-button,
 	.block-editor-block-contextual-toolbar {
@@ -357,6 +186,30 @@
 		margin-bottom: $grid-unit-15;
 	}
 
+	.block-editor-block-contextual-toolbar {
+		border: $border-width solid $gray-900;
+		border-radius: $radius-block-ui;
+		overflow: visible; // allow the parent selector to be visible
+		position: static;
+		width: auto;
+
+		&.has-parent {
+			margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
+			.show-icon-labels & {
+				margin-left: 0;
+			}
+		}
+	}
+
+	.block-editor-block-toolbar {
+		overflow: visible;
+	}
+
+	.block-editor-block-toolbar .components-toolbar-group,
+	.block-editor-block-toolbar .components-toolbar {
+		border-right-color: $gray-900;
+	}
+
 	// Hide the block toolbar if the insertion point is shown.
 	&.is-insertion-point-visible {
 		visibility: hidden;
@@ -368,6 +221,41 @@
 		// It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements.
 		animation: hide-during-dragging 1ms linear forwards;
 	}
+
+	.block-editor-block-parent-selector {
+		position: absolute;
+		left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
+
+		&::before {
+			content: "";
+		}
+
+		.block-editor-block-parent-selector__button {
+			border: 1px solid $gray-900;
+			padding-right: 6px;
+			padding-left: 6px;
+			background-color: $white;
+		}
+	}
+
+	// Show Icon Label Styles
+	.show-icon-labels & {
+
+		.block-editor-block-parent-selector {
+			position: static;
+			margin-top: -$border-width;
+			margin-left: -$border-width;
+			margin-bottom: -$border-width;
+
+			.block-editor-block-parent-selector__button {
+				position: static;
+			}
+		}
+		.block-editor-block-mover__move-button-container,
+		.block-editor-block-toolbar__block-controls .block-editor-block-mover {
+			border-left: 1px solid $gray-900;
+		}
+	}
 }
 
 .is-dragging-components-draggable .components-tooltip {

package/src/components/block-types-list/README.md

@@ -10,11 +10,6 @@ This component is present in the block insertion tab, the reusable blocks tab an
 
 ![Block types list in the quick inserter modal](https://make.wordpress.org/core/files/2020/09/block-types-list-emplacement-3.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -15,7 +15,7 @@ import {
  * WordPress dependencies
  */
 import { useState, useEffect } from '@wordpress/element';
-import { BottomSheet, Gradient, InserterButton } from '@wordpress/components';
+import { BottomSheet, Gradient } from '@wordpress/components';
 import {
 	usePreferredColorScheme,
 	usePreferredColorSchemeStyle,
@@ -25,6 +25,7 @@ import {
  * Internal dependencies
  */
 import styles from './style.scss';
+import InserterButton from '../inserter-button';
 
 const MIN_COL_NUM = 3;
 

package/src/components/block-variation-picker/README.md

@@ -10,11 +10,6 @@ This component is currently used by "Columns" and "Query Loop" blocks.
 
 ![Columns block variations](https://make.wordpress.org/core/files/2020/09/colums-block-variations.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -20,7 +20,6 @@ import {
 	PanelBody,
 	BottomSheet,
 	FooterMessageControl,
-	InserterButton,
 } from '@wordpress/components';
 import { Icon, close } from '@wordpress/icons';
 
@@ -29,6 +28,7 @@ import { Icon, close } from '@wordpress/icons';
  */
 import styles from './style.scss';
 import { store as blockEditorStore } from '../../store';
+import InserterButton from '../inserter-button';
 
 const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
 

package/src/components/block-variation-transforms/README.md

@@ -4,11 +4,6 @@ This component allows to display the selected block's variations which have the
 
 By selecting such a variation an update to the selected block's attributes happen, based on the variation's attributes.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -8,6 +8,8 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItemsChoice,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -95,6 +97,43 @@ function VariationsDropdown( {
 	);
 }
 
+function VariationsToggleGroupControl( {
+	className,
+	onSelectVariation,
+	selectedValue,
+	variations,
+} ) {
+	return (
+		<div className={ className }>
+			<ToggleGroupControl
+				label={ __( 'Transform to variation' ) }
+				value={ selectedValue }
+				hideLabelFromVision
+				onChange={ onSelectVariation }
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+			>
+				{ variations.map( ( variation ) => (
+					<ToggleGroupControlOptionIcon
+						key={ variation.name }
+						icon={ variation.icon }
+						value={ variation.name }
+						label={
+							selectedValue === variation.name
+								? variation.title
+								: sprintf(
+										/* translators: %s: Name of the block variation */
+										__( 'Transform to %s' ),
+										variation.title
+								  )
+						}
+					/>
+				) ) }
+			</ToggleGroupControl>
+		</div>
+	);
+}
+
 function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const { activeBlockVariation, variations } = useSelect(
@@ -138,12 +177,19 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
-	const baseClass = 'block-editor-block-variation-transforms';
-
 	// Skip rendering if there are no variations
 	if ( ! variations?.length ) return null;
 
-	const Component = hasUniqueIcons ? VariationsButtons : VariationsDropdown;
+	const baseClass = 'block-editor-block-variation-transforms';
+
+	// Show buttons if there are more than 5 variations because the ToggleGroupControl does not wrap
+	const showButtons = variations.length > 5;
+
+	const ButtonComponent = showButtons
+		? VariationsButtons
+		: VariationsToggleGroupControl;
+
+	const Component = hasUniqueIcons ? ButtonComponent : VariationsDropdown;
 
 	return (
 		<Component

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

@@ -13,7 +13,7 @@ export default function LinkedButton( { isLinked, ...props } ) {
 			<Button
 				{ ...props }
 				className="component-border-radius-control__linked-button"
-				isSmall
+				size="small"
 				icon={ isLinked ? link : linkOff }
 				iconSize={ 24 }
 				aria-label={ label }

package/src/components/caption/README.md

@@ -4,11 +4,6 @@ The `Caption` component renders the [caption part](https://wordpress.org/documen
 
 This component encapsulates the "caption" behaviour and styles over a `<RichText>` so it can be used in other components such as the `BlockCaption` component.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -221,7 +221,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                           aria-selected="true"
                           class="components-button components-circular-option-picker__option"
                           data-active-item=""
-                          data-command=""
                           id="components-circular-option-picker-0-0"
                           role="option"
                           style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"

package/src/components/colors/utils.js

@@ -5,10 +5,15 @@ import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
 
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
-import { kebabCase } from '../../utils/object';
+import { unlock } from '../../lock-unlock';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -70,6 +75,8 @@ export function getColorClassName( colorContextName, colorSlug ) {
 		return undefined;
 	}
 
+	const { kebabCase } = unlock( componentsPrivateApis );
+
 	return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
 }
 

package/src/components/colors/with-colors.js

@@ -3,6 +3,7 @@
  */
 import { useMemo, Component } from '@wordpress/element';
 import { compose, createHigherOrderComponent } from '@wordpress/compose';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,7 +15,7 @@ import {
 	getMostReadableColor,
 } from './utils';
 import { useSettings } from '../use-settings';
-import { kebabCase } from '../../utils/object';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Capitalizes the first letter in a string.
@@ -79,6 +80,7 @@ const withEditorColorPalette = () =>
  * @return {Component} The component that can be used as a HOC.
  */
 function createColorHOC( colorTypes, withColorPalette ) {
+	const { kebabCase } = unlock( componentsPrivateApis );
 	const colorMap = colorTypes.reduce( ( colorObject, colorType ) => {
 		return {
 			...colorObject,

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

@@ -10,15 +10,16 @@ import { __ } from '@wordpress/i18n';
 import {
 	BaseControl,
 	__experimentalVStack as VStack,
-	TabPanel,
 	ColorPalette,
 	GradientPicker,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { useSettings } from '../use-settings';
+import { unlock } from '../../lock-unlock';
 
 const colorsAndGradientKeys = [
 	'colors',
@@ -27,18 +28,7 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
-const TAB_COLOR = {
-	name: 'color',
-	title: __( 'Solid' ),
-	value: 'color',
-};
-const TAB_GRADIENT = {
-	name: 'gradient',
-	title: __( 'Gradient' ),
-	value: 'gradient',
-};
-
-const TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];
+const TAB_IDS = { color: 'color', gradient: 'gradient' };
 
 function ColorGradientControlInner( {
 	colors,
@@ -69,7 +59,7 @@ function ColorGradientControlInner( {
 	}
 
 	const tabPanels = {
-		[ TAB_COLOR.value ]: (
+		[ TAB_IDS.color ]: (
 			<ColorPalette
 				value={ colorValue }
 				onChange={
@@ -89,7 +79,7 @@ function ColorGradientControlInner( {
 				headingLevel={ headingLevel }
 			/>
 		),
-		[ TAB_GRADIENT.value ]: (
+		[ TAB_IDS.gradient ]: (
 			<GradientPicker
 				__nextHasNoMargin
 				value={ gradientValue }
@@ -117,6 +107,11 @@ function ColorGradientControlInner( {
 		</div>
 	);
 
+	// Unlocking `Tabs` too early causes the `unlock` method to receive an empty
+	// object, due to circular dependencies.
+	// See https://github.com/WordPress/gutenberg/issues/52692
+	const { Tabs } = unlock( componentsPrivateApis );
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom
@@ -137,22 +132,46 @@ function ColorGradientControlInner( {
 						</legend>
 					) }
 					{ canChooseAColor && canChooseAGradient && (
-						<TabPanel
-							className="block-editor-color-gradient-control__tabs"
-							tabs={ TABS_SETTINGS }
-							initialTabName={
-								gradientValue
-									? TAB_GRADIENT.value
-									: !! canChooseAColor && TAB_COLOR.value
-							}
-						>
-							{ ( tab ) => renderPanelType( tab.value ) }
-						</TabPanel>
+						<div>
+							<Tabs
+								initialTabId={
+									gradientValue
+										? TAB_IDS.gradient
+										: !! canChooseAColor && TAB_IDS.color
+								}
+							>
+								<Tabs.TabList>
+									<Tabs.Tab tabId={ TAB_IDS.color }>
+										{ __( 'Solid' ) }
+									</Tabs.Tab>
+									<Tabs.Tab tabId={ TAB_IDS.gradient }>
+										{ __( 'Gradient' ) }
+									</Tabs.Tab>
+								</Tabs.TabList>
+								<Tabs.TabPanel
+									tabId={ TAB_IDS.color }
+									className={
+										'block-editor-color-gradient-control__panel'
+									}
+									focusable={ false }
+								>
+									{ tabPanels.color }
+								</Tabs.TabPanel>
+								<Tabs.TabPanel
+									tabId={ TAB_IDS.gradient }
+									className={
+										'block-editor-color-gradient-control__panel'
+									}
+									focusable={ false }
+								>
+									{ tabPanels.gradient }
+								</Tabs.TabPanel>
+							</Tabs>
+						</div>
 					) }
-					{ ! canChooseAGradient &&
-						renderPanelType( TAB_COLOR.value ) }
-					{ ! canChooseAColor &&
-						renderPanelType( TAB_GRADIENT.value ) }
+
+					{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }
+					{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }
 				</VStack>
 			</fieldset>
 		</BaseControl>

package/src/components/colors-gradients/style.scss

@@ -15,12 +15,6 @@ $swatch-gap: 12px;
 	min-width: 0;
 }
 
-.block-editor-color-gradient-control__tabs {
-	.block-editor-color-gradient-control__panel {
-		padding: $grid-unit-20;
-	}
-}
-
 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
 	&,
 	& > div:not(:first-of-type) {
@@ -33,7 +27,6 @@ $swatch-gap: 12px;
 		.components-circular-option-picker__swatches {
 			display: grid;
 			grid-template-columns: repeat(6, $swatch-size);
-			justify-content: space-between;
 		}
 	}
 

package/src/components/contrast-checker/README.md

@@ -6,10 +6,6 @@ ContrastChecker also accounts for font sizes.
 
 A notice will be rendered if the color combination of text and background colors are low.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-
 ## Developer guidelines
 
 ### Usage

package/src/components/copy-handler/README.md

@@ -8,16 +8,6 @@ Concretely, it handles the display of success messages and takes care of copying
 
 ![Copy/cut behaviours](https://user-images.githubusercontent.com/150562/81698101-6e341d80-945d-11ea-9bfb-b20781f55033.gif)
 
-## Table of contents
-
-- [Copy Handler](#copy-handler)
-	- [Table of contents](#table-of-contents)
-	- [Development guidelines](#development-guidelines)
-		- [Usage](#usage)
-		- [Props](#props)
-		- [`children`](#children)
-	- [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -65,14 +65,11 @@ function DuotoneControl( {
 			} }
 			renderContent={ () => (
 				<MenuGroup label={ __( 'Duotone' ) }>
-					<div
-						id={ descriptionId }
-						className="block-editor-duotone-control__description"
-					>
+					<p>
 						{ __(
 							'Create a two-tone color effect without losing your original image.'
 						) }
-					</div>
+					</p>
 					<DuotonePicker
 						aria-label={ actionLabel }
 						aria-describedby={ descriptionId }