Add alignment support to post content block #24014
Conversation
noahtallen
added
[Type] Enhancement
|
Added "needs design feedback" because I'm unsure which block options should be supported by the post content block. |
|
Size Change: +3 B (0%) Total Size: 1.16 MB
ℹ️ View Unchanged
|
cc @olaolusoga and @dubielzyk for thoughts on this |
Im not certain here as well. However, I could see a use for having the options here. In the case that the blocks in the post content have no custom styles added, being able to add them to the post content block would be a neat way to give the content specific styles at the template level. 'Singular Template A' sets its post content block to have a green background, white text, and 25px font-size. 'Singular Template B' sets its post content block to have red background, black text, and 22px font-size. Etc., so the same post content could have different styles when rendered on different templates. Contrary to this, if the blocks in the content already have specific styles applied they would overrule the post content block's styles. In which case applying styles at the post-content block level could be a bit confusing for users to figure out why certain blocks aren't following the options they are setting at the higher level. 🤔 🤷♀️ |
There was a problem hiding this comment.
give the content specific styles at the template level
if the blocks in the content already have specific styles applied they would overrule the post content block's styles
This makes a lot of sense to me. I think, however, that there is one more thing to consider if we go down that path. After identifying and discussing a bug with nested block styling in Jacopo's site-tagline PR, it seems like this might require a non-trivial amount of work to get right.
Not saying template level styling isn't worth the effort. It's just another consideration.
|
Maybe this is the sort of question to put on the backburner until global styles is around? |
There was a problem hiding this comment.
Maybe this is the sort of question to put on the backburner until global styles is around?
That makes sense. I think the changes @Addison-Stavlo and I are discussing would be outside the scope of this PR 👍
To clarify though, would we put questions on the backburner because:
- global styles would already handle styling at the template level?
- global styles would impact template level styling in another way?
- another reason?
Yeah, that was about my line of thinking. Essentially, global styles would be fixing any problems with overriding styles globally vs locally in a holistic way |
|
Edit - oops, don't mind me. I completely missed this is already there. 🤣 (I might have been checking Post Comments instead of Post Content)
gutenberg/packages/block-library/src/group/block.json Lines 11 to 14 in e0d6243 I think that makes sense for Post Content, while some of the others may be more debatable. |
|
We might want to restrict the alignment options too! Not sure :) |
to just full/wide? that might make sense... im not sure why we would want to right or left align it? 🤔 |
Just a note that the left/right block alignment is not the same as text alignment. For experience, mixing left/right block alignment with text alignment is a bit of a can of worms, and it's very hard to make it look right. I'd say that left/right block alignment should only be used for inline elements (like Image), while block elements should rely on "layout" blocks like Columns. |
🤔 how should we apply this to the post content block? |
Do you mean something like positioning the post content beside another block (like a sidebar)? It should be enough — and more manageable — to put content and sidebar in a Columns block, rather than float-align one against the other (and any non-floating element nearby). |
|
Yeah, I agree with you there! should we remove the left/right alignment options then? I think currently all alignment options are enabled. |
Yes, I think it would work better, unless someone has a good reason not to... 🤔 |
noahtallen
force-pushed
the
add/color-support-post-content
branch
from
3a56305
to
f94e2ce
Compare
|
following suggestions from addie and copons, I've restricted the alignment options to wide & full |
There was a problem hiding this comment.
A couple things to note:
We will need to add some styles to an editor.scss / style.scss file for the link color setting to work within the editor and front-end. While that may not necessary for simple blocks like paragraph/heading, when we have these nested elements they compete with default theme styles.
Note the text should be white as well. Maybe something similar to the styles in #24080 will fix this (and perhaps we need a wp-block-post-content classname added in index.php).
Another odd thing I noticed, with no/standard block alignment for this block within a Group block that has a width alignment there is an inconsistency between the editor and front-end (although probably unrelated to any changes here):
editor:
In the editor the background color is applied to the expected width, but on the front-end it is applied to the width of the parent group block. 🤔
front-end:
Lastly, the class names for block alignment 'alignfull' 'alignwide' etc. are not being added to the block on the front-end. But this is because we need to add handling for block alignment in gutenberg_experimental_apply_classnames_and_styles function in lib/blocks.php. This shouldn't be a blocker for this PR, and I plan on looking into adding handling for block alignment there tomorrow (it will help with Post Comments and other blocks as well).
|
Following more suggestions, I've removed the color support. It really doesn't make a lot of sense in this context, IMO, at least until we have more fleshed out design solutions with global styles. (Additionally, you can just accomplish the same thing with a group block.) |
|
I'll also wait for #24122 so that I can test alignment on the front end |
vindl
force-pushed
the
add/color-support-post-content
branch
from
d1c2617
to
d819ab0
Compare
vindl
changed the title
Description
Adds background & text color support to the post content block. It works well in the editor, but I think some front end stuff looks weird because of the theme.
Question: do we even want this? I feel like the same thing can be accomplished with a group block around post content.
I didn't add text size stuff since that can be handled inside the blocks. Should we support it in the post content block?
Let me know if anything else needs added to post content. It looks like alignment is working "ok".
How has this been tested?
Locally in edit site
Screenshots
Types of changes
Enhancement
Checklist: