Interactivity API showcase #55642
Replies: 24 comments 53 replies
-
|
Hey John. Right now we have all the interactive Core blocks (Navigation, Search, File), the new Image "expand on click" feature and the first of the client-side navigation-based user experiences that prevents full reloads when users paginate on the Query block. Those have been in production in Gutenberg for a while, so they have been used in production by anyone using the Gutenberg plugin and all the sites hosted on WordPress.com. All these blocks and features are coming to WordPress 6.4, which will bundle a private version of the Interactivity API that only Core blocks can use, (so it can still be tweaked or even removed if people finally reject the proposal). Apart from that, WooCommerce is now shipping its own bundled version of the Interactivity API. If I recall correctly, they have the following blocks (either in production or about to be released): the Product Button block (Add to Cart, which now shows the number of items in the cart and is animated when the quantity changes), the Products Collection block (which has client-side navigation on pagination and filter changes, similar to the Query block), the Product Filters (which filter what's shown in the Product Collection block) and the Product Gallery block. Their intention is to keep shipping their own bundled version of the Interactivity API if/until WordPress includes a public version. The new |
Beta Was this translation helpful? Give feedback.
-
|
Looks like @sethrubenstein has been playing with it lately
|
Beta Was this translation helpful? Give feedback.
-
|
You beat me to it! I'm working on a write up now with some minimal video and code examples, but first I want to make a little more progress on understanding some concepts. I'll share more soon! |
Beta Was this translation helpful? Give feedback.
-
|
Why does interactivity API on the front-end need 31 kB? Why does every page need this big js file? https://2024.wordpress.net/wp-content/plugins/gutenberg/build/interactivity/index.min.js?ver=17.1.3 I would like to see a WP page with minimum JS or zero JS. Framework Astro shows this path with 0 JS on the front-end, see https://dev.to/ekqt/shipping-zero-javascript-with-astro-9ol |
Beta Was this translation helpful? Give feedback.
-
|
Exactly! The Interactivity API works like Astro, shipping 0kBs by default, and using the concept of islands. Islands are just interactive blocks. If a page doesn't have any interactive blocks, WordPress won't ship any JavaScript (so 0kBs!). Actually, if you take a look at the code, there are some places where we still mention islands, although we are replacing them with the word "interactive" to avoid introducing the concept of islands in WordPress (that was actually suggested by @carolinan here). As for the size, take into account that 31kBs is the size unzipped. People usually talk about zipped sizes. For example, jQuery is 88.3kBs unzipped, and 31.7kBs zipped. The zipped size of the Interactivity API runtime is currently 11.3kBs: 
That said, we have not implemented some optimizations yet, but we will apply them in future versions:
With that, we will probably be able to save 1-2kBs more on the initial load of the runtime, and also improve the time-to-interactive metrics by delaying the hydration of the non-essential islands (interactive blocks). More importantly, we will be able to apply most of these optimizations without requiring any intervention or code change on the developers side. |
Beta Was this translation helpful? Give feedback.
-
|
The Astro doesn't need any front-end framework to create interactive components. I can create Astro component with Web Components standard API without any lib. See the script in the search component https://github.com/withastro/starlight/blob/main/packages/starlight/components/Search.astro The interactivity lib has 31 kB code for all browsers. Low-end phones have limited computing power. The computing of every kB of JS code needs extra energy from nature. Why do I need Preact for navigation in Twenty Twenty-Four theme? Demo site https://2024.wordpress.net/index.php/sample-page/ Preact for navigation is overkill !!! We don't need Preact. We have HTTP2 multiplexing, see https://stackoverflow.com/questions/36517829/what-does-multiplexing-mean-in-http-2 Please separate preact lib from interactivity lib. A new version of Preact needs a new version of interactivity lib now. This solution needs to download next unnecessary kB of JS code !!! I don't like Preact. Preact creates its own API on the web platform. I like Web Components API for simple components and Lit lib for complex components, see lit.dev. Components without dependencies
Lit components
Best island component |
Beta Was this translation helpful? Give feedback.
-
|
These are all great points but they would be better made in their own discussion topic so the conversation can continue and get more input from others. Can you move this to a separate discussion topic? |
Beta Was this translation helpful? Give feedback.
-
|
here #56681 |
Beta Was this translation helpful? Give feedback.
-
|
(reposting this to the main thread) Heres an example for everyone of the interactivity api in action. We just recently converted our Tabs blocks to the api, heres how that went: CleanShot.2023-11-29.at.18.12.56.mp4This is comprised of 5 blocks:
With really only 3 of them being "interactive". Tabs Controller is where the majority of the logic is for the tabs to work. Heres a quick sample of its view.js /**
* WordPress Dependencies
*/
import { store } from "@wordpress/interactivity";
import { addQueryArgs } from '@wordpress/url';
function updateHash(tab, uuid) {
tab.focus();
// add a tabItem query arg to the url with the id of the new tab
const { href } = window.location;
const newUrl = addQueryArgs(href, {
tabItem: uuid
});
window.history.pushState({ path: newUrl }, '', newUrl);
}
store( {
state: {
tabsController: {
// A simple log of all the tab controller blocks on the page
onPage: [],
}
},
actions: {
tabsController: {
setActiveTab: ({actions, selectors, context, ref}) => {
const { uuid } = context;
context.tabsController.activeUUID = uuid;
// When we select a new tab also update the browser history state and add the tab's uuid to the url. This allows users to copy the url and provide deep linking activation of a specific tab by url. Thats handled server side with a query var check on the block render.
updateHash(ref, uuid);
},
}
},
selectors: {
tabsController: {
isActive: ({context, ref}) => {
// Each panel|tab has its own context containing its own uuid, we can then compare that to the activeUUID in the tabsController context to see if it is active.
const { uuid, tabsController: { activeUUID } } = context;
if ( ! uuid ) {
return false;
}
return activeUUID === uuid;
}
}
},
effects: {
tabsController: {
onInit: ({actions, selectors, context, state, ref}) => {
const id = ref.getAttribute('id');
state.tabsController.onPage = [
...state.tabsController.onPage,
id,
];
const event = new CustomEvent('tabsReady', {detail: {id}});
// Fire a custom event when the tabs are ready
document.dispatchEvent(event);
}
}
}
} );For the controller's block render heres what the looks like: /**
* Either return the uuid from the `tabItem` url var or get the uuid for the first menu item block.
* @param mixed $block
* @return mixed
*/
private function get_first_menu_item_uuid($block) {
$url_var_value = get_query_var('tabItem');
if ( $url_var_value ) {
return $url_var_value;
}
$parsed_block = $block->parsed_block;
$tabs_controller_innerblocks = $parsed_block['innerBlocks'];
$menu_block = wp_get_first_block($tabs_controller_innerblocks, 'prc-block/tabs-menu');
$first_menu_item_block = wp_get_first_block($menu_block['innerBlocks'], 'prc-block/tabs-menu-item');
return $first_menu_item_block['attrs']['uuid'];
}
/**
* Render the Tabs Controller
* @param mixed $attributes
* @param mixed $content
* @param mixed $block
* @return string
*/
public function render_block_callback( $attributes, $content, $block ) {
$initial_context = array(
'tabsController' => array(
'activeUUID' => $this->get_first_menu_item_uuid($block),
)
);
$block_wrapper_attrs = get_block_wrapper_attributes(
array(
'id' => 'tabs-'. md5( wp_json_encode( $attributes ) ),
'class' => \PRC\Platform\Block_Utils\classNames( array(
'is-vertical-tabs' => $attributes['vertical'],
'is-horizontal-tabs' => ! $attributes['vertical'],
) ),
'data-wp-interactive' => true,
'data-wp-context' => wp_json_encode($initial_context),
'data-wp-init' => 'effects.tabsController.onInit',
)
);
return wp_sprintf(
'<div %1$s><div>%2$s</div></div>',
$block_wrapper_attrs,
$content,
);
}The menu item block render: <?php
namespace PRC\Platform\Blocks;
$uuid = array_key_exists( 'uuid', $attributes ) ? $attributes['uuid'] : false;
if ( ! $uuid ) {
return;
}
$block_wrapper_attrs = get_block_wrapper_attributes(
array(
'data-wp-interactive' => true,
'data-wp-key' => 'tab-'.$uuid,
'data-wp-class--is-active' => 'selectors.tabsController.isActive',
'data-wp-context' => wp_json_encode(array('uuid' => $uuid)),
'data-wp-on--click' => 'actions.tabsController.setActiveTab',
)
);
$content = wp_kses( $attributes['title'], 'post' );
echo wp_sprintf(
'<button %1$s>%2$s</button>',
$block_wrapper_attrs,
$content,
);And then lastly this is the tabs pane render: <?php
namespace PRC\Platform\Blocks;
$uuid = array_key_exists( 'uuid', $attributes ) ? $attributes['uuid'] : false;
if ( ! $uuid ) {
return;
}
$block_wrapper_attrs = get_block_wrapper_attributes(
array(
'aria-role' => 'tabpanel',
'data-wp-interactive' => true,
'data-wp-key' => 'panel-' . $uuid,
'data-wp-class--is-active' => 'selectors.tabsController.isActive',
'data-wp-context' => wp_json_encode(array('uuid' => $uuid)),
)
);
echo wp_sprintf(
'<section %1$s>%2$s</section>',
$block_wrapper_attrs,
$content,
);Our experience with the API has been good so far. However, our dev team has expressed some consternation and confusion regarding the naming of "state" and "context". They suggest that calling them "Global State" and "Local State" or "Block State" might be more appropriate, given their functionality in a "reacty" way. Personally, I believe the current naming is fine, but additional documentation explaining the differences between the two and how they work together would be helpful. We're also interested in exploring another aspect: using the API with real React components. For instance, we're currently working on a searchable multiselect dropdown that can interact with global state, block context, and actions more smoothly. Although we have achieved some success in making it work, the approach still feels somewhat hacky. I'll share some examples of our progress soon. Looking forward to Gutenberg 17.2 releasing and really exploring (and I assume updating some of the blocks we've already converted) the updated store api. |
Beta Was this translation helpful? Give feedback.
-
Hey Seht, with the final 1.0 version of the Interactivity API, you don't need to pass down the namespace because it is inherited from the parents. So reusing blocks that trigger actions or read state defined in the store defined by their parent blocks works fine and will be supported. For example, the same
<!-- wp:my-plugin/some-form -->
<div data-wp-interactive="my-plugin/some-form">
<span>Some markup here..</span>
<!-- wp:my-plugin/submit-button -->
<button data-wp-on--click="actions.submit">
This triggers the submit action of `my-plugin/some-form`
</button>
<!-- /wp:my-plugin/submit-button -->
</div>
<!-- /wp:my-plugin/some-form -->store("my-plugin/some-form", {
actions: {
submit() {
// Logic triggered by the submit-button block.
}
}
})
<!-- wp:my-plugin/other-form -->
<div data-wp-interactive="my-plugin/other-form">
<span>Some markup here..</span>
<!-- wp:my-plugin/submit-button -->
<button data-wp-on--click="actions.submit">
This triggers the submit action of `my-plugin/other-form`
</button>
<!-- /wp:my-plugin/submit-button -->
</div>
<!-- /wp:my-plugin/other-form -->store("my-plugin/other-form", {
actions: {
submit() {
// Logic triggered by the submit-button block.
}
}
}) |
Beta Was this translation helpful? Give feedback.
-
|
I read in the changelog that inserting (p)react components through the data-wp-text directive has been removed. I need to combine my React components (I’m not sure if I can convert them to preact but I also want to try this). What is the proper way of doing this now? Could I get a tiny example? 🙏🏻 |
Beta Was this translation helpful? Give feedback.
-
|
Hey Niels, as I said, we want to support it at some point, but we need to know more about the use cases first to understand how to do it right. We can add it again to Gutenberg and experiment with it, maybe as a new directive, like Would you mind opening a new discussion with your use case so we can start figuring out the requirements? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Here it is: #60418 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
I just opened this experimental proof of concept PR WordPress/wordpress-develop#5795 to use the Interactivity API to replace all dynamic frontend functionality in Twenty Twenty-One. This is mostly an exploration which explores how the API could be used even in classic theme contexts. While we speak a lot about blocks today, by no means is (or should be) the API limited to blocks. |
Beta Was this translation helpful? Give feedback.
-
|
FYI, WordPress/wordpress-develop#5795 has been updated to use the Interactivity API as of WordPress 6.5, including the recently added |
Beta Was this translation helpful? Give feedback.
-
|
Hi @felixarntz! I tried your approach and it worked in major browsers except to Safari where I got:
Have you perhaps encountered this problem in Safari? EDIT: Actually it works in Safari as well although the above error is present. |
Beta Was this translation helpful? Give feedback.
-
We are polyfilling import maps so that error message is expected on old Safari versions. |
Beta Was this translation helpful? Give feedback.
-
|
👋🏾 So, this is my first block using the interactivity API. I opted to use the template from https://todomvc.com/, so that I could focus only on learning, and hooked the reactivity with the interactivity API. The documentation here has been helpful. Knowing a little bit of Alpine.js, I run into some issues with the "design" of the API. Like, "why can't the interactivity API do this Alpine.js does? Like x-show". The work on the vscode extension might help make the task easier/faster. Compared to Alpine, it takes more typing to bind and hook stuff (a lot of data-wp....). Maybe with snippets, it'll be faster. As an aside: I'd suggest adding an alias for But as soon as you understand the design of the API, all goes smoothly after that. :) CleanShot.2024-02-17.at.22.16.29-converted.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
Ohhh, todomvc. Lovely 🙂 Do you have the code for that? It would be a great example to show! Oh, |
Beta Was this translation helpful? Give feedback.
-
|
Sure! Let me first finish the app. I'm in the process of trying/testing the router bundled with the API. After that, I can share the complete code. |
Beta Was this translation helpful? Give feedback.
-
|
I just used a bit of the Interactivity API in my tutorial on mega menus for the Developer Blog. It's not a very complex implementation, but it should be helpful for those looking to get started. |
Beta Was this translation helpful? Give feedback.
-
|
I'm attempting to recreate the feedback form interactivity featured on Nextjs.org/docs/ (at bottom of each docs - screenshot below). I've made some pretty good progress on hooking the toggling up. However, I'm hung up on processing and handling the submission of the form and passing along the post ID, sanitize, validate and nonce the form. Perhaps I'm stuck in the old ways of thinking on how to do things with WordPress, and I'm wondering if I'm missing something here. Here is some of the logic I'm working on for noncing and passing the info from a Post. Is reaching for WP's /**
* Adds a script to the footer that initializes the wpeFeedbackResponse object with necessary data.
*
* This function is hooked to the 'wp_footer' action.
*/
function devrel_feedback_response_script() {
if ( ! is_singular( 'post' ) ) {
return;
}
$data = array(
'ajaxUrl' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'devrel_feedback_nonce' ),
);
$localise = wp_json_encode( $data );
printf( '<script type="text/javascript">let wpeFeedbackResponse = %s</script>', $localise ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
add_action( 'wp_footer', 'devrel_feedback_response_script' );
/**
* Handles the submission of feedback form via AJAX.
*
* This function is responsible for processing the feedback form submission and saving the feedback
* to the corresponding post meta. It checks the AJAX referer, retrieves the post ID and feedback
* from the request, sanitizes the input, and updates the post meta with the feedback value.
* If the feedback and post ID are valid, it returns a success message. Otherwise, it returns an error message.
*/
function devrel_feedback_submission_handler() {
// Check the AJAX referer.
check_ajax_referer( 'wpe_devrel_feedback_nonce', 'feedback_form_nonce' );
// Obtain the post ID and feedback from the request.
$comment = wp_filter_nohtml_kses( $_POST['feedback'] );
$comment_post_id = intval( $_POST['comment_post_id'] );
$commentdata = array(
'comment_post_id' => $comment_post_id,
'comment_content' => $comment,
'comment_author_ip' => $_SERVER['REMOTE_ADDR'],
'comment_agent' => $_SERVER['HTTP_USER_AGENT'],
'comment_approved' => 0, // Hold for moderation
);
wp_insert_comment( $commentdata );
echo 'Success';
wp_die();
}
add_action( 'wp_ajax_submit_feedback', 'devrel_feedback_submission_handler' );
add_action( 'wp_ajax_nopriv_submit_feedback', 'devrel_feedback_submission_handler' );Is there a different method to do this in my block, and would this impact with Interactivity API integration planning (limitations, challenges)?
|
Beta Was this translation helpful? Give feedback.
-
|
I'm running WP 6.5-RC1 and Gutenberg plugin only and I cannot get a successful AJAX request. Everything else works fine though. 🤔 |
Beta Was this translation helpful? Give feedback.
-
|
@colorful-tones We're relying entirely on custom rest endpoints for such things. I have a pretty simple example I can point to for the interactivity (disregard my commented out nonces right now 🤫this is still in development). Our MailChimp From block hits a custom endpoint we've created to handle newsletter subscriptions https://github.com/pewresearch/prc-block-library/blob/develop/blocks/mailchimp-form/src/render.php and using Basically, we're watching for a true value on a flag that lets the submission handler finally run. That true value is set by our Captcha (https://github.com/pewresearch/prc-block-library/blob/develop/blocks/form-captcha/src/render.php, and https://github.com/pewresearch/prc-block-library/blob/develop/blocks/form-captcha/src/view.js respectively) |
Beta Was this translation helpful? Give feedback.
-
|
@colorful-tones Hmm, not sure about the bad request from admin-ajax though, I see you're basically doing the same thing. My only guess would be to try changing the order of operations a bit and have the on click just set some flag to true and have a |
Beta Was this translation helpful? Give feedback.
-
Does it work when you don't use the Interactivity API?
Do you have a reproducible example of that behavior? There should not be any race condition. |
Beta Was this translation helpful? Give feedback.
-
|
I got it working and was a matter of the formatted data I was passing from client to server was malformed. I'll be pushing up the latest code tomorrow. Thanks all! |
Beta Was this translation helpful? Give feedback.
-
|
I just wanted to circle back and share that I put up my demo Feedback block plugin. I would love any insight on how to improve any of the code, and always still learning! ❤️ |
Beta Was this translation helpful? Give feedback.
-
|
That looks awesome! Great example about how to use ajax with the Interactivity API 🙂
I would only change two things:
*submitForm( event ) {
const context = getContext();
const { ref } = getElement();
event.preventDefault();
const formData = new FormData( ref );
formData.append( 'action', 'submit_feedback' );
formData.append( 'nonce', context.nonce );
formData.append( 'postId', context.postId );
context.isFormProcessing = true;
try {
const data = yield fetch( context.ajaxUrl, {
method: 'POST',
credentials: 'same-origin',
body: formData
}).then( r => r.text() )
context.hasSuccess = true;
context.formMessage = "Success!";
} catch( error ) {
console.error( 'Error:', error );
context.hasError = true;
context.formMessage = "Error!";
}
},This is a requirement for the Interactivity API. In your case, everything works fine, but it could cause issues with the scope. If you want to keep using promises instead, you need to wrap all the promise callbacks with a
const { state } = store( "...", {
state: {
get hasSucess() {
const { status } = getContext();
return status === "success";
},
get hasError() {
const { status } = getContext();
return status === "error";
},
get formMessage() {
const { status } = getContext();
if ( status === "success" ) return "Success!";
if ( status === "error" ) return "Error!";
}
},
actions: {
*submitForm( event ) {
// ...
try {
yield fetch( context.ajaxUrl, {
method: 'POST',
credentials: 'same-origin',
body: formData
}).then( r => r.text() )
context.status = "success";
} catch( error ) {
console.error( 'Error:', error );
context.status = "error";
}
},
}
});This keeps things more declarative and avoids out-of-sync issues when the code starts getting complex. I hope that helps 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
Hey all 👋 Question: I've been going through the starter documentation again (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/#quick-start-guide) and in the basic toggle example I'm surprised to see that the data-bind to handle the show / hide actually doesn't get server rendered and I'm getting a layout shift on the client because of it. Do you have any insights on what I may be missing here? |
Beta Was this translation helpful? Give feedback.
-
|
Have you tried with the latest version of |
Beta Was this translation helpful? Give feedback.
-
|
@SantosGuillamot Thanks :) I retested this with RC2 and I can confirm that it works as expected. Thanks for the help :) |
Beta Was this translation helpful? Give feedback.
-
|
Hi! I made this block plugin with the Interactivity API. https://github.com/garridinsi/carbonbadge-block/ I used this simple project to test the API and is awesome!! Also, I'm going to talk about the API on WordCamp Chiclana 2024! |
Beta Was this translation helpful? Give feedback.
-
|
The plugin was published to the WordPress plugins repo on Wednesday! |
Beta Was this translation helpful? Give feedback.
-
|
This is the talk by the way (in Spanish): https://youtube.com/watch?v=tVEGusGpogk (I hope you don't mind me sharing it 😄) |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for sharing Luis! |
Beta Was this translation helpful? Give feedback.
-
|
Hello! I have created a to-do list block using the Interactivity API to learn more about it. You can find the demo of this plugin by clicking on this link. If you're interested, you can check out the code by clicking on this link. I would be highly appreciative of any suggestions to improve the code. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
That's wonderful. Really well structured code and a great example of how to use the Interactivity API, including things like derived state and
Sure. Here are a couple of small nitpicks:
I can't find anything else to comment on. As I said, the code is wonderful 😄 cc: @DAreRodz |
Beta Was this translation helpful? Give feedback.
-
|
Looks like we already have some MVC To-do apps here so I'll add mine to the mix as well! It should have all of the functionality expected and uses Demo: https://delicately-adorable.wp.build/ I've been live-streaming building this as well: Part 1: https://www.youtube.com/watch?v=VWUE2StCp_M |
Beta Was this translation helpful? Give feedback.
-
|
I have a gallery slider that uses the IAPI as well. It also uses the HTML API to add interactivity to core blocks Demo: slider-demo.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
I've created instant search using Interactivity API: Instant-search-interactivity-api.movI created a thread some time ago Code: https://github.com/r-chrzan/instant-search-interactivity |
Beta Was this translation helpful? Give feedback.
-
|
This is incredibly well done; congratulations! It's the best use of client-side navigation I've seen outside of Core blocks. I love the way you've reused the Query block, creating a variation and filtering the query. It's also great that you've added a pattern. Excellent use of all the available resources to extend the core blocks 😄 Would you like to collaborate to add instant search to the Core blocks? We haven't decided exactly how it would work yet; if it should be a variation of the Query block or just an option of the Search block. But we can brainstorm the design and make a decision. At the code level, it would be very similar to what you've done in your plugin. |
Beta Was this translation helpful? Give feedback.
-
|
@luisherranz Thanks again! It will be a pleasure 😊 |
Beta Was this translation helpful? Give feedback.
-
|
Awesome. I'll send you a DM on Slack 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
Some really nice examples here. I put together a simple interactivity API tutorial, might be useful for someone: GitHub: https://github.com/bigbite/interactivity-api-tutorial/tree/main
|
Beta Was this translation helpful? Give feedback.
-
|
Great tutorial, thanks Scott! 👏 I noticed you used |
Beta Was this translation helpful? Give feedback.
-
|
@luisherranz thanks for the feedback! this makes sense to keep things consistent and avoid confusion. |
Beta Was this translation helpful? Give feedback.
-
|
Hey all! I wanted to share a booking form block I'm experimenting with. It's been really interesting working with Interactivity API for this one. I'm learning a lot about how Interactivity API works, I think I'm going to have a lot of fun experimenting with it in future! 3-step-booking-form.mov |
Beta Was this translation helpful? Give feedback.
-
|
Looks great, thanks for sharing. Best usage of A couple of suggestions:
|
Beta Was this translation helpful? Give feedback.
-
|
@luisherranz Thank you very much for the feedback, it's super helpful :)
Thanks! |
Beta Was this translation helpful? Give feedback.
-
This is a great question, and I hope to address it in a new guide we are preparing to explain how state, context and derived state work. The answer to your question is... no. Derived state (created with getters) can access the context and will have the correct value because it is evaluated as a function: get isFirstStep() {
const { steps } = getContext();
return steps[0].isActive;
},The reason for not exposing some type of "derived context" and only having derived state is that the derived state can access both context and state at the same time. We thought about adding a It's a part of the API that we are not super happy with, but we couldn't find something for global/local/derived state that would make things clearer. Some people suggested renaming We also thought about using a different name for the "view" to consolidate all the state, like So in the end we preferred to keep By the way, in the server, the initial values of non-derived context are defined (in the |
Beta Was this translation helpful? Give feedback.
-
|
@luisherranz Thanks for the great explanation! It makes a lot of sense to just use I like what the Interactivity API can do so far! |
Beta Was this translation helpful? Give feedback.
-
|
Is there a way to add React packages? For example https://react-hot-toast.com/ |
Beta Was this translation helpful? Give feedback.
-
|
Not at the moment, but it's something we want to explore. Actually, using Preact underneath the Interactivity API was partly done to keep this possibility open. However, it is very important to understand that it could only be used for parts of the UI that do not require server-side rendering or PHP filtering. For those, you must use directives. Here’s an example of how it might work, although it’s also necessary to address the bundling part (aliasing |
Beta Was this translation helpful? Give feedback.
-
|
I experimented with region-based navigation within a custom Tabs Block 🤘 |
Beta Was this translation helpful? Give feedback.
-
|
Interactivity router is actually really fun to work with! I have put together this block Filterable Post List as another example of region based navigation. Feedback welcome 🙌 |
Beta Was this translation helpful? Give feedback.
-
|
It looks great, thanks for sharing! ❤️ |
Beta Was this translation helpful? Give feedback.
-
|
Sharing this here on behalf of @roborourke, as it's a perfect example of how to use the client-side navigation of the Interactivity API and extend the Query block at the same time.
https://github.com/humanmade/query-filter @roborourke feel free to leave any comment or feedback! 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the shoutout @luisherranz! I think there needs to be some more docs and examples around navigation specifically, I had to dig into the code to discover that regions were the key to it all but once I had that understanding it was really easy and just worked. Hoping to see more ways to compose query blocks and UIs in the future :) |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, we are now working on several improvements that we wanted to make to the client-side navigation for some time. Once we have finished, we will move on to completing the documentation, including a full guide with examples in the Core Concepts section. |
Beta Was this translation helpful? Give feedback.
-
|
Nice, those look like great improvements. I'll keep tabs on them as it looks like I'll need to update this plugin once they're in! Thanks for your hard work on this, it's such a significant new feature. |
Beta Was this translation helpful? Give feedback.
-
|
I've tried import a function (
|
Beta Was this translation helpful? Give feedback.
-
|
You would need to enqueue / add |
Beta Was this translation helpful? Give feedback.
-
|
Alternatively, you can copy the function into your own block, since it's simply 20 lines of code: function safeHTML( html ) {
const { body } = document.implementation.createHTMLDocument( '' );
body.innerHTML = html;
const elements = body.getElementsByTagName( '*' );
let elementIndex = elements.length;
while ( elementIndex-- ) {
const element = elements[ elementIndex ];
if ( element.tagName === 'SCRIPT' ) {
if ( element.parentNode ) {
element.parentNode.removeChild( element );
}
} else {
let attributeIndex = element.attributes.length;
while ( attributeIndex-- ) {
const { name: key } = element.attributes[ attributeIndex ];
if ( key.startsWith( 'on' ) ) {
element.removeAttribute( key );
}
}
}
}
return body.innerHTML;
} |
Beta Was this translation helpful? Give feedback.
-
|
Hi all! I recently lead the development of the X half virtual experience for Fujifilm (which we also used as an internal proof-of-concept/experiment for using the Interactivity API for enterprise projects) and thought some of you might find it interesting. As the X half was a departure from the standard control system for Fujifilm cameras and aimed at a new market the brief was to create an interactive experience that highlighted the key features/functions of the camera. The end resulted included:
If anyone has any questions about how we built this I'd be happy to answer them, or suggestions for better/alternate approaches which I'd be greatly appreciative of! X Half Virtual Experience (English) Desktop screencap:X.Half.mp4Mobile screencap:X.Half.Mobile.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
So cool! Is the source code publicly available somewhere? |
Beta Was this translation helpful? Give feedback.
-
|
@colorful-tones not without approval by Fujifilm unfortunately which can be quite tricky, however it's something I'm working on in the hope that we can use the project as the basis for a WordCamp talk and share our experience with the community. |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hey everyone,
Let's use this discussion as a showcase for what's been built with the Interactivity API so far and how successful those projects have been.
Show us your stuff!
Beta Was this translation helpful? Give feedback.
All reactions