From ad4da873ce4604dfb9bbb2752a7bcfeea7db5204 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 8 Jan 2025 09:19:22 +0400 Subject: [PATCH 1/7] Try: Fix e2e tests 'visitSiteEditor' helper (#68534) Co-authored-by: Mamaduka --- .../src/admin/visit-site-editor.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts index 21bf56b578b57..1e79a30306e4c 100644 --- a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts +++ b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts @@ -39,6 +39,15 @@ export async function visitSiteEditor( await this.visitAdminPage( 'site-editor.php', query.toString() ); + if ( ! options.showWelcomeGuide ) { + await this.editor.setPreferences( 'core/edit-site', { + welcomeGuide: false, + welcomeGuideStyles: false, + welcomeGuidePage: false, + welcomeGuideTemplate: false, + } ); + } + /** * @todo This is a workaround for the fact that the editor canvas is seen as * ready and visible before the loading spinner is hidden. Ideally, the @@ -63,13 +72,4 @@ export async function visitSiteEditor( timeout: 60_000, } ); } - - if ( ! options.showWelcomeGuide ) { - await this.editor.setPreferences( 'core/edit-site', { - welcomeGuide: false, - welcomeGuideStyles: false, - welcomeGuidePage: false, - welcomeGuideTemplate: false, - } ); - } } From c7c09cfe16c78f9a949956e5d0088cd4c747bdca Mon Sep 17 00:00:00 2001 From: Himanshu Pathak Date: Wed, 8 Jan 2025 14:01:28 +0530 Subject: [PATCH 2/7] Block Library: Standardize reduced motion handling with media queries (#68315) * A11y: Update animation/transition styles with reduced motion media queries * Ally: Make the media queries consistent for reduce motion preference * Block Library: Standardize reduced motion handling using media queries * A11y: Remove the unnecessary transition to the anchor element Co-authored-by: himanshupathak95 Co-authored-by: t-hamano --- .../block-library/src/freeform/editor.scss | 7 +++--- .../block-library/src/gallery/editor.scss | 6 +++-- packages/block-library/src/image/style.scss | 24 +++++++++++++------ .../block-library/src/navigation/style.scss | 11 +++++---- .../block-library/src/social-links/style.scss | 6 ++--- 5 files changed, 35 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/freeform/editor.scss b/packages/block-library/src/freeform/editor.scss index c2256ecd7a795..2dd15359d8bad 100644 --- a/packages/block-library/src/freeform/editor.scss +++ b/packages/block-library/src/freeform/editor.scss @@ -240,12 +240,13 @@ div[data-type="core/freeform"] { &::before { - transition: border-color 0.1s linear, box-shadow 0.1s linear; - @include reduce-motion("transition"); border: $border-width solid $gray-300; - // Windows High Contrast mode will show this outline. outline: $border-width solid transparent; + + @media not (prefers-reduced-motion) { + transition: border-color 0.1s linear, box-shadow 0.1s linear; + } } &.is-selected::before { diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 61121f3dd866d..d204d0347d8eb 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -137,12 +137,14 @@ top: -2px; margin: $grid-unit-10; z-index: z-index(".block-library-gallery-item__inline-menu"); - transition: box-shadow 0.2s ease-out; - @include reduce-motion("transition"); border-radius: $radius-small; background: $white; border: $border-width solid $gray-900; + @media not (prefers-reduced-motion) { + transition: box-shadow 0.2s ease-out; + } + &:hover { box-shadow: $elevation-x-small; } diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 8ca5795cfd911..117045f7dce62 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -11,7 +11,7 @@ vertical-align: bottom; box-sizing: border-box; - @media (prefers-reduced-motion: no-preference) { + @media not (prefers-reduced-motion) { &.hide { visibility: hidden; } @@ -167,7 +167,9 @@ text-align: center; padding: 0; border-radius: 4px; - transition: opacity 0.2s ease; + @media not (prefers-reduced-motion) { + transition: opacity 0.2s ease; + } &:focus-visible { outline: 3px auto rgb(90 90 90 / 25%); @@ -280,21 +282,29 @@ // or faster than the scrim to give a sense of depth. &.active { visibility: visible; - animation: both turn-on-visibility 0.25s; + @media not (prefers-reduced-motion) { + animation: both turn-on-visibility 0.25s; + } img { - animation: both turn-on-visibility 0.35s; + @media not (prefers-reduced-motion) { + animation: both turn-on-visibility 0.35s; + } } } &.show-closing-animation { &:not(.active) { - animation: both turn-off-visibility 0.35s; + @media not (prefers-reduced-motion) { + animation: both turn-off-visibility 0.35s; + } img { - animation: both turn-off-visibility 0.25s; + @media not (prefers-reduced-motion) { + animation: both turn-off-visibility 0.25s; + } } } } - @media (prefers-reduced-motion: no-preference) { + @media not (prefers-reduced-motion) { &.zoom { &.active { opacity: 1; diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 5f49eba466a5f..ab93fa7da67ef 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -166,7 +166,9 @@ $navigation-icon-size: 24px; // Hide until hover or focus within. opacity: 0; - transition: opacity 0.1s linear; + @media not (prefers-reduced-motion) { + transition: opacity 0.1s linear; + } visibility: hidden; // Don't take up space when the menu is collapsed. @@ -502,9 +504,10 @@ button.wp-block-navigation-item__content { background-color: inherit; // Animation. - animation: overlay-menu__fade-in-animation 0.1s ease-out; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not (prefers-reduced-motion) { + animation: overlay-menu__fade-in-animation 0.1s ease-out; + animation-fill-mode: forwards; + } // Try to inherit any root paddings set, so the X can align to a top-right aligned menu. padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem); diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 955c0434feea2..9df3a7d5dde6d 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -70,8 +70,9 @@ .wp-block-social-link { display: block; border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized. - transition: transform 0.1s ease; - @include reduce-motion("transition"); + @media not (prefers-reduced-motion) { + transition: transform 0.1s ease; + } // Dimensions. height: auto; @@ -80,7 +81,6 @@ align-items: center; display: flex; line-height: 0; - transition: transform 0.1s ease; } &:hover { From b363d9714eaf0763da261b272c4c4457d6a0114b Mon Sep 17 00:00:00 2001 From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com> Date: Wed, 8 Jan 2025 14:09:16 +0530 Subject: [PATCH 3/7] Fix text direction for URL and email fields in block editor for RTL languages (#68188) * fix: Add ltr for email and url * style: Add CSS for email/url in component * fix: Revert extra file change * fix: add ltr for email and url in the textcontrol component * revert: Changes for textcontrol reverted * fix: Add directionStyles for input-control-styles * style: Add direction ltr for email and url for rtl languages * style: Add ltr for placeholder * doc: Add log for InputControl ltr alignment change * fix: Remove ltr CSS for placeholder * doc: Add Log in unreleased section and updated log to refer to PR * doc: Remove log in the Bug Fixes header Co-authored-by: im3dabasia Co-authored-by: t-hamano Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- .../block-editor/src/components/media-placeholder/index.js | 1 + packages/block-library/src/rss/edit.js | 1 + packages/components/CHANGELOG.md | 4 ++++ .../src/input-control/styles/input-control-styles.tsx | 6 ++++++ 4 files changed, 12 insertions(+) diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index b19411893b86c..e19e350f959b2 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/packages/block-editor/src/components/media-placeholder/index.js @@ -47,6 +47,7 @@ const InsertFromURLPopover = ( { ` &::-webkit-input-placeholder { line-height: normal; } + + &[type='email'], + &[type='url'] { + /* rtl:ignore */ + direction: ltr; + } } `; From 54f59fece2d9abd28fea97f3c2273dd9fc6e0eb8 Mon Sep 17 00:00:00 2001 From: Karthick M <97787966+karthick-murugan@users.noreply.github.com> Date: Wed, 8 Jan 2025 15:10:29 +0530 Subject: [PATCH 4/7] Differentiate 'Copy' and 'Copy styles' snackbar confirmation messages (#68167) * Image size fix in lightbox * Revert "Image size fix in lightbox" This reverts commit 63f81c1e9cbb3b0513abca2b8cb579fef374ed7b. * Update Snackbar messages for copy event Co-authored-by: karthick-murugan Co-authored-by: t-hamano Co-authored-by: richtabor Co-authored-by: afercia --- .../src/components/block-actions/index.js | 3 - .../block-settings-dropdown.js | 18 +++- .../block-editor/src/utils/use-notify-copy.js | 94 ++++++++++--------- 3 files changed, 67 insertions(+), 48 deletions(-) diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js index f06c8addedad5..30038522df0ed 100644 --- a/packages/block-editor/src/components/block-actions/index.js +++ b/packages/block-editor/src/components/block-actions/index.js @@ -11,7 +11,6 @@ import { /** * Internal dependencies */ -import { useNotifyCopy } from '../../utils/use-notify-copy'; import usePasteStyles from '../use-paste-styles'; import { store as blockEditorStore } from '../../store'; @@ -76,7 +75,6 @@ export default function BlockActions( { flashBlock, } = useDispatch( blockEditorStore ); - const notifyCopy = useNotifyCopy(); const pasteStyles = usePasteStyles(); return children( { @@ -130,7 +128,6 @@ export default function BlockActions( { if ( clientIds.length === 1 ) { flashBlock( clientIds[ 0 ] ); } - notifyCopy( 'copy', clientIds ); }, async onPasteStyles() { await pasteStyles( getBlocksByClientId( clientIds ) ); diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index ade9ddd5ec165..43922c28a668e 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -26,17 +26,30 @@ import BlockSettingsMenuControls from '../block-settings-menu-controls'; import BlockParentSelectorMenuItem from './block-parent-selector-menu-item'; import { store as blockEditorStore } from '../../store'; import { unlock } from '../../lock-unlock'; +import { useNotifyCopy } from '../../utils/use-notify-copy'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', placement: 'bottom-start', }; -function CopyMenuItem( { clientIds, onCopy, label, shortcut } ) { +function CopyMenuItem( { + clientIds, + onCopy, + label, + shortcut, + eventType = 'copy', +} ) { const { getBlocksByClientId } = useSelect( blockEditorStore ); + const notifyCopy = useNotifyCopy(); const ref = useCopyToClipboard( () => serialize( getBlocksByClientId( clientIds ) ), - onCopy + () => { + if ( onCopy && eventType === 'copy' ) { + onCopy(); + } + notifyCopy( eventType, clientIds ); + } ); const copyMenuItemLabel = label ? label : __( 'Copy' ); return ( @@ -305,6 +318,7 @@ export function BlockSettingsDropdown( { clientIds={ clientIds } onCopy={ onCopy } label={ __( 'Copy styles' ) } + eventType="copyStyles" /> { __( 'Paste styles' ) } diff --git a/packages/block-editor/src/utils/use-notify-copy.js b/packages/block-editor/src/utils/use-notify-copy.js index 0f98577f11bf6..51742f476a5fd 100644 --- a/packages/block-editor/src/utils/use-notify-copy.js +++ b/packages/block-editor/src/utils/use-notify-copy.js @@ -17,47 +17,55 @@ export function useNotifyCopy() { const { getBlockType } = useSelect( blocksStore ); const { createSuccessNotice } = useDispatch( noticesStore ); - return useCallback( ( eventType, selectedBlockClientIds ) => { - let notice = ''; - if ( selectedBlockClientIds.length === 1 ) { - const clientId = selectedBlockClientIds[ 0 ]; - const title = getBlockType( getBlockName( clientId ) )?.title; - notice = - eventType === 'copy' - ? sprintf( - // Translators: Name of the block being copied, e.g. "Paragraph". - __( 'Copied "%s" to clipboard.' ), - title - ) - : sprintf( - // Translators: Name of the block being cut, e.g. "Paragraph". - __( 'Moved "%s" to clipboard.' ), - title - ); - } else { - notice = - eventType === 'copy' - ? sprintf( - // Translators: %d: Number of blocks being copied. - _n( - 'Copied %d block to clipboard.', - 'Copied %d blocks to clipboard.', - selectedBlockClientIds.length - ), - selectedBlockClientIds.length - ) - : sprintf( - // Translators: %d: Number of blocks being cut. - _n( - 'Moved %d block to clipboard.', - 'Moved %d blocks to clipboard.', - selectedBlockClientIds.length - ), - selectedBlockClientIds.length - ); - } - createSuccessNotice( notice, { - type: 'snackbar', - } ); - }, [] ); + return useCallback( + ( eventType, selectedBlockClientIds ) => { + let notice = ''; + + if ( eventType === 'copyStyles' ) { + notice = __( 'Styles copied to clipboard.' ); + } else if ( selectedBlockClientIds.length === 1 ) { + const clientId = selectedBlockClientIds[ 0 ]; + const title = getBlockType( getBlockName( clientId ) )?.title; + + if ( eventType === 'copy' ) { + notice = sprintf( + // Translators: Name of the block being copied, e.g. "Paragraph". + __( 'Copied "%s" to clipboard.' ), + title + ); + } else { + notice = sprintf( + // Translators: Name of the block being cut, e.g. "Paragraph". + __( 'Moved "%s" to clipboard.' ), + title + ); + } + } else if ( eventType === 'copy' ) { + notice = sprintf( + // Translators: %d: Number of blocks being copied. + _n( + 'Copied %d block to clipboard.', + 'Copied %d blocks to clipboard.', + selectedBlockClientIds.length + ), + selectedBlockClientIds.length + ); + } else { + notice = sprintf( + // Translators: %d: Number of blocks being moved. + _n( + 'Moved %d block to clipboard.', + 'Moved %d blocks to clipboard.', + selectedBlockClientIds.length + ), + selectedBlockClientIds.length + ); + } + + createSuccessNotice( notice, { + type: 'snackbar', + } ); + }, + [ createSuccessNotice, getBlockName, getBlockType ] + ); } From d74dfb97f9a8e3afddb3567703d3194fbf09b9fd Mon Sep 17 00:00:00 2001 From: Karthick M <97787966+karthick-murugan@users.noreply.github.com> Date: Wed, 8 Jan 2025 19:14:18 +0530 Subject: [PATCH 5/7] Fix Inconsistent Labels for Lightbox Feature (#68261) * Image size fix in lightbox * Revert "Image size fix in lightbox" This reverts commit 63f81c1e9cbb3b0513abca2b8cb579fef374ed7b. * Update the enlarge image icon label * Capslock updated * Feedback changes updated * Feedback changes * Feedback Changes * Feedback Changes * Feedback changes Co-authored-by: karthick-murugan Co-authored-by: afercia --- .../global-styles/image-settings-panel.js | 4 ++-- .../url-popover/image-url-input-ui.js | 6 ++--- packages/block-library/src/gallery/edit.js | 2 +- packages/block-library/src/image/index.php | 22 ++++++++----------- test/e2e/specs/editor/blocks/image.spec.js | 12 +++++----- 5 files changed, 21 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index 4ebc20ab20198..e6fa7a4414f6c 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -61,14 +61,14 @@ export default function ImageSettingsPanel( { // "RESET" button ONLY when the user has explicitly set a value in the // Global Styles. hasValue={ () => !! value?.lightbox } - label={ __( 'Expand on click' ) } + label={ __( 'Enlarge on click' ) } onDeselect={ resetLightbox } isShownByDefault panelId={ panelId } > diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js index c68cf5e58b953..7a9414c1fd3c1 100644 --- a/packages/block-editor/src/components/url-popover/image-url-input-ui.js +++ b/packages/block-editor/src/components/url-popover/image-url-input-ui.js @@ -265,14 +265,14 @@ const ImageURLInputUI = ( {
-

{ __( 'Expand on click' ) }

+

{ __( 'Enlarge on click' ) }

{ __( 'Scales the image with a lightbox effect' ) }