From e0eb0d61596a91a1498893559ec53909bd341e8f Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 27 Jul 2021 13:07:22 +1000
Subject: [PATCH] Update border support to use ToolsPanel
Update border support to display via progressive disclosure panel
Updating border support UI styling for grid layout
Update border global styles panel
Fix border global style hasValue checks
---
.../border-style-control/style.scss | 1 -
packages/block-editor/src/hooks/border.js | 122 ++++++++++++--
packages/block-editor/src/hooks/border.scss | 22 +--
.../src/components/sidebar/border-panel.js | 158 +++++++++++-------
.../src/components/sidebar/style.scss | 14 --
5 files changed, 211 insertions(+), 106 deletions(-)
diff --git a/packages/block-editor/src/components/border-style-control/style.scss b/packages/block-editor/src/components/border-style-control/style.scss
index d8232bd40bb55..0a094490210fc 100644
--- a/packages/block-editor/src/components/border-style-control/style.scss
+++ b/packages/block-editor/src/components/border-style-control/style.scss
@@ -6,7 +6,6 @@
.components-border-style-control__buttons {
display: inline-flex;
- margin-bottom: $grid-unit-30;
.components-button.has-icon {
min-width: 30px;
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index 64872c5c470f0..57eacedde62df 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -2,19 +2,39 @@
* WordPress dependencies
*/
import { getBlockSupport } from '@wordpress/blocks';
-import { PanelBody } from '@wordpress/components';
+import {
+ __experimentalToolsPanel as ToolsPanel,
+ __experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
import { Platform } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
+import {
+ BorderColorEdit,
+ hasBorderColorValue,
+ resetBorderColor,
+} from './border-color';
+import {
+ BorderRadiusEdit,
+ hasBorderRadiusValue,
+ resetBorderRadius,
+} from './border-radius';
+import {
+ BorderStyleEdit,
+ hasBorderStyleValue,
+ resetBorderStyle,
+} from './border-style';
+import {
+ BorderWidthEdit,
+ hasBorderWidthValue,
+ resetBorderWidth,
+} from './border-width';
import InspectorControls from '../components/inspector-controls';
import useSetting from '../components/use-setting';
-import { BorderColorEdit } from './border-color';
-import { BorderRadiusEdit } from './border-radius';
-import { BorderStyleEdit } from './border-style';
-import { BorderWidthEdit } from './border-width';
+import { cleanEmptyObject } from './utils';
export const BORDER_SUPPORT_KEY = '__experimentalBorder';
@@ -42,22 +62,73 @@ export function BorderPanel( props ) {
return null;
}
+ const defaultBorderControls = getBlockSupport( props.name, [
+ BORDER_SUPPORT_KEY,
+ '__experimentalDefaultControls',
+ ] );
+
+ // Callback to reset all block support attributes controlled via this panel.
+ const resetAll = () => {
+ const { style } = props.attributes;
+ const newStyle = cleanEmptyObject( {
+ ...style,
+ border: undefined,
+ } );
+
+ props.setAttributes( { style: newStyle } );
+ };
+
return (
-
- { ( isWidthSupported || isStyleSupported ) && (
-
- { isWidthSupported && }
- { isStyleSupported && }
-
+ { isWidthSupported && (
+ hasBorderWidthValue( props ) }
+ label={ __( 'Width' ) }
+ onDeselect={ () => resetBorderWidth( props ) }
+ isShownByDefault={ defaultBorderControls?.width }
+ >
+
+
+ ) }
+ { isStyleSupported && (
+ hasBorderStyleValue( props ) }
+ label={ __( 'Style' ) }
+ onDeselect={ () => resetBorderStyle( props ) }
+ isShownByDefault={ defaultBorderControls?.style }
+ >
+
+
+ ) }
+ { isColorSupported && (
+ hasBorderColorValue( props ) }
+ label={ __( 'Color' ) }
+ onDeselect={ () => resetBorderColor( props ) }
+ isShownByDefault={ defaultBorderControls?.color }
+ >
+
+
+ ) }
+ { isRadiusSupported && (
+ hasBorderRadiusValue( props ) }
+ label={ __( 'Radius' ) }
+ onDeselect={ () => resetBorderRadius( props ) }
+ isShownByDefault={ defaultBorderControls?.radius }
+ >
+
+
) }
- { isColorSupported && }
- { isRadiusSupported && }
-
+
);
}
@@ -121,3 +192,22 @@ const useIsBorderDisabled = () => {
return configs.every( Boolean );
};
+
+/**
+ * Returns a new style object where the specified border attribute has been
+ * removed.
+ *
+ * @param {Object} style Styles from block attributes.
+ * @param {string} attribute The border style attribute to clear.
+ *
+ * @return {Object} Style object with the specified attribute removed.
+ */
+export function removeBorderAttribute( style, attribute ) {
+ return cleanEmptyObject( {
+ ...style,
+ border: {
+ ...style?.border,
+ [ attribute ]: undefined,
+ },
+ } );
+}
diff --git a/packages/block-editor/src/hooks/border.scss b/packages/block-editor/src/hooks/border.scss
index 6c859252afc34..cef7fc84e8998 100644
--- a/packages/block-editor/src/hooks/border.scss
+++ b/packages/block-editor/src/hooks/border.scss
@@ -1,19 +1,11 @@
-.block-editor-hooks__border-controls {
- .block-editor-hooks__border-controls-row {
- display: flex;
- justify-content: space-between;
-
- > * {
- width: calc(50% - #{ $grid-unit-10 });
- }
+.block-editor-block-inspector .block-editor-hooks__border-controls,
+.edit-site .components-progressive-disclosure-panel {
+ .components-unit-control-wrapper,
+ .components-border-style-control {
+ grid-column: span 1;
}
- .components-unit-control-wrapper {
- margin-bottom: $grid-unit-30;
-
- &:last-child {
- margin-bottom: $grid-unit-10;
- }
+ .components-base-control__field {
+ margin-bottom: 0;
}
}
-
diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js
index e7d5c801ff935..acabf0c5dc172 100644
--- a/packages/edit-site/src/components/sidebar/border-panel.js
+++ b/packages/edit-site/src/components/sidebar/border-panel.js
@@ -7,7 +7,8 @@ import {
__experimentalColorGradientControl as ColorGradientControl,
} from '@wordpress/block-editor';
import {
- PanelBody,
+ __experimentalToolsPanel as ToolsPanel,
+ __experimentalToolsPanelItem as ToolsPanelItem,
__experimentalUnitControl as UnitControl,
__experimentalUseCustomUnits as useCustomUnits,
} from '@wordpress/components';
@@ -68,79 +69,116 @@ export default function BorderPanel( {
getStyle,
setStyle,
} ) {
+ // To better reflect if the user has customized a value we need to
+ // ensure the style value being checked is from the `user` origin.
+ const createHasValueCallback = ( feature ) => () =>
+ !! getStyle( name, feature, 'user' );
+
+ const createResetCallback = ( feature ) => () =>
+ setStyle( name, feature, undefined );
+
+ const handleOnChange = ( feature ) => ( value ) => {
+ setStyle( name, feature, value || undefined );
+ };
+
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
} );
- // Border width.
- const hasBorderWidth = useHasBorderWidthControl( { supports, name } );
- const borderWidthValue = getStyle( name, 'borderWidth' );
-
- // Border style.
- const hasBorderStyle = useHasBorderStyleControl( { supports, name } );
- const borderStyle = getStyle( name, 'borderStyle' );
+ const showBorderWidth = useHasBorderWidthControl( { supports, name } );
+ const showBorderStyle = useHasBorderStyleControl( { supports, name } );
+ const showBorderColor = useHasBorderColorControl( { supports, name } );
+ const showBorderRadius = useHasBorderRadiusControl( { supports, name } );
- // Border color.
const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
const disableCustomColors = ! useSetting( 'color.custom' );
const disableCustomGradients = ! useSetting( 'color.customGradient' );
- const hasBorderColor = useHasBorderColorControl( { supports, name } );
- const borderColor = getStyle( name, 'borderColor' );
- // Border radius.
- const hasBorderRadius = useHasBorderRadiusControl( { supports, name } );
- const borderRadiusValues = getStyle( name, 'borderRadius' );
+ const hasBorderRadius = () => {
+ const borderRadius = getStyle( name, 'borderRadius', 'user' );
+
+ if ( typeof borderRadius === 'object' ) {
+ return Object.entries( borderRadius ).some( Boolean );
+ }
+
+ return !! borderRadius;
+ };
+
+ const resetAll = () => {
+ setStyle( name, 'borderColor', undefined );
+ setStyle( name, 'borderRadius', undefined );
+ setStyle( name, 'borderStyle', undefined );
+ setStyle( name, 'borderWidth', undefined );
+ };
return (
-
- { ( hasBorderWidth || hasBorderStyle ) && (
-
- { hasBorderWidth && (
- {
- setStyle(
- name,
- 'borderWidth',
- value || undefined
- );
- } }
- units={ units }
- />
- ) }
- { hasBorderStyle && (
-
- setStyle( name, 'borderStyle', value )
- }
- />
- ) }
-
+
+ { showBorderWidth && (
+
+
+
+ ) }
+ { showBorderStyle && (
+
+
+
) }
- { hasBorderColor && (
-
- setStyle( name, 'borderColor', value )
- }
- />
+ onDeselect={ createResetCallback( 'borderColor' ) }
+ isShownByDefault={ true }
+ >
+
+
) }
- { hasBorderRadius && (
-
- setStyle( name, 'borderRadius', value )
- }
- />
+ { showBorderRadius && (
+
+
+
) }
-
+
);
}
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
index 712db7bed14a0..bc75cfb88ec40 100644
--- a/packages/edit-site/src/components/sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -24,17 +24,3 @@
.edit-site-global-styles-sidebar__reset-button.components-button {
margin-left: auto;
}
-
-.edit-site-global-styles-sidebar__border-controls-row {
- display: flex;
- justify-content: space-between;
- margin-bottom: $grid-unit-15;
-
- > * {
- width: calc(50% - #{ $grid-unit-10 });
- }
-
- .components-border-style-control__buttons {
- margin-bottom: 0;
- }
-}