From a45d1cd785964afd2fd351f9f4353ef7825dbe1a Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Tue, 28 May 2024 05:57:07 -0400 Subject: [PATCH 01/30] Documentation: PostLockedModal editor component (#61968) * Add PostLockedModal editor component JSDocs * Auto-generate editor docs for PostLockedModal --- packages/editor/README.md | 6 +++++- packages/editor/src/components/post-locked-modal/index.js | 6 ++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/editor/README.md b/packages/editor/README.md index 64e28992ee2c3a..fb7175880056e1 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -1076,7 +1076,11 @@ _Returns_ ### PostLockedModal -Undocumented declaration. +A modal component that is displayed when a post is locked for editing by another user. The modal provides information about the lock status and options to take over or exit the editor. + +_Returns_ + +- `JSX.Element|null`: The rendered PostLockedModal component. ### PostPendingStatus diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js index d2399929f0b117..6f858c13722a28 100644 --- a/packages/editor/src/components/post-locked-modal/index.js +++ b/packages/editor/src/components/post-locked-modal/index.js @@ -20,6 +20,12 @@ import { store as coreStore } from '@wordpress/core-data'; */ import { store as editorStore } from '../../store'; +/** + * A modal component that is displayed when a post is locked for editing by another user. + * The modal provides information about the lock status and options to take over or exit the editor. + * + * @return {JSX.Element|null} The rendered PostLockedModal component. + */ export default function PostLockedModal() { const instanceId = useInstanceId( PostLockedModal ); const hookName = 'core/editor/post-locked-modal-' + instanceId; From 9142bf7a80d563518f5145c83abd59aede0d19ea Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Tue, 28 May 2024 05:57:59 -0400 Subject: [PATCH 02/30] Documentation: PostComments editor component (#61964) * Add PostComments editor component JSDocs * Auto-generate editor docs for PostComments addition --- packages/editor/README.md | 6 +++++- packages/editor/src/components/post-comments/index.js | 5 +++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/editor/README.md b/packages/editor/README.md index fb7175880056e1..5e366ce78ec738 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -939,7 +939,11 @@ _Returns_ ### PostComments -Undocumented declaration. +A form for managing comment status. + +_Returns_ + +- `JSX.Element`: The rendered PostComments component. ### PostDiscussionPanel diff --git a/packages/editor/src/components/post-comments/index.js b/packages/editor/src/components/post-comments/index.js index 694655092237cf..75ca1ec0ee016c 100644 --- a/packages/editor/src/components/post-comments/index.js +++ b/packages/editor/src/components/post-comments/index.js @@ -71,4 +71,9 @@ function PostComments() { ); } +/** + * A form for managing comment status. + * + * @return {JSX.Element} The rendered PostComments component. + */ export default PostComments; From a062fdf604cdcd36b13047cd42a9e35e15e5b839 Mon Sep 17 00:00:00 2001 From: Damon Cook Date: Tue, 28 May 2024 06:27:59 -0400 Subject: [PATCH 03/30] Documentation: PageTemplate + PostTemplatePanel editor components (#61961) * Add PostTemplatePanel editor JSDocs * Add ClassicThemeControl editor component JSDocs * Auto-generate editor docs for ClassicThemeControl + PostTemplatePanel --- packages/editor/README.md | 14 ++++++++++++-- .../src/components/post-template/classic-theme.js | 15 +++++++++++++++ .../editor/src/components/post-template/panel.js | 5 +++++ 3 files changed, 32 insertions(+), 2 deletions(-) diff --git a/packages/editor/README.md b/packages/editor/README.md index 5e366ce78ec738..f25cab506df1ef 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -501,7 +501,13 @@ _Returns_ ### PageTemplate -Undocumented declaration. +Provides a dropdown menu for selecting and managing post templates. + +The dropdown menu includes a button for toggling the menu, a list of available templates, and options for creating and editing templates. + +_Returns_ + +- `JSX.Element`: The rendered ClassicThemeControl component. ### PanelColorSettings @@ -1228,7 +1234,11 @@ Undocumented declaration. ### PostTemplatePanel -Undocumented declaration. +Displays the template controls based on the current editor settings and user permissions. + +_Returns_ + +- `JSX.Element|null`: The rendered PostTemplatePanel component. ### PostTextEditor diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js index fb8835c7203218..877b3bc3c53dc9 100644 --- a/packages/editor/src/components/post-template/classic-theme.js +++ b/packages/editor/src/components/post-template/classic-theme.js @@ -55,6 +55,14 @@ function PostTemplateToggle( { isOpen, onClick } ) { ); } +/** + * Renders the dropdown content for selecting a post template. + * + * @param {Object} props The component props. + * @param {Function} props.onClose The function to close the dropdown. + * + * @return {JSX.Element} The rendered dropdown content. + */ function PostTemplateDropdownContent( { onClose } ) { const allowSwitchingTemplate = useAllowSwitchingTemplates(); const { @@ -216,4 +224,11 @@ function ClassicThemeControl() { ); } +/** + * Provides a dropdown menu for selecting and managing post templates. + * + * The dropdown menu includes a button for toggling the menu, a list of available templates, and options for creating and editing templates. + * + * @return {JSX.Element} The rendered ClassicThemeControl component. + */ export default ClassicThemeControl; diff --git a/packages/editor/src/components/post-template/panel.js b/packages/editor/src/components/post-template/panel.js index 1a0df3995ede7a..3986ff43afb0e7 100644 --- a/packages/editor/src/components/post-template/panel.js +++ b/packages/editor/src/components/post-template/panel.js @@ -13,6 +13,11 @@ import ClassicThemeControl from './classic-theme'; import BlockThemeControl from './block-theme'; import PostPanelRow from '../post-panel-row'; +/** + * Displays the template controls based on the current editor settings and user permissions. + * + * @return {JSX.Element|null} The rendered PostTemplatePanel component. + */ export default function PostTemplatePanel() { const { templateId, isBlockTheme } = useSelect( ( select ) => { const { getCurrentTemplateId, getEditorSettings } = From a4010b35b61b8f70a679ce80a744393f5d32cdf1 Mon Sep 17 00:00:00 2001 From: gemkev Date: Tue, 28 May 2024 12:04:22 +0100 Subject: [PATCH 04/30] Update tutorial.md (#62054) Unlinked contributors: gemkev. Co-authored-by: juanmaguitar Co-authored-by: fabiankaegy --- docs/getting-started/tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md index 1f33eeb146e6c4..b57391a806cf6a 100644 --- a/docs/getting-started/tutorial.md +++ b/docs/getting-started/tutorial.md @@ -781,7 +781,7 @@ This block validation error occurs because the `save()` function returns block c You will see more of these errors as you update the `save()` function in subsequent steps. Just click "Attempt Block Recovery" and update the page. -After preforming block recovery, open the Code editor and you will see the markup now looks like this. +After performing block recovery, open the Code editor and you will see the markup now looks like this. ```html From 9c95f91232be1ee45f63b6023bc5826505558c56 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Tue, 28 May 2024 04:29:23 -0700 Subject: [PATCH 05/30] Introduce `wp-on-async` directive as performant alternative over synchronous `wp-on` directive (#61885) * Improve typing for data-wp-on directive * Move yieldToMain to utils * fixup! Improve typing for data-wp-on directive * Introduce on-async directives * Use on-async directives in image block * Update changelog * Fix typo in comment --------- Co-authored-by: westonruter Co-authored-by: cbravobernal Co-authored-by: gziolo Co-authored-by: luisherranz --- packages/block-library/src/image/index.php | 18 ++--- packages/interactivity/CHANGELOG.md | 8 +- packages/interactivity/src/directives.tsx | 92 ++++++++++++++++++++-- packages/interactivity/src/hooks.tsx | 2 +- packages/interactivity/src/init.ts | 9 +-- packages/interactivity/src/utils.ts | 12 +++ 6 files changed, 113 insertions(+), 28 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 2351f6aad6c46c..7fe05b2209c812 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -188,12 +188,12 @@ function block_core_image_render_lightbox( $block_content, $block ) { // Image. $p->next_tag( 'img' ); $p->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' ); - $p->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' ); - $p->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' ); + $p->set_attribute( 'data-wp-on-async--load', 'callbacks.setButtonStyles' ); + $p->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' ); // Sets an event callback on the `img` because the `figure` element can also // contain a caption, and we don't want to trigger the lightbox when the // caption is clicked. - $p->set_attribute( 'data-wp-on--click', 'actions.showLightbox' ); + $p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' ); $body_content = $p->get_updated_html(); @@ -209,7 +209,7 @@ class="lightbox-trigger" aria-haspopup="dialog" aria-label="' . esc_attr( $aria_label ) . '" data-wp-init="callbacks.initTriggerButton" - data-wp-on--click="actions.showLightbox" + data-wp-on-async--click="actions.showLightbox" data-wp-style--right="context.imageButtonRight" data-wp-style--top="context.imageButtonTop" > @@ -258,12 +258,12 @@ class="wp-lightbox-overlay zoom" data-wp-class--show-closing-animation="state.showClosingAnimation" data-wp-watch="callbacks.setOverlayFocus" data-wp-on--keydown="actions.handleKeydown" - data-wp-on--touchstart="actions.handleTouchStart" + data-wp-on-async--touchstart="actions.handleTouchStart" data-wp-on--touchmove="actions.handleTouchMove" - data-wp-on--touchend="actions.handleTouchEnd" - data-wp-on--click="actions.hideLightbox" - data-wp-on-window--resize="callbacks.setOverlayStyles" - data-wp-on-window--scroll="actions.handleScroll" + data-wp-on-async--touchend="actions.handleTouchEnd" + data-wp-on-async--click="actions.hideLightbox" + data-wp-on-async-window--resize="callbacks.setOverlayStyles" + data-wp-on-async-window--scroll="actions.handleScroll" tabindex="-1" >