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.

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

Cover: Merge block and global styles #49434

Merged
merged 3 commits into from
Mar 30, 2023

Conversation

Mamaduka
Copy link
Member

What?

Fixes #49384.

PR adds missing dimension styles when using a Cover block as a featured image with a fixed background.

Why?

The render function was replacing the already generated styles attribute.

How?

I've updated the logic to merge styles before re-applying them.

Testing Instructions

  1. Open a Post or Page.
  2. Insert a Cover Block.
  3. Set the image for the cover block to the Featured image.
  4. In Dimensions, add margin, padding, and a min-height.
  5. In Media settings, toggle the Fixed background on.
  6. Confirm all inline styles are applied correctly when previewing the post.

Screenshots or screencast

CleanShot 2023-03-29 at 14 52 17

Comment on lines -52 to -57
if ( isset( $attributes['minHeight'] ) ) {
$height_unit = empty( $attributes['minHeightUnit'] ) ? 'px' : $attributes['minHeightUnit'];
$height = " min-height:{$attributes['minHeight']}{$height_unit}";

$styles .= $height;
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The min-height is already serialized in the content. So there's no need to add it separately now that the style attribute values are merged.

P.S. We might implement this via the dimensions support flag. See #45300.

@Mamaduka Mamaduka requested review from t-hamano and gziolo and removed request for ajitbohra March 29, 2023 11:00
@Mamaduka Mamaduka self-assigned this Mar 29, 2023
@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended [Block] Cover Affects the Cover Block - used to display content laid over a background image labels Mar 29, 2023
@github-actions
Copy link

Flaky tests detected in b8278ba.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4553455959
📝 Reported issues:

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the PR!

This PR will fix padding and margin as well as other global styles to render correctly when using a Cover block as a featured image with a fixed background. 🎉

Before

before

After

after

Comment on lines +53 to +55
$styles = $processor->get_attribute( 'style' );
$merged_styles = ! empty( $styles ) ? $styles . ';' : '';
$merged_styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
$styles = $processor->get_attribute( 'style' );
$merged_styles = ! empty( $styles ) ? $styles . ';' : '';
$merged_styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');';
$styles = $processor->get_attribute( 'style' );
$merged_styles = ! empty( $styles ) ? $styles . ';' : '';
if ( $current_featured_image ) {
$merged_styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');';
}

Maybe this should be done as a follow-up PR, but how about preventing the background-image property with an empty url from being output when there is no post featured image?

empty-url

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right. Let's do this in a follow-up 👍

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, there's no need for that. You can't enabled a fixed background if if the featured image isn't set. So this code is never executed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the following steps could happen:

  • Add the featured image to the post from the Post panel
  • Insert a cover block
  • Enable "Fixed background" or "Repeated background"
  • Delete the featured image from the Post panel

After this procedure, the media settings will not appear in the cover block, but the hasParallax or isRepeated attributes will be retained.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. Never trust the user 😄

I've changed on a local branch and will push it shortly.

@Mamaduka Mamaduka merged commit 7547ad4 into trunk Mar 30, 2023
@Mamaduka Mamaduka deleted the fix/cover-fixed-featured-image-styles branch March 30, 2023 06:01
@github-actions github-actions bot added this to the Gutenberg 15.6 milestone Mar 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cover Block with Featured Image and Fixed background removing block dimensions
2 participants