From 7e5f7b8fae8f4e0a2c9c7de6810faca0115732a3 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 17 Mar 2021 18:39:55 +1000
Subject: [PATCH 01/21] Add border color, style and width support
---
lib/block-supports/border.php | 89 ++++++--
lib/class-wp-theme-json.php | 4 +
lib/experimental-default-theme.json | 5 +-
lib/global-styles.php | 1 +
.../components/border-style-control/index.js | 64 ++++++
.../border-style-control/style.scss | 14 ++
packages/block-editor/src/components/index.js | 1 +
.../block-editor/src/hooks/border-color.js | 197 ++++++++++++++++++
.../block-editor/src/hooks/border-style.js | 70 +++++++
.../block-editor/src/hooks/border-width.js | 79 +++++++
packages/block-editor/src/hooks/border.js | 33 ++-
packages/block-editor/src/hooks/index.js | 1 +
packages/block-editor/src/hooks/test/style.js | 10 +-
packages/block-editor/src/style.scss | 1 +
phpunit/class-wp-theme-json-test.php | 10 +-
15 files changed, 544 insertions(+), 35 deletions(-)
create mode 100644 packages/block-editor/src/components/border-style-control/index.js
create mode 100644 packages/block-editor/src/components/border-style-control/style.scss
create mode 100644 packages/block-editor/src/hooks/border-color.js
create mode 100644 packages/block-editor/src/hooks/border-style.js
create mode 100644 packages/block-editor/src/hooks/border-width.js
diff --git a/lib/block-supports/border.php b/lib/block-supports/border.php
index feecb788443a29..8af61efbd63492 100644
--- a/lib/block-supports/border.php
+++ b/lib/block-supports/border.php
@@ -6,26 +6,36 @@
*/
/**
- * Registers the style attribute used by the border feature if needed for block types that
- * support borders.
+ * Registers the style attribute used by the border feature if needed for block
+ * types that support borders.
*
* @param WP_Block_Type $block_type Block Type.
*/
function gutenberg_register_border_support( $block_type ) {
- // Determine border related features supported.
- // Border width, style etc can be added in the future.
- $has_border_radius_support = gutenberg_has_border_support( $block_type, 'radius' );
+ // Determine if any border related features are supported.
+ $has_border_color_support = gutenberg_has_border_support( $block_type, 'color' );
+ $has_border_support =
+ gutenberg_has_border_support( $block_type, 'radius' ) ||
+ gutenberg_has_border_support( $block_type, 'style' ) ||
+ gutenberg_has_border_support( $block_type, 'width' ) ||
+ $has_border_color_support;
// Setup attributes and styles within that if needed.
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
}
- if ( $has_border_radius_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
+ if ( $has_border_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
$block_type->attributes['style'] = array(
'type' => 'object',
);
}
+
+ if ( $has_border_color_support && ! array_key_exists( 'borderColor', $block_type->attributes ) ) {
+ $block_type->attributes['borderColor'] = array(
+ 'type' => 'string',
+ );
+ }
}
/**
@@ -38,20 +48,14 @@ function gutenberg_register_border_support( $block_type ) {
* @return array Border CSS classes and inline styles.
*/
function gutenberg_apply_border_support( $block_type, $block_attributes ) {
- $border_support = _wp_array_get( $block_type->supports, array( '__experimentalBorder' ), false );
-
- if (
- is_array( $border_support ) &&
- array_key_exists( '__experimentalSkipSerialization', $border_support ) &&
- $border_support['__experimentalSkipSerialization']
- ) {
+ if ( gutenberg_skip_border_serialization( $block_type ) ) {
return array();
}
- // Arrays used to ease addition of further border related features in future.
- $styles = array();
+ $classes = array();
+ $styles = array();
- // Border Radius.
+ // Border radius.
if ( gutenberg_has_border_support( $block_type, 'radius' ) ) {
if ( isset( $block_attributes['style']['border']['radius'] ) ) {
$border_radius = intval( $block_attributes['style']['border']['radius'] );
@@ -59,11 +63,46 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
}
}
- // Border width, style etc can be added here.
+ // Border style.
+ if ( gutenberg_has_border_support( $block_type, 'style' ) ) {
+ if ( isset( $block_attributes['style']['border']['style'] ) ) {
+ $border_style = $block_attributes['style']['border']['style'];
+ $styles[] = sprintf( 'border-style: %s;', $border_style );
+ }
+ }
+
+ // Border width.
+ if ( gutenberg_has_border_support( $block_type, 'width' ) ) {
+ if ( isset( $block_attributes['style']['border']['width'] ) ) {
+ $border_width = intval( $block_attributes['style']['border']['width'] );
+ $styles[] = sprintf( 'border-width: %dpx;', $border_width );
+ }
+ }
+
+ // Border color.
+ if ( gutenberg_has_border_support( $block_type, 'color' ) ) {
+ $has_named_border_color = array_key_exists( 'borderColor', $block_attributes );
+ $has_custom_border_color = isset( $block_attributes['style']['border']['color'] );
+
+ if ( $has_named_border_color || $has_custom_border_color ) {
+ $classes[] = 'has-border-color';
+ }
+
+ if ( $has_named_border_color ) {
+ $classes[] = sprintf( 'has-%s-border-color', $block_attributes['borderColor'] );
+ } elseif ( $has_custom_border_color ) {
+ $border_color = $block_attributes['style']['border']['color'];
+ $styles[] = sprintf( 'border-color: %s;', $border_color );
+ }
+ }
// Collect classes and styles.
$attributes = array();
+ if ( ! empty( $classes ) ) {
+ $attributes['class'] = implode( ' ', $classes );
+ }
+
if ( ! empty( $styles ) ) {
$attributes['style'] = implode( ' ', $styles );
}
@@ -71,6 +110,22 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
return $attributes;
}
+/**
+ * Checks whether serialization of the current block's border properties should
+ * occur.
+ *
+ * @param WP_Block_type $block_type Block type.
+ *
+ * @return boolean
+ */
+function gutenberg_skip_border_serialization( $block_type ) {
+ $border_support = _wp_array_get( $block_type->supports, array( '__experimentalBorder' ), false );
+
+ return is_array( $border_support ) &&
+ array_key_exists( '__experimentalSkipSerialization', $border_support ) &&
+ $border_support['__experimentalSkipSerialization'];
+}
+
/**
* Checks whether the current block type supports the feature requested.
*
diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json.php
index 35da7df75b79a4..efb809de4b924c 100644
--- a/lib/class-wp-theme-json.php
+++ b/lib/class-wp-theme-json.php
@@ -198,6 +198,10 @@ class WP_Theme_JSON {
'class_suffix' => 'background-color',
'property_name' => 'background-color',
),
+ array(
+ 'class_suffix' => 'border-color',
+ 'property_name' => 'border-color',
+ ),
),
),
array(
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index da910ca84747a7..dea9d96966d34e 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -171,7 +171,10 @@
"units": [ "px", "em", "rem", "vh", "vw" ]
},
"border": {
- "customRadius": false
+ "customColor": false,
+ "customRadius": false,
+ "customStyle": false,
+ "customWidth": false
}
}
}
diff --git a/lib/global-styles.php b/lib/global-styles.php
index 9a935de29145eb..d5ef3e0f7b242c 100644
--- a/lib/global-styles.php
+++ b/lib/global-styles.php
@@ -356,6 +356,7 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $
$allowed_preset_attributes = array(
'background',
'background-color',
+ 'border-color',
'color',
'font-family',
'font-size',
diff --git a/packages/block-editor/src/components/border-style-control/index.js b/packages/block-editor/src/components/border-style-control/index.js
new file mode 100644
index 00000000000000..ee2ad2482cd3c4
--- /dev/null
+++ b/packages/block-editor/src/components/border-style-control/index.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { CustomSelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const DEFAULT_STYLE = {
+ key: 'default',
+ name: __( 'Default' ),
+ style: { borderStyle: undefined },
+};
+
+const BORDER_STYLES = [
+ DEFAULT_STYLE,
+ {
+ key: 'none',
+ name: __( 'None' ),
+ style: { borderStyle: 'none' },
+ },
+ {
+ key: 'solid',
+ name: __( 'Solid' ),
+ style: { borderStyle: 'solid' },
+ },
+ {
+ key: 'dashed',
+ name: __( 'Dashed' ),
+ style: { borderStyle: 'dashed' },
+ },
+ {
+ key: 'dotted',
+ name: __( 'Dotted' ),
+ style: { borderStyle: 'dotted' },
+ },
+];
+
+/**
+ * Control to display border style options.
+ *
+ * @param {Object} props Component props.
+ * @param {Object} props.onChange Handler for changing border style selection.
+ * @param {Object} props.value Currently selected border style value.
+ *
+ * @return {WPElement} Custom border style select control.
+ */
+export default function BorderStyleControl( { onChange, value } ) {
+ const style = BORDER_STYLES.find( ( option ) => option.key === value );
+
+ return (
+
+
+ selectedItem.key === 'default'
+ ? onChange( undefined )
+ : onChange( selectedItem.key )
+ }
+ />
+
+ );
+}
diff --git a/packages/block-editor/src/components/border-style-control/style.scss b/packages/block-editor/src/components/border-style-control/style.scss
new file mode 100644
index 00000000000000..827f31bca718c5
--- /dev/null
+++ b/packages/block-editor/src/components/border-style-control/style.scss
@@ -0,0 +1,14 @@
+.components-border-style-control__select {
+ margin-bottom: 24px;
+
+ button {
+ width: 100%;
+ }
+
+ ul {
+ li,
+ li:last-child {
+ margin: 6px;
+ }
+ }
+}
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index ac7471317acbe4..dc88ae5a36deb3 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -32,6 +32,7 @@ export {
BlockVerticalAlignmentToolbar,
BlockVerticalAlignmentControl,
} from './block-vertical-alignment-control';
+export { default as __experimentalBorderStyleControl } from './border-style-control';
export { default as ButtonBlockerAppender } from './button-block-appender';
export { default as ColorPalette } from './color-palette';
export { default as ColorPaletteControl } from './color-palette/control';
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
new file mode 100644
index 00000000000000..c9ab4f4fead23d
--- /dev/null
+++ b/packages/block-editor/src/hooks/border-color.js
@@ -0,0 +1,197 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ColorGradientControl from '../components/colors-gradients/control';
+import {
+ getColorClassName,
+ getColorObjectByColorValue,
+} from '../components/colors';
+import useEditorFeature from '../components/use-editor-feature';
+import { BORDER_SUPPORT_KEY } from './border';
+import { cleanEmptyObject } from './utils';
+
+const BORDER_COLOR_SUPPORT_KEY = 'color';
+const EMPTY_ARRAY = [];
+
+/**
+ * Inspector control panel containing the border color related configuration.
+ *
+ * There is deliberate overlap between the colors and borders block supports
+ * relating to border color. It can be argued the border color controls could
+ * be included within either, or both, the colors and borders panels in the
+ * inspector controls. If they share the same block attributes it should not
+ * matter.
+ *
+ * @param {Object} props Block properties.
+ * @return {WPElement} Border color edit element.
+ */
+export function BorderColorEdit( props ) {
+ const {
+ attributes: { borderColor, style },
+ setAttributes,
+ } = props;
+ const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY;
+
+ const disableCustomColors = ! useEditorFeature( 'color.custom' );
+ const disableCustomGradients = ! useEditorFeature( 'color.customGradient' );
+
+ if ( useIsBorderColorDisabled( props ) ) {
+ return null;
+ }
+
+ const onChangeColor = ( value ) => {
+ const colorObject = getColorObjectByColorValue( colors, value );
+ const newStyle = {
+ ...style,
+ border: {
+ ...style?.border,
+ color: colorObject?.slug ? undefined : value,
+ },
+ };
+
+ const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
+
+ setAttributes( {
+ style: cleanEmptyObject( newStyle ),
+ borderColor: newNamedColor,
+ } );
+ };
+
+ return (
+
-
+
+
);
}
/**
- * Determine whether there is block support for borders.
+ * Determine whether there is block support for border properties.
*
* @param {string} blockName Block name.
* @return {boolean} Whether there is support.
@@ -44,9 +50,13 @@ export function hasBorderSupport( blockName ) {
const support = getBlockSupport( blockName, BORDER_SUPPORT_KEY );
- // Further border properties to be added in future iterations.
- // e.g. support && ( support.radius || support.width || support.style )
- return !! ( true === support || support?.radius );
+ return !! (
+ true === support ||
+ support?.color ||
+ support?.radius ||
+ support?.width ||
+ support?.style
+ );
}
/**
@@ -57,11 +67,12 @@ export function hasBorderSupport( blockName ) {
* @return {boolean} If border support is completely disabled.
*/
const useIsBorderDisabled = ( props = {} ) => {
- // Further border properties to be added in future iterations.
- // e.g. const configs = [
- // useIsBorderRadiusDisabled( props ),
- // useIsBorderWidthDisabled( props ),
- // ];
- const configs = [ useIsBorderRadiusDisabled( props ) ];
+ const configs = [
+ useIsBorderColorDisabled( props ),
+ useIsBorderRadiusDisabled( props ),
+ useIsBorderStyleDisabled( props ),
+ useIsBorderWidthDisabled( props ),
+ ];
+
return configs.every( Boolean );
};
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index c087e994ba9eb9..49b11cc8b4074b 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -8,4 +8,5 @@ import './generated-class-name';
import './style';
import './color';
import './font-size';
+import './border-color';
import './layout';
diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js
index afa1d45856b2a4..0cd3c70d9f2b64 100644
--- a/packages/block-editor/src/hooks/test/style.js
+++ b/packages/block-editor/src/hooks/test/style.js
@@ -17,11 +17,19 @@ describe( 'getInlineStyles', () => {
getInlineStyles( {
color: { text: 'red', background: 'black' },
typography: { lineHeight: 1.5, fontSize: 10 },
- border: { radius: 10 },
+ border: {
+ radius: 10,
+ width: 3,
+ style: 'dotted',
+ color: '#21759b',
+ },
} )
).toEqual( {
backgroundColor: 'black',
+ borderColor: '#21759b',
borderRadius: 10,
+ borderStyle: 'dotted',
+ borderWidth: 3,
color: 'red',
lineHeight: 1.5,
fontSize: 10,
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index f80eeefd3be42d..745e64a980d2a9 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -27,6 +27,7 @@
@import "./components/block-types-list/style.scss";
@import "./components/block-variation-picker/style.scss";
@import "./components/block-variation-transforms/style.scss";
+@import "./components/border-style-control/style.scss";
@import "./components/button-block-appender/style.scss";
@import "./components/colors-gradients/style.scss";
@import "./components/contrast-checker/style.scss";
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index baedc89d747632..c66232ba87bac8 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -245,11 +245,11 @@ function test_get_stylesheet() {
);
$this->assertEquals(
- ':root{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}:root{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
+ ':root{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}:root{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet()
);
$this->assertEquals(
- ':root{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
+ ':root{--wp--style--color--link: #111;color: var(--wp--preset--color--grey);}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet( 'block_styles' )
);
$this->assertEquals(
@@ -284,11 +284,11 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() {
);
$this->assertEquals(
- '.wp-block-group{--wp--preset--color--grey: grey;}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}',
+ '.wp-block-group{--wp--preset--color--grey: grey;}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}.wp-block-group.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet()
);
$this->assertEquals(
- '.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}',
+ '.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}.wp-block-group.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet( 'block_styles' )
);
}
@@ -324,7 +324,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() {
);
$this->assertEquals(
- ':root{--wp--preset--color--grey: grey;}h2.wp-block-post-title{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
+ ':root{--wp--preset--color--grey: grey;}h2.wp-block-post-title{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}.has-grey-border-color{border-color: grey !important;}',
$theme_json->get_stylesheet()
);
}
From 2dd305d640264c778c807b3ddcea2226fce660ca Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 23 Mar 2021 15:59:06 +1000
Subject: [PATCH 02/21] Fix lint error inherited from rebase
---
lib/class-wp-theme-json.php | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json.php
index efb809de4b924c..71dd206586046c 100644
--- a/lib/class-wp-theme-json.php
+++ b/lib/class-wp-theme-json.php
@@ -653,7 +653,7 @@ private static function compute_style_properties( $declarations, $styles ) {
foreach ( $properties as $prop ) {
$value = self::get_property_value( $styles, $prop['value'] );
if ( ! empty( $value ) ) {
- $declarations[] = array(
+ $declarations[] = array(
'name' => $prop['name'],
'value' => $value,
);
From adf5d20b146344c6b1b8cb09833645048fd158f3 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 24 Mar 2021 11:32:10 +1000
Subject: [PATCH 03/21] Pass colors and gradients to border color control
Passing these props prevents the need for the ColorGradientControl to retrieve the colors a second time.
---
packages/block-editor/src/hooks/border-color.js | 2 ++
1 file changed, 2 insertions(+)
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
index c9ab4f4fead23d..d7f0292cf55553 100644
--- a/packages/block-editor/src/hooks/border-color.js
+++ b/packages/block-editor/src/hooks/border-color.js
@@ -73,6 +73,8 @@ export function BorderColorEdit( props ) {
Date: Wed, 24 Mar 2021 12:43:13 +1000
Subject: [PATCH 04/21] Return new object instead of mutating passed settings
---
.../block-editor/src/hooks/border-color.js | 19 ++++++++++++-------
1 file changed, 12 insertions(+), 7 deletions(-)
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
index d7f0292cf55553..cf4e79c0f724e1 100644
--- a/packages/block-editor/src/hooks/border-color.js
+++ b/packages/block-editor/src/hooks/border-color.js
@@ -112,20 +112,25 @@ export function useIsBorderColorDisabled( { name: blockName } = {} ) {
* @return {Object} Updated block settings.
*/
function addAttributes( settings ) {
- if ( ! hasBlockSupport( settings, BORDER_COLOR_SUPPORT_KEY ) ) {
+ if ( ! hasBorderColorSupport( settings ) ) {
return settings;
}
// Allow blocks to specify default value if needed.
- if ( ! settings.attributes.borderColor ) {
- Object.assign( settings.attributes, {
+ if ( settings.attributes.borderColor ) {
+ return settings;
+ }
+
+ // Add new borderColor attribute to block settings.
+ return {
+ ...settings,
+ attributes: {
+ ...settings.attributes,
borderColor: {
type: 'string',
},
- } );
- }
-
- return settings;
+ },
+ };
}
/**
From 4236a624d85c1c11f32af12476efa34f995fbada Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 24 Mar 2021 13:26:30 +1000
Subject: [PATCH 05/21] Refactor individual feature support checks
---
.../block-editor/src/hooks/border-color.js | 23 ++++---------------
.../block-editor/src/hooks/border-radius.js | 16 ++-----------
.../block-editor/src/hooks/border-style.js | 20 ++--------------
.../block-editor/src/hooks/border-width.js | 16 ++-----------
packages/block-editor/src/hooks/border.js | 12 ++++++++++
5 files changed, 23 insertions(+), 64 deletions(-)
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
index cf4e79c0f724e1..65d91e5bebfedb 100644
--- a/packages/block-editor/src/hooks/border-color.js
+++ b/packages/block-editor/src/hooks/border-color.js
@@ -7,7 +7,6 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { addFilter } from '@wordpress/hooks';
-import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
/**
@@ -19,10 +18,9 @@ import {
getColorObjectByColorValue,
} from '../components/colors';
import useEditorFeature from '../components/use-editor-feature';
-import { BORDER_SUPPORT_KEY } from './border';
+import { hasBorderFeatureSupport } from './border';
import { cleanEmptyObject } from './utils';
-const BORDER_COLOR_SUPPORT_KEY = 'color';
const EMPTY_ARRAY = [];
/**
@@ -82,17 +80,6 @@ export function BorderColorEdit( props ) {
);
}
-/**
- * Determines if there is border color support.
- *
- * @param {string|Object} blockType Block name or Block Type object.
- * @return {boolean} Whether there is support.
- */
-export function hasBorderColorSupport( blockType ) {
- const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
- return !! ( true === support || support?.color );
-}
-
/**
* Custom hook that checks if border color settings have been disabled.
*
@@ -101,7 +88,7 @@ export function hasBorderColorSupport( blockType ) {
*/
export function useIsBorderColorDisabled( { name: blockName } = {} ) {
const isDisabled = ! useEditorFeature( 'border.customColor' );
- return ! hasBorderColorSupport( blockName ) || isDisabled;
+ return ! hasBorderFeatureSupport( 'color', blockName ) || isDisabled;
}
/**
@@ -112,7 +99,7 @@ export function useIsBorderColorDisabled( { name: blockName } = {} ) {
* @return {Object} Updated block settings.
*/
function addAttributes( settings ) {
- if ( ! hasBorderColorSupport( settings ) ) {
+ if ( ! hasBorderFeatureSupport( 'color', settings ) ) {
return settings;
}
@@ -142,7 +129,7 @@ function addAttributes( settings ) {
* @return {Object} Filtered props to apply to save element.
*/
function addSaveProps( props, blockType, attributes ) {
- if ( ! hasBlockSupport( blockType, BORDER_COLOR_SUPPORT_KEY ) ) {
+ if ( ! hasBorderFeatureSupport( 'color', blockType ) ) {
return props;
}
@@ -167,7 +154,7 @@ function addSaveProps( props, blockType, attributes ) {
* @return {Object} Filtered block settings.
*/
function addEditProps( settings ) {
- if ( ! hasBlockSupport( settings, BORDER_COLOR_SUPPORT_KEY ) ) {
+ if ( ! hasBorderFeatureSupport( 'color', settings ) ) {
return settings;
}
diff --git a/packages/block-editor/src/hooks/border-radius.js b/packages/block-editor/src/hooks/border-radius.js
index 7ced3df65401a6..fc074809e2706c 100644
--- a/packages/block-editor/src/hooks/border-radius.js
+++ b/packages/block-editor/src/hooks/border-radius.js
@@ -1,7 +1,6 @@
/**
* WordPress dependencies
*/
-import { getBlockSupport } from '@wordpress/blocks';
import { RangeControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
@@ -9,7 +8,7 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import useEditorFeature from '../components/use-editor-feature';
-import { BORDER_SUPPORT_KEY } from './border';
+import { hasBorderFeatureSupport } from './border';
import { cleanEmptyObject } from './utils';
const MIN_BORDER_RADIUS_VALUE = 0;
@@ -60,17 +59,6 @@ export function BorderRadiusEdit( props ) {
);
}
-/**
- * Determines if there is border radius support.
- *
- * @param {string|Object} blockType Block name or Block Type object.
- * @return {boolean} Whether there is support.
- */
-export function hasBorderRadiusSupport( blockType ) {
- const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
- return !! ( true === support || support?.radius );
-}
-
/**
* Custom hook that checks if border radius settings have been disabled.
*
@@ -79,5 +67,5 @@ export function hasBorderRadiusSupport( blockType ) {
*/
export function useIsBorderRadiusDisabled( { name: blockName } = {} ) {
const isDisabled = ! useEditorFeature( 'border.customRadius' );
- return ! hasBorderRadiusSupport( blockName ) || isDisabled;
+ return ! hasBorderFeatureSupport( 'radius', blockName ) || isDisabled;
}
diff --git a/packages/block-editor/src/hooks/border-style.js b/packages/block-editor/src/hooks/border-style.js
index 5248ceff2e8d24..2af46c5b9ee6fa 100644
--- a/packages/block-editor/src/hooks/border-style.js
+++ b/packages/block-editor/src/hooks/border-style.js
@@ -1,14 +1,9 @@
-/**
- * WordPress dependencies
- */
-import { getBlockSupport } from '@wordpress/blocks';
-
/**
* Internal dependencies
*/
import BorderStyleControl from '../components/border-style-control';
import useEditorFeature from '../components/use-editor-feature';
-import { BORDER_SUPPORT_KEY } from './border';
+import { hasBorderFeatureSupport } from './border';
import { cleanEmptyObject } from './utils';
/**
@@ -47,17 +42,6 @@ export const BorderStyleEdit = ( props ) => {
);
};
-/**
- * Determines if there is border style support.
- *
- * @param {string|Object} blockType Block name or block type object.
- * @return {boolean} Whether there is support.
- */
-export const hasBorderStyleSupport = ( blockType ) => {
- const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
- return !! ( true === support || support?.style );
-};
-
/**
* Custom hook that checks if border style settings have been disabled.
*
@@ -66,5 +50,5 @@ export const hasBorderStyleSupport = ( blockType ) => {
*/
export const useIsBorderStyleDisabled = ( { name: blockName } = {} ) => {
const isDisabled = ! useEditorFeature( 'border.customStyle' );
- return ! hasBorderStyleSupport( blockName ) || isDisabled;
+ return ! hasBorderFeatureSupport( 'style', blockName ) || isDisabled;
};
diff --git a/packages/block-editor/src/hooks/border-width.js b/packages/block-editor/src/hooks/border-width.js
index 3ec210319b3de0..be8afd3b1d0662 100644
--- a/packages/block-editor/src/hooks/border-width.js
+++ b/packages/block-editor/src/hooks/border-width.js
@@ -1,7 +1,6 @@
/**
* WordPress dependencies
*/
-import { getBlockSupport } from '@wordpress/blocks';
import { RangeControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
@@ -9,7 +8,7 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import useEditorFeature from '../components/use-editor-feature';
-import { BORDER_SUPPORT_KEY } from './border';
+import { hasBorderFeatureSupport } from './border';
import { cleanEmptyObject } from './utils';
const MIN_BORDER_WIDTH = 0;
@@ -56,17 +55,6 @@ export const BorderWidthEdit = ( props ) => {
);
};
-/**
- * Determines if there is border width support.
- *
- * @param {string|Object} blockType Block name or block type object.
- * @return {boolean} Whether there is support.
- */
-export const hasBorderWidthSupport = ( blockType ) => {
- const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
- return !! ( true === support || support?.width );
-};
-
/**
* Custom hook that checks if border width settings have been disabled.
*
@@ -75,5 +63,5 @@ export const hasBorderWidthSupport = ( blockType ) => {
*/
export const useIsBorderWidthDisabled = ( { name: blockName } = {} ) => {
const isDisabled = ! useEditorFeature( 'border.customWidth' );
- return ! hasBorderWidthSupport( blockName ) || isDisabled;
+ return ! hasBorderFeatureSupport( 'width', blockName ) || isDisabled;
};
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index ad943ec2b1ae1f..7b4230217546eb 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -59,6 +59,18 @@ export function hasBorderSupport( blockName ) {
);
}
+/**
+ * Determines if there a specific border feature is supported.
+ *
+ * @param {string} feature Name of the border feature e.g.`radius`
+ * @param {string|Object} blockType Block name or block type object.
+ * @return { boolean } Whether the border feature is supported.
+ */
+export function hasBorderFeatureSupport( feature, blockType ) {
+ const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
+ return !! ( true === support || ( support && support[ feature ] ) );
+}
+
/**
* Determines whether there is any block support for borders e.g. border radius,
* style, width etc.
From c8071d90f80f6ad42bdb01236139c083e946efc2 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 25 Mar 2021 14:44:23 +1000
Subject: [PATCH 06/21] Add support for skipping serialization of border color
---
packages/block-editor/src/hooks/border-color.js | 12 +++++++++---
packages/block-editor/src/hooks/border.js | 14 +++++++++++++-
2 files changed, 22 insertions(+), 4 deletions(-)
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
index 65d91e5bebfedb..78214013115d79 100644
--- a/packages/block-editor/src/hooks/border-color.js
+++ b/packages/block-editor/src/hooks/border-color.js
@@ -18,7 +18,7 @@ import {
getColorObjectByColorValue,
} from '../components/colors';
import useEditorFeature from '../components/use-editor-feature';
-import { hasBorderFeatureSupport } from './border';
+import { hasBorderFeatureSupport, shouldSkipSerialization } from './border';
import { cleanEmptyObject } from './utils';
const EMPTY_ARRAY = [];
@@ -129,7 +129,10 @@ function addAttributes( settings ) {
* @return {Object} Filtered props to apply to save element.
*/
function addSaveProps( props, blockType, attributes ) {
- if ( ! hasBorderFeatureSupport( 'color', blockType ) ) {
+ if (
+ ! hasBorderFeatureSupport( 'color', blockType ) ||
+ shouldSkipSerialization( blockType )
+ ) {
return props;
}
@@ -154,7 +157,10 @@ function addSaveProps( props, blockType, attributes ) {
* @return {Object} Filtered block settings.
*/
function addEditProps( settings ) {
- if ( ! hasBorderFeatureSupport( 'color', settings ) ) {
+ if (
+ ! hasBorderFeatureSupport( 'color', settings ) ||
+ shouldSkipSerialization( settings )
+ ) {
return settings;
}
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index 7b4230217546eb..39f8dfdf5cc6ee 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -64,13 +64,25 @@ export function hasBorderSupport( blockName ) {
*
* @param {string} feature Name of the border feature e.g.`radius`
* @param {string|Object} blockType Block name or block type object.
- * @return { boolean } Whether the border feature is supported.
+ * @return {boolean} Whether the border feature is supported.
*/
export function hasBorderFeatureSupport( feature, blockType ) {
const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
return !! ( true === support || ( support && support[ feature ] ) );
}
+/**
+ * Check whether serialization of border classes and styles should be skipped.
+ *
+ * @param {string|Object} blockType Block name or block type object.
+ * @return {boolean} Whether serialization of border properties should occur.
+ */
+export function shouldSkipSerialization( blockType ) {
+ const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
+
+ return support?.__experimentalSkipSerialization;
+}
+
/**
* Determines whether there is any block support for borders e.g. border radius,
* style, width etc.
From e4b555fde8c27209a81d00be76ef805eed62680f Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 25 Mar 2021 15:01:05 +1000
Subject: [PATCH 07/21] Add comment about enforcing undefined for color slug
---
packages/block-editor/src/hooks/border-color.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
index 78214013115d79..ffc1abf64b8de3 100644
--- a/packages/block-editor/src/hooks/border-color.js
+++ b/packages/block-editor/src/hooks/border-color.js
@@ -59,6 +59,7 @@ export function BorderColorEdit( props ) {
},
};
+ // If empty slug, ensure undefined to remove attribute.
const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
setAttributes( {
From 12cdcee2457efc92bfeeddff030bfb312758bd33 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 25 Mar 2021 15:10:00 +1000
Subject: [PATCH 08/21] Add comment explaining EMPTY_ARRAY avoiding rerenders
---
packages/block-editor/src/hooks/border-color.js | 2 ++
1 file changed, 2 insertions(+)
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
index ffc1abf64b8de3..99cc46804f4271 100644
--- a/packages/block-editor/src/hooks/border-color.js
+++ b/packages/block-editor/src/hooks/border-color.js
@@ -21,6 +21,8 @@ import useEditorFeature from '../components/use-editor-feature';
import { hasBorderFeatureSupport, shouldSkipSerialization } from './border';
import { cleanEmptyObject } from './utils';
+// Defining empty array here instead of inline avoids unnecessary re-renders of
+// color control.
const EMPTY_ARRAY = [];
/**
From 45193187d8f2d011d242e5e6bdd995f618fcc493 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 25 Mar 2021 15:23:17 +1000
Subject: [PATCH 09/21] Add clarifying comment around clearing `className`
---
packages/block-editor/src/hooks/border-color.js | 2 ++
1 file changed, 2 insertions(+)
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
index 99cc46804f4271..1ce2855677f4e6 100644
--- a/packages/block-editor/src/hooks/border-color.js
+++ b/packages/block-editor/src/hooks/border-color.js
@@ -147,6 +147,8 @@ function addSaveProps( props, blockType, attributes ) {
[ borderColorClass ]: !! borderColorClass,
} );
+ // If we are clearing the last of the previous classes in `className`
+ // set it to `undefined` to avoid rendering empty DOM attributes.
props.className = newClassName ? newClassName : undefined;
return props;
From ba4914f819e03aebecf8d8a709ddbf904799a2b5 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 31 Mar 2021 17:23:58 +1000
Subject: [PATCH 10/21] Add border block support to global styles sidebar
---
.../src/components/sidebar/border-panel.js | 147 ++++++++++++++++++
.../sidebar/global-styles-sidebar.js | 9 ++
.../components/sidebar/typography-panel.js | 10 +-
3 files changed, 161 insertions(+), 5 deletions(-)
create mode 100644 packages/edit-site/src/components/sidebar/border-panel.js
diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js
new file mode 100644
index 00000000000000..9b95c4d861b564
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/border-panel.js
@@ -0,0 +1,147 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ __experimentalBorderStyleControl as BorderStyleControl,
+ __experimentalColorGradientControl as ColorGradientControl,
+} from '@wordpress/block-editor';
+import { PanelBody, RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useEditorFeature } from '../editor/utils';
+
+const MIN_BORDER_RADIUS_VALUE = 0;
+const MAX_BORDER_RADIUS_VALUE = 50;
+const MIN_BORDER_WIDTH = 0;
+const MAX_BORDER_WIDTH = 50;
+
+// Defining empty array here instead of inline avoids unnecessary re-renders of
+// color control.
+const EMPTY_ARRAY = [];
+
+export function useHasBorderPanel( { supports, name } ) {
+ const controls = [
+ useHasBorderColorControl( { supports, name } ),
+ useHasBorderRadiusControl( { supports, name } ),
+ useHasBorderStyleControl( { supports, name } ),
+ useHasBorderWidthControl( { supports, name } ),
+ ];
+
+ return controls.every( Boolean );
+}
+
+function useHasBorderColorControl( { supports, name } ) {
+ return (
+ useEditorFeature( 'border.customColor', name ) &&
+ supports.includes( 'borderColor' )
+ );
+}
+
+function useHasBorderRadiusControl( { supports, name } ) {
+ return (
+ useEditorFeature( 'border.customRadius', name ) &&
+ supports.includes( 'borderRadius' )
+ );
+}
+
+function useHasBorderStyleControl( { supports, name } ) {
+ return (
+ useEditorFeature( 'border.customStyle', name ) &&
+ supports.includes( 'borderStyle' )
+ );
+}
+
+function useHasBorderWidthControl( { supports, name } ) {
+ return (
+ useEditorFeature( 'border.customWidth', name ) &&
+ supports.includes( 'borderWidth' )
+ );
+}
+
+export default function BorderPanel( {
+ context: { supports, name },
+ getStyle,
+ setStyle,
+} ) {
+ // Border style.
+ const hasBorderStyle = useHasBorderStyleControl( { supports, name } );
+ const borderStyle = getStyle( name, 'borderStyle' );
+
+ // Border width.
+ const hasBorderWidth = useHasBorderWidthControl( { supports, name } );
+ const borderWidthValue = parseInt(
+ getStyle( name, 'borderWidth' ) || 0,
+ 10
+ );
+
+ // Border radius.
+ const hasBorderRadius = useHasBorderRadiusControl( { supports, name } );
+ const borderRadiusValue = parseInt(
+ getStyle( name, 'borderRadius' ) || 0,
+ 10
+ );
+
+ // Border color.
+ const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY;
+ const disableCustomColors = ! useEditorFeature( 'color.custom' );
+ const disableCustomGradients = ! useEditorFeature( 'color.customGradient' );
+ const hasBorderColor = useHasBorderColorControl( { supports, name } );
+ const borderColor = getStyle( name, 'borderColor' );
+
+ return (
+
+ { hasBorderStyle && (
+
+ setStyle( name, 'borderStyle', value )
+ }
+ />
+ ) }
+ { hasBorderWidth && (
+ {
+ const widthStyle = value ? `${ value }px` : undefined;
+ setStyle( name, 'borderWidth', widthStyle );
+ } }
+ />
+ ) }
+ { hasBorderRadius && (
+ {
+ const radiusStyle = value ? `${ value }px` : undefined;
+ setStyle( name, 'borderRadius', radiusStyle );
+ } }
+ />
+ ) }
+ { hasBorderColor && (
+
+ setStyle( name, 'borderColor', value )
+ }
+ />
+ ) }
+
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
index 126fb563e7d279..f0017eb703d05c 100644
--- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
+++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
@@ -29,6 +29,7 @@ import {
default as TypographyPanel,
useHasTypographyPanel,
} from './typography-panel';
+import { default as BorderPanel, useHasBorderPanel } from './border-panel';
import { default as ColorPanel, useHasColorPanel } from './color-panel';
import { default as SpacingPanel, useHasSpacingPanel } from './spacing-panel';
@@ -40,6 +41,7 @@ function GlobalStylesPanel( {
getSetting,
setSetting,
} ) {
+ const hasBorderPanel = useHasBorderPanel( context );
const hasColorPanel = useHasColorPanel( context );
const hasTypographyPanel = useHasTypographyPanel( context );
const hasSpacingPanel = useHasSpacingPanel( context );
@@ -75,6 +77,13 @@ function GlobalStylesPanel( {
setStyle={ setStyle }
/>
) }
+ { hasBorderPanel && (
+
@@ -88,7 +88,7 @@ export default function TypographyPanel( {
}
/>
) }
- { hasAppearenceControl && (
+ { hasAppearanceControl && (
Date: Mon, 12 Apr 2021 20:54:02 +1000
Subject: [PATCH 11/21] initial commit
---
lib/experimental-default-theme.json | 8 ++++----
packages/block-library/src/pullquote/block.json | 10 +++++++++-
2 files changed, 13 insertions(+), 5 deletions(-)
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index dea9d96966d34e..47b33f25af7c13 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -171,10 +171,10 @@
"units": [ "px", "em", "rem", "vh", "vw" ]
},
"border": {
- "customColor": false,
- "customRadius": false,
- "customStyle": false,
- "customWidth": false
+ "customColor": true,
+ "customRadius": true,
+ "customStyle": true,
+ "customWidth": true
}
}
}
diff --git a/packages/block-library/src/pullquote/block.json b/packages/block-library/src/pullquote/block.json
index e8a0fd00d52b97..568e9e80fc2b00 100644
--- a/packages/block-library/src/pullquote/block.json
+++ b/packages/block-library/src/pullquote/block.json
@@ -35,7 +35,15 @@
"right",
"wide",
"full"
- ]
+ ],
+ "color": {
+ "gradients": false,
+ "background": false
+ },
+ "__experimentalBorder": {
+ "color": true,
+ "radius": false
+ }
},
"editorStyle": "wp-block-pullquote-editor",
"style": "wp-block-pullquote"
From 7955fa9eeb6134a875e5cf3b49ab1141b6a5a78e Mon Sep 17 00:00:00 2001
From: ramonjd
Date: Mon, 12 Apr 2021 21:56:58 +1000
Subject: [PATCH 12/21] Updating fixtures and deprecated fixtures. Adding some
TODOs for later cleanups
---
.../block-library/src/pullquote/block.json | 17 +-
.../block-library/src/pullquote/deprecated.js | 156 +++++++++++++-
packages/block-library/src/pullquote/edit.js | 195 ++++--------------
packages/block-library/src/pullquote/save.js | 62 +-----
...e__pullquote__deprecated-3.serialized.html | 4 +-
.../blocks/core__pullquote__deprecated-4.html | 3 +
.../blocks/core__pullquote__deprecated-4.json | 15 ++
.../core__pullquote__deprecated-4.parsed.json | 23 +++
...e__pullquote__deprecated-4.serialized.html | 3 +
.../blocks/core__pullquote__main-color.html | 4 +-
.../blocks/core__pullquote__main-color.json | 15 +-
.../core__pullquote__main-color.parsed.json | 15 +-
...ore__pullquote__main-color.serialized.html | 4 +-
...__pullquote__main-color__deprecated-4.html | 3 +
...__pullquote__main-color__deprecated-4.json | 20 ++
...uote__main-color__deprecated-4.parsed.json | 24 +++
...__main-color__deprecated-4.serialized.html | 3 +
17 files changed, 328 insertions(+), 238 deletions(-)
create mode 100644 packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-4.html
create mode 100644 packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-4.json
create mode 100644 packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-4.parsed.json
create mode 100644 packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-4.serialized.html
create mode 100644 packages/e2e-tests/fixtures/blocks/core__pullquote__main-color__deprecated-4.html
create mode 100644 packages/e2e-tests/fixtures/blocks/core__pullquote__main-color__deprecated-4.json
create mode 100644 packages/e2e-tests/fixtures/blocks/core__pullquote__main-color__deprecated-4.parsed.json
create mode 100644 packages/e2e-tests/fixtures/blocks/core__pullquote__main-color__deprecated-4.serialized.html
diff --git a/packages/block-library/src/pullquote/block.json b/packages/block-library/src/pullquote/block.json
index 568e9e80fc2b00..9e769f16ca3b87 100644
--- a/packages/block-library/src/pullquote/block.json
+++ b/packages/block-library/src/pullquote/block.json
@@ -15,17 +15,17 @@
"selector": "cite",
"default": ""
},
- "mainColor": {
+ "backgroundColor": {
"type": "string"
},
- "customMainColor": {
+ "borderColor": {
"type": "string"
},
"textColor": {
"type": "string"
},
- "customTextColor": {
- "type": "string"
+ "style": {
+ "type": "object"
}
},
"supports": {
@@ -37,12 +37,15 @@
"full"
],
"color": {
- "gradients": false,
- "background": false
+ "gradients": true,
+ "background": true,
+ "link": true
},
"__experimentalBorder": {
"color": true,
- "radius": false
+ "radius": true,
+ "style": true,
+ "width": true
}
},
"editorStyle": "wp-block-pullquote-editor",
diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
index 5588bc0239085d..3b42383f49e871 100644
--- a/packages/block-library/src/pullquote/deprecated.js
+++ b/packages/block-library/src/pullquote/deprecated.js
@@ -12,6 +12,7 @@ import {
getColorObjectByAttributeValues,
RichText,
store as blockEditorStore,
+ useBlockProps,
} from '@wordpress/block-editor';
import { select } from '@wordpress/data';
@@ -57,7 +58,160 @@ function parseBorderColor( styleString ) {
}
}
+// TODO: this is ripe for a bit of a clean up according to the example in https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/#example
const deprecated = [
+ /* This deprecation adds block support. `mainColor` attribute is no longer available
+
+ TODO: remove the following comments. Just here for development convenience.
+
+ Deprecation fixtures:
+
+ // Solid color style: mainColor is the background color
+ // Default style: mainColor is the border color
+
+ Solid color style:
+
+ pullquote
before block supports pullquote
before block supports pullquote
before block supports
+
+
+
+ );
+ },
+ migrate( {
+ className,
+ mainColor,
+ customMainColor,
+ customTextColor,
+ ...attributes
+ } ) {
+ const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+
+ const style = {};
+ // Set style.border.color if a deprecated block has a default style and a `customMainColor` attribute.
+ if ( ! isSolidColorStyle && customMainColor ) {
+ style.border = {
+ color: customMainColor,
+ };
+ }
+
+ // Set style.color.background if a deprecated block has a solid style and a `customMainColor` attribute.
+ if ( isSolidColorStyle && customMainColor ) {
+ style.color = {
+ background: customMainColor,
+ };
+ }
+
+ // Set style.color.text if a deprecated block has a `customTextColor` attribute.
+ if ( customTextColor ) {
+ style.color = {
+ ...style?.color,
+ text: customTextColor,
+ };
+ }
+
+ return {
+ className, // TODO: Do we need to filter out unnecessary classnames, e.g., `has-background` since block supports takes care of them?
+ backgroundColor: isSolidColorStyle ? mainColor : undefined,
+ borderColor: isSolidColorStyle ? undefined : mainColor,
+ style,
+ ...attributes,
+ mainColor: undefined, // TODO: Do we need to do this?
+ customMainColor: undefined,
+ customTextColor: undefined,
+ };
+ },
+ },
{
attributes: {
...blockAttributes,
@@ -156,7 +310,7 @@ const deprecated = [
const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
// If is the default style, and a main color is set,
// migrate the main color value into a custom color.
- // The custom color value is retrived by parsing the figure styles.
+ // The custom color value is retrieved by parsing the figure styles.
if ( ! isSolidColorStyle && mainColor && figureStyle ) {
const borderColor = parseBorderColor( figureStyle );
if ( borderColor ) {
diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
index 58830ff3508549..e00a6ec3f67f5e 100644
--- a/packages/block-library/src/pullquote/edit.js
+++ b/packages/block-library/src/pullquote/edit.js
@@ -1,22 +1,8 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { includes } from 'lodash';
-
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Platform, useEffect, useRef } from '@wordpress/element';
-import {
- RichText,
- ContrastChecker,
- InspectorControls,
- withColors,
- PanelColorSettings,
- useBlockProps,
-} from '@wordpress/block-editor';
+import { RichText, withColors, useBlockProps } from '@wordpress/block-editor';
import { createBlock } from '@wordpress/blocks';
/**
@@ -28,165 +14,60 @@ import { BlockQuote } from './blockquote';
/**
* Internal dependencies
*/
-import { SOLID_COLOR_CLASS } from './shared';
function PullQuoteEdit( {
- colorUtils,
- textColor,
- attributes: { value, citation },
+ attributes,
setAttributes,
- setTextColor,
- setMainColor,
- mainColor,
isSelected,
insertBlocksAfter,
} ) {
- const wasTextColorAutomaticallyComputed = useRef( false );
+ const { value, citation } = attributes;
const blockProps = useBlockProps();
- const { style = {}, className } = blockProps;
- const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
- const newBlockProps = {
- ...blockProps,
- className: classnames( className, {
- 'has-background': isSolidColorStyle && mainColor.color,
- [ mainColor.class ]: isSolidColorStyle && mainColor.class,
- } ),
- style: isSolidColorStyle
- ? { ...style, backgroundColor: mainColor.color }
- : { ...style, borderColor: mainColor.color },
- };
-
- function pullQuoteMainColorSetter( colorValue ) {
- const needTextColor =
- ! textColor.color || wasTextColorAutomaticallyComputed.current;
- const shouldSetTextColor = isSolidColorStyle && needTextColor;
-
- if ( isSolidColorStyle ) {
- // If we use the solid color style, set the color using the normal mechanism.
- setMainColor( colorValue );
- } else {
- // If we use the default style, set the color as a custom color to force the usage of an inline style.
- // Default style uses a border color for which classes are not available.
- setAttributes( { customMainColor: colorValue } );
- }
-
- if ( shouldSetTextColor ) {
- if ( colorValue ) {
- wasTextColorAutomaticallyComputed.current = true;
- setTextColor( colorUtils.getMostReadableColor( colorValue ) );
- } else if ( wasTextColorAutomaticallyComputed.current ) {
- // We have to unset our previously computed text color on unsetting the main color.
- wasTextColorAutomaticallyComputed.current = false;
- setTextColor();
- }
- }
- }
-
- function pullQuoteTextColorSetter( colorValue ) {
- setTextColor( colorValue );
- wasTextColorAutomaticallyComputed.current = false;
- }
-
- useEffect( () => {
- // If the block includes a named color and we switched from the
- // solid color style to the default style.
- if ( mainColor && ! isSolidColorStyle ) {
- // Remove the named color, and set the color as a custom color.
- // This is done because named colors use classes, in the default style we use a border color,
- // and themes don't set classes for border colors.
- setAttributes( {
- mainColor: undefined,
- customMainColor: mainColor.color,
- } );
- }
- }, [ isSolidColorStyle, mainColor ] );
+ const shouldShowCitation = ! RichText.isEmpty( citation ) || isSelected;
return (
- <>
-
-
+
+
+ setAttributes( {
+ value: nextValue,
} )
}
- >
+ aria-label={ __( 'Pullquote text' ) }
+ placeholder={
+ // translators: placeholder text used for the quote
+ __( 'Add quote' )
+ }
+ textAlign="center"
+ />
+ { shouldShowCitation && (
+ identifier="citation"
+ value={ citation }
+ aria-label={ __( 'Pullquote citation text' ) }
+ placeholder={
+ // translators: placeholder text used for the citation
+ __( 'Add citation' )
+ }
+ onChange={ ( nextCitation ) =>
setAttributes( {
- value: nextValue,
+ citation: nextCitation,
} )
}
- aria-label={ __( 'Pullquote text' ) }
- placeholder={
- // translators: placeholder text used for the quote
- __( 'Add quote' )
- }
+ className="wp-block-pullquote__citation"
+ __unstableMobileNoFocusOnMount
textAlign="center"
+ __unstableOnSplitAtEnd={ () =>
+ insertBlocksAfter( createBlock( 'core/paragraph' ) )
+ }
/>
- { ( ! RichText.isEmpty( citation ) || isSelected ) && (
-
- setAttributes( {
- citation: nextCitation,
- } )
- }
- className="wp-block-pullquote__citation"
- __unstableMobileNoFocusOnMount
- textAlign="center"
- __unstableOnSplitAtEnd={ () =>
- insertBlocksAfter(
- createBlock( 'core/paragraph' )
- )
- }
- />
- ) }
-
-
- { Platform.OS === 'web' && (
-
-
- { isSolidColorStyle && (
-
-
- ) }
-
+ ) }
+
+
);
}
diff --git a/packages/block-library/src/pullquote/save.js b/packages/block-library/src/pullquote/save.js
index 9059ab9ed497fa..1d286bd20c12b4 100644
--- a/packages/block-library/src/pullquote/save.js
+++ b/packages/block-library/src/pullquote/save.js
@@ -19,66 +19,14 @@ import {
import { SOLID_COLOR_CLASS } from './shared';
export default function save( { attributes } ) {
- const {
- mainColor,
- customMainColor,
- textColor,
- customTextColor,
- value,
- citation,
- className,
- } = attributes;
-
- const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
-
- let figureClasses, figureStyles;
-
- // Is solid color style
- if ( isSolidColorStyle ) {
- const backgroundClass = getColorClassName(
- 'background-color',
- mainColor
- );
-
- figureClasses = classnames( {
- 'has-background': backgroundClass || customMainColor,
- [ backgroundClass ]: backgroundClass,
- } );
-
- figureStyles = {
- backgroundColor: backgroundClass ? undefined : customMainColor,
- };
- // Is normal style and a custom color is being used ( we can set a style directly with its value)
- } else if ( customMainColor ) {
- figureStyles = {
- borderColor: customMainColor,
- };
- }
-
- const blockquoteTextColorClass = getColorClassName( 'color', textColor );
- const blockquoteClasses =
- ( textColor || customTextColor ) &&
- classnames( 'has-text-color', {
- [ blockquoteTextColorClass ]: blockquoteTextColorClass,
- } );
-
- const blockquoteStyles = blockquoteTextColorClass
- ? undefined
- : { color: customTextColor };
+ const { value, citation } = attributes;
+ const shouldShowCitation = ! RichText.isEmpty( citation );
return (
-
-
+
+
diff --git a/packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-3.serialized.html b/packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-3.serialized.html
index 786f15f7b4293e..96cea0add22c10 100644
--- a/packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-3.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__pullquote__deprecated-3.serialized.html
@@ -1,3 +1,3 @@
-
-pullquote
pullquote
pullquote
before block supports pullquote
",
+ "citation": "before block supports",
+ "customMainColor": "#cd2653",
+ "textColor": "secondary"
+ },
+ "innerBlocks": [],
+ "originalContent": "pullquote
before block supports pullquote
before block supports pullquote
before block supports pullquote
before block supports Pullquote custom color
my citation Pullquote custom color
before block supports Pullquote custom color
",
- "citation": "my citation",
- "customMainColor": "#2207d0",
- "textColor": "subtle-background",
- "className": "has-background is-style-default"
+ "citation": "before block supports",
+ "backgroundColor": "blue",
+ "textColor": "white",
+ "style": {
+ "border": {
+ "color": "#2207d0"
+ }
+ },
+ "className": "is-style-default"
},
"innerBlocks": [],
- "originalContent": "Pullquote custom color
my citation Pullquote custom color
before block supports Pullquote custom color
my citation Pullquote custom color
before block supports Pullquote custom color
my citation Pullquote custom color
before block supports Pullquote custom color
my citation Pullquote custom color
before block supports Pullquote custom color
my citation Pullquote custom color
",
+ "citation": "my citation",
+ "textColor": "subtle-background"
+ },
+ "innerBlocks": [],
+ "originalContent": "Pullquote custom color
my citation Pullquote custom color
my citation Pullquote custom color
my citation Pullquote custom color
my citation
Date: Wed, 14 Apr 2021 21:28:46 +1000
Subject: [PATCH 13/21] Reverting the deprecated save function to ensure it's
1:1 with the previous save version
---
packages/block-library/src/pullquote/deprecated.js | 7 +------
1 file changed, 1 insertion(+), 6 deletions(-)
diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
index 3b42383f49e871..dc478e65c2a7d6 100644
--- a/packages/block-library/src/pullquote/deprecated.js
+++ b/packages/block-library/src/pullquote/deprecated.js
@@ -145,12 +145,7 @@ const deprecated = [
Date: Wed, 14 Apr 2021 21:55:15 +1000
Subject: [PATCH 14/21] Removed block attributes from block.json that block
supports injects Removed comments Regenerated fixtures
---
.../block-library/src/pullquote/block.json | 9 ------
.../block-library/src/pullquote/deprecated.js | 30 ++-----------------
.../blocks/core__pullquote__deprecated-4.html | 4 +--
.../blocks/core__pullquote__deprecated-4.json | 8 +++--
.../core__pullquote__deprecated-4.parsed.json | 9 +++---
...e__pullquote__deprecated-4.serialized.html | 4 +--
.../blocks/core__pullquote__main-color.json | 6 ++--
...ore__pullquote__main-color.serialized.html | 2 +-
...__pullquote__main-color__deprecated-4.html | 4 +--
...__pullquote__main-color__deprecated-4.json | 14 ++++-----
...uote__main-color__deprecated-4.parsed.json | 10 +++----
...__main-color__deprecated-4.serialized.html | 4 +--
12 files changed, 37 insertions(+), 67 deletions(-)
diff --git a/packages/block-library/src/pullquote/block.json b/packages/block-library/src/pullquote/block.json
index 9e769f16ca3b87..80a3fc95b9550f 100644
--- a/packages/block-library/src/pullquote/block.json
+++ b/packages/block-library/src/pullquote/block.json
@@ -15,17 +15,8 @@
"selector": "cite",
"default": ""
},
- "backgroundColor": {
- "type": "string"
- },
- "borderColor": {
- "type": "string"
- },
"textColor": {
"type": "string"
- },
- "style": {
- "type": "object"
}
},
"supports": {
diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
index dc478e65c2a7d6..b888da645d0c6c 100644
--- a/packages/block-library/src/pullquote/deprecated.js
+++ b/packages/block-library/src/pullquote/deprecated.js
@@ -60,30 +60,6 @@ function parseBorderColor( styleString ) {
// TODO: this is ripe for a bit of a clean up according to the example in https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/#example
const deprecated = [
- /* This deprecation adds block support. `mainColor` attribute is no longer available
-
- TODO: remove the following comments. Just here for development convenience.
-
- Deprecation fixtures:
-
- // Solid color style: mainColor is the background color
- // Default style: mainColor is the border color
-
- Solid color style:
-
- pullquote
before block supports pullquote
before block supports pullquote
before block supports pullquote
before block supports pullquote
before block supports pullquote
",
"citation": "before block supports",
- "customMainColor": "#cd2653",
- "textColor": "secondary"
+ "textColor": "white"
},
"innerBlocks": [],
- "originalContent": "pullquote
before block supports pullquote
before block supports pullquote
before block supports pullquote
before block supports pullquote
before block supports pullquote
before block supports pullquote
before block supports pullquote
before block supports Pullquote custom color
",
"citation": "before block supports",
- "backgroundColor": "blue",
"textColor": "white",
+ "className": "is-style-default",
+ "backgroundColor": "blue",
"style": {
"border": {
"color": "#2207d0"
}
- },
- "className": "is-style-default"
+ }
},
"innerBlocks": [],
"originalContent": "Pullquote custom color
before block supports Pullquote custom color
before block supports Pullquote custom color
my citation pullquote
before block supports Pullquote custom color
",
- "citation": "my citation",
- "textColor": "subtle-background"
+ "value": "pullquote
",
+ "citation": "before block supports"
},
"innerBlocks": [],
- "originalContent": "Pullquote custom color
my citation pullquote
before block supports Pullquote custom color
my citation pullquote
before block supports Pullquote custom color
my citation pullquote
before block supports Pullquote custom color
my citation pullquote
before block supports
-
);
@@ -40,35 +57,31 @@ export function BorderPanel( props ) {
/**
* Determine whether there is block support for border properties.
*
- * @param {string} blockName Block name.
- * @return {boolean} Whether there is support.
+ * @param {string} blockName Block name.
+ * @param {string} feature Border feature to check support for.
+ * @return {boolean} Whether there is support.
*/
-export function hasBorderSupport( blockName ) {
+export function hasBorderSupport( blockName, feature = 'any' ) {
if ( Platform.OS !== 'web' ) {
return false;
}
const support = getBlockSupport( blockName, BORDER_SUPPORT_KEY );
- return !! (
- true === support ||
- support?.color ||
- support?.radius ||
- support?.width ||
- support?.style
- );
-}
+ if ( support === true ) {
+ return true;
+ }
-/**
- * Determines if there a specific border feature is supported.
- *
- * @param {string} feature Name of the border feature e.g.`radius`
- * @param {string|Object} blockType Block name or block type object.
- * @return {boolean} Whether the border feature is supported.
- */
-export function hasBorderFeatureSupport( feature, blockType ) {
- const support = getBlockSupport( blockType, BORDER_SUPPORT_KEY );
- return !! ( true === support || ( support && support[ feature ] ) );
+ if ( feature === 'any' ) {
+ return !! (
+ support?.color ||
+ support?.radius ||
+ support?.width ||
+ support?.style
+ );
+ }
+
+ return !! support?.[ feature ];
}
/**
@@ -84,18 +97,16 @@ export function shouldSkipSerialization( blockType ) {
}
/**
- * Determines whether there is any block support for borders e.g. border radius,
- * style, width etc.
+ * Determines if all border support features have been disabled.
*
- * @param {Object} props Block properties.
- * @return {boolean} If border support is completely disabled.
+ * @return {boolean} If border support is completely disabled.
*/
-const useIsBorderDisabled = ( props = {} ) => {
+const useIsBorderDisabled = () => {
const configs = [
- useIsBorderColorDisabled( props ),
- useIsBorderRadiusDisabled( props ),
- useIsBorderStyleDisabled( props ),
- useIsBorderWidthDisabled( props ),
+ ! useEditorFeature( 'border.customColor' ),
+ ! useEditorFeature( 'border.customRadius' ),
+ ! useEditorFeature( 'border.customStyle' ),
+ ! useEditorFeature( 'border.customWidth' ),
];
return configs.every( Boolean );
From 9692633c98025285319589917195cb98daa7487e Mon Sep 17 00:00:00 2001
From: Ramon
Date: Thu, 15 Apr 2021 11:34:42 +1000
Subject: [PATCH 17/21] Reverting border supports to false
This was for testing purposes only and shouldn't have been committed.
---
lib/experimental-default-theme.json | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index 47b33f25af7c13..dea9d96966d34e 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -171,10 +171,10 @@
"units": [ "px", "em", "rem", "vh", "vw" ]
},
"border": {
- "customColor": true,
- "customRadius": true,
- "customStyle": true,
- "customWidth": true
+ "customColor": false,
+ "customRadius": false,
+ "customStyle": false,
+ "customWidth": false
}
}
}
From 61d131cf99a91d29c7526b5ec3fc94bd42b2fb80 Mon Sep 17 00:00:00 2001
From: ramonjd
Date: Thu, 15 Apr 2021 11:46:00 +1000
Subject: [PATCH 18/21] Adding explicit border support for pullquote
---
lib/experimental-default-theme.json | 16 ++++++++++++----
1 file changed, 12 insertions(+), 4 deletions(-)
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index 47b33f25af7c13..088be16ac71e5c 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -1,5 +1,13 @@
{
"settings": {
+ "core/pullquote": {
+ "border": {
+ "customColor": true,
+ "customRadius": true,
+ "customStyle": true,
+ "customWidth": true
+ }
+ },
"defaults": {
"color": {
"palette": [
@@ -171,10 +179,10 @@
"units": [ "px", "em", "rem", "vh", "vw" ]
},
"border": {
- "customColor": true,
- "customRadius": true,
- "customStyle": true,
- "customWidth": true
+ "customColor": false,
+ "customRadius": false,
+ "customStyle": false,
+ "customWidth": false
}
}
}
From e02bd0ff195a93fbdb9537c9650ce0e795a3483e Mon Sep 17 00:00:00 2001
From: ramonjd
Date: Thu, 15 Apr 2021 12:47:32 +1000
Subject: [PATCH 19/21] Removed unused deps
---
packages/block-library/src/pullquote/save.js | 8 --------
1 file changed, 8 deletions(-)
diff --git a/packages/block-library/src/pullquote/save.js b/packages/block-library/src/pullquote/save.js
index 1d286bd20c12b4..ebf20a218bb189 100644
--- a/packages/block-library/src/pullquote/save.js
+++ b/packages/block-library/src/pullquote/save.js
@@ -1,14 +1,7 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { includes } from 'lodash';
-
/**
* WordPress dependencies
*/
import {
- getColorClassName,
RichText,
useBlockProps,
} from '@wordpress/block-editor';
@@ -16,7 +9,6 @@ import {
/**
* Internal dependencies
*/
-import { SOLID_COLOR_CLASS } from './shared';
export default function save( { attributes } ) {
const { value, citation } = attributes;
From 6428aaa49b809decafdc017bc11b2da2467e59b2 Mon Sep 17 00:00:00 2001
From: ramonjd
Date: Thu, 15 Apr 2021 13:04:59 +1000
Subject: [PATCH 20/21] Overriding auto prettier formatting so the prettier
linter doesn't complain :D
---
packages/block-library/src/pullquote/save.js | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/packages/block-library/src/pullquote/save.js b/packages/block-library/src/pullquote/save.js
index ebf20a218bb189..bfbed9a2c58378 100644
--- a/packages/block-library/src/pullquote/save.js
+++ b/packages/block-library/src/pullquote/save.js
@@ -1,10 +1,7 @@
/**
* WordPress dependencies
*/
-import {
- RichText,
- useBlockProps,
-} from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
/**
* Internal dependencies
From 3fbe8157f375c2cc183f2bf529b6e679e945ea79 Mon Sep 17 00:00:00 2001
From: ramonjd
Date: Thu, 15 Apr 2021 13:11:41 +1000
Subject: [PATCH 21/21] Removed unnecessary comment block
---
packages/block-library/src/pullquote/save.js | 4 ----
1 file changed, 4 deletions(-)
diff --git a/packages/block-library/src/pullquote/save.js b/packages/block-library/src/pullquote/save.js
index bfbed9a2c58378..83d291d87ec5fb 100644
--- a/packages/block-library/src/pullquote/save.js
+++ b/packages/block-library/src/pullquote/save.js
@@ -3,10 +3,6 @@
*/
import { RichText, useBlockProps } from '@wordpress/block-editor';
-/**
- * Internal dependencies
- */
-
export default function save( { attributes } ) {
const { value, citation } = attributes;
const shouldShowCitation = ! RichText.isEmpty( citation );