Title: interactive-blocks – Make WordPress Core --- # Tag Archives: interactive-blocks [ ](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](https://make.wordpress.org/core/2023/01/11/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/)