Add group variation for full block link

[Inwerpsel]

Description

This should work well on any block that can use position: relative, and as long as the link is not within a block with position: relative inside the container.

A drawback about this method is a block can only have 1 block style at a time. I have another PR that uses block styles to add padding on the same blocks. The only way to use styles for more things is to add 1 style for every possible combination. For more than 2 things that would probably get out of hand.

A possible alternative is to create a variation of the core group block, similar to the new "row" block, which has this CSS. That would make it much more obvious what's happening than a style. That also frees up the block styles for actual styles.

I ended up using a variation because styles are already used for padding and equally spacing inside groups. A nice plus of the variation is that it shows up with the variation name, also in the block list.

Testing

Example: https://www-dev.greenpeace.org/test-phoebe/expanded-link-block/

[planet-4]

Test instance is ready 🚀

🌑 phoebe | admin | blocks report | CircleCI | composer-local.json

⌚ 2022.05.24 12:11:23

[mleray]

This doesn't work for external links, because they also use the ::after pseudo-element 😕 Also it looks weird in this case:

[mleray]

Looks like it will also be an issue for PDF links

[Inwerpsel]

This doesn't work for external links, because they also use the ::after pseudo-element confused Also it looks weird in this

I made it use :before instead, which preserves both special link styles.

However neither of them look particularly well inside of the block on the example page (though they might in others).

Could make sense to disable these styles on links that are expanded? I guess we can also follow up on this once somebody starts using a external/pdf link.

[mleray]

Could make sense to disable these styles on links that are expanded? I guess we can also follow up on this once somebody starts using a external/pdf link.

I agree that it makes sense to remove them in this case, since we already don't show them in headings for example. 🤔 Ideally we would check that before adding the classes in JS, but that can be done in a follow-up!

[mleray]

I see that with this implementation since we still add the external link class, we also add a title, not sure if that's an issue 🤔

[Inwerpsel]

we also add a title, not sure if that's an issue

Well it's still accurate, but maybe it doesn't look that great in some cases. Let's get back to it once we get more feedback?

[Inwerpsel]

Ideally we would check that before adding the classes in JS

In fact, ideally we wouldn't even be doing this in JS, but server side. Doing it in JS gives the browser more work and causes re-rendering during page load.

Your point still stands, though, we should just not add the external links class when we don't need it 👍

[mleray]

Is there a clickable way to revert the expanding link ? I can't unselect it once selected on a grouo. I'm a bit confused on how to use/test it, the example has expanding link in columns, but the style is added to core/group so I can only use it on group/row

It is added as a variation of the Group block, so it's used as such. In the example I've added a Columns block and within each column I've added an Expanded Link, that's the way to do it! Not ideal, but I don't really see how else we can do 😕
Good point about reverting it, I also can't figure it out 😅 Will look into it!

Also, Houssam spotted this Bootstrap functionality which does exactly what we want, maybe we could use that instead of adding custom CSS, but I don't see how to do it without JS so maybe it's not better 🤔

[mleray]

@lithrel the only way I found to "revert" the variation is by removing the corresponding CSS class from the Additional CSS class(es) in the sidebar, in the Advanced tab

[lithrel]

👍