Title: Update on the work to make building interactive blocks easier
Author: JuanMa Garrido
Published: January 11, 2023
Last modified: January 12, 2023

---

 [  ](https://profiles.wordpress.org/juanmaguitar/) [JuanMa Garrido](https://profiles.wordpress.org/juanmaguitar/)
3:43 pm _on_ January 11, 2023     
Tags: [block-developer-experience ( 5 )](https://make.wordpress.org/core/tag/block-developer-experience/),
interactive-blocks, [interactivity API ( 11 )](https://make.wordpress.org/core/tag/interactivity-api/),
[visitor-experience ( 2 )](https://make.wordpress.org/core/tag/visitor-experience/)

# Update on the work to make building interactive blocks easier

Over the last ten months, **a [group of contributors](https://github.com/WordPress/block-hydration-experiments/graphs/contributors)****
has been working on a way to make it easier to build interactive blocks.** These
plans were first made public in the [Exploration to enable better Developer and Visitor Experiences with blocks](https://make.wordpress.org/core/2022/04/27/exploration-to-enable-better-developer-and-visitor-experiences-with-blocks/)
post, and the work they’ve been doing since then has been shared publicly [in this GitHub repository](https://github.com/WordPress/block-hydration-experiments).
Additionally, [@poliuk](https://profiles.wordpress.org/poliuk/), who has been involved
in this exploratory work, presented a talk sharing the group’s [vision of the future of WordPress frontend](https://wordpress.tv/2022/06/23/a-glimpse-into-the-future-of-wordpress-from-a-frontend-point-of-view/)
at WordCampWordCamp WordCamps are casual, locally-organized conferences covering
everything related to WordPress. They're one of the places where the WordPress community
comes together to teach one another what they’ve learned throughout the year and
share the joy. [Learn more](https://central.wordcamp.org/about/). Europe, held in
June 2022 in Porto.  

As stated in [this post](https://make.wordpress.org/core/2022/04/27/exploration-to-enable-better-developer-and-visitor-experiences-with-blocks/)
from April, these are some of the questions that have been explored:

> How to enable a much more powerful interactive and dynamic Visitor Experience 
> with blocks? 
> How to have a much more delightful Developer Experience when building
> blocks? How to offer a standard way to create interactive blocks so blockBlock
> Block is the abstract term used to describe units of markup that, composed together,
> form the content or layout of a webpage using the WordPress editor. The idea combines
> concepts of what in the past may have achieved with shortcodes, custom HTML, and
> embed discovery into a single consistent API and user experience. developers don’t
> have to reinvent the wheel? How to ensure the block editor takes care of performance
> optimizations for visitors?How to enable nice and faster page transitions with
> blocks? 

This new update is to share with the community that there has been progress on these
areas and to announce that **an initial proposal that could positively impact WordPress’
DX & UXUX User experience will be shared soon**. The goal of this proposal is to
create a new standard that simplifies building rich interactive web applications
with WordPress using declarative and reactive programming principles.

If you can’t wait until the initial proposal gets published and are curious about
the work done so far, please visit [this GitHub repo](https://github.com/WordPress/block-hydration-experiments).

Here’s a list of the main areas where these contributors have been working on: 

 * **WordPress Directives PluginPlugin A plugin is a piece of software containing
   a group of functions that can be added to a WordPress website. They can extend
   functionality or add new features to your WordPress websites. WordPress plugins
   are written in the PHP programming language and integrate seamlessly with WordPress.
   These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
   or can be cost-based plugin from a third-party.** ([tracking issue](https://github.com/WordPress/block-hydration-experiments/issues/80))
   by [@cbravobernal](https://profiles.wordpress.org/cbravobernal/), [@santosguillamot](https://profiles.wordpress.org/santosguillamot/),
   [@darerodz](https://profiles.wordpress.org/darerodz/), [@luisherranz](https://profiles.wordpress.org/luisherranz/)&
   [@czapla](https://profiles.wordpress.org/czapla/): An installable plugin that
   adds a set of basic directives and client-side transitions.
 * **Directives Hydration** ([tracking issue](https://github.com/WordPress/block-hydration-experiments/issues/64))
   by the same contributors: This issue tracks the work done to implement this mechanism
   to hydrate the DOM.
 * **Stress testing** ([tracking issue](https://github.com/WordPress/block-hydration-experiments/issues/92))
   by the same contributors: This issue tracks the work done to test the performance
   and resilience of the Directives Hydration mechanism.
 * **Server-side rendering of directives** ([PR](https://github.com/WordPress/block-hydration-experiments/pull/125))
   by [@bernhard-reiter](https://profiles.wordpress.org/bernhard-reiter/): Experimental
   PR to use [`WP_HTML_Tag_Processor`](https://make.wordpress.org/core/2022/08/19/a-new-system-for-simply-and-reliably-updating-html-attributes/)
   to transform `wp-` directives into[ markup that’s ready for client-side hydration](https://github.com/WordPress/block-hydration-experiments/pull/118#issuecomment-1353407526).
 * **Client-side navigation of the Query LoopLoop The Loop is PHP code used by WordPress
   to display posts. Using The Loop, WordPress processes each post to be displayed
   on the current page, and formats it according to how it matches specified criteria
   within The Loop tags. Any HTML or PHP code in the Loop will be processed on each
   post. [https://codex.wordpress.org/The_Loop](https://codex.wordpress.org/The_Loop)
   block using directives** ([PR](https://github.com/WordPress/gutenberg/pull/44034))
   by [@luisherranz](https://profiles.wordpress.org/luisherranz/): An experiment
   to implement client-side transitions in the Query Loop block.
 * **Replicate Navigation block using directives** ([PR](https://github.com/WordPress/gutenberg/pull/44509))
   by [@luisherranz](https://profiles.wordpress.org/luisherranz/), [@santosguillamot](https://profiles.wordpress.org/santosguillamot/),&
   [@darerodz](https://profiles.wordpress.org/darerodz/): An experiment to switch
   from `micromodal` + imperative code to declarative directives.

Stay tuned for the next update, in which they’ll explain these areas of exploration
in more detail, demonstrate how they fit together, and outline the alternatives 
that were considered. 

Meanwhile, anyone who wants to contribute will be warmly welcomed, so if you want
to join in with this work and get involved, please raise your hand in the comments
section below or open a conversation in [this Discussion board](https://github.com/WordPress/block-hydration-experiments/discussions/).

Thanks to [@luisherranz](https://profiles.wordpress.org/luisherranz/), [@priethor](https://profiles.wordpress.org/priethor/),
[@poliuk](https://profiles.wordpress.org/poliuk/), [@bph](https://profiles.wordpress.org/bph/),
[@bernhard-reiter](https://profiles.wordpress.org/bernhard-reiter/), [@cbravobernal](https://profiles.wordpress.org/cbravobernal/),
[@czapla](https://profiles.wordpress.org/czapla/), and [@mburridge](https://profiles.wordpress.org/mburridge/)
for reviewing and helping shape this post!

Special thanks to [@poliuk](https://profiles.wordpress.org/poliuk/), who wrote the
initial draft of this post.

[#block-developer-experience](https://make.wordpress.org/core/tag/block-developer-experience/),
[#interactive-blocks](https://make.wordpress.org/core/tag/interactive-blocks/), 
[#interactivity-api](https://make.wordpress.org/core/tag/interactivity-api/), [#visitor-experience](https://make.wordpress.org/core/tag/visitor-experience/)

### Share this:

 * [  Threads ](https://make.wordpress.org/core/2023/01/11/update-on-the-work-to-make-building-interactive-blocks-easier/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/core/2023/01/11/update-on-the-work-to-make-building-interactive-blocks-easier/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/core/2023/01/11/update-on-the-work-to-make-building-interactive-blocks-easier/?share=bluesky)
 * [  X ](https://make.wordpress.org/core/2023/01/11/update-on-the-work-to-make-building-interactive-blocks-easier/?share=x)
 * [  Facebook ](https://make.wordpress.org/core/2023/01/11/update-on-the-work-to-make-building-interactive-blocks-easier/?share=facebook)
 * [  LinkedIn ](https://make.wordpress.org/core/2023/01/11/update-on-the-work-to-make-building-interactive-blocks-easier/?share=linkedin)

 1. ![](https://secure.gravatar.com/avatar/2ada113f1a81801cf4421e0b5af53c08bab45292957545dc68753ac5147b7c6f?
    s=32&d=mm&r=g)
 2.  [Tom J Nowell](https://profiles.wordpress.org/tjnowell/)  4:09 pm _on_ January
    11, 2023
 3. There’s some exciting things here, but I fear it’s using very opaque/technical 
    naming and will be gibberish to most people. I had to do a double take and dig 
    to figure out what was meant by hydration and directives.
 4. Can you add a very brief explanation without going into details of what these are?
    The best short explanation of directives I’ve found uses the word directives so
    it’s not helpful for understanding. Without having a clear understanding of what
    it is that’s being worked on, it’s hard to sing the praises of those who’ve worked
    on this, or start contributing.
 5. Also there are a lot of broken or misleading links, e.g. the first link to the 
    members list gives a GitHubGitHub GitHub is a website that offers online implementation
    of git repositories that can easily be shared, copied and modified by other developers.
    Public repositories are free to host, private repositories require a paid subscription.
    GitHub introduced the concept of the ‘pull request’ where code changes done in 
    branches by contributors can be reviewed and discussed before being merged by the
    repository owner. [https://github.com/](https://github.com/) 404
 6.  * ![](https://secure.gravatar.com/avatar/8013a62d7397c006bae48b96d6832a573ea71a7d5d3597fe584210567b508c05?
       s=32&d=mm&r=g)
     *  [Justin Tadlock](https://profiles.wordpress.org/greenshady/)  8:16 pm _on_ 
       January 11, 2023
     * This is great feedback, Tom. I largely agree that this post is a bit opaque/
       technical. It is not the official announcement of the project but more or less
       a technical update letting everyone know that the work continues.
     * The team is close to sharing everything publicly in another update. There will
       be an initial proposal that will explain each concept. The goal for that update
       will be to bring visibility to the work and onboard everyone into the conversation.
     * The resources linked to above are mostly code internals, so they are definitely
       very technical at this point. With that said, understanding how this works will
       not be necessary for developers to use this new standard.
     * As for the question around Directives, they are special HTMLHTML HyperText Markup
       Language. The semantic scripting language primarily used for outputting content
       in web browsers. attributes that allow developers to add interactivity to their
       markup. For example, a simple example might be using a `wp-show` directive:
     * `<div wp-show="state.shouldShow">content</div>`
     * In this example, the inner content would only show if `state.shouldShow` is `
       true`.
     * This is similar to other JavaScriptJavaScript JavaScript or JS is an object-
       oriented computer programming language commonly used to create interactive effects
       within web browsers. WordPress makes extensive use of JS for a better user experience.
       While PHP is executed on the server, JS executes within a user’s browser.
        [https://www.javascript.com](https://www.javascript.com/)
       frameworks like Angular, VueVue Vue (pronounced /vjuː/, like view) is a progressive
       framework for building user interfaces. [https://vuejs.org/](https://vuejs.org/).,
       and Alpine but will have some differences that will be explained when the proposal
       is made public.
     * I think there’ll be some exciting stuff to come out of it for the developer 
       experience once the team gets to the public proposal.
     * ![](https://secure.gravatar.com/avatar/0e8fe004d42b981872cb6fbc05963fa473d6a1917b514d0a415a1f04334093d0?
       s=32&d=mm&r=g)
     *  [JuanMa Garrido](https://profiles.wordpress.org/juanmaguitar/)  7:54 am _on_
       January 12, 2023
     * > Also there are a lot of broken or misleading links, e.g. the first link to
       > the members list gives a GitHubGitHub GitHub is a website that offers online
       > implementation of git repositories that can easily be shared, copied and modified
       > by other developers. Public repositories are free to host, private repositories
       > require a paid subscription. GitHub introduced the concept of the ‘pull request’
       > where code changes done in branches by contributors can be reviewed and discussed
       > before being merged by the repository owner. [https://github.com/](https://github.com/)
       > 404
     * Thanks for this feedback [@tjnowell](https://profiles.wordpress.org/tjnowell/)
     * Sorry about that. The original link for “Frontend DX Group” was pointing to 
       [that GitHub group](https://github.com/orgs/WordPress/teams/frontend-dx/members)
       under [Github’s WordPress Organization](https://github.com/orgs/WordPress/people),
       but unfortunately, [these links are not visible to anyone that doesn’t belong to this GitHub Organization](https://docs.github.com/en/organizations/organizing-members-into-teams/about-teams#:~:text=People%20who%20are%20not%20members%20of%20the%20organization%20cannot%20view%20any%20teams.).
     * For clarification purposes, I have updated the text (replacing “Frontend DX 
       Group” with a “group of contributors”) and changed the link to point to [a public URL](https://github.com/WordPress/block-hydration-experiments/graphs/contributors)
       that reflects the same group of contributors that have been working on [this project](https://github.com/WordPress/block-hydration-experiments).

Comments are closed.

# Post navigation

[← Editor Chat Agenda: 11 January 2023](https://make.wordpress.org/core/2023/01/10/editor-chat-agenda-11-january-2023/)

[Editor chat summary: Wednesday, 11 January 2023 →](https://make.wordpress.org/core/2023/01/11/editor-chat-summary-wednesday-11-january-2023/)