@wordpress/block-editor 8.0.15 → 8.0.18

package/src/components/block-preview/auto.js

@@ -4,6 +4,7 @@
 import { Disabled } from '@wordpress/components';
 import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,6 +17,8 @@ import { store } from '../../store';
 // This is used to avoid rendering the block list if the sizes change.
 let MemoizedBlockList;
 
+const MAX_HEIGHT = 2000;
+
 function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 	const [
 		containerResizeListener,
@@ -29,6 +32,21 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 		return select( store ).getSettings().styles;
 	}, [] );
 
+	// Avoid scrollbars for pattern previews.
+	const editorStyles = useMemo( () => {
+		if ( styles ) {
+			return [
+				...styles,
+				{
+					css: 'body{height:auto;overflow:hidden;}',
+					__unstableType: 'presets',
+				},
+			];
+		}
+
+		return styles;
+	}, [ styles ] );
+
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
@@ -42,10 +60,14 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 				style={ {
 					transform: `scale(${ scale })`,
 					height: contentHeight * scale,
+					maxHeight:
+						contentHeight > MAX_HEIGHT
+							? MAX_HEIGHT * scale
+							: undefined,
 				} }
 			>
 				<Iframe
-					head={ <EditorStyles styles={ styles } /> }
+					head={ <EditorStyles styles={ editorStyles } /> }
 					contentRef={ useRefEffect( ( bodyElement ) => {
 						const {
 							ownerDocument: { documentElement },
@@ -57,6 +79,9 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						documentElement.style.width = '100%';
 						bodyElement.style.padding =
 							__experimentalPadding + 'px';
+
+						// necessary for contentResizeListener to work.
+						bodyElement.style.position = 'relative';
 					}, [] ) }
 					aria-hidden
 					tabIndex={ -1 }
@@ -65,6 +90,9 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						width: viewportWidth,
 						height: contentHeight,
 						pointerEvents: 'none',
+						// This is a catch-all max-height for patterns.
+						// See: https://github.com/WordPress/gutenberg/pull/38175.
+						maxHeight: MAX_HEIGHT,
 					} }
 				>
 					{ contentResizeListener }

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

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	FlexItem,
+	ColorIndicator,
+	Dropdown,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ColorGradientControl from './control';
+
+export default function ColorGradientSettingsDropdown( {
+	colors,
+	gradients,
+	disableCustomColors,
+	disableCustomGradients,
+	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
+	enableAlpha,
+	settings,
+} ) {
+	let dropdownPosition;
+	if ( __experimentalIsRenderedInSidebar ) {
+		dropdownPosition = 'bottom left';
+	}
+
+	return (
+		<ItemGroup
+			isBordered
+			isSeparated
+			className="block-editor-panel-color-gradient-settings__item-group"
+		>
+			{ settings.map( ( setting, index ) => (
+				<Dropdown
+					key={ index }
+					position={ dropdownPosition }
+					className="block-editor-panel-color-gradient-settings__dropdown"
+					contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
+					renderToggle={ ( { isOpen, onToggle } ) => {
+						return (
+							<Item
+								onClick={ onToggle }
+								className={ classnames(
+									'block-editor-panel-color-gradient-settings__item',
+									{ 'is-open': isOpen }
+								) }
+							>
+								<HStack justify="flex-start">
+									<ColorIndicator
+										className="block-editor-panel-color-gradient-settings__color-indicator"
+										colorValue={
+											setting.gradientValue ??
+											setting.colorValue
+										}
+									/>
+									<FlexItem>{ setting.label }</FlexItem>
+								</HStack>
+							</Item>
+						);
+					} }
+					renderContent={ () => (
+						<ColorGradientControl
+							showTitle={ false }
+							{ ...{
+								colors,
+								gradients,
+								disableCustomColors,
+								disableCustomGradients,
+								__experimentalHasMultipleOrigins,
+								__experimentalIsRenderedInSidebar,
+								enableAlpha,
+								...setting,
+							} }
+						/>
+					) }
+				/>
+			) ) }
+		</ItemGroup>
+	);
+}

package/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -7,13 +7,17 @@ import { every, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { PanelBody, ColorIndicator } from '@wordpress/components';
+import {
+	__experimentalSpacer as Spacer,
+	ColorIndicator,
+	PanelBody,
+} from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import ColorGradientControl from './control';
+import ColorGradientSettingsDropdown from './dropdown';
 import { getColorObjectByColorValue } from '../colors';
 import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
@@ -136,23 +140,23 @@ export const PanelColorGradientSettingsInner = ( {
 			title={ showTitle ? titleElement : undefined }
 			{ ...props }
 		>
-			{ settings.map( ( setting, index ) => (
-				<ColorGradientControl
-					showTitle={ showTitle }
-					key={ index }
-					{ ...{
-						colors,
-						gradients,
-						disableCustomColors,
-						disableCustomGradients,
-						__experimentalHasMultipleOrigins,
-						__experimentalIsRenderedInSidebar,
-						enableAlpha,
-						...setting,
-					} }
-				/>
-			) ) }
-			{ children }
+			<ColorGradientSettingsDropdown
+				settings={ settings }
+				{ ...{
+					colors,
+					gradients,
+					disableCustomColors,
+					disableCustomGradients,
+					__experimentalHasMultipleOrigins,
+					__experimentalIsRenderedInSidebar,
+					enableAlpha,
+				} }
+			/>
+			{ !! children && (
+				<>
+					<Spacer marginY={ 4 } /> { children }
+				</>
+			) }
 		</PanelBody>
 	);
 };

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

@@ -37,4 +37,53 @@
 	.block-editor-block-inspector & .components-base-control {
 		margin-bottom: inherit;
 	}
+
+	.block-editor-panel-color-gradient-settings__dropdown {
+		display: block;
+	}
+}
+
+.block-editor-panel-color-gradient-settings__dropdown {
+	width: 100%;
+}
+
+.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
+	& > div {
+		width: $sidebar-width;
+	}
 }
+
+@include break-medium() {
+	.block-editor-panel-color-gradient-settings__dropdown-content {
+		.components-popover__content {
+			margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 } !important;
+		}
+
+		&.is-from-top .components-popover__content {
+			margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
+		}
+
+		&.is-from-bottom .components-popover__content {
+			margin-bottom: #{ -($grid-unit-60 + $grid-unit-15) } !important;
+		}
+	}
+}
+
+.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
+	border-bottom-width: 0;
+}
+
+.block-editor-panel-color-gradient-settings__item {
+	padding-top: $grid-unit-15 !important;
+	padding-bottom: $grid-unit-15 !important;
+	.block-editor-panel-color-gradient-settings__color-indicator {
+		// Show a diagonal line (crossed out) for empty swatches.
+		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+	}
+
+	&.is-open {
+		background: $gray-100;
+		color: var(--wp-admin-theme-color);
+	}
+}
+

package/src/components/index.js

@@ -48,6 +48,7 @@ export { default as __experimentalLetterSpacingControl } from './letter-spacing-
 export { default as __experimentalTextDecorationControl } from './text-decoration-control';
 export { default as __experimentalTextTransformControl } from './text-transform-control';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
+export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export {
 	default as __experimentalImageEditor,

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

@@ -44,7 +44,8 @@ export default function LinkPreview( {
 
 	const displayTitle = richData?.title || value?.title || displayURL;
 
-	const isEmptyURL = ! value.url.length;
+	// url can be undefined if the href attribute is unset
+	const isEmptyURL = ! value?.url?.length;
 
 	let icon;
 

package/src/hooks/border-color.js

@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ColorGradientControl from '../components/colors-gradients/control';
+import ColorGradientSettingsDropdown from '../components/colors-gradients/dropdown';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import {
 	getColorClassName,
@@ -85,14 +85,22 @@ export function BorderColorEdit( props ) {
 		} );
 	};
 
+	const settings = [
+		{
+			label: __( 'Color' ),
+			onColorChange: onChangeColor,
+			colorValue,
+			clearable: false,
+		},
+	];
 	return (
-		<ColorGradientControl
-			label={ __( 'Color' ) }
-			colorValue={ colorValue }
-			onColorChange={ onChangeColor }
-			clearable={ false }
+		<ColorGradientSettingsDropdown
+			settings={ settings }
+			disableCustomColors
+			disableCustomGradients
 			__experimentalHasMultipleOrigins
 			__experimentalIsRenderedInSidebar
+			enableAlpha
 			{ ...colorGradientSettings }
 		/>
 	);

package/src/hooks/color.js

@@ -382,7 +382,7 @@ export function ColorEdit( props ) {
 				...( hasTextColor
 					? [
 							{
-								label: __( 'Text color' ),
+								label: __( 'Text' ),
 								onColorChange: onChangeColor( 'text' ),
 								colorValue: getColorObjectByAttributeValues(
 									allSolids,
@@ -395,7 +395,7 @@ export function ColorEdit( props ) {
 				...( hasBackgroundColor || hasGradientColor
 					? [
 							{
-								label: __( 'Background color' ),
+								label: __( 'Background' ),
 								onColorChange: hasBackgroundColor
 									? onChangeColor( 'background' )
 									: undefined,
@@ -414,7 +414,7 @@ export function ColorEdit( props ) {
 				...( hasLinkColor
 					? [
 							{
-								label: __( 'Link Color' ),
+								label: __( 'Link' ),
 								onColorChange: onChangeLinkColor,
 								colorValue: getLinkColorFromAttributeValue(
 									allSolids,

package/src/hooks/dimensions.scss

@@ -0,0 +1,5 @@
+.dimensions-block-support-panel {
+	.single-column {
+		grid-column: span 1;
+	}
+}

package/src/store/defaults.js

@@ -156,6 +156,7 @@ export const SETTINGS_DEFAULTS = {
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
 	__experimentalSpotlightEntityBlocks: [],
+	__experimentalGenerateAnchors: false,
 	__unstableGalleryWithImageBlocks: false,
 
 	// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.

package/src/style.scss

@@ -55,6 +55,7 @@
 @import "./hooks/anchor.scss";
 @import "./hooks/layout.scss";
 @import "./hooks/border.scss";
+@import "./hooks/dimensions.scss";
 @import "./hooks/typography.scss";
 
 @import "./components/block-toolbar/style.scss";