Skip to content

Commit

Permalink
Post Featured Image: Fix borders after addition of overlay feature (#…
Browse files Browse the repository at this point in the history 
…44286)
  • Loading branch information
@aaronrobertshaw @michalczaplinski
aaronrobertshaw authored and michalczaplinski committed Oct 3, 2022
1 parent 9aaf066 commit 32de2fb
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 111 deletions.
2 changes: 1 addition & 1 deletion packages/block-library/src/post-featured-image/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
"color": true,
"radius": true,
"width": true,
"__experimentalSelector": "img, .block-editor-media-placeholder",
"__experimentalSelector": "img, .block-editor-media-placeholder, .wp-block-post-featured-image__overlay",
"__experimentalSkipSerialization": true,
"__experimentalDefaultControls": {
"color": true,
Expand Down
142 changes: 70 additions & 72 deletions packages/block-library/src/post-featured-image/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,87 +6,85 @@
backdrop-filter: none; // Removes background blur so the overlay's actual color is visible.
}

&.wp-block-post-featured-image {
// Style the placeholder.
.wp-block-post-featured-image__placeholder,
.components-placeholder {
justify-content: center;
align-items: center;
padding: 0;
// Style the placeholder.
.wp-block-post-featured-image__placeholder,
.components-placeholder {
justify-content: center;
align-items: center;
padding: 0;

// Hide the upload button, as it's also available in the media library.
.components-form-file-upload {
display: none;
}
// Hide the upload button, as it's also available in the media library.
.components-form-file-upload {
display: none;
}

// Style the upload button.
.components-button.components-button {
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: $grid-unit-60;
height: $grid-unit-60;
border-radius: 50%;
position: relative;
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
border-style: solid;
color: $white;
// Style the upload button.
.components-button {
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: $grid-unit-60;
height: $grid-unit-60;
border-radius: 50%;
position: relative;
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
border-style: solid;
color: $white;

> svg {
color: inherit;
}
> svg {
color: inherit;
}
}

// Show default placeholder height when not resized.
min-height: 200px;

// The following override the default placeholder styles that remove
// its border so that a user selection for border color or width displays
// a visual border.
&:where(.has-border-color) {
border-style: solid;
}
&:where([style*="border-top-color"]) {
border-top-style: solid;
}
&:where([style*="border-right-color"]) {
border-right-style: solid;
}
&:where([style*="border-bottom-color"]) {
border-bottom-style: solid;
}
&:where([style*="border-left-color"]) {
border-left-style: solid;
}
// Show default placeholder height when not resized.
min-height: 200px;

&:where([style*="border-width"]) {
border-style: solid;
}
&:where([style*="border-top-width"]) {
border-top-style: solid;
}
&:where([style*="border-right-width"]) {
border-right-style: solid;
}
&:where([style*="border-bottom-width"]) {
border-bottom-style: solid;
}
&:where([style*="border-left-width"]) {
border-left-style: solid;
}
// The following override the default placeholder styles that remove
// its border so that a user selection for border color or width displays
// a visual border.
&:where(.has-border-color) {
border-style: solid;
}
&:where([style*="border-top-color"]) {
border-top-style: solid;
}
&:where([style*="border-right-color"]) {
border-right-style: solid;
}
&:where([style*="border-bottom-color"]) {
border-bottom-style: solid;
}
&:where([style*="border-left-color"]) {
border-left-style: solid;
}

// Provide a minimum size for the placeholder when resized.
// Note, this should be as small as we can afford it, and exists only
// to ensure there's room for the upload button.
&[style*="height"] .components-placeholder {
min-height: $grid-unit-60;
min-width: $grid-unit-60;
height: 100%;
width: 100%;
&:where([style*="border-width"]) {
border-style: solid;
}
&:where([style*="border-top-width"]) {
border-top-style: solid;
}
&:where([style*="border-right-width"]) {
border-right-style: solid;
}
&:where([style*="border-bottom-width"]) {
border-bottom-style: solid;
}
&:where([style*="border-left-width"]) {
border-left-style: solid;
}
}

// Provide a minimum size for the placeholder when resized.
// Note, this should be as small as we can afford it, and exists only
// to ensure there's room for the upload button.
&[style*="height"] .components-placeholder {
min-height: $grid-unit-60;
min-width: $grid-unit-60;
height: 100%;
width: 100%;
}
}

Expand Down
42 changes: 18 additions & 24 deletions packages/block-library/src/post-featured-image/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,16 +83,25 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
$has_custom_gradient = isset( $attributes['customGradient'] ) && $attributes['customGradient'];
$has_solid_overlay = isset( $attributes['overlayColor'] ) && $attributes['overlayColor'];
$has_custom_overlay = isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor'];
$class_names = array(
'wp-block-post-featured-image__overlay',
);
$styles_properties = array();
$class_names = array( 'wp-block-post-featured-image__overlay' );
$styles = array();

if ( ! $has_dim_background ) {
return '';
}

// Generate required classes for the element.
// Apply border classes and styles.
$border_attributes = get_block_core_post_featured_image_border_attributes( $attributes );

if ( ! empty( $border_attributes['class'] ) ) {
$class_names[] = $border_attributes['class'];
}

if ( ! empty( $border_attributes['style'] ) ) {
$styles[] = $border_attributes['style'];
}

// Apply overlay and gradient classes.
if ( $has_dim_background ) {
$class_names[] = 'has-background-dim';
$class_names[] = "has-background-dim-{$attributes['dimRatio']}";
Expand All @@ -110,35 +119,20 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
$class_names[] = "has-{$attributes['gradient']}-gradient-background";
}

// Generate required CSS properties and their values.
if ( ! empty( $attributes['style']['border']['radius'] ) ) {
$styles_properties['border-radius'] = $attributes['style']['border']['radius'];
}

if ( ! empty( $attributes['style']['border']['width'] ) ) {
$styles_properties['border-width'] = $attributes['style']['border']['width'];
}

// Apply background styles.
if ( $has_custom_gradient ) {
$styles_properties['background-image'] = $attributes['customGradient'];
$styles[] = sprintf( 'background-image: %s;', $attributes['customGradient'] );
}

if ( $has_custom_overlay ) {
$styles_properties['background-color'] = $attributes['customOverlayColor'];
}

$styles = '';

foreach ( $styles_properties as $style_attribute => $style_attribute_value ) {
$styles .= "{$style_attribute}: $style_attribute_value; ";
$styles[] = sprintf( 'background-color: %s;', $attributes['customOverlayColor'] );
}

return sprintf(
'<span class="%s" style="%s" aria-hidden="true"></span>',
esc_attr( implode( ' ', $class_names ) ),
esc_attr( trim( $styles ) )
esc_attr( safecss_filter_attr( implode( ' ', $styles ) ) )
);

}

/**
Expand Down
31 changes: 17 additions & 14 deletions packages/block-library/src/post-featured-image/overlay.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,20 +47,23 @@ const Overlay = ( {

return (
<>
<span
aria-hidden="true"
className={ classnames(
'wp-block-post-featured-image__overlay',
dimRatioToClass( dimRatio ),
{
[ overlayColor.class ]: overlayColor.class,
'has-background-dim': dimRatio !== undefined,
'has-background-gradient': gradientValue,
[ gradientClass ]: gradientClass,
}
) }
style={ overlayStyles }
/>
{ !! dimRatio && (
<span
aria-hidden="true"
className={ classnames(
'wp-block-post-featured-image__overlay',
dimRatioToClass( dimRatio ),
{
[ overlayColor.class ]: overlayColor.class,
'has-background-dim': dimRatio !== undefined,
'has-background-gradient': gradientValue,
[ gradientClass ]: gradientClass,
},
borderProps.className
) }
style={ overlayStyles }
/>
) }
<InspectorControls __experimentalGroup="color">
<ColorGradientSettingsDropdown
__experimentalHasMultipleOrigins
Expand Down

0 comments on commit 32de2fb

Please sign in to comment.