Convert add-to-calendar into interactive button block-variation

[carstingaxion]

Is your enhancement related to a problem? Please describe.

Everything that looks like a button, should behave like a button (within the WordPress editor).

To allow for individual styling and also to remove some maintenance burden on the GatherPress side, I recommend converting the existing add-to-calendar block into a block-variation of the core button block.

Currently this block has minimal interactivity already implemented, which could be a perfect fit to further explore using the new Interactivity API (publicly rolled out in WP 6.5).

Designs

You can test the block within the GatherPress Block Playground

Using the wordpress/create-block package with a new interactivity template, we instantly get 50% of our needs already delivered - a button, that reveals some more content on click.

1. Calling this ...

   npx @wordpress/create-block@latest gatherpress-interactive-block --template @wordpress/create-block-interactive-template

2. Creates this

   Bildschirmaufzeichnung.vom.14.03.2024.10.36.13.mp4

3. Which should be relatively easy to adopt to our needs ... Let's go!

First questions & findings

• Can we add "supports": {"interactivity": true } to only a variation of a block rather than all of a block-type?

Describe alternatives you've considered

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[carstingaxion]

This doesn't took too long.

Still without using the Interactivity API at all, but working!

Bildschirmaufzeichnung.vom.14.03.2024.14.19.48.mp4

[carstingaxion]

This is so exciting!

(to me)

I’ve made good progress and would call it Enhanced feature parity. My new implementation of the Add to calendar Block is a button block under the hood. So you can use every of the default controls for normal button blocks, as long as your theme allows you to.

Besides that I made sure that all of the existing functionality is ported into the new block.

I called it Enhanced, because the new block (variation) …

• can be transformed from a usual button block into our special one
• removes the LinkControl UI from the blocks’ Toolbar
• uses most of the style properties to make the submenu, match the button style

Notable Changes

• I removed the Icon from the block and I'd like to discuss this in ... Remove all public-facing icons #631
• Changed the triggering element from an a tag to a button tag. Maybe this needs to be changed somewhere else?

Open todos & questions

• Open a PR
• Make sure this is accessible! Right now with the use of display:none; and the div-based markup this seems not (that) accessible to me, but I’m neither an expert nor have I done any testing on this.
• Modify existing tests and write new ones
• Same question: Should we properly deprecate the old/existing gatherpress/add-to-calendar block?
• Because by the nature of a core/button block this can only be inserted inside a core/buttons block. This leads to, the new block (variation) will be invisible within the blockInserter and also from the blockAppender, the "+" button. Additionally our block will not be selectable from within our gatherpress block-category.
• We need to reconsider when (and when not) blocks are registered. Also for this one.

This could still be improved

• ...by making the submenu a somehow editable innerBlocks component, which would benefit to individual styling and text-editing as well. Therefore we could borrow some components from core/navigation or have a look into core/details
• ... by removing the CSS Class panel from the InspectorControls, which is (IMHO) only possible on the blockType level
• ... by using the Interactivity API, but instead it currently relies on the existing, small piece of custom JS.
• ... by adding a preview of the opened dropdown menu also within the editor.

[carstingaxion]

This is my current exploration repo:
https://github.com/carstingaxion/gatherpress-add-to-calendar

Install the .zip-file and have a look, if you want.

[carstingaxion]

Because by the nature of a core/button block this can only be inserted inside a core/buttons block. This leads to, the new block (variation) will be invisible within the blockInserter and also from the blockAppender, the "+" button. Additionally our block will not be selectable from within our gatherpress block-category.

Solved

I defined another block-variation, this time one of the core/buttons block. This one gets our new variation set as an innerBlock. And it gets no isActive property at all, by doing so we create a kind of honeypot-, trap- or pseudo-block.

This pseudo-block that has the same name, description and icon like our new block, but once inserted into the editor it becomes a pure normal core/buttons block, because of the missing isActive prop the editor is not able to recognize our pseudo-block.

And voila, we can select our Add to calendar block from all possible spots.

[carstingaxion]

After I read through Thoughts on the WordPress Interactivity API by @markhowellsmead I wanted to make sure, we're not running into new and maybe overseen performance issues.

So I tested the existing block against my new block from the interactivity-api branch of my exploration plugin.

Luckily the results show nothing to worry about.
We're getting even slightly better in the amount of kb transferred.

Old	New

[MervinHernandez]

✅ Viewed 606 - Convert custom block to Gutenberg block variation - Carsten has it

[carstingaxion]

• close the submenu, when clicking somewhere else

[carstingaxion]

👀

it is possible to use a custom webpack.config.js file and the -experimental-modules flag

https://developer.wordpress.org/news/2024/04/11/a-first-look-at-the-interactivity-api/#comment-5685

[carstingaxion]

The new (and also the old) block do not let me download iCal or outlook files on iPadOs 17.5.1

trim.20723FBA-F318-430D-8A87-B5F9926198B8.MOV

[MervinHernandez]

✅ Reviewed June 22 - Kudos on progress @carstingaxion

[carstingaxion]

✅ Reviewed June 22 - Kudos on progress @carstingaxion

Thanks @MervinHernandez !

[carstingaxion]

No matter if on a theatre stage during rehearsal or in software development, every art knows:

Kill your darlings

That's why I would like to drop my matured proposoal of an interactive Add-to-calendar block, in favor of a much simpler non-interactive Add-to-calendar block.

After some while that I tested and figured out a core/button block-variation with some Interactivity API on top, I realised that things could be way easier. I stepped back another time and explored alternatives for that block.

Bildschirmaufzeichnung.vom.24.06.2024.04.24.46.mp4

From top to bottom:

1. Current block
2. core/button block-variation with some Interactivity API on top
3. core/details & core/button block-variations using the block-bindings API
4. Using a core/navigation block

Variant number 3 turned out to be the best of the four, because:

• uses only core blocks
• is 100% flexible in design and layout, depending on theme and editors choice
• needs zero JS on the frontend
• is the most accessible solution (from the 4 options)

I added this as an alternate Add-to-calendar block to the GatherPress Block Playground. Due to my lack of time, this block is not yet used in any patterns or templates, but is available from the block inserter with Add to calendar (DETAILS)

I also added a block-style to provide an icon, like the current implementation does. (#631 (comment))

Give it a try & tell me what you think, please!