Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Post excerpt block - add color, fontSize, lineHeight, and text alignment. #23945

Merged
merged 12 commits into from
Jul 20, 2020
Merged

Post excerpt block - add color, fontSize, lineHeight, and text alignment. #23945

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1e8c93e
add text align
Addison-Stavlo Jul 14, 2020
1af97c8
add wrapper and line-height inherit
Addison-Stavlo Jul 14, 2020
691c73f
php format
Addison-Stavlo Jul 14, 2020
2311564
get this working in site editor?
Addison-Stavlo Jul 15, 2020
c477041
set initial readMore, get rid of extra parent component
Addison-Stavlo Jul 15, 2020
55357ca
styles to ensure link color is shown
Addison-Stavlo Jul 15, 2020
a62b280
no elipsis
Addison-Stavlo Jul 15, 2020
29f30d5
dont initialize for now /shrug
Addison-Stavlo Jul 16, 2020
404fe64
add custom warning if no post found in context
Addison-Stavlo Jul 16, 2020
1c32d9b
more simple error fix
Addison-Stavlo Jul 16, 2020
5821974
actually we need this warning... otherwise user can edit what cannot …
Addison-Stavlo Jul 16, 2020
b0a3cf8
get rid of important
Addison-Stavlo Jul 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions packages/block-library/src/post-excerpt/editor.scss
View file
Open in desktop
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);
}
4 changes: 4 additions & 0 deletions packages/block-library/src/post-excerpt/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,7 @@
line-height: inherit;
}
}

.wp-block-post-excerpt.has-link-color a {
color: var(--wp--style--color--link) !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need !important ?

Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo Jul 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

The 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.

Copy link
Contributor

Choose a reason for hiding this comment

The 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)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure thing (maybe there is a better way to deal with this), but currently I am testing the link colors with the Seedlet-Blocks theme (I can't seem to get the option to show up for 2020/2019-blocks). When a background is applied, the link color selection stops working because of this rule:

Screen Shot 2020-07-16 at 11 10 56 AM

Copy link
Contributor

Choose a reason for hiding this comment

The 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".

Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo Jul 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

The 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 has-background a does not seem like a very opinionated rule, and makes sense for a theme to supply a default style for links used in background areas. So perhaps blocks like this need some sort of rule to ensure that if a custom link color is applied at the block level, the nested elements are explicitly given a style rule to properly show that selection?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a Seedlet theme bug, though.
That :not( .has-background-background-color ) increases the specificity enough to override the block's link color.

If you try to remove that :not(), you'll see that the block's rule doesn't need the !important anymore.

All the same, you could leave the :not() on the theme, and add another class to the block's rule to make the color work without !important, e.g.

.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 :not( .class ) works as if it added a .NOT-class to the selected element.
So you'd have .wp-block-post-author.has-link-color (2 "classes" of specificity) selected by the editor styles, and something like .has-background.NOT-has-background-background-color (again, 2 classes of specificity) selected by the theme styles.
Since the theme styles are loaded after the editor's, given the same specificity, they prevail.

I'm not entirely sure of the purpose of that :not( .has-background-background-color ) (defined here: editor, front end), by the way.
It basically forces a text color to all text blocks with a background, except those using the background palette color as background color.
I kinda suspect this selector could be revised in the theme, since there's already an override (editor, front end) for blocks with p as root element.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very well put, thanks @Copons! Updated 😄

}