Comments (27)
The ability to use existing WordPress Scripts from Script Modules is one of the most impactful things we can work on for the Interactivity API. Anything built with the Interactivity API must be a script module, so although it's not strictly Interactivity API, resolving this ticket for script and module interoperability seems very important: https://core.trac.wordpress.org/ticket/60647
from gutenberg.
In addition to #60035 I'd love to see some more useful debugging for the following areas:
-
output a warning when you use directives in the markup of a block that doesn't have the interactivity support enabled
-
add better client side errors when you try to access a property on a store that doesn't exist
-
add a guide for how to connect the preact dev tools to the interactivity API
Besides debugging here are some other things that I would love to see in the 6.6 cycle.
-
some documentation for working with external stores / making a store extensible
-
refine clarity in documentation of what the difference between callbacks and actions are
-
add documentation for client side routing like the query block does it
from gutenberg.
@DAreRodz @gziolo What's the best path to consider additional workstreams for the Interactivity API for 6.6?
Context is that @westonruter and myself have been exploring ideas to facilitate better INP performance centrally via the Interactivity API. For instance, we could automatically yield certain actions and callbacks to the main thread to reduce contention between multiple event listeners. We're close to formalizing our proposal in an issue, and it would be great to eventually include this effort here, if the team is on board.
One of the changes we're proposing may require a BC break in the API which we could handle with a deprecation strategy, but it would also benefit from being implemented sooner than later, now that the API is still very new and not yet as widely adopted outside of core.
from gutenberg.
Hey @felixarntz, thanks for raising this up! 😊
I'm unsure what would be the "best path" (maybe @gziolo could help), but as this tracking issue is meant to be flexible, I would be happy to include your work. Let's wait for the proposal to see if we can have it ready for WP 6.6 and how the mentioned breaking changes could impact the current API.
from gutenberg.
That sounds excellent, @felixarntz. I'm looking forward to seeing the proposal.
@DAreRodz, the Iteration
issues mostly bring focus and increase the visibility of what to expect in WordPress 6.6, but it doesn't mean we can't change it. In practice, we should always be open to changing the plans based on the feedback and discoveries from the community experts 😍
from gutenberg.
Second @sirreal calls for WordPress scripts. We use wp-api-fetch
and wp-url
with interactive blocks, a lot. Making that easier from a dev tooling perspective to automatically enqueue those scripts would be greatly appreciated.
from gutenberg.
The fix for data-wp-on
is merged.
I've also opened an issue to fix the same problem in data-wp-on-window
and data-wp-on-document
.
from gutenberg.
Added another performance issue which came out of the discussion in #60574 (comment):
from gutenberg.
Based on discussion in #60979 (comment) I've opened a PR to add build configuration for a standalone package:
from gutenberg.
I've started a PR to migrate @wordpress/interactivity-router
to TS:
from gutenberg.
Is there any chance to get interactivity api outside of blocks? For example in custom php templates?
from gutenberg.
@ermincelikovic While I believe it's not documented, it should already be possible. The main caveat is that by default custom PHP templates wouldn't be processed server-side, so you have to make sure the attributes that are dynamic via the Interactivity API are initialized with their correct value.
As a proof of concept, I have been working on WordPress/wordpress-develop#5795 where I am using the Interactivity API for all dynamic functionality of the Twenty Twenty-One theme. Maybe that's helpful.
from gutenberg.
default custom PHP templates wouldn't be processed server-side, so you have to make sure the attributes that are dynamic via the Interactivity API are initialized with their correct value
You can process them using wp_interactivity_process_directives
🙂
from gutenberg.
default custom PHP templates wouldn't be processed server-side, so you have to make sure the attributes that are dynamic via the Interactivity API are initialized with their correct value
You can process them using
wp_interactivity_process_directives
🙂
This looks great!
How would I import { store, getContext } from "@wordpress/interactivity";
within a context of php template or a traditional script.js file in the theme though?
EDIT:
Just found out that script modules are also introduced in 6.5:
https://make.wordpress.org/core/2024/03/04/script-modules-in-6-5/
from gutenberg.
I've added the suggestions in Typescripting utils PR. Ready to be reviewed again.
#60149
from gutenberg.
How would I
import { store, getContext } from "@wordpress/interactivity";
within a context of php template or a traditional script.js file in the theme though?
@ermincelikovic The @wordpress/interactivity
script module is only available to other script modules at this time. Using it from WordPress scripts is not supported at this time. See this ticket for details.
from gutenberg.
I've added two PRs to the description above.
The first one could be considered a bug fix (I've added it under that category), and so be released in a minor WP release.
from gutenberg.
I've added WordPress/wordpress-develop#6394 for server-side derived state. It's ready for review.
from gutenberg.
I've just added 3 items related to data-wp-ignore
directive.
- It needs to be documented, it's not in the API Reference right now.
- #60744
- WordPress/wordpress-develop#6405
I think there's a bug with the server processing of ignore directives I'm attempting to fix in WordPress/wordpress-develop#6405. I think that nodes with that attribute and their descendants should be ignored completely, no processing should happen on or under a node with data-wp-ignore
. @cbravobernal or @DAreRodz can you confirm?
Right now ignore directives are not handled on the server, so those nodes and their descendants are processed. I discovered that while working on tests for #60744.
from gutenberg.
I've created this ticket to handle property access on PHP objects in interactivity state, only arrays are well handled at the moment: https://core.trac.wordpress.org/ticket/61039
from gutenberg.
I've created a PR to add a couple of warnings if Server Directives processing fails.
from gutenberg.
Created a PR to handle multiple document
and window
events in the same element.
from gutenberg.
Created a PR to avoid a wrong directive from killing the runtime.
from gutenberg.
Added another PR, avoiding an emtpy or a wrong namespace from killing the runtime too.
from gutenberg.
Added a follow-up issue to improve the readability of the directive processing function inside vdom.ts
as @sirreal requested in #61249 (comment)
from gutenberg.
Added a minimum PR with two types:
from gutenberg.
Hi all 👋
Reminder: The release candidate for Gutenberg Version 18.5 is scheduled for next Friday (May 31st). So anything that is supposed to make it into WordPress 6.6 must be merged by then.
Please raise any important issues that need additional attention :)
from gutenberg.
Related Issues (20)
- Add export feature to the editor HOT 1
- User global styles: should we save relative paths to the database for uploaded assets? HOT 1
- Media & text block: Placeholder buttons has the wrong size HOT 5
- Filtering 'My patterns' category in the Inserter is a bit clunky
- Comments and Pingbacks get cleared out when a pattern is edited (within the editor) and a metabox is shown HOT 1
- Add antispam protection to mailto links HOT 1
- Deprecation does not work if Block Wrapper does not use blockProps
- Block settings: Change "Apply globally" to secondary button styling to lower prominence HOT 14
- Consistent Sidebar DOM and Open/Closing Interactions HOT 4
- Help users understand what 'Mark as nofollow' means in edit link control HOT 2
- Color Presets: Scrollbar is unexpectedly present in color preset previews HOT 1
- Color Presets: Unexpected scroll to color presets when selecting a style variation HOT 1
- Layout Styles: Block list appender causes inconsistent application of layout margin styles
- Layout Styles: Adding block gap global styles does not work for Columns block
- Post Inspector: Move taxonomy term select UI (categories + tags) to updated summary panel HOT 8
- The title field of Reusable Block became unchangeable without a block theme HOT 5
- Page Inspector: Move page attributes UI to updated summary panel
- Document Bar no longer animates when changing from page/template
- Links in "File structure of a block" broken HOT 1
- Attach css and js to patterns
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gutenberg.