From 6fbce757da808a370ef04f341d962120924495c6 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 3 Aug 2021 15:37:49 +1000
Subject: [PATCH 1/6] Add gap block support
---
lib/block-supports/dimensions.php | 10 ++
lib/class-wp-theme-json-gutenberg.php | 5 +
packages/block-editor/src/hooks/dimensions.js | 27 +++-
packages/block-editor/src/hooks/gap.js | 146 ++++++++++++++++++
packages/block-editor/src/hooks/test/style.js | 10 ++
packages/blocks/src/api/constants.js | 8 +
6 files changed, 204 insertions(+), 2 deletions(-)
create mode 100644 packages/block-editor/src/hooks/gap.js
diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php
index b51682a34e0161..40909929d8e17e 100644
--- a/lib/block-supports/dimensions.php
+++ b/lib/block-supports/dimensions.php
@@ -63,6 +63,7 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
$has_padding_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'padding' ), false );
$has_margin_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'margin' ), false );
+ $has_gap_support = gutenberg_block_has_support( $block_type, array( 'spacing', 'gap' ), false );
$styles = array();
if ( $has_padding_support ) {
@@ -89,6 +90,15 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
}
}
+ if ( $has_gap_support ) {
+ $gap_value = _wp_array_get( $block_attributes, array( 'style', 'spacing', 'gap' ), null );
+ if ( null !== $gap_value ) {
+ foreach ( $gap_value as $key => $value ) {
+ $styles[] = sprintf( '%s-gap: %s', $key, $value );
+ }
+ }
+ }
+
return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) );
}
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index b3ee6d1f8b9d3e..be723ac115710f 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -61,6 +61,7 @@ class WP_Theme_JSON_Gutenberg {
'text' => null,
),
'spacing' => array(
+ 'gap' => null,
'margin' => null,
'padding' => null,
),
@@ -98,6 +99,7 @@ class WP_Theme_JSON_Gutenberg {
'wideSize' => null,
),
'spacing' => array(
+ 'customGap' => null,
'customMargin' => null,
'customPadding' => null,
'units' => null,
@@ -221,6 +223,9 @@ class WP_Theme_JSON_Gutenberg {
'font-size' => array( 'typography', 'fontSize' ),
'font-style' => array( 'typography', 'fontStyle' ),
'font-weight' => array( 'typography', 'fontWeight' ),
+ 'gap' => array( 'spacing', 'gap' ),
+ 'gap' => array( 'spacing', 'gap', 'columnGap' ),
+ 'gap' => array( 'spacing', 'gap', 'rowGap' ),
'letter-spacing' => array( 'typography', 'letterSpacing' ),
'line-height' => array( 'typography', 'lineHeight' ),
'margin' => array( 'spacing', 'margin' ),
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index 8351676640b177..33d7061a5e6f18 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -13,6 +13,13 @@ import { getBlockSupport } from '@wordpress/blocks';
* Internal dependencies
*/
import InspectorControls from '../components/inspector-controls';
+import {
+ GapEdit,
+ hasGapSupport,
+ hasGapValue,
+ resetGap,
+ useIsGapDisabled,
+} from './gap';
import {
MarginEdit,
hasMarginSupport,
@@ -39,6 +46,7 @@ export const SPACING_SUPPORT_KEY = 'spacing';
* @return {WPElement} Inspector controls for spacing support features.
*/
export function DimensionsPanel( props ) {
+ const isGapDisabled = useIsGapDisabled( props );
const isPaddingDisabled = useIsPaddingDisabled( props );
const isMarginDisabled = useIsMarginDisabled( props );
const isDisabled = useIsDimensionsDisabled( props );
@@ -62,6 +70,7 @@ export function DimensionsPanel( props ) {
...style,
spacing: {
...style?.spacing,
+ gap: undefined,
margin: undefined,
padding: undefined,
},
@@ -96,6 +105,15 @@ export function DimensionsPanel( props ) {
) }
+ { ! isGapDisabled && (
+
+ ) }
);
@@ -113,7 +131,11 @@ export function hasDimensionsSupport( blockName ) {
return false;
}
- return hasPaddingSupport( blockName ) || hasMarginSupport( blockName );
+ return (
+ hasGapSupport( blockName ) ||
+ hasPaddingSupport( blockName ) ||
+ hasMarginSupport( blockName )
+ );
}
/**
@@ -124,10 +146,11 @@ export function hasDimensionsSupport( blockName ) {
* @return {boolean} If spacing support is completely disabled.
*/
const useIsDimensionsDisabled = ( props = {} ) => {
+ const gapDisabled = useIsGapDisabled( props );
const paddingDisabled = useIsPaddingDisabled( props );
const marginDisabled = useIsMarginDisabled( props );
- return paddingDisabled && marginDisabled;
+ return gapDisabled && paddingDisabled && marginDisabled;
};
/**
diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
new file mode 100644
index 00000000000000..e17b9e0a243e69
--- /dev/null
+++ b/packages/block-editor/src/hooks/gap.js
@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Platform } from '@wordpress/element';
+import { getBlockSupport } from '@wordpress/blocks';
+import {
+ __experimentalUseCustomUnits as useCustomUnits,
+ __experimentalBoxControl as BoxControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../components/use-setting';
+import { SPACING_SUPPORT_KEY, useCustomSides } from './dimensions';
+import { cleanEmptyObject } from './utils';
+
+/**
+ * Determines if there is gap support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ * @return {boolean} Whether there is support.
+ */
+export function hasGapSupport( blockType ) {
+ const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );
+ return !! ( true === support || support?.gap );
+}
+
+/**
+ * Checks if there is a current value in the gap block support attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean} Whether or not the block has a gap value set.
+ */
+export function hasGapValue( props ) {
+ return props.attributes.style?.spacing?.gap !== undefined;
+}
+
+/**
+ * Resets the gap block support attribute. This can be used when disabling
+ * the gap support controls for a block via a progressive discovery panel.
+ *
+ * @param {Object} props Block props.
+ * @param {Object} props.attributes Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetGap( { attributes = {}, setAttributes } ) {
+ const { style } = attributes;
+
+ setAttributes( {
+ style: {
+ ...style,
+ spacing: {
+ ...style?.spacing,
+ gap: undefined,
+ },
+ },
+ } );
+}
+
+/**
+ * Custom hook that checks if gap settings have been disabled.
+ *
+ * @param {string} name The name of the block.
+ * @return {boolean} Whether the gap setting is disabled.
+ */
+export function useIsGapDisabled( { name: blockName } = {} ) {
+ const isDisabled = ! useSetting( 'spacing.customGap' );
+ return ! hasGapSupport( blockName ) || isDisabled;
+}
+
+/**
+ * Inspector control panel containing the gap related configuration
+ *
+ * @param {Object} props
+ *
+ * @return {WPElement} Gap edit element.
+ */
+export function GapEdit( props ) {
+ const {
+ name: blockName,
+ attributes: { style },
+ setAttributes,
+ } = props;
+
+ const units = useCustomUnits( {
+ availableUnits: useSetting( 'spacing.units' ) || [
+ '%',
+ 'px',
+ 'em',
+ 'rem',
+ 'vw',
+ ],
+ } );
+ const sides = useCustomSides( blockName, 'gap' );
+
+ if ( useIsGapDisabled( props ) ) {
+ return null;
+ }
+
+ const onChange = ( next ) => {
+ const newStyle = {
+ ...style,
+ spacing: {
+ ...style?.spacing,
+ gap: { row: next?.top, column: next?.left },
+ },
+ };
+
+ setAttributes( {
+ style: cleanEmptyObject( newStyle ),
+ } );
+ };
+
+ const onChangeShowVisualizer = ( next ) => {
+ const newStyle = {
+ ...style,
+ visualizers: {
+ gap: { row: next?.top, column: next?.left },
+ },
+ };
+
+ setAttributes( {
+ style: cleanEmptyObject( newStyle ),
+ } );
+ };
+
+ return Platform.select( {
+ web: (
+ <>
+
+
+ ),
+ native: null,
+ } );
+}
diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js
index 706d9a93ed0ba4..aa6d2ca24c3d5c 100644
--- a/packages/block-editor/src/hooks/test/style.js
+++ b/packages/block-editor/src/hooks/test/style.js
@@ -24,6 +24,7 @@ describe( 'getInlineStyles', () => {
color: '#21759b',
},
spacing: {
+ gap: { row: '1em' },
padding: { top: '10px' },
margin: { bottom: '15px' },
},
@@ -37,6 +38,7 @@ describe( 'getInlineStyles', () => {
color: 'red',
lineHeight: 1.5,
fontSize: 10,
+ rowGap: '1em',
marginBottom: '15px',
paddingTop: '10px',
} );
@@ -66,6 +68,10 @@ describe( 'getInlineStyles', () => {
expect(
getInlineStyles( {
spacing: {
+ gap: {
+ column: '5px',
+ row: '1em',
+ },
margin: {
top: '10px',
right: '0.5rem',
@@ -81,6 +87,8 @@ describe( 'getInlineStyles', () => {
},
} )
).toEqual( {
+ columnGap: '5px',
+ rowGap: '1em',
marginTop: '10px',
marginRight: '0.5rem',
marginBottom: '0.5em',
@@ -96,11 +104,13 @@ describe( 'getInlineStyles', () => {
expect(
getInlineStyles( {
spacing: {
+ gap: '1em',
margin: '10px',
padding: '20px',
},
} )
).toEqual( {
+ gap: '1em',
margin: '10px',
padding: '20px',
} );
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 13d97020aca924..8fc76867787674 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -72,6 +72,14 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
value: [ 'typography', 'fontWeight' ],
support: [ 'typography', '__experimentalFontWeight' ],
},
+ gap: {
+ value: [ 'spacing', 'gap' ],
+ support: [ 'spacing', 'gap' ],
+ properties: {
+ columnGap: 'column',
+ rowGap: 'row',
+ },
+ },
lineHeight: {
value: [ 'typography', 'lineHeight' ],
support: [ 'typography', 'lineHeight' ],
From 59b6f065787ca58bdcea6949cbb83c3de5e0008e Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 3 Aug 2021 17:17:54 +1000
Subject: [PATCH 2/6] Fix theme.json support, allow individual column and row
values
---
lib/block-supports/dimensions.php | 5 ++++-
lib/class-wp-theme-json-gutenberg.php | 4 ++--
lib/compat.php | 3 +++
lib/experimental-default-theme.json | 1 +
4 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php
index 40909929d8e17e..f9ce224c6feb44 100644
--- a/lib/block-supports/dimensions.php
+++ b/lib/block-supports/dimensions.php
@@ -92,10 +92,13 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
if ( $has_gap_support ) {
$gap_value = _wp_array_get( $block_attributes, array( 'style', 'spacing', 'gap' ), null );
- if ( null !== $gap_value ) {
+
+ if ( is_array( $gap_value ) ) {
foreach ( $gap_value as $key => $value ) {
$styles[] = sprintf( '%s-gap: %s', $key, $value );
}
+ } elseif ( null !== $gap_value ) {
+ $styles[] = sprintf( 'gap: %s', $gap_value );
}
}
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index be723ac115710f..33055fbb5060c2 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -224,8 +224,8 @@ class WP_Theme_JSON_Gutenberg {
'font-style' => array( 'typography', 'fontStyle' ),
'font-weight' => array( 'typography', 'fontWeight' ),
'gap' => array( 'spacing', 'gap' ),
- 'gap' => array( 'spacing', 'gap', 'columnGap' ),
- 'gap' => array( 'spacing', 'gap', 'rowGap' ),
+ 'column-gap' => array( 'spacing', 'gap', 'column' ),
+ 'row-gap' => array( 'spacing', 'gap', 'row' ),
'letter-spacing' => array( 'typography', 'letterSpacing' ),
'line-height' => array( 'typography', 'lineHeight' ),
'margin' => array( 'spacing', 'margin' ),
diff --git a/lib/compat.php b/lib/compat.php
index 917d22fe733704..eebd9acd3f0d61 100644
--- a/lib/compat.php
+++ b/lib/compat.php
@@ -186,6 +186,9 @@ function gutenberg_safe_style_attrs( $attrs ) {
$attrs[] = 'border-top-right-radius';
$attrs[] = 'border-bottom-right-radius';
$attrs[] = 'border-bottom-left-radius';
+ $attrs[] = 'gap';
+ $attrs[] = 'column-gap';
+ $attrs[] = 'row-gap';
return $attrs;
}
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index 9e751dc939118b..4912883aecff6c 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -211,6 +211,7 @@
]
},
"spacing": {
+ "customGap": false,
"customMargin": false,
"customPadding": false,
"units": [ "px", "em", "rem", "vh", "vw", "%" ]
From 69ba2b97fa8693ea8d3262890ddc5dc62dc60437 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 5 Aug 2021 17:27:44 +1000
Subject: [PATCH 3/6] Fix values issue with Gap box control by passing in
top/right/bottom/left values from row/column style values
---
packages/block-editor/src/hooks/dimensions.js | 11 ++++++-----
packages/block-editor/src/hooks/gap.js | 9 ++++++++-
2 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index 33d7061a5e6f18..84315b43ef6390 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -106,13 +106,14 @@ export function DimensionsPanel( props ) {
) }
{ ! isGapDisabled && (
- hasGapValue( props ) }
label={ __( 'Gap' ) }
- reset={ resetGap }
+ onDeselect={ () => resetGap( props ) }
isShownByDefault={ defaultSpacingControls?.gap }
- />
+ >
+
+
) }
diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index e17b9e0a243e69..e134f57eb729d8 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -126,11 +126,18 @@ export function GapEdit( props ) {
} );
};
+ const boxValues = {
+ top: style?.spacing?.gap?.row,
+ right: style?.spacing.gap?.column,
+ bottom: style?.spacing.gap?.row,
+ left: style?.spacing.gap?.column,
+ };
+
return Platform.select( {
web: (
<>
Date: Fri, 6 Aug 2021 12:06:44 +1000
Subject: [PATCH 4/6] Add global styles support
---
.../components/sidebar/dimensions-panel.js | 79 ++++++++++++++++++-
1 file changed, 78 insertions(+), 1 deletion(-)
diff --git a/packages/edit-site/src/components/sidebar/dimensions-panel.js b/packages/edit-site/src/components/sidebar/dimensions-panel.js
index 4f19f7e19cae6d..caab2b665fd72d 100644
--- a/packages/edit-site/src/components/sidebar/dimensions-panel.js
+++ b/packages/edit-site/src/components/sidebar/dimensions-panel.js
@@ -18,8 +18,9 @@ import { useSetting } from '../editor/utils';
export function useHasDimensionsPanel( context ) {
const hasPadding = useHasPadding( context );
const hasMargin = useHasMargin( context );
+ const hasGap = useHasGap( context );
- return hasPadding || hasMargin;
+ return hasPadding || hasMargin || hasGap;
}
function useHasPadding( { name, supports } ) {
@@ -34,6 +35,12 @@ function useHasMargin( { name, supports } ) {
return settings && supports.includes( 'margin' );
}
+function useHasGap( { name, supports } ) {
+ const settings = useSetting( 'spacing.customGap', name );
+
+ return settings && supports.includes( 'gap' );
+}
+
function filterValuesBySides( values, sides ) {
if ( ! sides ) {
// If no custom side configuration all sides are opted into by default.
@@ -47,6 +54,26 @@ function filterValuesBySides( values, sides ) {
return filteredValues;
}
+function filterGapValuesBySides( values, sides ) {
+ if ( ! sides ) {
+ return {
+ row: values?.top,
+ column: values?.left,
+ };
+ }
+
+ const filteredValues = {};
+
+ sides.forEach( ( side ) => {
+ if ( side === 'horizontal' ) {
+ filteredValues.column = values?.left;
+ }
+ if ( side === 'vertical' ) {
+ filteredValues.row = values?.top;
+ }
+ } );
+}
+
function splitStyleValue( value ) {
// Check for shorthand value ( a string value ).
if ( value && typeof value === 'string' ) {
@@ -62,10 +89,31 @@ function splitStyleValue( value ) {
return value;
}
+function splitGapStyleValue( value ) {
+ // Check for shorthand value ( a string value ).
+ if ( value && typeof value === 'string' ) {
+ return {
+ top: value,
+ right: value,
+ bottom: value,
+ left: value,
+ };
+ }
+
+ // Convert rows and columns to individual side values.
+ return {
+ top: value?.row,
+ right: value?.column,
+ bottom: value?.row,
+ left: value?.column,
+ };
+}
+
export default function DimensionsPanel( { context, getStyle, setStyle } ) {
const { name } = context;
const showPaddingControl = useHasPadding( context );
const showMarginControl = useHasMargin( context );
+ const showGapControl = useHasGap( context );
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units', name ) || [
'%',
@@ -98,9 +146,20 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
const hasMarginValue = () =>
marginValues && Object.keys( marginValues ).length;
+ const gapValues = splitGapStyleValue( getStyle( name, 'gap' ) );
+ const gapSides = useCustomSides( name, 'gap' );
+
+ const setGapValues = ( newGapValues ) => {
+ const gap = filterGapValuesBySides( newGapValues, gapSides );
+ setStyle( name, 'gap', gap );
+ };
+ const resetGapValue = () => setGapValues( {} );
+ const hasGapValue = () => gapValues && Object.keys( gapValues ).length;
+
const resetAll = () => {
resetPaddingValue();
resetMarginValue();
+ resetGapValue();
};
return (
@@ -143,6 +202,24 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
/>
) }
+ { showGapControl && (
+
+
+
+ ) }
);
}
From 1e7a6b461ab0fc0c826520a8b0747608d8fb663a Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 10 Aug 2021 17:23:32 +1000
Subject: [PATCH 5/6] Try switching to using CSS variables instead
---
lib/block-supports/dimensions.php | 4 +-
lib/class-wp-theme-json-gutenberg.php | 64 +++++++++----------
packages/block-editor/src/hooks/gap.js | 6 +-
packages/blocks/src/api/constants.js | 6 +-
.../editor/global-styles-renderer.js | 4 +-
.../components/sidebar/dimensions-panel.js | 10 +--
6 files changed, 49 insertions(+), 45 deletions(-)
diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php
index f9ce224c6feb44..1fae233ad64845 100644
--- a/lib/block-supports/dimensions.php
+++ b/lib/block-supports/dimensions.php
@@ -95,10 +95,10 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
if ( is_array( $gap_value ) ) {
foreach ( $gap_value as $key => $value ) {
- $styles[] = sprintf( '%s-gap: %s', $key, $value );
+ $styles[] = sprintf( '--wp--theme--block-%s-gap: %s', $key, $value );
}
} elseif ( null !== $gap_value ) {
- $styles[] = sprintf( 'gap: %s', $gap_value );
+ $styles[] = sprintf( '--wp--theme--block-: %s', $gap_value );
}
}
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 33055fbb5060c2..266e5d19ddef0a 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -208,38 +208,38 @@ class WP_Theme_JSON_Gutenberg {
* path to the value in theme.json & block attributes.
*/
const PROPERTIES_METADATA = array(
- 'background' => array( 'color', 'gradient' ),
- 'background-color' => array( 'color', 'background' ),
- 'border-radius' => array( 'border', 'radius' ),
- 'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ),
- 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ),
- 'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ),
- 'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ),
- 'border-color' => array( 'border', 'color' ),
- 'border-width' => array( 'border', 'width' ),
- 'border-style' => array( 'border', 'style' ),
- 'color' => array( 'color', 'text' ),
- 'font-family' => array( 'typography', 'fontFamily' ),
- 'font-size' => array( 'typography', 'fontSize' ),
- 'font-style' => array( 'typography', 'fontStyle' ),
- 'font-weight' => array( 'typography', 'fontWeight' ),
- 'gap' => array( 'spacing', 'gap' ),
- 'column-gap' => array( 'spacing', 'gap', 'column' ),
- 'row-gap' => array( 'spacing', 'gap', 'row' ),
- 'letter-spacing' => array( 'typography', 'letterSpacing' ),
- 'line-height' => array( 'typography', 'lineHeight' ),
- 'margin' => array( 'spacing', 'margin' ),
- 'margin-top' => array( 'spacing', 'margin', 'top' ),
- 'margin-right' => array( 'spacing', 'margin', 'right' ),
- 'margin-bottom' => array( 'spacing', 'margin', 'bottom' ),
- 'margin-left' => array( 'spacing', 'margin', 'left' ),
- 'padding' => array( 'spacing', 'padding' ),
- 'padding-top' => array( 'spacing', 'padding', 'top' ),
- 'padding-right' => array( 'spacing', 'padding', 'right' ),
- 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
- 'padding-left' => array( 'spacing', 'padding', 'left' ),
- 'text-decoration' => array( 'typography', 'textDecoration' ),
- 'text-transform' => array( 'typography', 'textTransform' ),
+ 'background' => array( 'color', 'gradient' ),
+ 'background-color' => array( 'color', 'background' ),
+ 'border-radius' => array( 'border', 'radius' ),
+ 'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ),
+ 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ),
+ 'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ),
+ 'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ),
+ 'border-color' => array( 'border', 'color' ),
+ 'border-width' => array( 'border', 'width' ),
+ 'border-style' => array( 'border', 'style' ),
+ 'color' => array( 'color', 'text' ),
+ 'font-family' => array( 'typography', 'fontFamily' ),
+ 'font-size' => array( 'typography', 'fontSize' ),
+ 'font-style' => array( 'typography', 'fontStyle' ),
+ 'font-weight' => array( 'typography', 'fontWeight' ),
+ '--wp--theme--block-gap' => array( 'spacing', 'gap' ),
+ '--wp--theme--block-column-gap' => array( 'spacing', 'gap', 'column' ),
+ '--wp--theme--block-row-gap' => array( 'spacing', 'gap', 'row' ),
+ 'letter-spacing' => array( 'typography', 'letterSpacing' ),
+ 'line-height' => array( 'typography', 'lineHeight' ),
+ 'margin' => array( 'spacing', 'margin' ),
+ 'margin-top' => array( 'spacing', 'margin', 'top' ),
+ 'margin-right' => array( 'spacing', 'margin', 'right' ),
+ 'margin-bottom' => array( 'spacing', 'margin', 'bottom' ),
+ 'margin-left' => array( 'spacing', 'margin', 'left' ),
+ 'padding' => array( 'spacing', 'padding' ),
+ 'padding-top' => array( 'spacing', 'padding', 'top' ),
+ 'padding-right' => array( 'spacing', 'padding', 'right' ),
+ 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
+ 'padding-left' => array( 'spacing', 'padding', 'left' ),
+ 'text-decoration' => array( 'typography', 'textDecoration' ),
+ 'text-transform' => array( 'typography', 'textTransform' ),
);
const ELEMENTS = array(
diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index e134f57eb729d8..6e057f23720a88 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -128,9 +128,9 @@ export function GapEdit( props ) {
const boxValues = {
top: style?.spacing?.gap?.row,
- right: style?.spacing.gap?.column,
- bottom: style?.spacing.gap?.row,
- left: style?.spacing.gap?.column,
+ right: style?.spacing?.gap?.column,
+ bottom: style?.spacing?.gap?.row,
+ left: style?.spacing?.gap?.column,
};
return Platform.select( {
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 8fc76867787674..ccad9195192787 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -72,12 +72,12 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
value: [ 'typography', 'fontWeight' ],
support: [ 'typography', '__experimentalFontWeight' ],
},
- gap: {
+ '--wp--theme--block-gap': {
value: [ 'spacing', 'gap' ],
support: [ 'spacing', 'gap' ],
properties: {
- columnGap: 'column',
- rowGap: 'row',
+ '--wp--theme--block-column-gap': 'column',
+ '--wp--theme--block-row-gap': 'row',
},
},
lineHeight: {
diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js
index 5d64dfabac0ad0..dd099f5fcd1cd9 100644
--- a/packages/edit-site/src/components/editor/global-styles-renderer.js
+++ b/packages/edit-site/src/components/editor/global-styles-renderer.js
@@ -153,7 +153,9 @@ function getStylesDeclarations( blockStyles = {} ) {
return;
}
- const cssProperty = kebabCase( name );
+ const cssProperty = name.startsWith( '--' )
+ ? name
+ : kebabCase( name );
declarations.push(
`${ cssProperty }: ${ compileStyleValue(
get( styleValue, [ prop ] )
diff --git a/packages/edit-site/src/components/sidebar/dimensions-panel.js b/packages/edit-site/src/components/sidebar/dimensions-panel.js
index caab2b665fd72d..f47af9822c00fc 100644
--- a/packages/edit-site/src/components/sidebar/dimensions-panel.js
+++ b/packages/edit-site/src/components/sidebar/dimensions-panel.js
@@ -38,7 +38,7 @@ function useHasMargin( { name, supports } ) {
function useHasGap( { name, supports } ) {
const settings = useSetting( 'spacing.customGap', name );
- return settings && supports.includes( 'gap' );
+ return settings && supports.includes( '--wp--theme--block-gap' );
}
function filterValuesBySides( values, sides ) {
@@ -146,12 +146,14 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
const hasMarginValue = () =>
marginValues && Object.keys( marginValues ).length;
- const gapValues = splitGapStyleValue( getStyle( name, 'gap' ) );
- const gapSides = useCustomSides( name, 'gap' );
+ const gapValues = splitGapStyleValue(
+ getStyle( name, '--wp--theme--block-gap' )
+ );
+ const gapSides = useCustomSides( name, '--wp--theme--block-gap' );
const setGapValues = ( newGapValues ) => {
const gap = filterGapValuesBySides( newGapValues, gapSides );
- setStyle( name, 'gap', gap );
+ setStyle( name, '--wp--theme--block-gap', gap );
};
const resetGapValue = () => setGapValues( {} );
const hasGapValue = () => gapValues && Object.keys( gapValues ).length;
From 4220d7198aa95a9d2251a3c514bc9572d65f92d3 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 10 Aug 2021 17:36:58 +1000
Subject: [PATCH 6/6] Fix failing JS tests
---
packages/block-editor/src/hooks/test/style.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js
index aa6d2ca24c3d5c..9588bc18320ce6 100644
--- a/packages/block-editor/src/hooks/test/style.js
+++ b/packages/block-editor/src/hooks/test/style.js
@@ -30,6 +30,7 @@ describe( 'getInlineStyles', () => {
},
} )
).toEqual( {
+ '--wp--theme--block-row-gap': '1em',
backgroundColor: 'black',
borderColor: '#21759b',
borderRadius: '10px',
@@ -38,7 +39,6 @@ describe( 'getInlineStyles', () => {
color: 'red',
lineHeight: 1.5,
fontSize: 10,
- rowGap: '1em',
marginBottom: '15px',
paddingTop: '10px',
} );
@@ -87,8 +87,8 @@ describe( 'getInlineStyles', () => {
},
} )
).toEqual( {
- columnGap: '5px',
- rowGap: '1em',
+ '--wp--theme--block-column-gap': '5px',
+ '--wp--theme--block-row-gap': '1em',
marginTop: '10px',
marginRight: '0.5rem',
marginBottom: '0.5em',
@@ -110,7 +110,7 @@ describe( 'getInlineStyles', () => {
},
} )
).toEqual( {
- gap: '1em',
+ '--wp--theme--block-gap': '1em',
margin: '10px',
padding: '20px',
} );