-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Post excerpt block - add color, fontSize, lineHeight, and text alignment. #23945
Changes from 8 commits
1e8c93e
1af97c8
691c73f
2311564
c477041
55357ca
a62b280
29f30d5
404fe64
1c32d9b
5821974
b0a3cf8
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,12 @@ | ||
.wp-block-post-excerpt__excerpt.is-inline { | ||
display: inline-block; | ||
.wp-block-post-excerpt { | ||
|
||
.wp-block-post-excerpt__excerpt.is-inline { | ||
display: inline-block; | ||
} | ||
|
||
|
||
} | ||
|
||
.wp-block[data-type="core/post-excerpt"].has-link-color .wp-block-post-excerpt a { | ||
color: var(--wp--style--color--link); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
.wp-block-post-excerpt { | ||
.wp-block-post-excerpt__excerpt, | ||
.wp-block-post-excerpt__more-text { | ||
line-height: inherit; | ||
} | ||
} | ||
|
||
.wp-block-post-excerpt.has-link-color a { | ||
color: var(--wp--style--color--link) !important; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. do we need There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Either that or more specificity. Since there are a handful of nested elements in this block theme supplied generic link style rules overwrite our link color selection when we also have a background color applied. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do you have an example of rule with higher-specificity and where does it come from? (Just to help with the reasoning) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For me, this is an area where the theme should adapt its styles. Ideally, with global styles (and the link color feature is part of global styles), the themes don't provide as much detailed CSS but it's more "managed". There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was wondering about this as well - Theme styles being too restrictive vs. block styles not defining enough. Although, I was having trouble finding another theme where I could test link colors anymore (I remember previously testing them on one of the 2020/2019/blocks themes but they don't seem present anymore?). Since link colors in simple blocks such as paragraphs work on Seedlet, I figured these more complex/nested element blocks should adapt their styles accordingly. After all There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think this is a Seedlet theme bug, though. If you try to remove that All the same, you could leave the .wp-block-post-author.has-link-color a,
.wp-block-post-author.has-link-color.has-background a {
color: var( --wp--style--color--link );
} AFAIK, this happens because I'm not entirely sure of the purpose of that There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Very well put, thanks @Copons! Updated 😄 |
||
} |
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.
In my opinion, this should most likely not be called
align
, but rathertextAlign
. I knowalign
is how the Paragraph block does it, but this is confusing since there is also block alignment, which (if using thesupports
flag) usesalign
as its attribute name.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.
Agreed,
textAlign
oralignText
would be preferable (I was following the paragraph block's lead at first here). I saw thealign
support hook is for block alignment as well and noticed the confusion. I wonder how many other blocks have this conflicted naming convention, but we should start updating them.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.
Or would it be better to similarly update the
align
hook to beblockAlign
or something similar?If this is more recent than some of the blocks that use
align
for textAlign, then less people should be effected by the change. That is, Im assuming if we updated the paragraph block's attr name then a user who updates their Gutenberg version will have whatever alignment settings they saved lost?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.
Is there a compatibility layer for changing a block attribute name? I think there is something for updating a block to a newer version without loosing settings 🤔
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.
That would be good, at the very least for now I will update the FSE blocks that are using
align
for text alignment to usetextAlign
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.
There is indeed a way to easily handle (what would otherwise be backward-incompatible) changes in block attribute schemas:
https://developer.wordpress.org/block-editor/developers/block-api/block-deprecation/
A lot of core blocks already make use this, storing their deprecated versions in a
deprecated.js
file.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.
Updated for the FSE blocks specifically - #24077