diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js index 3c72030dafaf35..30038522df0edb 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'; @@ -20,9 +19,6 @@ export default function BlockActions( { children, __experimentalUpdateSelection: updateSelection, } ) { - const notifyCopy = useNotifyCopy(); - const pasteStyles = usePasteStyles(); - const { getDefaultBlockName, getGroupingBlockName } = useSelect( blocksStore ); const selected = useSelect( @@ -79,6 +75,8 @@ export default function BlockActions( { flashBlock, } = useDispatch( blockEditorStore ); + const pasteStyles = usePasteStyles(); + return children( { canCopyStyles, canDuplicate, @@ -130,14 +128,6 @@ export default function BlockActions( { if ( clientIds.length === 1 ) { flashBlock( clientIds[ 0 ] ); } - notifyCopy( 'copy', clientIds ); - }, - onCut() { - if ( clientIds.length === 1 ) { - flashBlock( clientIds[ 0 ] ); - } - notifyCopy( 'cut', clientIds ); - removeBlocks( clientIds, updateSelection ); }, async onPasteStyles() { await pasteStyles( getBlocksByClientId( clientIds ) ); diff --git a/packages/block-editor/src/components/block-icon/stories/index.story.js b/packages/block-editor/src/components/block-icon/stories/index.story.js new file mode 100644 index 00000000000000..e30a347005d774 --- /dev/null +++ b/packages/block-editor/src/components/block-icon/stories/index.story.js @@ -0,0 +1,69 @@ +/** + * WordPress dependencies + */ +import { box, button, cog, paragraph } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import BlockIcon from '../'; + +const meta = { + title: 'BlockEditor/BlockIcon', + component: BlockIcon, + parameters: { + docs: { + description: { + component: + 'The `BlockIcon` component allows to display an icon for a block.', + }, + canvas: { sourceState: 'shown' }, + }, + }, + argTypes: { + icon: { + control: 'select', + options: [ 'paragraph', 'cog', 'box', 'button' ], + mapping: { + paragraph, + cog, + box, + button, + }, + description: + 'The icon of the block. This can be any of [WordPress Dashicons](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element.', + table: { + type: { summary: 'string | object' }, + }, + }, + showColors: { + control: 'boolean', + description: 'Whether to show background and foreground colors.', + table: { + type: { summary: 'boolean' }, + }, + }, + className: { + control: 'text', + description: 'Additional CSS class for the icon.', + table: { + type: { summary: 'string' }, + }, + }, + context: { + control: 'text', + description: 'Context where the icon is being used.', + table: { + type: { summary: 'string' }, + }, + }, + }, +}; + +export default meta; + +export const Default = { + args: { + icon: 'paragraph', + }, +}; 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 a66b1a4de81ad2..9e26943e22ea7c 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,40 @@ 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, + onEvent, + label, + shortcut, + eventType = 'copy', + __experimentalUpdateSelection: updateSelection = false, +} ) { const { getBlocksByClientId } = useSelect( blockEditorStore ); + const { removeBlocks } = useDispatch( blockEditorStore ); + const notifyCopy = useNotifyCopy(); const ref = useCopyToClipboard( () => serialize( getBlocksByClientId( clientIds ) ), - onCopy + () => { + switch ( eventType ) { + case 'copy': + case 'cut': + onEvent?.(); + notifyCopy( eventType, clientIds ); + if ( eventType === 'cut' ) { + removeBlocks( clientIds, updateSelection ); + } + break; + default: + notifyCopy( eventType, clientIds ); + } + } ); const copyMenuItemLabel = label ? label : __( 'Copy' ); return ( @@ -46,20 +69,6 @@ function CopyMenuItem( { clientIds, onCopy, label, shortcut } ) { ); } -function CutMenuItem( { clientIds, onCut, label, shortcut } ) { - const { getBlocksByClientId } = useSelect( blockEditorStore ); - const ref = useCopyToClipboard( - () => serialize( getBlocksByClientId( clientIds ) ), - onCut - ); - const cutMenuItemLabel = label ? label : __( 'Cut' ); - return ( - - { cutMenuItemLabel } - - ); -} - export function BlockSettingsDropdown( { block, clientIds, @@ -218,7 +227,6 @@ export function BlockSettingsDropdown( { onInsertBefore, onRemove, onCopy, - onCut, onPasteStyles, } ) => { // It is possible that some plugins register fills for this menu @@ -267,17 +275,22 @@ export function BlockSettingsDropdown( { ) } - { canDuplicate && ( { __( 'Paste styles' ) } 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 4ebc20ab201983..e6fa7a4414f6c8 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/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index b19411893b86ca..e19e350f959b26 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 = ( { - { __( 'Expand on click' ) } + { __( 'Enlarge on click' ) } { __( 'Scales the image with a lightbox effect' ) } { onSetLightbox?.( false ); } } @@ -372,7 +372,7 @@ const ImageURLInputUI = ( { stopEditLink(); } } > - { __( 'Expand on click' ) } + { __( 'Enlarge on click' ) } ) } diff --git a/packages/block-editor/src/utils/use-notify-copy.js b/packages/block-editor/src/utils/use-notify-copy.js index 0f98577f11bf65..51742f476a5fd2 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 ] + ); } diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index 838b807507d314..cf2c9458176934 100644 --- a/packages/block-library/src/file/edit.js +++ b/packages/block-library/src/file/edit.js @@ -255,11 +255,12 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) { { displayPreviewInEditor && ( get_attribute( 'alt' ); - $img_uploaded_src = $p->get_attribute( 'src' ); - $img_class_names = $p->get_attribute( 'class' ); - $img_styles = $p->get_attribute( 'style' ); - $img_width = 'none'; - $img_height = 'none'; - $aria_label = __( 'Enlarge image' ); - - if ( $alt ) { - /* translators: %s: Image alt text. */ - $aria_label = sprintf( __( 'Enlarge image: %s' ), $alt ); - } + $alt = $p->get_attribute( 'alt' ); + $img_uploaded_src = $p->get_attribute( 'src' ); + $img_class_names = $p->get_attribute( 'class' ); + $img_styles = $p->get_attribute( 'style' ); + $img_width = 'none'; + $img_height = 'none'; + $aria_label = __( 'Enlarge' ); + $dialog_aria_label = __( 'Enlarged image' ); if ( isset( $block['attrs']['id'] ) ) { $img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] ); @@ -190,7 +186,7 @@ function block_core_image_render_lightbox( $block_content, $block ) { 'targetWidth' => $img_width, 'targetHeight' => $img_height, 'scaleAttr' => $block['attrs']['scale'] ?? false, - 'ariaLabel' => $aria_label, + 'ariaLabel' => $dialog_aria_label, 'alt' => $alt, ), ), diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 8ca5795cfd911a..117045f7dce627 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 5f49eba466a5fd..ab93fa7da67ef4 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/rss/edit.js b/packages/block-library/src/rss/edit.js index b67cb4f9193df1..39564da79b16e5 100644 --- a/packages/block-library/src/rss/edit.js +++ b/packages/block-library/src/rss/edit.js @@ -77,6 +77,7 @@ export default function RSSEdit( { attributes, setAttributes } ) { ` &::-webkit-input-placeholder { line-height: normal; } + + &[type='email'], + &[type='url'] { + /* rtl:ignore */ + direction: ltr; + } } `; 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 21bf56b578b57d..1e79a30306e4c7 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, - } ); - } } diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index 79cb01038da23c..35c9340e9b923c 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -859,17 +859,17 @@ test.describe( 'Image', () => { } ) ).toBeFocused(); - // Select "Expand on click", then remove it. + // Select "Enlarge on click", then remove it. await pageUtils.pressKeys( 'Tab' ); await page.keyboard.press( 'Enter' ); await pageUtils.pressKeys( 'Tab', { times: 5 } ); await expect( - page.getByRole( 'menuitem', { name: 'Expand on click' } ) + page.getByRole( 'menuitem', { name: 'Enlarge on click' } ) ).toBeFocused(); await page.keyboard.press( 'Enter' ); await expect( page.getByRole( 'button', { - name: 'Disable expand on click', + name: 'Disable enlarge on click', } ) ).toBeFocused(); await page.keyboard.press( 'Enter' ); @@ -933,7 +933,7 @@ test.describe( 'Image - lightbox', () => { await expect( page.getByRole( 'menuitem', { - name: 'Expand on click', + name: 'Enlarge on click', } ) ).toBeHidden(); } ); @@ -958,13 +958,13 @@ test.describe( 'Image - lightbox', () => { await page .getByRole( 'button', { - name: 'Disable expand on click', + name: 'Disable enlarge on click', } ) .click(); await expect( page.getByRole( 'menuitem', { - name: 'Expand on click', + name: 'Enlarge on click', } ) ).toBeHidden(); } );
{ __( 'Expand on click' ) }
{ __( 'Enlarge on click' ) }
{ __( 'Scales the image with a lightbox effect' ) }