RSS: Added Colour support #66419

benazeer-ben · 2024-10-24T13:48:28Z

What?

Add color support to the RSS block.
Part of #43245

Why?

RSS block is missing color support.

How?

Adds the color support via block.json

Testing Instructions

Go to the Global Styles setting ( under appearance > editor > styles > edit styles > blocks ).
Make sure that the RSS block's color is configurable via Global Styles.
Verify that Global Styles are applied correctly in the editor and frontend.
Edit the template/page, Add RSS block and apply the color for text, background and links .
Verify that block color styles take precedence over global block settings.
Verify that block color display correctly in both the editor and frontend.

NOTE:
This PR is dependent on some style changes in another PR

Screenshots or screencast

Backend:

Frontend:

github-actions · 2024-10-24T13:48:51Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: benazeer-ben <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2024-10-24T13:49:19Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @benazeer-ben! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

ramonjd · 2024-11-11T01:44:46Z

packages/block-library/src/rss/block.json

+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,


I think we can remove the __experimental prefixes now that #63401 has merged 👍🏻

__experimental prefixes removed in recent commit.

ramonjd

Great to see the RSS block getting some love. I think this will work well in conjunction with #66411

Here's my ghastly example:

ramonjd · 2024-11-11T01:49:48Z

packages/block-library/src/rss/block.json

+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextDecoration": true,


Probably not a big deal, but the underline control in text decoration won't affect .wp-block-rss__item-title > a elements as they're being directly controlled by this rule:

a:where(:not(.wp-element-button)) { text-decoration: underline; }

I'm not sure whether users will expect text decoration to affect all text within the RSS block 🤔

There might be some options here to apply text decoration more effectively.

Individual block support features, e.g. text-decoration, can have their serialization of styles and classes skipped. They can then be manually applied to the appropriate inner elements. For the Global Styles side of that equation, the Block Selectors API allows custom selectors for individual features so they target the same inner elements.

For an example of skipping serialization of onlytextDecoration, see the Navigation block.

Note: The navigation block skipped that serialization before the Selector's API was implemented so I'm not sure if it covers Global Styles or not.

Thanks @aaronrobertshaw for the reference and suggestion.

Tried to follow the same way as in the Navigation block. Bu as you mentioned, it doesn't covers Global Styles. We need to tweak more on this.

I have added all the changes in recent commit.

More suggestions are welcome for this scenario.

aaronrobertshaw

Great work on all these block support PRs @benazeer-ben and thank you for your patience handling all the edge cases 🙇

I've left some comments piggy-backing on Ramon's earlier review. In particular, we might be able to improve the adoption of text-decoration support as detailed in this comment.

Also, with the block being server-side rendered, there's a small issue with the background color needing to be reset on the inner rendering of the block (once server-side rendering skips block support attributes as proposed in your border and spacing support PR).

The Tag Cloud block has a PR adopting color support and the background reset issue came up there.

These style resets are similar to the ones added in your PR adopting border and spacing support for this block.

While reviewing the Tag Cloud PR, I found the cleanest approach to reset the styles to avoid issues with the server-side rendering was the following:

.wp-block-rss .wp-block-rss {
	all: inherit; /* This addresses borders, background colors etc. */
	margin: 0;
	padding: 0;
}

…o add/rss-color-support

benazeer-ben · 2024-11-13T19:10:40Z

These style resets are similar to the ones added in your PR adopting border and spacing support for this block.

Yes, this is handling in that PR.

packages/block-library/src/rss/index.php

ramonjd

This is working pretty well for me, thanks again.

Editor

Kapture.2024-11-14.at.13.18.14.mp4

Frontend

I think I left more questions than answers, sorry.

I also noticed in the editor, block attributes are applied to wrapper and server side rendered component.

I'm not sure this is an issue for color and typography, at least from what I can tell, but I assume other styles like border will have to be handled in a way similar to tag cloud, that is, by modifying the attributes sent to the serverside component.

ramonjd · 2024-11-14T02:59:40Z

packages/block-library/src/rss/style.scss

@@ -27,6 +27,41 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl
 		}
 	}

+	// The following rules provide class based application of user selected text
+	// decoration via block supports.
+	&.has-text-decoration-underline li.wp-block-rss__item a {


I'm curious about whether we leave out text decoration altogether.

The reason I ask is because here it's being applied to the RSS links only. Is that the intention?

There are other text fields such as date and author and description excerpt.

Should we not allow text-decoration styles on these?

It's tricky, and I don't know the right answer.

I think there is some merit to omitting the text-decoration support and revisiting it once the general color, border, and spacing supports for the block land.

@benazeer-ben this is also where keeping PRs atomic helps. For example, one PR for color support only, another for typography, means that the issues with text-decoration and typography supports don't hold up the adoption of color supports. Does that make sense?

ramonjd · 2024-11-14T03:07:10Z

packages/block-library/src/rss/style.scss

+	& :where(a),
+	& :where(a:focus),
+	& :where(a:active) {
+		text-decoration: none;
+	}


While these styles will override the link element's global text-decoration styles, all other typography styles set in Global styles > Typography > Links will affect links within the RSS block, making the behaviour selective and inconsistent.

What would be ideal I guess is for the RSS block's links to inherit from (in order of lowest specificity to highest):

The links element styles

Global styles RSS block

Block styles

I'm thinking we could delete these lines, and, to make sure Global styles RSS block styles overwrite link elements, bump the selector in the block.json under "typography", e.g., "__experimentalSelector": ".wp-block-rss .wp-block-rss__item-title a"

That way, RSS block global styles will override any defaults in Global styles > Typography > Links > text decoration, and the block styles are inline anyway and will take priority.

I could be overthinking it too.

What do you think?

to make sure Global styles RSS block styles overwrite link elements, bump the selector in the block.json under "typography", e.g., "__experimentalSelector": ".wp-block-rss .wp-block-rss__item-title a"

The __experimentalSelector support flag is deprecated and shouldn't be used. Try the Block Selectors API instead.

This approach Ramon has outlined is what I suggested in my earlier comment (well other than using the deprecated flag 😅):

For the Global Styles side of that equation, the Block Selectors API allows custom selectors for individual features so they target the same inner elements.

The __experimentalSelector support flag is deprecated and shouldn't be used. Try the Block Selectors API instead.

Oh 🤦🏻 Thanks for setting me straight on that one @aaronrobertshaw Went straight over my head.
Carry on.

aaronrobertshaw

Appreciate the patience iterating on these PRs @benazeer-ben 👍

I'd like to propose splitting this PR into two. One that adopts color support and another adopting typography support. Any hold-ups to one (looking at you text-decoration) won't delay the other.

These style resets are similar to the ones added in your PR adopting border and spacing support for this block.

Yes, this is handling in that #66411.

If this PR is dependent on changes in another PR, we need that to be communicated in the PR description and testing instructions.

I know it involves more juggling, but basing this PR off the one it depends on makes things easier for reviewers and testers who lack full context. This way, the branch being tested includes all necessary changes and integrates well with them. Once the other PR is merged, a quick rebase is all that’s needed before merging this one.

ramonjd · 2024-11-14T03:52:51Z

I'd like to propose splitting this PR into two.

+1

Co-authored-by: Ramon <[email protected]>

benazeer-ben · 2024-11-14T06:39:51Z

Hi @aaronrobertshaw

Sure, I will keep this PR only for color support and move typography support from here to a new one.

benazeer-ben · 2024-11-14T07:45:26Z

Hi @aaronrobertshaw @ramonjd

For the information:

I have moved the typography support form this PR to new one. So for typography related updates we can discuss the things over there.

Now this PR is only for color support and some of its style changes are dependent on another PR.

ramonjd

Thanks for splitting the PRs up @benazeer-ben

It's a lot easier to test!

Here's what I tested:

✅ RSS titles reflect global styles Link element colors (including hover)
✅ Changes to RSS global styles colors affect all blocks. Links colors overwrite Link element defaults. Background gradients work as expected.
✅ Block-level colors work as expected and take precedence over everything.
✅ Tested the above hierarchy with theme.json (see below)

I think this is good to go if @aaronrobertshaw agrees.

Example theme.json

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true
	},
	"styles": {
		"elements": {
			"link": {
				"color": {
					"background": "red",
					"text": "green"
				},
				":hover": {
					"color": {
						"background": "orange",
						"text": "teal"
					}
				},
				":active": {
					"color": {
						"background": "peach",
						"text": "cottoncandy"
					}
				}
			}
		},
		"blocks": {
			"core/rss": {
				"color": {
					"background": "yellow",
					"text": "pink"
				},
				"elements": {
					"link": {
						"color": {
							"background": "aquamarine",
							"text": "white"
						},
						":hover": {
							"color": {
								"background": "purple",
								"text": "black"
							}
						}
					}
				}
			}
		}
	}
}

Adding color support to RSS block

1f048b2

benazeer-ben requested a review from ajitbohra as a code owner October 24, 2024 13:48

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Oct 24, 2024

Doc Build

9fd577f

benazeer-ben requested review from juanmaguitar, fabiankaegy and ndiego as code owners October 24, 2024 17:04

Added Typography support for RSS block

a4db05a

benazeer-ben changed the title ~~RSS: Added Colour support~~ RSS: Added Colour & Typography support Oct 25, 2024

Doc Build

ae02c0c

akasunil added [Type] Enhancement A suggestion for improvement. [Block] RSS Affects the RSS Block - used to display entries from an RSS/Atom feed labels Oct 25, 2024

ramonjd reviewed Nov 11, 2024

View reviewed changes

aaronrobertshaw reviewed Nov 11, 2024

View reviewed changes

benazeer-ben added 3 commits November 12, 2024 15:41

Merge branch 'trunk' of https://github.com/benazeer-ben/gutenberg int…

8728731

…o add/rss-color-support

Removed __experimental typography prefix and doc build

a96896c

Feedback changes

b60ed55

ramonjd reviewed Nov 14, 2024

View reviewed changes

packages/block-library/src/rss/index.php Outdated Show resolved Hide resolved

ramonjd reviewed Nov 14, 2024

View reviewed changes

ramonjd mentioned this pull request Nov 14, 2024

RSS block: check for description field before rendering excerpt #66985

Merged

aaronrobertshaw reviewed Nov 14, 2024

View reviewed changes

Update packages/block-library/src/rss/index.php

eb813f7

Co-authored-by: Ramon <[email protected]>

benazeer-ben changed the title ~~RSS: Added Colour & Typography support~~ RSS: Added Colour support Nov 14, 2024

Moving typogrpahy support changes from this PR

db65c19

benazeer-ben added 2 commits November 14, 2024 13:20

Spacing changes

bbe96dc

Spacing changes

3b2b9ea

ramonjd approved these changes Nov 15, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RSS: Added Colour support #66419

RSS: Added Colour support #66419

benazeer-ben commented Oct 24, 2024 •

edited

Loading

github-actions bot commented Oct 24, 2024 •

edited

Loading

github-actions bot commented Oct 24, 2024

ramonjd Nov 11, 2024

aaronrobertshaw Nov 11, 2024

benazeer-ben Nov 13, 2024

ramonjd left a comment

ramonjd Nov 11, 2024

aaronrobertshaw Nov 11, 2024

benazeer-ben Nov 13, 2024

aaronrobertshaw left a comment •

edited

Loading

benazeer-ben commented Nov 13, 2024

ramonjd left a comment

ramonjd Nov 14, 2024

aaronrobertshaw Nov 14, 2024

ramonjd Nov 14, 2024

aaronrobertshaw Nov 14, 2024 •

edited

Loading

ramonjd Nov 14, 2024

aaronrobertshaw left a comment

ramonjd commented Nov 14, 2024

benazeer-ben commented Nov 14, 2024

benazeer-ben commented Nov 14, 2024

ramonjd left a comment

RSS: Added Colour support #66419

Are you sure you want to change the base?

RSS: Added Colour support #66419

Conversation

benazeer-ben commented Oct 24, 2024 • edited Loading

What?

Why?

How?

Testing Instructions

Screenshots or screencast

github-actions bot commented Oct 24, 2024 • edited Loading

github-actions bot commented Oct 24, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ramonjd left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aaronrobertshaw left a comment • edited Loading

Choose a reason for hiding this comment

benazeer-ben commented Nov 13, 2024

ramonjd left a comment

Choose a reason for hiding this comment

Editor

Frontend

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aaronrobertshaw Nov 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aaronrobertshaw left a comment

Choose a reason for hiding this comment

ramonjd commented Nov 14, 2024

benazeer-ben commented Nov 14, 2024

benazeer-ben commented Nov 14, 2024

ramonjd left a comment

Choose a reason for hiding this comment

benazeer-ben commented Oct 24, 2024 •

edited

Loading

github-actions bot commented Oct 24, 2024 •

edited

Loading

aaronrobertshaw left a comment •

edited

Loading

aaronrobertshaw Nov 14, 2024 •

edited

Loading