From 71640d2c64a66abdb2975223afa02a40a75676ce Mon Sep 17 00:00:00 2001 From: Dean Sas Date: Mon, 28 Oct 2024 10:54:13 +0000 Subject: [PATCH 1/7] Improve image carousel accessibility (#39913) Accessibility has been improved by reducing which images receive a tab index and an aria role of button. This has been done by moving it out of PHP, where it applied the two attributes to all images in the post, to setting it in javascript, alongside where the interactivity is being setup. An aria-label has been added for good measure. --- .../jetpack/changelog/improve-carousel-a11y | 4 + .../modules/carousel/jetpack-carousel.js | 90 +++++++++++-------- .../modules/carousel/jetpack-carousel.php | 3 +- 3 files changed, 60 insertions(+), 37 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/improve-carousel-a11y diff --git a/projects/plugins/jetpack/changelog/improve-carousel-a11y b/projects/plugins/jetpack/changelog/improve-carousel-a11y new file mode 100644 index 0000000000000..0b974fcbdfaca --- /dev/null +++ b/projects/plugins/jetpack/changelog/improve-carousel-a11y @@ -0,0 +1,4 @@ +Significance: patch +Type: bugfix + +Carousel: Further improve accessibility by being more selective over which images to apply attributes to diff --git a/projects/plugins/jetpack/modules/carousel/jetpack-carousel.js b/projects/plugins/jetpack/modules/carousel/jetpack-carousel.js index 63b684aeb9a91..be3a01c0657fc 100644 --- a/projects/plugins/jetpack/modules/carousel/jetpack-carousel.js +++ b/projects/plugins/jetpack/modules/carousel/jetpack-carousel.js @@ -377,6 +377,12 @@ } } + function makeGalleryImageAccessible( img ) { + img.role = 'button'; + img.tabIndex = 0; + img.ariaLabel = jetpackCarouselStrings.image_label; + } + function initializeCarousel() { if ( ! carousel.overlay ) { carousel.overlay = document.querySelector( '.jp-carousel-overlay' ); @@ -735,6 +741,8 @@ return; } + makeGalleryImageAccessible( image ); + // Make this node a gallery recognizable by event listener above. link.classList.add( 'single-image-gallery' ); // blog_id is needed to allow posting comments to correct blog. @@ -1579,6 +1587,11 @@ // Register the event listeners for starting the gallery document.body.addEventListener( 'click', handleInteraction ); document.body.addEventListener( 'keydown', handleInteraction ); + document.querySelectorAll( galleryItemSelector + 'img' ).forEach( function ( galleryImage ) { + if ( shouldOpenModal( galleryImage ) ) { + makeGalleryImageAccessible( galleryImage ); + } + } ); function handleInteraction( e ) { if ( e.type === 'click' ) { @@ -1598,6 +1611,47 @@ } } + function shouldOpenModal( el ) { + var parent = el.parentElement; + var grandparent = parent.parentElement; + + // If Gallery is made up of individual Image blocks check for custom link before + // loading carousel. The custom link may be the parent or could be a descendant + // of the parent if the image has rounded corners. + var parentHref = null; + if ( grandparent && grandparent.classList.contains( 'wp-block-image' ) ) { + parentHref = parent.getAttribute( 'href' ); + } else if ( + parent && + parent.classList.contains( 'wp-block-image' ) && + parent.querySelector( ':scope > a' ) + ) { + parentHref = parent.querySelector( ':scope > a' ).getAttribute( 'href' ); + } + + // If the link does not point to the attachment or media file then assume Image has + // a custom link so don't load the carousel. + if ( + parentHref && + parentHref.split( '?' )[ 0 ] !== el.getAttribute( 'data-orig-file' ).split( '?' )[ 0 ] && + parentHref !== el.getAttribute( 'data-permalink' ) + ) { + return false; + } + + // Do not open the modal if we are looking at a gallery caption from before WP5, which may contain a link. + if ( parent.classList.contains( 'gallery-caption' ) ) { + return false; + } + + // Do not open the modal if we are looking at a caption of a gallery block, which may contain a link. + if ( domUtil.matches( parent, 'figcaption' ) ) { + return false; + } + + return true; + } + function handleClick( e ) { var isCompatible = window.CSS && window.CSS.supports && window.CSS.supports( 'display', 'grid' ); @@ -1616,41 +1670,7 @@ return; } - var parent = target.parentElement; - var grandparent = parent.parentElement; - - // If Gallery is made up of individual Image blocks check for custom link before - // loading carousel. The custom link may be the parent or could be a descendant - // of the parent if the image has rounded corners. - var parentHref = null; - if ( grandparent && grandparent.classList.contains( 'wp-block-image' ) ) { - parentHref = parent.getAttribute( 'href' ); - } else if ( - parent && - parent.classList.contains( 'wp-block-image' ) && - parent.querySelector( ':scope > a' ) - ) { - parentHref = parent.querySelector( ':scope > a' ).getAttribute( 'href' ); - } - - // If the link does not point to the attachment or media file then assume Image has - // a custom link so don't load the carousel. - if ( - parentHref && - parentHref.split( '?' )[ 0 ] !== - target.getAttribute( 'data-orig-file' ).split( '?' )[ 0 ] && - parentHref !== target.getAttribute( 'data-permalink' ) - ) { - return; - } - - // Do not open the modal if we are looking at a gallery caption from before WP5, which may contain a link. - if ( parent.classList.contains( 'gallery-caption' ) ) { - return; - } - - // Do not open the modal if we are looking at a caption of a gallery block, which may contain a link. - if ( domUtil.matches( parent, 'figcaption' ) ) { + if ( ! shouldOpenModal( target ) ) { return; } diff --git a/projects/plugins/jetpack/modules/carousel/jetpack-carousel.php b/projects/plugins/jetpack/modules/carousel/jetpack-carousel.php index b979bbbbc2bcb..b7abb5fb2ab40 100644 --- a/projects/plugins/jetpack/modules/carousel/jetpack-carousel.php +++ b/projects/plugins/jetpack/modules/carousel/jetpack-carousel.php @@ -481,6 +481,7 @@ public function enqueue_assets() { 'post_comment' => __( 'Post Comment', 'jetpack' ), 'write_comment' => __( 'Write a Comment...', 'jetpack' ), 'loading_comments' => __( 'Loading Comments...', 'jetpack' ), + 'image_label' => __( 'Open image in full-screen.', 'jetpack' ), 'download_original' => sprintf( /* translators: %1s is the full-size image width, and %2s is the height. */ __( 'View full size %1$s×%2$s', 'jetpack' ), @@ -993,8 +994,6 @@ class_exists( 'Jetpack_AMP_Support' ) $attr['data-image-caption'] = esc_attr( htmlspecialchars( $attachment_caption, ENT_COMPAT ) ); $attr['data-medium-file'] = esc_attr( $medium_file ); $attr['data-large-file'] = esc_attr( $large_file ); - $attr['tabindex'] = '0'; - $attr['role'] = 'button'; return $attr; } From 74210e498b626b6132774e33059c9b3e908cf32f Mon Sep 17 00:00:00 2001 From: Kolja Zuelsdorf Date: Mon, 28 Oct 2024 13:15:41 +0100 Subject: [PATCH 2/7] Updated fuzzy hash sample for the Scan Helper with one of a bigger size. (#39750) * Updated fuzzy hash sample for the Scan Helper with one of a bigger size. * Exchanged fuzzy hash test file with a more reasonable placeholder content. --- .../changelog/update-scan-helper-fuzzy-hash-sample | 4 ++++ .../plugins/debug-helper/modules/class-scan-helper.php | 10 ++-------- 2 files changed, 6 insertions(+), 8 deletions(-) create mode 100644 projects/plugins/debug-helper/changelog/update-scan-helper-fuzzy-hash-sample diff --git a/projects/plugins/debug-helper/changelog/update-scan-helper-fuzzy-hash-sample b/projects/plugins/debug-helper/changelog/update-scan-helper-fuzzy-hash-sample new file mode 100644 index 0000000000000..5d1fd54c5d6ec --- /dev/null +++ b/projects/plugins/debug-helper/changelog/update-scan-helper-fuzzy-hash-sample @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Scan Helper: Update fuzzy hash sample to be bigger in size. diff --git a/projects/plugins/debug-helper/modules/class-scan-helper.php b/projects/plugins/debug-helper/modules/class-scan-helper.php index 8ef78155d7376..96ac407f965d3 100644 --- a/projects/plugins/debug-helper/modules/class-scan-helper.php +++ b/projects/plugins/debug-helper/modules/class-scan-helper.php @@ -581,14 +581,8 @@ private function fuzzy_hash_threat_exists() { * @return string|WP_Error Success message on success, WP_Error object on failure. */ private function generate_fuzzy_hash_threat() { - $content = base64_decode( - 'PEZpbGVzTWF0Y2ggIi4ocHl8ZXhlfHBocCkkIj4KIE9yZGVyIGFsbG93LGRlbnkKIERlbnkgZnJvbSBhbGwKPC9GaWxlc01hdG' . - 'NoPgo8RmlsZXNNYXRjaCAiXihhYm91dC5waHB8cmFkaW8ucGhwfGluZGV4LnBocHxjb250ZW50LnBocHxsb2NrMzYwLnBocCkkIj4KIE' . - '9yZGVyIGFsbG93LGRlbnkKIEFsbG93IGZyb20gYWxsCjwvRmlsZXNNYXRjaD4KPElmTW9kdWxlIG1vZF9yZXdyaXRlLmM+ClJld3JpdG' . - 'VFbmdpbmUgT24KUmV3cml0ZUJhc2UgLwpSZXdyaXRlUnVsZSBeaW5kZXhcLnBocCQgLSBbTF0KUmV3cml0ZUNvbmQgJXtSRVFVRVNUX0' . - 'ZJTEVOQU1FfSAhLWYKUmV3cml0ZUNvbmQgJXtSRVFVRVNUX0ZJTEVOQU1FfSAhLWQKUmV3cml0ZVJ1bGUgLiAvaW5kZXgucGhwIFtMXQ' . - 'o8L0lmTW9kdWxlPg==' - ); + // We need at least 4 kilobyte, 201 * 20 = 4020 bytes + $content = str_repeat( 'JETPACK-TEST-THREAT-', 201 ); if ( ! $this->write_file( $this->threats['fuzzy_hash_file'], $content ) ) { return new WP_Error( 'could-not-write', "Unable to write threat to {$this->threats['fuzzy_hash_file']}" ); From 291b09e5e6854863d15ab38504a34c6d267af89a Mon Sep 17 00:00:00 2001 From: Karen Attfield Date: Mon, 28 Oct 2024 12:40:29 +0000 Subject: [PATCH 3/7] WordPress 6.7 compatibility: Add __nextHasNoMarginBottom to controls to prevent deprecation notices (#39877) --- ...ase-control-bottom-margin-style-deprecation | 4 ++++ .../connection-management/mark-as-shared.tsx | 1 + .../components/message-box-control/index.js | 1 + .../src/components/panel/index.jsx | 1 + .../social-image-generator/panel/index.js | 1 + .../social-image-generator/panel/modal.js | 2 ++ .../social-post-modal/preview-section.tsx | 1 + ...ase-control-bottom-margin-style-deprecation | 4 ++++ ...ck-crm-integration-settings-plugin-state.js | 1 + .../jetpack-crm-integration-settings.js | 2 +- .../jetpack-email-connection-settings.js | 2 ++ .../components/jetpack-field-checkbox.js | 3 +++ .../components/jetpack-field-consent.js | 4 +++- .../components/jetpack-field-controls.js | 8 ++++++++ .../components/jetpack-field-datepicker.js | 1 + .../components/jetpack-field-width.js | 1 + .../jetpack-newsletter-integration-settings.js | 2 +- .../jetpack-salesforce-lead-form-settings.js | 3 ++- .../forms/src/blocks/contact-form/edit.js | 4 ++++ .../components/welcome-flow/EvaluationStep.tsx | 1 + ...ase-control-bottom-margin-style-deprecation | 4 ++++ ...ase-control-bottom-margin-style-deprecation | 4 ++++ .../sidebar/excluded-post-types-control.jsx | 1 + .../components/sidebar/sidebar-options.jsx | 7 +++++++ ...ase-control-bottom-margin-style-deprecation | 4 ++++ .../components/edit-video-details/index.tsx | 3 +++ .../components/color-panel/index.native.js | 1 + .../video/components/color-panel/index.tsx | 1 + .../components/details-panel/index.native.js | 1 + .../video/components/details-panel/index.tsx | 2 ++ .../components/playback-panel/index.native.js | 6 ++++++ .../video/components/playback-panel/index.tsx | 6 ++++++ .../video/components/poster-panel/index.tsx | 2 ++ .../privacy-and-rating-settings.native.js | 4 ++++ .../privacy-and-rating-settings.tsx | 4 ++++ .../components/tracks-control/track-form.tsx | 4 ++++ .../videopress-uploader/uploader-editor.js | 2 +- .../videopress-uploader/uploader-progress.js | 1 + .../components/timestamp-control/index.tsx | 3 ++- .../stories/index.stories.tsx | 1 + .../components/video-frame-selector/index.jsx | 1 + .../image-cdn-liar/image-cdn-liar.tsx | 1 + ...ase-control-bottom-margin-style-deprecation | 4 ++++ .../client/components/tree-selector/index.jsx | 1 + ...ase-control-bottom-margin-style-deprecation | 4 ++++ .../ai-chat/components/feedback/index.js | 1 + .../extensions/blocks/ai-chat/controls.js | 5 +++++ .../jetpack/extensions/blocks/ai-chat/edit.js | 1 + .../blocks/ai-chat/question-answer.js | 1 + .../extensions/blocks/blogging-prompt/edit.js | 2 ++ .../jetpack/extensions/blocks/blogroll/edit.js | 4 ++++ .../extensions/blocks/cookie-consent/edit.js | 2 ++ .../extensions/blocks/donations/controls.js | 3 +++ .../blocks/google-docs-embed/edit.js | 1 + .../jetpack/extensions/blocks/like/edit.js | 1 + .../blocks/map/component/info-window/mapkit.js | 2 ++ .../extensions/blocks/map/component/mapbox.js | 2 ++ .../blocks/map/location-search/mapbox.js | 1 + .../blocks/map/location-search/mapkit.js | 1 + .../extensions/blocks/map/locations/index.js | 2 ++ .../extensions/blocks/opentable/edit.js | 4 ++++ .../blocks/opentable/restaurant-picker.js | 1 + .../extensions/blocks/podcast-player/edit.js | 6 ++++++ .../premium-content/login-button/edit.js | 1 + .../extensions/blocks/rating-star/edit.js | 1 + .../extensions/blocks/recipe/details/edit.js | 4 ++++ .../extensions/blocks/subscriber-login/edit.js | 18 ++++++++++++++++-- .../blocks/tiled-gallery/controls.js | 3 +++ .../jetpack/extensions/blocks/tock/edit.js | 2 ++ .../extensions/blocks/videopress/edit.js | 9 +++++++++ .../videopress/seekbar-color-settings.js | 1 + .../blocks/videopress/tracks-editor.js | 3 +++ .../videopress/uploading-editor/index.js | 4 +++- .../ai-assistant-plugin-sidebar/index.tsx | 10 +++++----- .../components/breve/controls.tsx | 6 ++++-- .../components/usage-bar/index.tsx | 2 +- .../components/ai-excerpt-control/index.tsx | 6 +++++- .../extend/ai-post-excerpt/index.tsx | 1 + .../extensions/plugins/likes/likes-checkbox.js | 1 + .../extensions/plugins/seo/counted-textarea.js | 8 +++++++- .../extensions/plugins/seo/noindex-panel.js | 1 + .../components/show-sharing-control/index.js | 1 + .../extensions/shared/clipboard-input.js | 7 ++++++- .../ai-model-selector-control/index.tsx | 1 + .../inspector-control.js | 5 +++++ .../sources/google-photos/filter-option.js | 3 +++ .../sources/google-photos/filter-view.js | 1 + .../google-photos/google-photos-media.js | 1 + .../shared/external-media/sources/openverse.js | 1 + .../shared/external-media/sources/pexels.js | 1 + .../extensions/shared/memberships/settings.js | 1 + .../modules/widget-visibility/editor/index.jsx | 1 + ...ase-control-bottom-margin-style-deprecation | 4 ++++ .../src/js/routes/firewall/firewall-footer.jsx | 2 ++ ...ase-control-bottom-margin-style-deprecation | 4 ++++ .../components/social-notes-toggle/index.tsx | 2 ++ .../src/js/components/toggle-section/index.tsx | 1 + 97 files changed, 256 insertions(+), 20 deletions(-) create mode 100644 projects/js-packages/publicize-components/changelog/update-base-control-bottom-margin-style-deprecation create mode 100644 projects/packages/forms/changelog/update-base-control-bottom-margin-style-deprecation create mode 100644 projects/packages/my-jetpack/changelog/update-base-control-bottom-margin-style-deprecation create mode 100644 projects/packages/search/changelog/update-base-control-bottom-margin-style-deprecation create mode 100644 projects/packages/videopress/changelog/update-base-control-bottom-margin-style-deprecation create mode 100644 projects/plugins/boost/changelog/update-base-control-bottom-margin-style-deprecation create mode 100644 projects/plugins/jetpack/changelog/update-base-control-bottom-margin-style-deprecation create mode 100644 projects/plugins/protect/changelog/update-base-control-bottom-margin-style-deprecation create mode 100644 projects/plugins/social/changelog/update-base-control-bottom-margin-style-deprecation diff --git a/projects/js-packages/publicize-components/changelog/update-base-control-bottom-margin-style-deprecation b/projects/js-packages/publicize-components/changelog/update-base-control-bottom-margin-style-deprecation new file mode 100644 index 0000000000000..b15eec1ee9e9a --- /dev/null +++ b/projects/js-packages/publicize-components/changelog/update-base-control-bottom-margin-style-deprecation @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Components: Add __nextHasNoMarginBottom to BaseControl-based components, preventing deprecation notices. diff --git a/projects/js-packages/publicize-components/src/components/connection-management/mark-as-shared.tsx b/projects/js-packages/publicize-components/src/components/connection-management/mark-as-shared.tsx index 913a1c9b2016f..d11f32b3dab76 100644 --- a/projects/js-packages/publicize-components/src/components/connection-management/mark-as-shared.tsx +++ b/projects/js-packages/publicize-components/src/components/connection-management/mark-as-shared.tsx @@ -45,6 +45,7 @@ export function MarkAsShared( { connection }: MarkAsSharedProps ) { onChange={ onChange } disabled={ isUpdating || connection.status === 'broken' } label={ __( 'Mark the connection as shared', 'jetpack' ) } + __nextHasNoMarginBottom={ true } /> ); } diff --git a/projects/js-packages/publicize-components/src/components/message-box-control/index.js b/projects/js-packages/publicize-components/src/components/message-box-control/index.js index 76c62f701fd96..f9be2097578d2 100644 --- a/projects/js-packages/publicize-components/src/components/message-box-control/index.js +++ b/projects/js-packages/publicize-components/src/components/message-box-control/index.js @@ -55,6 +55,7 @@ export default function MessageBoxControl( { _n( '%d character remaining', '%d characters remaining', charactersRemaining, 'jetpack' ), charactersRemaining ) } + __nextHasNoMarginBottom={ true } /> ); } diff --git a/projects/js-packages/publicize-components/src/components/panel/index.jsx b/projects/js-packages/publicize-components/src/components/panel/index.jsx index 710d7031b6216..06166ee4d26f0 100644 --- a/projects/js-packages/publicize-components/src/components/panel/index.jsx +++ b/projects/js-packages/publicize-components/src/components/panel/index.jsx @@ -68,6 +68,7 @@ const PublicizePanel = ( { prePublish, children } ) => { onChange={ togglePublicizeFeature } checked={ isPublicizeEnabled && hasConnections } disabled={ ! hasConnections } + __nextHasNoMarginBottom={ true } /> ) } diff --git a/projects/js-packages/publicize-components/src/components/social-image-generator/panel/index.js b/projects/js-packages/publicize-components/src/components/social-image-generator/panel/index.js index fd5f7ec71fd26..6d2f903aeb541 100644 --- a/projects/js-packages/publicize-components/src/components/social-image-generator/panel/index.js +++ b/projects/js-packages/publicize-components/src/components/social-image-generator/panel/index.js @@ -51,6 +51,7 @@ const SocialImageGeneratorPanel = ( { prePublish = false } ) => { help={ ! isEnabled ? __( 'Social Image is disabled for this post.', 'jetpack' ) : '' } checked={ isEnabled } onChange={ setIsEnabled } + __nextHasNoMarginBottom={ true } /> { isEnabled && ( <> diff --git a/projects/js-packages/publicize-components/src/components/social-image-generator/panel/modal.js b/projects/js-packages/publicize-components/src/components/social-image-generator/panel/modal.js index ed6f8b475f6f0..cc430bb371e05 100644 --- a/projects/js-packages/publicize-components/src/components/social-image-generator/panel/modal.js +++ b/projects/js-packages/publicize-components/src/components/social-image-generator/panel/modal.js @@ -70,6 +70,7 @@ const SocialImageGeneratorSettingsModal = ( { onClose } ) => { { label: __( 'No Image', 'jetpack' ), value: 'none' }, ] } onChange={ setEditedImageType } + __nextHasNoMarginBottom={ true } /> { localImageType === 'custom' && ( @@ -92,6 +93,7 @@ const SocialImageGeneratorSettingsModal = ( { onClose } ) => { 'By default the post title is used for the image. You can use this field to set your own text.', 'jetpack' ) } + __nextHasNoMarginBottom={ true } /> { __( 'Templates', 'jetpack' ) } diff --git a/projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx b/projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx index 3a917dd4882a1..dd81de8c1285e 100644 --- a/projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx +++ b/projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx @@ -98,6 +98,7 @@ export function PreviewSection() { } checked={ isEnabled } onChange={ toggleConnection( tab.connection_id, tab ) } + __nextHasNoMarginBottom={ true } /> ) : null } diff --git a/projects/packages/forms/changelog/update-base-control-bottom-margin-style-deprecation b/projects/packages/forms/changelog/update-base-control-bottom-margin-style-deprecation new file mode 100644 index 0000000000000..b15eec1ee9e9a --- /dev/null +++ b/projects/packages/forms/changelog/update-base-control-bottom-margin-style-deprecation @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Components: Add __nextHasNoMarginBottom to BaseControl-based components, preventing deprecation notices. diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-crm-integration/jetpack-crm-integration-settings-plugin-state.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-crm-integration/jetpack-crm-integration-settings-plugin-state.js index a5812bfc8c0d1..f12a4cf58c657 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-crm-integration/jetpack-crm-integration-settings-plugin-state.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-crm-integration/jetpack-crm-integration-settings-plugin-state.js @@ -126,6 +126,7 @@ const CRMPluginIsActive = ( { crmData, setCRMData, jetpackCRM, setAttributes } ) checked={ jetpackCRM } onChange={ value => setAttributes( { jetpackCRM: value } ) } help={ __( 'Store contact form submissions in your CRM.', 'jetpack-forms' ) } + __nextHasNoMarginBottom={ true } /> ); }; diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-crm-integration/jetpack-crm-integration-settings.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-crm-integration/jetpack-crm-integration-settings.js index b56a398b80bb9..2ecbb722c1a9a 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-crm-integration/jetpack-crm-integration-settings.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-crm-integration/jetpack-crm-integration-settings.js @@ -65,7 +65,7 @@ const CRMPluginData = ( { jetpackCRM, setAttributes } ) => { const CRMIntegrationSettings = ( { jetpackCRM, setAttributes } ) => { return ( - + ); diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-email-connection-settings.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-email-connection-settings.js index c7fb6fd26529c..77579069223b4 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-email-connection-settings.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-email-connection-settings.js @@ -109,6 +109,7 @@ const JetpackEmailConnectionSettings = ( { 'You can enter multiple email addresses separated by commas.', 'jetpack-forms' ) } + __nextHasNoMarginBottom={ true } /> @@ -120,6 +121,7 @@ const JetpackEmailConnectionSettings = ( { value={ emailSubject } placeholder={ __( 'Enter a subject', 'jetpack-forms' ) } onChange={ newSubject => setAttributes( { subject: newSubject } ) } + __nextHasNoMarginBottom={ true } /> ); diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js index 06a0782c60db0..d6d18dc61379f 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js @@ -63,6 +63,7 @@ function JetpackFieldCheckbox( props ) { label={ __( 'Checked by default', 'jetpack-forms' ) } checked={ defaultValue } onChange={ value => setAttributes( { defaultValue: value ? 'true' : '' } ) } + __nextHasNoMarginBottom={ true } /> @@ -77,6 +78,7 @@ function JetpackFieldCheckbox( props ) { checked={ required } onChange={ value => setAttributes( { required: value } ) } help={ __( 'You can edit the "required" label in the editor', 'jetpack-forms' ) } + __nextHasNoMarginBottom={ true } /> @@ -85,6 +87,7 @@ function JetpackFieldCheckbox( props ) { checked={ attributes.shareFieldAttributes } onChange={ value => setAttributes( { shareFieldAttributes: value } ) } help={ __( 'Deactivate for individual styling of this block', 'jetpack-forms' ) } + __nextHasNoMarginBottom={ true } /> setAttributes( { shareFieldAttributes: value } ) } help={ __( 'Deactivate for individual styling of this block', 'jetpack-forms' ) } + __nextHasNoMarginBottom={ true } /> - + setAttributes( { consentType: value } ) } + __nextHasNoMarginBottom={ true } /> diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js index d9dcda1926c5c..23e65e7e64f51 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js @@ -113,6 +113,7 @@ const JetpackFieldControls = ( { checked={ required } onChange={ value => setAttributes( { required: value } ) } help={ __( 'You can edit the "required" label in the editor', 'jetpack-forms' ) } + __nextHasNoMarginBottom={ true } />, ! hidePlaceholder && ( ), , @@ -133,6 +135,7 @@ const JetpackFieldControls = ( { checked={ attributes.shareFieldAttributes } onChange={ value => setAttributes( { shareFieldAttributes: value } ) } help={ __( 'Deactivate for individual styling of this block', 'jetpack-forms' ) } + __nextHasNoMarginBottom={ true } />, ]; @@ -203,6 +206,7 @@ const JetpackFieldControls = ( { onChange={ setNumberAttribute( 'buttonBorderWidth' ) } min={ 0 } max={ 100 } + __nextHasNoMarginBottom={ true } /> ) } @@ -223,6 +228,7 @@ const JetpackFieldControls = ( { onChange={ setNumberAttribute( 'borderWidth' ) } min={ 0 } max={ 100 } + __nextHasNoMarginBottom={ true } /> ) } @@ -266,6 +273,7 @@ const JetpackFieldControls = ( { "Customize the input's name/ID. Only alphanumeric, dash and underscore characters are allowed", 'jetpack-forms' ) } + __nextHasNoMarginBottom={ true } /> diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js index ab41c2a6d3977..47188aa488e71 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js @@ -97,6 +97,7 @@ const JetpackDatePicker = props => { 'Select the format in which the date will be displayed.', 'jetpack-forms' ) } + __nextHasNoMarginBottom={ true } /> ), }, diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-width.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-width.js index c6c3eaf69fc19..e56af4a8f2234 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-width.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-width.js @@ -9,6 +9,7 @@ export default function JetpackFieldWidth( { setAttributes, width } ) { 'jetpack-forms' ) } className="jetpack-field-label__width" + __nextHasNoMarginBottom={ true } > { __( 'Field Width', 'jetpack-forms' ) } diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-newsletter-integration-settings.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-newsletter-integration-settings.js index 56091b44ab7c4..651d52c49a37e 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-newsletter-integration-settings.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-newsletter-integration-settings.js @@ -4,7 +4,7 @@ import CreativeMailPlugin from './jetpack-newsletter-integration-settings-creati const NewsletterIntegrationSettings = () => { return ( - + diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-salesforce-lead-form/jetpack-salesforce-lead-form-settings.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-salesforce-lead-form/jetpack-salesforce-lead-form-settings.js index 989d8aa665215..343b9ec1fce2b 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-salesforce-lead-form/jetpack-salesforce-lead-form-settings.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-salesforce-lead-form/jetpack-salesforce-lead-form-settings.js @@ -129,7 +129,7 @@ export default ( { salesforceData, setAttributes, instanceId } ) => { return ( - + { onBlur={ onBlurOrgIdField } onChange={ setOrganizationId } help={ __( 'Enter the Salesforce organization ID to send Leads to.', 'jetpack-forms' ) } + __nextHasNoMarginBottom={ true } /> { organizationIdError && ( diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js index 80d281df06f45..1dc222dacf1da 100644 --- a/projects/packages/forms/src/blocks/contact-form/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/edit.js @@ -174,6 +174,7 @@ export const JetpackContactFormEdit = forwardRef( { label: __( 'Redirect to another webpage', 'jetpack-forms' ), value: 'redirect' }, ] } onChange={ newMessage => setAttributes( { customThankyou: newMessage } ) } + __nextHasNoMarginBottom={ true } /> { 'redirect' !== customThankyou && ( @@ -182,6 +183,7 @@ export const JetpackContactFormEdit = forwardRef( value={ customThankyouHeading } placeholder={ __( 'Your message has been sent', 'jetpack-forms' ) } onChange={ newHeading => setAttributes( { customThankyouHeading: newHeading } ) } + __nextHasNoMarginBottom={ true } /> ) } @@ -191,6 +193,7 @@ export const JetpackContactFormEdit = forwardRef( value={ customThankyouMessage } placeholder={ __( 'Thank you for your submission!', 'jetpack-forms' ) } onChange={ newMessage => setAttributes( { customThankyouMessage: newMessage } ) } + __nextHasNoMarginBottom={ true } /> ) } @@ -198,6 +201,7 @@ export const JetpackContactFormEdit = forwardRef( ) ) }
diff --git a/projects/packages/my-jetpack/changelog/update-base-control-bottom-margin-style-deprecation b/projects/packages/my-jetpack/changelog/update-base-control-bottom-margin-style-deprecation new file mode 100644 index 0000000000000..b15eec1ee9e9a --- /dev/null +++ b/projects/packages/my-jetpack/changelog/update-base-control-bottom-margin-style-deprecation @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Components: Add __nextHasNoMarginBottom to BaseControl-based components, preventing deprecation notices. diff --git a/projects/packages/search/changelog/update-base-control-bottom-margin-style-deprecation b/projects/packages/search/changelog/update-base-control-bottom-margin-style-deprecation new file mode 100644 index 0000000000000..b15eec1ee9e9a --- /dev/null +++ b/projects/packages/search/changelog/update-base-control-bottom-margin-style-deprecation @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Components: Add __nextHasNoMarginBottom to BaseControl-based components, preventing deprecation notices. diff --git a/projects/packages/search/src/customberg/components/sidebar/excluded-post-types-control.jsx b/projects/packages/search/src/customberg/components/sidebar/excluded-post-types-control.jsx index 6e52bac68f12d..5d9d660b4ffcb 100644 --- a/projects/packages/search/src/customberg/components/sidebar/excluded-post-types-control.jsx +++ b/projects/packages/search/src/customberg/components/sidebar/excluded-post-types-control.jsx @@ -58,6 +58,7 @@ export default function ExcludedPostTypesControl( { label={ VALID_POST_TYPES[ type ].name } onChange={ changeHandler( type ) } value={ type } + __nextHasNoMarginBottom={ true } /> ) ) }
diff --git a/projects/packages/search/src/customberg/components/sidebar/sidebar-options.jsx b/projects/packages/search/src/customberg/components/sidebar/sidebar-options.jsx index 48c9c819f50f2..22dee07d2f24d 100644 --- a/projects/packages/search/src/customberg/components/sidebar/sidebar-options.jsx +++ b/projects/packages/search/src/customberg/components/sidebar/sidebar-options.jsx @@ -104,6 +104,7 @@ export default function SidebarOptions() { value={ sort } options={ sortOptions } onChange={ setSort } + __nextHasNoMarginBottom={ true } /> { 'expanded' === resultFormat && ( ) } { ! isFreePlan && ( @@ -171,6 +177,7 @@ export default function SidebarOptions() { disabled={ isDisabled } label={ __( 'Show "Powered by Jetpack"', 'jetpack-search-pkg' ) } onChange={ setShowLogo } + __nextHasNoMarginBottom={ true } /> ) } diff --git a/projects/packages/videopress/changelog/update-base-control-bottom-margin-style-deprecation b/projects/packages/videopress/changelog/update-base-control-bottom-margin-style-deprecation new file mode 100644 index 0000000000000..b15eec1ee9e9a --- /dev/null +++ b/projects/packages/videopress/changelog/update-base-control-bottom-margin-style-deprecation @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Components: Add __nextHasNoMarginBottom to BaseControl-based components, preventing deprecation notices. diff --git a/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx b/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx index 61982c0e5930a..a0208bdd8241d 100644 --- a/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx +++ b/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx @@ -371,6 +371,7 @@ const EditVideoDetails = () => { value: VIDEO_PRIVACY_LEVEL_PRIVATE, }, ] } + __nextHasNoMarginBottom={ true } /> ) } { isFetchingData ? ( @@ -388,6 +389,7 @@ const EditVideoDetails = () => { 'jetpack-videopress-pkg' ) } onChange={ value => setDisplayEmbed( value ? 1 : 0 ) } + __nextHasNoMarginBottom={ true } /> ) } @@ -406,6 +408,7 @@ const EditVideoDetails = () => { 'jetpack-videopress-pkg' ) } onChange={ value => setAllowDownload( value ? 1 : 0 ) } + __nextHasNoMarginBottom={ true } /> ) } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.native.js index 1942e26468ef4..34d26df869c70 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.native.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.native.js @@ -86,6 +86,7 @@ export default function ColorPanel( { attributes, setAttributes } ) { setAttributes( { useAverageColor: newUseAverageColor } ) } checked={ useAverageColor } + __nextHasNoMarginBottom={ true } /> diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.tsx index 3f7e6474e8fb7..42cb91a4c3753 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.tsx +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/color-panel/index.tsx @@ -90,6 +90,7 @@ export default function ColorPanel( { clientId, attributes, setAttributes }: Vid } onChange={ newUseAverageColor => setAttributes( { useAverageColor: newUseAverageColor } ) } checked={ useAverageColor } + __nextHasNoMarginBottom={ true } /> { ! useAverageColor && ( diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/index.native.js index 2d68c58936ee0..98344c3ed3191 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/index.native.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/details-panel/index.native.js @@ -34,6 +34,7 @@ export default function DetailsPanel( { attributes, setAttributes, videoBelongTo placeholder={ titlePlaceholder } label={ __( 'Title', 'jetpack-videopress-pkg' ) } disabled={ ! videoBelongToSite } + __nextHasNoMarginBottom={ true } /> setAttributes( { title: value } ) } disabled={ isRequestingVideoData || !! updateError || ! videoBelongToSite } + __nextHasNoMarginBottom={ true } /> { ! hasUploadedChapters && hasIncompleteChapters && ( diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/playback-panel/index.native.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/playback-panel/index.native.js index bd8f632905fda..7d6d3fdcdc817 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/playback-panel/index.native.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/playback-panel/index.native.js @@ -107,6 +107,7 @@ export default function PlaybackPanel( { attributes, setAttributes } ) { checked={ autoplay && ! isPreviewOnHoverEnabled } disabled={ isPreviewOnHoverEnabled } help={ } + __nextHasNoMarginBottom={ true } /> diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/playback-panel/index.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/components/playback-panel/index.tsx index b2636a4fd1f1c..5718058ae43c7 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/playback-panel/index.tsx +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/playback-panel/index.tsx @@ -77,6 +77,7 @@ export default function PlaybackPanel( { attributes, setAttributes }: VideoContr checked={ autoplay && ! isPreviewOnHoverEnabled } disabled={ isPreviewOnHoverEnabled } help={ } + __nextHasNoMarginBottom={ true } /> { createInterpolateElement( diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/index.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/index.tsx index 48a9537c51d09..0b1b003a49f34 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/index.tsx +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/index.tsx @@ -395,6 +395,7 @@ export function VideoHoverPreviewControl( { checked={ previewOnHover } onChange={ onPreviewOnHoverChange } disabled={ ! previewOnHover && disabled } + __nextHasNoMarginBottom={ true } /> { previewOnHover && ( @@ -551,6 +552,7 @@ export default function PosterPanel( { checked={ pickPosterFromFrame && videoBelongToSite } onChange={ switchPosterSource } disabled={ ! videoBelongToSite } + __nextHasNoMarginBottom={ true } />
{ ! videoBelongToSite && } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/privacy-and-rating-panel/privacy-and-rating-settings.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/components/privacy-and-rating-panel/privacy-and-rating-settings.tsx index 1bff6857e5e32..4660e0c69c38c 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/privacy-and-rating-panel/privacy-and-rating-settings.tsx +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/privacy-and-rating-panel/privacy-and-rating-settings.tsx @@ -84,6 +84,7 @@ export default function PrivacyAndRatingSettings( { setAttributes( { rating: value } ); } } disabled={ ! videoBelongToSite } + __nextHasNoMarginBottom={ true } /> ); diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/tracks-control/track-form.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/components/tracks-control/track-form.tsx index 0a5491bc53cc9..fda27567b1879 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/tracks-control/track-form.tsx +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/tracks-control/track-form.tsx @@ -172,6 +172,7 @@ export default function TrackForm( { value={ track.label } help={ __( 'Title of track', 'jetpack-videopress-pkg' ) } disabled={ isSavingTrack } + __nextHasNoMarginBottom={ true } />
updateTrack( 'kind', newKind ) } disabled={ isSavingTrack } + __nextHasNoMarginBottom={ true } /> { error && ( @@ -210,6 +213,7 @@ export default function TrackForm( { label={ __( 'Track exists. Replace?', 'jetpack-videopress-pkg' ) } checked={ replaceTrack } onChange={ setReplaceTrack } + __nextHasNoMarginBottom={ true } /> ) }