Twenty Twenty-One Blocks: Migrate Image Block styles #103
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -59,11 +59,23 @@ | |
| # Image | ||
| --------------------------------------------------------------*/ | ||
|
|
||
| .wp-block-image img { | ||
| height: auto; | ||
| } | ||
|
|
||
| .wp-block-image figcaption{ | ||
| text-align: center; | ||
| color: var(--wp--preset--color--dark-gray); | ||
| font-size: var(--wp--preset--font-size--extra-small); | ||
| line-height: var(--wp--custom--line-height--body); | ||
| margin-top: calc(0.5 * var(--wp--custom--spacing--unit)); | ||
| margin-bottom: var(--wp--custom--spacing--unit); | ||
| } | ||
|
|
||
| .wp-block-image a:focus img { | ||
|
There was a problem hiding this comment. I think we can leave this out until we have a resolution to WordPress/gutenberg#27075 happens. We don't currently have any styles in the heme that would add an |
||
| outline-offset: 2px; | ||
| } | ||
|
|
||
| .wp-block-image.is-style-twentytwentyone-border img, | ||
| .wp-block-image.is-style-twentytwentyone-image-frame img { | ||
| border: 3px solid var(--wp--preset--color--dark-gray); | ||
|
|
||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -103,7 +103,7 @@ body { | |||||
|
|
||||||
| .wp-site-blocks .alignfull { | ||||||
| transform: translateX(0px); | ||||||
| width: 100% + var(--wp--custom--spacing--horizontal); | ||||||
|
There was a problem hiding this comment. What does this rule mean? The width of the block should be 100% of its container plus some horizontal spacing? Also I didn't know you could do a math operation outside of calc. The browser does appear to compute it and an alignfull image appears correctly in my testing. But setting this to
Suggested change
There was a problem hiding this comment. yeah, I just saw that the extra parenthesis was breaking the alignfull images and that was a quick fix but I'm going to make a separate PR (#104) for the alignments since they are not up to date with TT1's. I just left this here as a quick fix in the meantime |
||||||
| max-width: calc(100% + var(--wp--custom--spacing--horizontal)); | ||||||
| } | ||||||
| } | ||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could add this here, but I wonder if a better route would be to open a Gutenberg issue to add caption styles to
theme.json. I can see this being something we'd want to customize in other blocks too.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Connected to WordPress/gutenberg#12997
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Mmmh, I see. How much should be managed by the json? Looking at these styles I'm inclined to say everything but the margins. But that's maybe because I'm not too clear on how
theme.jsonshould handle these spacing variables that we use for our themes.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the margins could be part of the block settings too, using custom spacing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the margins may end up being handled by JSON too eventually. Even if it's just related to the global spacing variable proposed in WordPress/gutenberg#27315.