Twenty Twenty-One Blocks: Migrate Image Block styles #103
Conversation
|
I have found issues with alignments that affect the image block but require a separate PR altogether. |
MaggieCabrera
requested review from
kjellr,
carolinan,
allancole,
jffng and
scruffian
| @@ -103,7 +103,7 @@ body { | |||
|
|
|||
| .wp-site-blocks .alignfull { | |||
| transform: translateX(0px); | |||
| width: 100% + var(--wp--custom--spacing--horizontal)); | |||
| 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 100% appears to have the same effect.
| width: 100% + var(--wp--custom--spacing--horizontal); | |
| width: 100%; |
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
| 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 on focus anyway.
| .wp-block-image img { | ||
| height: auto; | ||
| } | ||
|
|
||
| .wp-block-image figcaption{ |
There was a problem hiding this comment.
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.
Connected to WordPress/gutenberg#12997
There was a problem hiding this comment.
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.json should handle these spacing variables that we use for our themes.
There was a problem hiding this comment.
I think the margins could be part of the block settings too, using custom spacing.
There was a problem hiding this comment.
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.
|
I'm closing this PR in favor of WordPress/gutenberg#27480, WordPress/gutenberg#27315 and WordPress/gutenberg#27075 |
Migrated styles for Image Block.
There are issues that affect this block that would be solved by WordPress/gutenberg#26633 and WordPress/gutenberg#27116
Broken out of #82
Closes #92