Skip to content

Add styles for WordPress Media-Text block #2151

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

Merged
merged 2 commits into from
Mar 8, 2023

Conversation

tylersticka
Copy link
Member

@tylersticka tylersticka commented Mar 8, 2023

Overview

Introduces customizations to the WordPress Media-Text block styles:

  • Uses gap instead of padding to maintain gutters, improving alignment with adjacent content.
  • Applies the same has-background containment styles as groups and paragraphs.
  • Maintains vertical rhythm of child elements.
  • Applies rounded corners to "fill" images.

Screenshots

On narrow screens with mobile stacking enabled:

Screenshot 2023-03-07 at 4 48 18 PM

On wider screens with pretty typical options selected:

Screenshot 2023-03-07 at 4 48 53 PM

On wider screens with several different options selected:

Screenshot 2023-03-07 at 4 51 41 PM

Testing

Open the story on the deploy preview and experiment with the Storybook controls.


@changeset-bot
Copy link

changeset-bot bot commented Mar 8, 2023

🦋 Changeset detected

Latest commit: c19eedf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@cloudfour/patterns Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Mar 8, 2023

Deploy Preview for cloudfour-patterns ready!

Name Link
🔨 Latest commit c19eedf
🔍 Latest deploy log https://app.netlify.com/sites/cloudfour-patterns/deploys/6407dcf088ab110008cdc8ac
😎 Deploy Preview https://deploy-preview-2151--cloudfour-patterns.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@tylersticka tylersticka changed the title Fix/wordpress media text block Add styles for WordPress Media-Text block Mar 8, 2023
@tylersticka tylersticka marked this pull request as ready for review March 8, 2023 00:59
@tylersticka tylersticka requested a review from a team March 8, 2023 00:59
Copy link
Contributor

@Paul-Hebert Paul-Hebert left a comment

Choose a reason for hiding this comment

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

Much better, thanks Tyler!

@tylersticka tylersticka merged commit 6bf8f7b into main Mar 8, 2023
@tylersticka tylersticka deleted the fix/wordpress-media-text-block branch March 8, 2023 22:29
@github-actions github-actions bot mentioned this pull request Mar 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Media-text block not handling most common use case very well
2 participants