Theme and Configure the RSS Feed Views Block

Would be cool to see some steps about how to reproduce

@kostyashupenko Here are the steps:
1. Create a view
2. Enable Include RSS Feed
3. On the view page, there'll be this block at the bottom.

Ok, so if i did everything correctly - then i see the following:

rss link comes as a part of view, where view - is a content section. But rss link is supposed to be in sidebar (on block-layout level). Any ideas how it can be managed?

@kostyashupenko As per the understanding, we need to create an RSS feed block and need to place that in the new social block region.

For region: Create a new region for a social block which structure is already available on template > layout > page.html.twig at line 117 currently in TODO.
But in views, there is no option for the block to Include RSS Feed.

Feel free to add your opinion.

Thanks!

Theres a core block called "syndicate" that should work for this. Note this is new to me, I didn't know this block existed out of the box.

Kindly review the attached patch. Clear cache once patch applied.

Screenshot: If RSS feed in the social region(left side) and in another region

Thanks!

1. +<span class="social-label">{% trans %}RSS Feed{% endtrans %}</span>
   +<a href="{{ url }}"{{ attributes.addClass('feed-icon') }}>
   +  {% include "@olivero/../images/rss.svg" %}
   +</a>

   Can you post the resulting markup for the block? I'm concerned this fails WCAG link purpose criterion. We already noted that about the Proof-of-concept, in an early accessibility review video call.

2. +++ b/config/optional/block.block.olivero_syndicate.yml
   The standard profile in Drupal core doesn't currently use the syndicate block from node module. Instead it uses the RSS views attachment on the front page view. So we might end up with 2 feed icons this way. I think we'll want to revisit this before making Olivero the default theme for Standard profile; one of the feed icons would have to go.

In the screenshot in #10, the RSS icon radiates from the top-right corner. It normally comes from the bottom-left corner. You can see this in the other icon in the main content.

@andrewmacpherson Thanks for quick review.

1. Block Markup which is referred from POC https://olivero-poc.netlify.app/
If block placed in social region markup:

<div id="block-olivero-syndicate" role="complementary" class="block block-node block-node-syndicate-block">
      <div class="block__content">
      <div class="rotate">
        <span class="social-label">RSS Feed</span>
<a href="rss.xml" class="feed-icon">
  <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="27" height="27" rx="2" fill="#2494DB"></rect>
<path d="M10.8571 18.2143C10.8571 17.1496 9.9933 16.2857 8.92857 16.2857C7.86384 16.2857 7 17.1496 7 18.2143C7 19.279 7.86384 20.1429 8.92857 20.1429C9.9933 20.1429 10.8571 19.279 10.8571 18.2143ZM16 19.4498C15.8292 17.3103 14.8951 15.2913 13.3683 13.7746C11.8516 12.2478 9.83259 11.3136 7.69308 11.1429C7.67299 11.1429 7.66295 11.1429 7.64286 11.1429C7.48214 11.1429 7.32143 11.2031 7.21094 11.3136C7.07031 11.4342 7 11.6049 7 11.7857V13.1417C7 13.4732 7.25112 13.7444 7.58259 13.7746C10.6462 14.0658 13.077 16.4967 13.3683 19.5603C13.3984 19.8917 13.6696 20.1429 14.0011 20.1429H15.3571C15.5379 20.1429 15.7087 20.0725 15.8292 19.9319C15.9498 19.8013 16.01 19.6306 16 19.4498ZM21.1429 19.4699C20.9621 15.9542 19.4855 12.6496 16.9844 10.1585C14.4933 7.65737 11.1886 6.1808 7.67299 6C7.66295 6 7.6529 6 7.64286 6C7.48214 6 7.32143 6.06027 7.20089 6.1808C7.07031 6.30134 7 6.46205 7 6.64286V8.07924C7 8.41071 7.26116 8.69196 7.60268 8.71205C13.4386 9.05357 18.0893 13.7042 18.4208 19.5402C18.4408 19.8817 18.7221 20.1429 19.0636 20.1429H20.5C20.6808 20.1429 20.8415 20.0725 20.9621 19.942C21.0926 19.8114 21.1529 19.6406 21.1429 19.4699Z" fill="white"></path>
</svg>
</a>
      </div>
    </div>
  </div>

If block placed in another region markup:

<div id="block-syndicate" role="complementary" class="block-syndicate block block-node block-node-syndicate-block">
      <div class="block__content">
      <span class="social-label">RSS Feed</span>
<a href="rss.xml" class="feed-icon">
  <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="27" height="27" rx="2" fill="#2494DB"></rect>
<path d="M10.8571 18.2143C10.8571 17.1496 9.9933 16.2857 8.92857 16.2857C7.86384 16.2857 7 17.1496 7 18.2143C7 19.279 7.86384 20.1429 8.92857 20.1429C9.9933 20.1429 10.8571 19.279 10.8571 18.2143ZM16 19.4498C15.8292 17.3103 14.8951 15.2913 13.3683 13.7746C11.8516 12.2478 9.83259 11.3136 7.69308 11.1429C7.67299 11.1429 7.66295 11.1429 7.64286 11.1429C7.48214 11.1429 7.32143 11.2031 7.21094 11.3136C7.07031 11.4342 7 11.6049 7 11.7857V13.1417C7 13.4732 7.25112 13.7444 7.58259 13.7746C10.6462 14.0658 13.077 16.4967 13.3683 19.5603C13.3984 19.8917 13.6696 20.1429 14.0011 20.1429H15.3571C15.5379 20.1429 15.7087 20.0725 15.8292 19.9319C15.9498 19.8013 16.01 19.6306 16 19.4498ZM21.1429 19.4699C20.9621 15.9542 19.4855 12.6496 16.9844 10.1585C14.4933 7.65737 11.1886 6.1808 7.67299 6C7.66295 6 7.6529 6 7.64286 6C7.48214 6 7.32143 6.06027 7.20089 6.1808C7.07031 6.30134 7 6.46205 7 6.64286V8.07924C7 8.41071 7.26116 8.69196 7.60268 8.71205C13.4386 9.05357 18.0893 13.7042 18.4208 19.5402C18.4408 19.8817 18.7221 20.1429 19.0636 20.1429H20.5C20.6808 20.1429 20.8415 20.0725 20.9621 19.942C21.0926 19.8114 21.1529 19.6406 21.1429 19.4699Z" fill="white"></path>
</svg>
</a>
    </div>
  </div>

2. As per @mherchel #8 comment and after confirming on #d9-theme channel(https://drupal.slack.com/archives/CJT807H7T/p1593516632115800) I gohead with this. But as per @@andrewmacpherson comment need to confirm once again with @mherchel or other team.

3. RSS icon rotates properly.

Kindly review the attached updated patch.

Thanks!

1.

+++ b/css/src/components/social-container.css
+  svg {
+    display: block;
+  }

Is display: block; really necessary here?

2.

+++ b/css/src/components/social-container.css
+    img,
+    svg {
+      margin: 10px 5px 10px 10px; /* IE11 */
+      transform: rotate(180deg);
+
+      @supports (display: block) { /* Override IE11 values. */
+        margin: 10px;
+      }
+    }

what for img tag here? and why such solution with margins? Just add margins to the wrapper if need.

3.

+.block-syndicate .block__content {
+  display: flex;
+  align-items: center;
+
+  svg {
+    display: block;
+  }

If you need display: flex; only because of display: block; for svg, then what prevents to make svg inline?

4.

+++ b/images/rss.svg
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="27" height="27" rx="2" fill="#2494DB"/>
+<path d="M10.8571 18.2143C10.8571 17.1496 9.9933 16.2857 8.92857 16.2857C7.86384 16.2857 7 17.1496 7 18.2143C7 19.279 7.86384 20.1429 8.92857 20.1429C9.9933 20.1429 10.8571 19.279 10.8571 18.2143ZM16 19.4498C15.8292 17.3103 14.8951 15.2913 13.3683 13.7746C11.8516 12.2478 9.83259 11.3136 7.69308 11.1429C7.67299 11.1429 7.66295 11.1429 7.64286 11.1429C7.48214 11.1429 7.32143 11.2031 7.21094 11.3136C7.07031 11.4342 7 11.6049 7 11.7857V13.1417C7 13.4732 7.25112 13.7444 7.58259 13.7746C10.6462 14.0658 13.077 16.4967 13.3683 19.5603C13.3984 19.8917 13.6696 20.1429 14.0011 20.1429H15.3571C15.5379 20.1429 15.7087 20.0725 15.8292 19.9319C15.9498 19.8013 16.01 19.6306 16 19.4498ZM21.1429 19.4699C20.9621 15.9542 19.4855 12.6496 16.9844 10.1585C14.4933 7.65737 11.1886 6.1808 7.67299 6C7.66295 6 7.6529 6 7.64286 6C7.48214 6 7.32143 6.06027 7.20089 6.1808C7.07031 6.30134 7 6.46205 7 6.64286V8.07924C7 8.41071 7.26116 8.69196 7.60268 8.71205C13.4386 9.05357 18.0893 13.7042 18.4208 19.5402C18.4408 19.8817 18.7221 20.1429 19.0636 20.1429H20.5C20.6808 20.1429 20.8415 20.0725 20.9621 19.942C21.0926 19.8114 21.1529 19.6406 21.1429 19.4699Z" fill="white"/>
+</svg>

You have to optimize this svg:
- Remove all "fill" attributes and make colours fully manageable from css
- Combine rect + path
- For path i see a lot of almost similar values, that means path is not optimized well, need to reduce quality of it (and it will be no visual difference between "before" and "after" optimisations)

5.

+++ b/olivero.theme
+      if ($region != 'social') {
+        if ($variables['base_plugin_id'] == 'node_syndicate_block') {
+          $variables['attributes']['class'][] = 'block-syndicate';
+        }
+      }

Combine both if statements to one

6.

+++ b/templates/block/block--social--node-syndicate-block.html.twig

For what exactly you need to override whole block template? Only to add <div class="rotate"> wrapper around content? Is it possible just to add this class to content_attributes and adapt styles?

@kiran.kadam911 - Thanks for providing the full markup in #13.

The link does indeed fail two WCAG success criteria at level A - 2.4.4 "Link Purpose (in context)", and 4.1.2 "Name, Role, Value".

The fault lies in the over-ridden feed-icon.html.twig template. The equivalent version from system module passes both of these WCAG success criteria, because there is text inside the link.

To correct this, move the text inside the link, the same as it is in the original template from the system module. (Update CSS if necessary.)

<a href="{{ url }}"{{ attributes.addClass('feed-icon') }}>
  <span class="social-label">{% trans %}RSS Feed{% endtrans %}</span>
  {% include "@olivero/../images/rss.svg" %}
</a>

There's another problem here though. The new template for Olivero doesn't respect the top-level title attribute which is passed in to the theme template. The original template from System module produces dynamic link text, like so:

{{ 'Subscribe to @title'|t({'@title': title}) }}

This is important, because this is a general-purpose template. It isn't solely used by the Syndicate block from the node module; it's also used by various other modules like views and aggregator (and probably some contrib modules). If Olivero's feed icon template doesn't respect the title variable, then feed icons produced by Views won't have the intended link names.

I noticed a related problem with the Syndicate block; it doesn't pass a title variable into the feed_icon template at all! This isn't Olivero's fault, so I opened #3156244: Title variable isn't set by Syndicate block - so the link text is an unfinished sentence. Standard profile doesn't currently use the Syndicate block, so this bug might not have been found if Olivero hadn't tried to use it.

Upshot: if Olivero is going to make changes to the feed-icon.html.twig template, it needs to be flexible enough to cover all the other uses which the template is already used for. We can't just brute-force it to match what was in the Olivero proof-of-concept.

The issue title here is misleading. It refers to the Views RSS feed block, but the work done has targetted the Syndicate block from the Node module.

For completeness, both of these should be styled. The aggregator module uses feed-icon theme too.

In the next 2/3 days, I am not able to work on it. So instead of keeping with me, I am unassigning it. Thanks!

Patch with fixes for #14 and #16

This needs a bit of cleanup.

1) There's too much markup when the region is empty.
2) the contextual menu is also rotated.

I'm going to try to do some work on this right now.

Some more work on this. This is working (you can add multiple blocks like "powered by Drupal, etc), and it also contextual menus work as expected.

Still need to move some CSS from the component into layout though. So still work to do.

Messed up my patches. Here are the correct ones 🤞

Moved the layout portion of the CSS into the layouts, and fixed an IE11 bug.

This is good to go.

This next patch takes into account the comments by @andrewmacpherson in #16, and works around the core bug in #3156244: Title variable isn't set by Syndicate block - so the link text is an unfinished sentence by doing the following:

{% if var is not defined or var is null %}
  {% set title = 'RSS Feed'|t %}
{% endif %}

#26 - that's a good improvement towards satisfying WCAG Link Purpose. We no longer have a link without a name, which is great. However it may not suffice to identify the purpose of the link.

Note that Olivero still doesn't know what the title variable will actually contain. There's been some progress in the related #3156244: Title variable isn't set by Syndicate block - so the link text is an unfinished sentence. So far, we are assuming the Syndicate block will pass the site name in as the title variable. When using the default feed-icon template (from system module, or stable9 theme), the resulting link would be called "subscribe to ". But using the feed-icon template from patch #26, the link would be called "". This isn't sufficient to identify the link purpose as pointing to an RSS feed, and it can't be distinguished from the other "" link from the branding block (which doesn't point to a feed).

(FWIW, I'm not convinced that the system module's "subscribe to ..." sufficiently identifies the purpose of an RSS feed link. "RSS feed" is much clearer.)

{% if var is not defined or var is null %}
  {% set title = 'RSS Feed'|t %}
{% endif %}

What does var refer to? Shouldn't this ask {% if title ... ?

What does var refer to? Shouldn't this ask {% if title ... ?

Gah... it totally should! That's a brain fart and a half!

Committing this (with variable changes) to get the region in for the final alpha. Any final changes can go in followup issues.