Add CSS for Outlined style for WP Image block #2039
Conversation
This PR adds the styles for the new "Outlined" block style we added to the Image block in the WordPress theme. Ideally, we would just add the `u-border-small` class directly, but WordPress adds the class to the outermost element — in this case, the `figure` — and we only want the border to apply to the nested `img` element. Fixes #862
🦋 Changeset detectedLatest commit: 5980351 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
✅ Deploy Preview for cloudfour-patterns ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
| const alignmentClasses = { | ||
| None: '', | ||
| Left: 'alignleft', | ||
| Center: 'aligncenter', | ||
| Right: 'alignright', | ||
| Full: 'alignfull', | ||
| Wide: 'alignwide', | ||
| }; |
There was a problem hiding this comment.
These are only used in the Image story, so I moved them below to set directly.
| }} | ||
| > | ||
| {(args) => blockImageDemo({ class: args.alignment })} | ||
| {(args) => blockImageDemo({ alignment: args.alignment, style: args.style })} |
There was a problem hiding this comment.
I changed class to alignment because we're setting multiple classes now, and it made the logic in the twig file easier to understand.
| {% if alignment in ['alignleft', 'aligncenter', 'alignright'] %} | ||
| <div class="wp-block-image {{style}}"> |
There was a problem hiding this comment.
This is explained in the CSS, but this awkward thing where we're adding a wrapper element for certain alignments is mirroring the behavior of WordPress. I simplified the if check and added the block style, since it's always set on the element that gets wp-block-image.
There was a problem hiding this comment.
Nice! I like the if blah in array pattern. 👍🏽
| /// 1. We're using 1px borders here rather than size.$edge-small because it | ||
| /// was causing subpixel rendering errors leaving a slight gap between the | ||
| /// image and the border. | ||
| &.is-style-outlined img { |
There was a problem hiding this comment.
@spaceninja Can you help me understand why the code uses a "state" is- prefix here? I was expecting a modifier class (e.g., .wp-block-image--outlined).
I might be missing something obvious. I haven't had a chance to create new blocks or CSS for blocks yet. 🙂
There was a problem hiding this comment.
Yep — we don't have control over it. We're using WordPress's native "block styles" which let you name your style (in this case "outlined" and it automatically adds a class, in this case is-style-outlined.
Since we're dealing with extending a built-in block, our options are somewhat limited.
| {% | ||
| if class == 'alignleft' or class == 'aligncenter' or class == 'alignright' | ||
| %} | ||
| {% if alignment in ['alignleft', 'aligncenter', 'alignright'] %} |
There was a problem hiding this comment.
Does it make sense to DRY the ['alignleft', 'aligncenter', 'alignright'] array?
There was a problem hiding this comment.
I think it's fine — it's also worth remembering that this is just the storybook example, so it's not going to affect the real site if someone edited this and broke it.
Overview
This PR adds the styles for the new "Outlined" block style we added to the Image block in the WordPress theme. Ideally, we would just add the
u-border-smallclass directly, but WordPress adds the class to the outermost element — in this case, thefigure— and we only want the border to apply to the nestedimgelement.Screenshots
It's subtle, but there's a 1px border around the image.
Testing