From 65809cc49a2108afa1a9947949b1615c8991db69 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 23 Jun 2020 15:15:42 -0400 Subject: [PATCH] Add borderWidth style support for the Separator block --- lib/client-assets.php | 16 +++- packages/block-editor/src/hooks/border.js | 92 +++++++++++++++++++ packages/block-editor/src/hooks/style.js | 4 + .../block-library/src/separator/block.json | 3 +- .../block-library/src/separator/style.scss | 1 + .../block-library/src/separator/theme.scss | 4 +- .../styles/unit-control-styles.js | 16 +--- .../editor/src/components/provider/index.js | 1 + 8 files changed, 122 insertions(+), 15 deletions(-) create mode 100644 packages/block-editor/src/hooks/border.js diff --git a/lib/client-assets.php b/lib/client-assets.php index e56bec615f649..e5182089370b8 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -689,6 +689,20 @@ function gutenberg_extend_settings_custom_units( $settings ) { } add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_units' ); +/** + * Extends block editor settings to determine whether to use custom border controls. + * Currently experimental. + * + * @param array $settings Default editor settings. + * + * @return array Filtered editor settings. + */ +function gutenberg_extend_settings_custom_border( $settings ) { + $settings['__experimentalEnableCustomBorder'] = get_theme_support( 'experimental-custom-border' ); + return $settings; +} +add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_border' ); + /** * Extends block editor settings to determine whether to use custom spacing controls. * Currently experimental. @@ -705,7 +719,7 @@ function gutenberg_extend_settings_custom_spacing( $settings ) { /** - * Extends block editor settings to determine whether to use custom spacing controls. + * Extends block editor settings to determine whether to use custom link colors. * Currently experimental. * * @param array $settings Default editor settings. diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js new file mode 100644 index 0000000000000..8dbd394a238f8 --- /dev/null +++ b/packages/block-editor/src/hooks/border.js @@ -0,0 +1,92 @@ +/** + * WordPress dependencies + */ +import { hasBlockSupport } from '@wordpress/blocks'; +import { + PanelBody, + __experimentalUnitControl as UnitControl, +} from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; +import { Platform } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import InspectorControls from '../components/inspector-controls'; +import { cleanEmptyObject } from './utils'; + +export const BORDER_SUPPORT_KEY = '__experimentalEnableCustomBorder'; + +export function BorderEdit( props ) { + const isDisabled = useIsBorderDisabled( props ); + + if ( isDisabled ) { + return null; + } + + return Platform.select( { + web: ( + + + + + + ), + native: null, + } ); +} + +function BorderWidthControls( props ) { + const { + attributes: { style }, + setAttributes, + } = props; + + const onChange = ( next ) => { + const newStyle = { + ...style, + border: { + width: next, + }, + }; + + setAttributes( { + style: cleanEmptyObject( newStyle ), + } ); + }; + + const value = parseFloat( style?.border?.width || 0 ); + + return ( + + ); +} + +export const borderStyleMappings = { + '--wp--style--border--width': [ 'border', 'width' ], +}; + +/** + * Custom hook that checks if border settings have been disabled. + * + * @param {string} name The name of the block. + * @return {boolean} Whether setting is disabled. + */ +function useIsBorderDisabled( { name: blockName } = {} ) { + const isDisabled = useSelect( ( select ) => { + const editorSettings = select( 'core/block-editor' ).getSettings(); + return ! editorSettings[ BORDER_SUPPORT_KEY ]; + } ); + + return ! hasBlockSupport( blockName, BORDER_SUPPORT_KEY ) || isDisabled; +} diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index de5de6c278951..e17e7d3891dfb 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -15,6 +15,7 @@ import { createHigherOrderComponent } from '@wordpress/compose'; */ import { COLOR_SUPPORT_KEY, ColorEdit } from './color'; import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography'; +import { BORDER_SUPPORT_KEY, BorderEdit, borderStyleMappings } from './border'; import { PADDING_SUPPORT_KEY, PaddingEdit, @@ -24,6 +25,7 @@ import SpacingPanelControl from '../components/spacing-panel-control'; const styleSupportKeys = [ ...TYPOGRAPHY_SUPPORT_KEYS, + BORDER_SUPPORT_KEY, COLOR_SUPPORT_KEY, PADDING_SUPPORT_KEY, ]; @@ -53,6 +55,7 @@ function compileStyleValue( uncompiledValue ) { */ export function getInlineStyles( styles = {} ) { const mappings = { + ...borderStyleMappings, ...paddingStyleMappings, lineHeight: [ 'typography', 'lineHeight' ], fontSize: [ 'typography', 'fontSize' ], @@ -168,6 +171,7 @@ export const withBlockControls = createHigherOrderComponent( , , , + , hasPaddingSupport && ( diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json index 52a05abf93ef3..a50dcdcae4017 100644 --- a/packages/block-library/src/separator/block.json +++ b/packages/block-library/src/separator/block.json @@ -10,6 +10,7 @@ } }, "supports": { - "anchor": true + "anchor": true, + "__experimentalEnableCustomBorder": true } } diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss index 8decc9d0ba52d..524aa23043533 100644 --- a/packages/block-library/src/separator/style.scss +++ b/packages/block-library/src/separator/style.scss @@ -4,6 +4,7 @@ // Wide style &.is-style-wide { border-bottom-width: 1px; + border-bottom-width: var(--wp--style--border--width, 1px); } // Dots style diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss index f0673d7bb6f5d..a91d160f25d3d 100644 --- a/packages/block-library/src/separator/theme.scss +++ b/packages/block-library/src/separator/theme.scss @@ -1,6 +1,6 @@ .wp-block-separator { border: none; - border-bottom: 2px solid $dark-gray-100; + border-bottom: var(--wp--style--border--width, 2px) solid $dark-gray-100; margin-left: auto; margin-right: auto; @@ -12,9 +12,11 @@ &.has-background:not(.is-style-dots) { border-bottom: none; height: 1px; + height: var(--wp--style--border--width, 1px); } &.has-background:not(.is-style-wide):not(.is-style-dots) { height: 2px; + height: calc(var(--wp--style--border--width, 1px) * 2); } } diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js index 78201af14e149..3c38a49685f1b 100644 --- a/packages/components/src/unit-control/styles/unit-control-styles.js +++ b/packages/components/src/unit-control/styles/unit-control-styles.js @@ -54,14 +54,16 @@ export const ValueInput = styled( NumberControl )` const unitSizeStyles = ( { size } ) => { const sizes = { default: { - top: 1, height: 28, + lineHeight: '24px', minHeight: 28, + top: 1, }, small: { - top: 1, height: 22, + lineHeight: '18px', minHeight: 22, + top: 1, }, }; @@ -93,21 +95,11 @@ const baseUnitLabelStyles = ( props ) => { `; }; -const unitLabelPaddingStyles = ( { size } ) => { - const sizes = { - default: '6px 2px', - small: '4px 2px', - }; - - return css( { padding: sizes[ size ] } ); -}; - export const UnitLabel = styled.div` &&& { pointer-events: none; ${ baseUnitLabelStyles }; - ${ unitLabelPaddingStyles }; } `; diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 57cfb4af84da4..8d646202aa942 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -116,6 +116,7 @@ class EditorProvider extends Component { '__experimentalBlockPatternCategories', '__experimentalDisableCustomUnits', '__experimentalDisableCustomLineHeight', + '__experimentalEnableCustomBorder', '__experimentalEnableCustomSpacing', '__experimentalEnableLegacyWidgetBlock', '__experimentalEnableLinkColor',