-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Interactivity API: Mark all core block stores as private #58722
Conversation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core SVNCore Committers: Use this line as a base for the props when committing in SVN:
GitHub Merge commitsIf you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Size Change: +69 B (0%) Total Size: 1.69 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know the comments are not this PR related, but it would be great to edit them.
LGTM
// We can't initialize the lightbox until the reference | ||
// image is loaded, otherwise the UX is broken. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// We can't initialize the lightbox until the reference | |
// image is loaded, otherwise the UX is broken. | |
/* | |
* The lightbox cannot be initialized until the reference | |
* image is loaded, otherwise the UX is broken. | |
*/ |
// In most cases, this value will be 0, but this is included | ||
// in case a user has created a page with horizontal scrolling. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// In most cases, this value will be 0, but this is included | |
// in case a user has created a page with horizontal scrolling. | |
/* | |
* In most cases, this value will be 0, but this is included | |
* in case a user has created a page with horizontal scrolling. | |
*/ |
// We define and bind the scroll callback here so | ||
// that we can pass the context and as an argument. | ||
// We may be able to change this in the future if we | ||
// define the scroll callback in the store instead, but | ||
// this approach seems to tbe clearest for now. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// We define and bind the scroll callback here so | |
// that we can pass the context and as an argument. | |
// We may be able to change this in the future if we | |
// define the scroll callback in the store instead, but | |
// this approach seems to tbe clearest for now. | |
/* | |
* The scroll callback is defined and bound here so | |
* that we can pass the context and as an argument. | |
* This may be changed in the future if the scroll | |
* callback is defined in the store instead, but | |
* this approach seems to be clearest for now. | |
*/ |
// We need to add a scroll event listener to the window | ||
// here because we are unable to otherwise access it via | ||
// the Interactivity API directives. If we add a native way | ||
// to access the window, we can remove this. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// We need to add a scroll event listener to the window | |
// here because we are unable to otherwise access it via | |
// the Interactivity API directives. If we add a native way | |
// to access the window, we can remove this. | |
/* | |
* A scroll event listener is needed to be added to the window | |
* here because otherwise in unaccessible via | |
* the Interactivity API directives. If there is a native way | |
* to access the window, this can be removed. | |
*/ |
// We want to wait until the close animation is completed | ||
// before allowing a user to scroll again. The duration of this | ||
// animation is defined in the styles.scss and depends on if the | ||
// animation is 'zoom' or 'fade', but in any case we should wait | ||
// a few milliseconds longer than the duration, otherwise a user | ||
// may scroll too soon and cause the animation to look sloppy. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// We want to wait until the close animation is completed | |
// before allowing a user to scroll again. The duration of this | |
// animation is defined in the styles.scss and depends on if the | |
// animation is 'zoom' or 'fade', but in any case we should wait | |
// a few milliseconds longer than the duration, otherwise a user | |
// may scroll too soon and cause the animation to look sloppy. | |
/* | |
* Wait until the close animation is completed | |
* before allowing a user to scroll again. The duration of this | |
* animation is defined in the styles.scss and depends on if the | |
* animation is 'zoom' or 'fade', but in any case, it needs to be | |
* a few milliseconds longer than the duration, otherwise a user | |
* may scroll too soon and cause the animation to look sloppy. | |
*/ |
// In the case of an image with object-fit: contain, the | ||
// size of the <img> element can be larger than the image itself, | ||
// so we need to calculate where to place the button. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// In the case of an image with object-fit: contain, the | |
// size of the <img> element can be larger than the image itself, | |
// so we need to calculate where to place the button. | |
/* | |
* In the case of an image with object-fit: contain, the | |
* size of the <img> element can be larger than the image itself, | |
* so calculate where to place the button. | |
*/ |
// If it reaches the width first, keep | ||
// the width and compute the height. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// If it reaches the width first, keep | |
// the width and compute the height. | |
/* | |
* If it reaches the width first, keep | |
* the width and compute the height. | |
*/ |
// If it reaches the height first, keep | ||
// the height and compute the width. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// If it reaches the height first, keep | |
// the height and compute the width. | |
/* | |
* If it reaches the height first, keep | |
* the height and compute the width. | |
*/ |
// If focus is outside modal, and in the document, close menu | ||
// event.target === The element losing focus | ||
// event.relatedTarget === The element receiving focus (if any) | ||
// When focusout is outsite the document, | ||
// `window.document.activeElement` doesn't change. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// If focus is outside modal, and in the document, close menu | |
// event.target === The element losing focus | |
// event.relatedTarget === The element receiving focus (if any) | |
// When focusout is outsite the document, | |
// `window.document.activeElement` doesn't change. | |
/* | |
* If focus is outside modal, and in the document, close menu | |
* event.target === The element losing focus | |
* event.relatedTarget === The element receiving focus (if any) | |
* When focusout is outsite the document, | |
* `window.document.activeElement` doesn't change. | |
*/ |
// If focus is outside search form, and in the document, close menu | ||
// event.target === The element losing focus | ||
// event.relatedTarget === The element receiving focus (if any) | ||
// When focusout is outside the document, | ||
// `window.document.activeElement` doesn't change. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// If focus is outside search form, and in the document, close menu | |
// event.target === The element losing focus | |
// event.relatedTarget === The element receiving focus (if any) | |
// When focusout is outside the document, | |
// `window.document.activeElement` doesn't change. | |
/* | |
* If focus is outside search form, and in the document, close menu | |
* event.target === The element losing focus | |
* event.relatedTarget === The element receiving focus (if any) | |
* When focusout is outside the document, | |
* `window.document.activeElement` doesn't change. | |
*/ |
packages/interactivity/CHANGELOG.md
Outdated
@@ -6,6 +6,10 @@ | |||
|
|||
- Break up init with yielding to main to prevent long task from hydration. ([#58227](https://github.com/WordPress/gutenberg/pull/58227)) | |||
|
|||
### Bug Fixes | |||
|
|||
- Avoid initializing private stores as public when they have initial state. ([#58722](https://github.com/WordPress/gutenberg/pull/58722)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The PR title is different than the title here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You are right; it's confusing. I'm going to cherry-pick those commits and create another PR just for the bug fix.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done here: #58754.
1b6c600
to
3ed5952
Compare
Thanks for the review, @c4rl0sbr4v0! 🙏 Do you mind if we leave the comments suggestions for a different PR? EDIT: maybe to this one: #58718 |
No problem! |
Question about this, does this mean I am not able to for example build a custom block that is a child of the navigation block and access its context / store? I can think of a few instances where especially for the navigation block it would be very useful to be able to access that. Sorry if I'm misunderstanding. |
@fabiankaegy, it is exactly that. We wanted to limit the APIs we expose during this first iteration, although that could change in the next versions, depending on the potential use cases.
I'd love to hear more about those instances you have in mind. 😄 |
@DAreRodz Thanks for confirming. I can understand that reason but I am a little concerned what it will mean for extenders. The first example coming to mind is mega menus. With some changes that were made in 6.5 it is finally possible to extend the list of allowed blocks that can be used in the navigation block. But a megemenu for example would need to know whether the navigation area it is in is currently expanded or not. So it would need to access the context. I'll add some more examples later 👍 |
If the core data stores are being “locked”, that means that any site or project which uses them in the frontend will break with the release of 6.5, doesn't it? Will they remain accessible if the project uses nonce authentication to access the store? (I'm referring to |
@markhowellsmead like we chatted about on twitter. The data API stores and the WordPress Data stores have nothing to do with one another. So no they are unaffected. |
What?
Epic: #56803
Mark the store of all core blocks as private, preventing access to their content from other plugins.
Also, fix private store initialization when populating the initial state.
Why?
To avoid exposing internal data that shouldn't become a public API.
How?
Simply adding a
{ lock: true }
option to each store definition. It's easier to see if the changes to whitespace characters are hidden.Testing Instructions
store()
from the Interactivity API module.core/file
store. It should throw an error.core/image
,core/navigation
andcore/query
. The result must be the same.core/search
store. It should fail as expected.