Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Borders: Use new border control components in block support #37770

Merged
merged 27 commits into from
Apr 14, 2022
Merged

Borders: Use new border control components in block support #37770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
09a7d05
Add support for individual side borders via BorderBoxControl
aaronrobertshaw Feb 1, 2022
136e6af
Tweak table styles to be less ugly with split borders
aaronrobertshaw Feb 1, 2022
9b026e7
Update Search block for individual border support
aaronrobertshaw Feb 3, 2022
7ed686c
Extend theme.json class to support individual borders
aaronrobertshaw Mar 23, 2022
45f6393
Update positioning of border control popovers
aaronrobertshaw Mar 25, 2022
344314a
Update border related properties in theme.json schema
aaronrobertshaw Apr 1, 2022
6fdef6f
Update living theme.json md file
aaronrobertshaw Apr 1, 2022
5ec71d4
Keep linter happy
aaronrobertshaw Apr 1, 2022
8672d6a
Fix border skip serialization checks
aaronrobertshaw Apr 1, 2022
eb92cbf
Fix typos
aaronrobertshaw Apr 4, 2022
301f755
Only implode classes and styles in primary application function
aaronrobertshaw Apr 4, 2022
e3266b6
Remove unneeded border radius control class
aaronrobertshaw Apr 4, 2022
0b828e4
Improve comment punctuation
aaronrobertshaw Apr 4, 2022
ec3ffb9
Prevent empty sideBorderColors object for split borders
aaronrobertshaw Apr 4, 2022
649f51e
Add explanatory comment
aaronrobertshaw Apr 4, 2022
ad51e60
Enable alpha colors for borders
aaronrobertshaw Apr 4, 2022
b43ba59
Fix whitespace typo
aaronrobertshaw Apr 7, 2022
516d819
Switch to preset approach for named colors
aaronrobertshaw Apr 8, 2022
2c8fcca
Fix linting errors
aaronrobertshaw Apr 8, 2022
5e700d1
Clean up split border style generation
aaronrobertshaw Apr 8, 2022
4c1d414
Take info from style.border.side.color value instead of colorSlug
oandregal Apr 8, 2022
5f74e1b
Take info from style.border.side.color value instead of colorSlug (cl…
oandregal Apr 8, 2022
06de976
Take info from style.border.side.color (search block)
oandregal Apr 8, 2022
f260382
Fix PHP lint issues
oandregal Apr 8, 2022
461717d
Remove obsolete colorSlug attributes from border test
aaronrobertshaw Apr 12, 2022
84f4f4b
Prevent editor forced shorthand styles applying incorrect styles
aaronrobertshaw Apr 13, 2022
ea485d5
Make skip serialization check consistent
aaronrobertshaw Apr 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion docs/reference-guides/theme-json-reference/theme-json-living.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,13 @@ Border styles.
| Property | Type | Props |
| --- | --- |--- |
| color | string | |
| radius | string | |
| radius | undefined | |
andrewserong marked this conversation as resolved.
Show resolved Hide resolved
| style | string | |
| width | string | |
| top | undefined | |
andrewserong marked this conversation as resolved.
Show resolved Hide resolved
| right | undefined | |
| bottom | undefined | |
| left | undefined | |

---

Expand Down
72 changes: 69 additions & 3 deletions lib/block-supports/border.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function gutenberg_register_border_support( $block_type ) {
* Adds CSS classes and inline styles for border styles to the incoming
* attributes array. This will be applied to the block markup in the front-end.
*
* @param WP_Block_type $block_type Block type.
* @param WP_Block_Type $block_type Block type.
* @param array $block_attributes Block attributes.
*
* @return array Border CSS classes and inline styles.
Expand All @@ -50,6 +50,10 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {

$classes = array();
$styles = array();
$sides = array( 'top', 'right', 'bottom', 'left' );

$has_border_color_support = gutenberg_has_border_feature_support( $block_type, 'color' );
$has_border_width_support = gutenberg_has_border_feature_support( $block_type, 'width' );

// Border radius.
if (
Expand Down Expand Up @@ -88,7 +92,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {

// Border width.
if (
gutenberg_has_border_feature_support( $block_type, 'width' ) &&
$has_border_width_support &&
isset( $block_attributes['style']['border']['width'] ) &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' )
) {
Expand All @@ -104,7 +108,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {

// Border color.
if (
gutenberg_has_border_feature_support( $block_type, 'color' ) &&
$has_border_color_support &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' )
) {
$has_named_border_color = array_key_exists( 'borderColor', $block_attributes );
Expand All @@ -122,6 +126,18 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
}
}

// Generate styles for individual border sides.
if ( $has_border_color_support || $has_border_width_support ) {
foreach ( $sides as $side ) {
$border = _wp_array_get( $block_attributes, array( 'style', 'border', $side ), false );

if ( is_array( $border ) && ! empty( $border ) ) {
$split_border_styles = gutenberg_generate_individual_border_classes_and_styles( $side, $border, $block_type );
$styles = array_merge( $styles, $split_border_styles );
}
}
}

// Collect classes and styles.
$attributes = array();

Expand All @@ -136,6 +152,56 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
return $attributes;
}

/**
* Generates longhand CSS styles for an individual side border.
*
* If some values are omitted from the border configuration, using shorthand
* styles would lead to `initial` values being used instead of the more
* desirable inherited values. This could also lead to browser inconsistencies.
*
* @param string $side The side the styles are being generated for.
* @param array $border Array containing border color, style, and width values.
* @param WP_Block_Type $block_type Block type.
*
* @return array Longhand CSS border styles for a single side.
*/
function gutenberg_generate_individual_border_classes_and_styles( $side, $border, $block_type ) {
$styles = array();

if (
isset( $border['width'] ) &&
null !== $border['width'] &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' )
) {
$styles[] = sprintf( 'border-%s-width: %s;', $side, $border['width'] );
}

if (
isset( $border['style'] ) &&
null !== $border['style'] &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' )
) {
$styles[] = sprintf( 'border-%s-style: %s;', $side, $border['style'] );
}

$border_color = _wp_array_get( $border, array( 'color' ), null );

if (
$border_color &&
! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' )
) {
$has_color_preset = strpos( $border_color, 'var:preset|color|' ) !== false;
if ( $has_color_preset ) {
$named_color_slug = substr( $border_color, strrpos( $border_color, '|' ) + 1 );
$styles [] = sprintf( 'border-%s-color: var(--wp--preset--color--%s);', $side, $named_color_slug );
} else {
$styles [] = sprintf( 'border-%s-color: %s;', $side, $border['color'] );
}
}

return $styles;
}

/**
* Checks whether the current block type supports the border feature requested.
*
Expand Down
92 changes: 92 additions & 0 deletions lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,57 @@
* @access private
*/
class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 {
/**
* Metadata for style properties.
*
* Each element is a direct mapping from the CSS property name to the
* 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' ),
'border-top-color' => array( 'border', 'top', 'color' ),
'border-top-width' => array( 'border', 'top', 'width' ),
'border-top-style' => array( 'border', 'top', 'style' ),
'border-right-color' => array( 'border', 'right', 'color' ),
'border-right-width' => array( 'border', 'right', 'width' ),
'border-right-style' => array( 'border', 'right', 'style' ),
'border-bottom-color' => array( 'border', 'bottom', 'color' ),
'border-bottom-width' => array( 'border', 'bottom', 'width' ),
'border-bottom-style' => array( 'border', 'bottom', 'style' ),
'border-left-color' => array( 'border', 'left', 'color' ),
'border-left-width' => array( 'border', 'left', 'width' ),
'border-left-style' => array( 'border', 'left', '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' ),
'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' ),
'--wp--style--block-gap' => array( 'spacing', 'blockGap' ),
'text-decoration' => array( 'typography', 'textDecoration' ),
'text-transform' => array( 'typography', 'textTransform' ),
'filter' => array( 'filter', 'duotone' ),
);

/**
* Presets are a set of values that serve
Expand Down Expand Up @@ -197,6 +248,47 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 {
),
);

/**
* The valid properties under the styles key.
*
* @var array
*/
const VALID_STYLES = array(
'border' => array(
'color' => null,
'radius' => null,
'style' => null,
'width' => null,
'top' => null,
'right' => null,
'bottom' => null,
'left' => null,
),
'color' => array(
'background' => null,
'gradient' => null,
'text' => null,
),
'filter' => array(
'duotone' => null,
),
'spacing' => array(
'margin' => null,
'padding' => null,
'blockGap' => 'top',
),
'typography' => array(
'fontFamily' => null,
'fontSize' => null,
'fontStyle' => null,
'fontWeight' => null,
'letterSpacing' => null,
'lineHeight' => null,
'textDecoration' => null,
'textTransform' => null,
),
);

/**
* Returns the current theme's wanted patterns(slugs) to be
* registered from Pattern Directory.
Expand Down
7 changes: 5 additions & 2 deletions packages/block-editor/src/components/border-radius-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@
align-items: flex-start;

> .components-unit-control-wrapper {
width: calc(50% - 26px);
width: 110px;
margin-bottom: 0;
margin-right: #{ $grid-unit-10 };
flex-shrink: 0;
}

.components-range-control {
width: calc(50% - 26px);
flex: 1;
margin-bottom: 0;

.components-base-control__field {
Expand Down Expand Up @@ -49,6 +51,7 @@
.component-border-radius-control__linked-button.has-icon {
display: flex;
justify-content: center;
margin-left: 2px;

svg {
margin-right: 0;
Expand Down
Loading