From 7542cff78f1cd446f5f2ef04a26b4f194df212d7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 2 Apr 2020 13:53:10 +0100 Subject: [PATCH 1/7] Fix keyboard block duplication (#21317) --- .../block-list/use-multi-selection.js | 16 ++---- .../duplicating-blocks.test.js.snap | 21 ++++++++ .../editor/various/duplicating-blocks.test.js | 49 +++++++++++++++++++ 3 files changed, 73 insertions(+), 13 deletions(-) create mode 100644 packages/e2e-tests/specs/editor/various/__snapshots__/duplicating-blocks.test.js.snap create mode 100644 packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js diff --git a/packages/block-editor/src/components/block-list/use-multi-selection.js b/packages/block-editor/src/components/block-list/use-multi-selection.js index 8505ce7a07556..2d40464f2c0c5 100644 --- a/packages/block-editor/src/components/block-list/use-multi-selection.js +++ b/packages/block-editor/src/components/block-list/use-multi-selection.js @@ -105,8 +105,9 @@ export default function useMultiSelection( ref ) { ); if ( - ! blockNode.contains( startContainer ) || - ! blockNode.contains( endContainer ) + !! blockNode && + ( ! blockNode.contains( startContainer ) || + ! blockNode.contains( endContainer ) ) ) { selection.removeAllRanges(); } @@ -242,17 +243,6 @@ export default function useMultiSelection( ref ) { startClientId.current = clientId; anchorElement.current = document.activeElement; - if ( anchorElement.current ) { - const blockInspector = document.querySelector( - '.block-editor-block-inspector' - ); - if ( - blockInspector && - blockInspector.contains( anchorElement.current ) - ) { - return; - } - } startMultiSelect(); // `onSelectionStart` is called after `mousedown` and `mouseleave` diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/duplicating-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/duplicating-blocks.test.js.snap new file mode 100644 index 0000000000000..bb8192de22cb9 --- /dev/null +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/duplicating-blocks.test.js.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Duplicating blocks should duplicate blocks using the block settings menu 1`] = ` +" +

Clone me

+ + + +

Clone me

+" +`; + +exports[`Duplicating blocks should duplicate blocks using the keyboard shortcut 1`] = ` +" +

Clone me

+ + + +

Clone me

+" +`; diff --git a/packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js b/packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js new file mode 100644 index 0000000000000..a5aadb7766a79 --- /dev/null +++ b/packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js @@ -0,0 +1,49 @@ +/** + * WordPress dependencies + */ +import { + createNewPost, + insertBlock, + getEditedPostContent, + clickBlockToolbarButton, + pressKeyWithModifier, +} from '@wordpress/e2e-test-utils'; + +describe( 'Duplicating blocks', () => { + beforeEach( async () => { + await createNewPost(); + } ); + + it( 'should duplicate blocks using the block settings menu', async () => { + await insertBlock( 'Paragraph' ); + await page.keyboard.type( 'Clone me' ); + + // Select the test we just typed + // This doesn't do anything but we previously had a duplicationi bug + // When the selection was not collapsed + await pressKeyWithModifier( 'primary', 'a' ); + + await clickBlockToolbarButton( 'More options' ); + const duplicateButton = await page.waitForXPath( + '//button[text()="Duplicate"]' + ); + await duplicateButton.click(); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); + + it( 'should duplicate blocks using the keyboard shortcut', async () => { + await insertBlock( 'Paragraph' ); + await page.keyboard.type( 'Clone me' ); + + // Select the test we just typed + // This doesn't do anything but we previously had a duplicationi bug + // When the selection was not collapsed + await pressKeyWithModifier( 'primary', 'a' ); + + // Duplicate using the keyboard shortccut + await pressKeyWithModifier( 'primaryShift', 'd' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); +} ); From 0fa11e0166dc0dfc0adb791d5645f7f9214f7343 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 6 Apr 2020 21:10:44 +0100 Subject: [PATCH 2/7] Fix the Buttons block margins (#21376) --- packages/block-library/src/buttons/style.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss index 47fb245ec0024..7e17e05a92700 100644 --- a/packages/block-library/src/buttons/style.scss +++ b/packages/block-library/src/buttons/style.scss @@ -1,7 +1,14 @@ .wp-block-buttons .wp-block-button { display: inline-block; - margin: $grid-size-small; + margin-right: $grid-unit-10; + margin-bottom: $grid-unit-10; } + +.wp-block-buttons.alignright .wp-block-button { + margin-right: none; + margin-left: $grid-unit-10; +} + .wp-block-buttons.aligncenter { text-align: center; } From 889ee28f07385274e2c3806a4ce4a4159a497cbe Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 7 Apr 2020 19:03:39 +0100 Subject: [PATCH 3/7] Only scroll page for multi-selectiions (#21460) --- .../multi-select-scroll-into-view/index.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/multi-select-scroll-into-view/index.js b/packages/block-editor/src/components/multi-select-scroll-into-view/index.js index 3443ee44d2956..025a2628bff18 100644 --- a/packages/block-editor/src/components/multi-select-scroll-into-view/index.js +++ b/packages/block-editor/src/components/multi-select-scroll-into-view/index.js @@ -21,19 +21,25 @@ import { getBlockDOMNode } from '../../utils/dom'; */ export default function MultiSelectScrollIntoView() { const selector = ( select ) => { - const { getBlockSelectionEnd, isMultiSelecting } = select( - 'core/block-editor' - ); + const { + getBlockSelectionEnd, + hasMultiSelection, + isMultiSelecting, + } = select( 'core/block-editor' ); return { selectionEnd: getBlockSelectionEnd(), + isMultiSelection: hasMultiSelection(), isMultiSelecting: isMultiSelecting(), }; }; - const { selectionEnd, isMultiSelecting } = useSelect( selector, [] ); + const { isMultiSelection, selectionEnd, isMultiSelecting } = useSelect( + selector, + [] + ); useEffect( () => { - if ( ! selectionEnd || isMultiSelecting ) { + if ( ! selectionEnd || isMultiSelecting || ! isMultiSelection ) { return; } @@ -54,7 +60,7 @@ export default function MultiSelectScrollIntoView() { scrollIntoView( extentNode, scrollContainer, { onlyScrollIfNeeded: true, } ); - }, [ selectionEnd, isMultiSelecting ] ); + }, [ isMultiSelection, selectionEnd, isMultiSelecting ] ); return null; } From 0e96570ef5afab477fd9e1123d8f8fc2af197f1a Mon Sep 17 00:00:00 2001 From: roo2 Date: Thu, 2 Apr 2020 10:17:26 +1000 Subject: [PATCH 4/7] Fix the latest-posts block when `imageDimensions` is empty (#21070) Co-authored-by: roo2 --- packages/block-library/src/latest-posts/edit.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index f37ee074ffda4..882cdf54681e4 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -435,8 +435,16 @@ export default withSelect( ( select, props ) => { .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); return { - defaultImageWidth: imageDimensions[ featuredImageSizeSlug ].width, - defaultImageHeight: imageDimensions[ featuredImageSizeSlug ].height, + defaultImageWidth: get( + imageDimensions, + [ featuredImageSizeSlug, 'width' ], + 0 + ), + defaultImageHeight: get( + imageDimensions, + [ featuredImageSizeSlug, 'height' ], + 0 + ), imageSizeOptions, latestPosts: ! Array.isArray( posts ) ? posts From e35f55d6e2950daf4f1d7fb007faadd5228ff90b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 7 Apr 2020 08:44:06 +0100 Subject: [PATCH 5/7] Prevent typing on a Popover from closing the block toolbar (#21421) --- .../src/components/observe-typing/index.js | 6 +- .../specs/editor/various/is-typing.test.js | 99 +++++++++++++++++++ 2 files changed, 103 insertions(+), 2 deletions(-) create mode 100644 packages/e2e-tests/specs/editor/various/is-typing.test.js diff --git a/packages/block-editor/src/components/observe-typing/index.js b/packages/block-editor/src/components/observe-typing/index.js index ae7cddfeb80ae..cd6220ad1b119 100644 --- a/packages/block-editor/src/components/observe-typing/index.js +++ b/packages/block-editor/src/components/observe-typing/index.js @@ -42,6 +42,7 @@ function isKeyDownEligibleForStartTyping( event ) { } function ObserveTyping( { children, setTimeout: setSafeTimeout } ) { + const typingContainer = useRef(); const lastMouseMove = useRef(); const isTyping = useSelect( ( select ) => select( 'core/block-editor' ).isTyping() @@ -126,11 +127,11 @@ function ObserveTyping( { children, setTimeout: setSafeTimeout } ) { // Abort early if already typing, or key press is incurred outside a // text field (e.g. arrow-ing through toolbar buttons). - // Ignore typing in a block toolbar + // Ignore typing if outside the current DOM container if ( isTyping || ! isTextField( target ) || - target.closest( '.block-editor-block-toolbar' ) + ! typingContainer.current.contains( target ) ) { return; } @@ -172,6 +173,7 @@ function ObserveTyping( { children, setTimeout: setSafeTimeout } ) { /* eslint-disable jsx-a11y/no-static-element-interactions */ return (
{ + beforeEach( async () => { + await createNewPost(); + } ); + + it( 'should hide the toolbar when typing', async () => { + const blockToolbarSelector = '.block-editor-block-toolbar'; + + await clickBlockAppender(); + + // Type in a paragraph + await page.keyboard.type( 'Type' ); + + // Toolbar is hidden + let blockToolbar = await page.$( blockToolbarSelector ); + expect( blockToolbar ).toBe( null ); + + // Moving the mouse shows the toolbar + await page.mouse.move( 0, 0 ); + await page.mouse.move( 10, 10 ); + + // Toolbar is visible + blockToolbar = await page.$( blockToolbarSelector ); + expect( blockToolbar ).not.toBe( null ); + + // Typing again hides the toolbar + await page.keyboard.type( ' and continue' ); + + // Toolbar is hidden again + blockToolbar = await page.$( blockToolbarSelector ); + expect( blockToolbar ).toBe( null ); + } ); + + it( 'should not close the dropdown when typing in it', async () => { + // Adds a Dropdown with an input to all blocks + await page.evaluate( () => { + const { Dropdown, Button, Fill } = wp.components; + const { createElement: el, Fragment } = wp.element; + function AddDropdown( BlockListBlock ) { + return ( props ) => { + return el( + Fragment, + {}, + el( + Fill, + { name: 'BlockControls' }, + el( Dropdown, { + renderToggle: ( { onToggle } ) => + el( + Button, + { + onClick: onToggle, + className: 'dropdown-open', + }, + 'Open Dropdown' + ), + renderContent: () => + el( 'input', { + className: 'dropdown-input', + } ), + } ) + ), + el( BlockListBlock, props ) + ); + }; + } + + wp.hooks.addFilter( + 'editor.BlockListBlock', + 'e2e-test/add-dropdown', + AddDropdown + ); + } ); + + await clickBlockAppender(); + + // Type in a paragraph + await page.keyboard.type( 'Type' ); + + // Show Toolbar + await page.mouse.move( 0, 0 ); + await page.mouse.move( 10, 10 ); + + // Open the dropdown + await page.click( '.dropdown-open' ); + + // Type inside the dropdown's input + await page.type( '.dropdown-input', 'Random' ); + + // The input should still be visible + const input = await page.$( '.dropdown-input' ); + expect( input ).not.toBe( null ); + } ); +} ); From a0d2c64e14f1550a78989041e608e6826f802b2b Mon Sep 17 00:00:00 2001 From: Jake Spurlock Date: Wed, 22 Apr 2020 14:50:24 -0700 Subject: [PATCH 6/7] Let's bring in the grid system. Including all of the vars, while we really only need one. --- packages/base-styles/_variables.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 5cb403ffd96a1..7984e5105f35f 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -23,6 +23,23 @@ $grid-size: 8px; $grid-size-large: 16px; $grid-size-xlarge: 24px; + +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ + +$grid-unit: 8px; +$grid-unit-05: 0.5 * $grid-unit; // 4px +$grid-unit-10: 1 * $grid-unit; // 8px +$grid-unit-15: 1.5 * $grid-unit; // 12px +$grid-unit-20: 2 * $grid-unit; // 16px +$grid-unit-30: 3 * $grid-unit; // 24px +$grid-unit-40: 4 * $grid-unit; // 32px +$grid-unit-50: 5 * $grid-unit; // 40px +$grid-unit-60: 6 * $grid-unit; // 48px + + // Widths, heights & dimensions $panel-padding: 16px; $header-height: 56px; From 7601e776ee8d48d81fb7662b073900e83784103b Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 18 Mar 2020 13:15:50 +0800 Subject: [PATCH 7/7] Escape class name to avoid malformed html tag (#20977) --- packages/block-library/src/rss/index.php | 2 +- packages/block-library/src/search/index.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/rss/index.php b/packages/block-library/src/rss/index.php index 0315cfc01325f..07ddb3d007e53 100644 --- a/packages/block-library/src/rss/index.php +++ b/packages/block-library/src/rss/index.php @@ -92,7 +92,7 @@ function render_block_core_rss( $attributes ) { $class .= ' ' . $attributes['className']; } - return "
    {$list_items}
"; + return sprintf( "
    %s
", esc_attr( $class ), $list_items ); } /** diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 5face0b929899..a140caf0e0121 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -57,7 +57,7 @@ function render_block_core_search( $attributes ) { return sprintf( '', - $class, + esc_attr( $class ), esc_url( home_url( '/' ) ), $label_markup . $input_markup . $button_markup );