From 6742b75b9c04dec736edaf0064ffe585781d76ea Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Wed, 3 Mar 2021 23:18:15 -0500 Subject: [PATCH 1/8] created actions for adding and clearing last inserted block event. --- packages/editor/src/store/actions.native.js | 25 +++++++++++++++++ .../editor/src/store/test/actions.native.js | 28 +++++++++++++++++-- 2 files changed, 51 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/store/actions.native.js b/packages/editor/src/store/actions.native.js index 49d40749cb1c7a..f45eec5ea3ce33 100644 --- a/packages/editor/src/store/actions.native.js +++ b/packages/editor/src/store/actions.native.js @@ -25,3 +25,28 @@ export function togglePostTitleSelection( isSelected = true ) { export function* autosave() { RNReactNativeGutenbergBridge.editorDidAutosave(); } + +/** + * Returns an action object to track the last block that was inserted. + * + * @param {Object} clientId The client id of the block. + * + * @return {Object} Action object. + */ +export function addLastBlockInserted( clientId ) { + return { + type: 'ADD_LAST_BLOCK_INSERTED', + clientId, + }; +} + +/** + * Returns an action object to clear the last block that was inserted. + * + * @return {Object} Action object. + */ +export function clearLastBlockInserted() { + return { + type: 'CLEAR_LAST_BLOCK_INSERTED', + }; +} diff --git a/packages/editor/src/store/test/actions.native.js b/packages/editor/src/store/test/actions.native.js index 577a38e95fe8eb..ed00382fa3b7f8 100644 --- a/packages/editor/src/store/test/actions.native.js +++ b/packages/editor/src/store/test/actions.native.js @@ -1,9 +1,13 @@ /** * Internal dependencies */ -import { togglePostTitleSelection } from '../actions'; +import { + togglePostTitleSelection, + addLastBlockInserted, + clearLastBlockInserted, +} from '../actions'; -describe( 'Editor actions', () => { +describe( 'actions native', () => { describe( 'togglePostTitleSelection', () => { it( 'should return the TOGGLE_POST_TITLE_SELECTION action', () => { const result = togglePostTitleSelection( true ); @@ -13,4 +17,24 @@ describe( 'Editor actions', () => { } ); } ); } ); + + describe( 'addLastBlockInserted', () => { + it( 'should return the ADD_LAST_BLOCK_INSERTED action', () => { + const expectedClientId = 1; + const result = addLastBlockInserted( expectedClientId ); + expect( result ).toEqual( { + type: 'ADD_LAST_BLOCK_INSERTED', + clientId: expectedClientId, + } ); + } ); + } ); + + describe( 'clearLastBlockInserted', () => { + it( 'should return the CLEAR_LAST_BLOCK_INSERTED action', () => { + const result = clearLastBlockInserted(); + expect( result ).toEqual( { + type: 'CLEAR_LAST_BLOCK_INSERTED', + } ); + } ); + } ); } ); From fc8d9b438d0e50f85173cbdb9818d832847aae5a Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Wed, 3 Mar 2021 23:19:06 -0500 Subject: [PATCH 2/8] added reducer for determining new state based on the action --- packages/editor/src/store/reducer.native.js | 20 +++++++++++++++ .../editor/src/store/test/reducer.native.js | 25 ++++++++++++++++++- 2 files changed, 44 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/store/reducer.native.js b/packages/editor/src/store/reducer.native.js index d9b3fbcd67888a..ec4c91c6b0c26e 100644 --- a/packages/editor/src/store/reducer.native.js +++ b/packages/editor/src/store/reducer.native.js @@ -80,6 +80,25 @@ export function notices( state = [], action ) { return state; } +/** + * Reducer returning the block insertion event list state. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + * + * @return {Object} Updated state. + */ +export function lastBlockInserted( state = {}, action ) { + switch ( action.type ) { + case 'ADD_LAST_BLOCK_INSERTED': + return { ...state, clientId: action.clientId }; + + case 'CLEAR_LAST_BLOCK_INSERTED': + return {}; + } + return state; +} + export default combineReducers( { postId, postType, @@ -93,4 +112,5 @@ export default combineReducers( { editorSettings, clipboard, notices, + lastBlockInserted, } ); diff --git a/packages/editor/src/store/test/reducer.native.js b/packages/editor/src/store/test/reducer.native.js index ba691a98513d93..741c157075eab9 100644 --- a/packages/editor/src/store/test/reducer.native.js +++ b/packages/editor/src/store/test/reducer.native.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { postTitle } from '../reducer'; +import { postTitle, lastBlockInserted } from '../reducer'; describe( 'state native', () => { describe( 'postTitle', () => { @@ -32,5 +32,28 @@ describe( 'state native', () => { ).toBe( true ); } ); } ); + + describe( 'lastBlockInserted()', () => { + it( 'should return client id of last block inserted', () => { + const expectedClientId = 1; + const action = { + type: 'ADD_LAST_BLOCK_INSERTED', + clientId: expectedClientId, + }; + + expect( + lastBlockInserted( { clientId: expectedClientId }, action ) + .clientId + ).toBe( expectedClientId ); + } ); + + it( 'should return empty state if last block has been cleared', () => { + const action = { + type: 'CLEAR_LAST_BLOCK_INSERTED', + }; + + expect( lastBlockInserted( {}, action ) ).toStrictEqual( {} ); + } ); + } ); } ); } ); From fb115ae728af84286a08e0c66b875a50e055db8c Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Wed, 3 Mar 2021 23:19:30 -0500 Subject: [PATCH 3/8] added selector to query the state for the last block inserted --- packages/editor/src/store/selectors.native.js | 11 +++++++ .../editor/src/store/test/selectors.native.js | 31 ++++++++++++++++++- 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/store/selectors.native.js b/packages/editor/src/store/selectors.native.js index 2edfc373213fa2..da65a8d08e3e8a 100644 --- a/packages/editor/src/store/selectors.native.js +++ b/packages/editor/src/store/selectors.native.js @@ -55,3 +55,14 @@ export const isEditedPostAutosaveable = createRegistrySelector( return false; } ); + +/** + * Tells if the block with the passed clientId was just inserted. + * + * @param {Object} state Global application state. + * @param {Object} clientId client id of the block. + * @return {boolean} If the client id exists within the lastBlockInserted state then the block was just inserted. + */ +export function wasBlockJustInserted( state, clientId ) { + return state.lastBlockInserted.clientId === clientId; +} diff --git a/packages/editor/src/store/test/selectors.native.js b/packages/editor/src/store/test/selectors.native.js index 958a68e651f743..f16f9fc1554a51 100644 --- a/packages/editor/src/store/test/selectors.native.js +++ b/packages/editor/src/store/test/selectors.native.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { isPostTitleSelected } from '../selectors'; +import { isPostTitleSelected, wasBlockJustInserted } from '../selectors'; describe( 'selectors native', () => { describe( 'isPostTitleSelected', () => { @@ -25,4 +25,33 @@ describe( 'selectors native', () => { expect( isPostTitleSelected( state ) ).toBe( false ); } ); } ); + + describe( 'wasBlockJustInserted', () => { + it( 'should return true if the client id passed to wasBlockJustInserted is found within the state', () => { + const expectedClientId = 1; + const state = { + lastBlockInserted: { + clientId: expectedClientId, + }, + }; + + expect( wasBlockJustInserted( state, expectedClientId ) ).toBe( + true + ); + } ); + + it( 'should return false if the client id passed to wasBlockJustInserted is not found within the state', () => { + const expectedClientId = 1; + const unexpectedClientId = 0; + const state = { + lastBlockInserted: { + clientId: unexpectedClientId, + }, + }; + + expect( wasBlockJustInserted( state, expectedClientId ) ).toBe( + false + ); + } ); + } ); } ); From ee4d50274c13f48e28dcac9a510aa924ae2c4009 Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Tue, 16 Mar 2021 18:58:10 -0500 Subject: [PATCH 4/8] [RNMobile] Simplify media insertion flow Part 2 - media upload (#29547) * added autoOpenMediaUpload prop to the MediaPlaceholder * Added the auto-opening capabilities to the MediaUpload component. * Added documentation for the new autoOpenMediaUpload prop * renamed autoOpenMediaUpload to autoOpen in the MediaUpload component. * [RNMobile] Simplify media insertion flow - Part 3 component integration (#29548) * Track the clientId of the block that is inserted. * implemented auto opening utilizing last block inserted from the store * added dismissal support for the auto opening picker to the UI tests. * Updated Dismiss button in closePicker function to Cancel --- .../src/components/inserter/menu.native.js | 4 +++ .../components/media-placeholder/README.md | 9 +++++ .../media-placeholder/index.native.js | 2 ++ .../src/components/media-upload/README.md | 9 +++++ .../components/media-upload/index.native.js | 32 +++++++++++++++--- packages/block-library/src/gallery/edit.js | 22 ++++++++++++- .../block-library/src/image/edit.native.js | 29 ++++++++++++++-- .../block-library/src/video/edit.native.js | 33 +++++++++++++++++-- .../gutenberg-editor-gallery.test.js | 3 ++ .../gutenberg-editor-image-@canary.test.js | 3 ++ .../__device-tests__/pages/editor-page.js | 11 +++++++ 11 files changed, 147 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index c71e28a6b69c42..2c538144ec5288 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -36,6 +36,8 @@ function InserterMenu( { insertDefaultBlock, } = useDispatch( blockEditorStore ); + const { addLastBlockInserted } = useDispatch( 'core/editor' ); + const { items, destinationRootClientId, @@ -110,6 +112,8 @@ function InserterMenu( { innerBlocks ); + addLastBlockInserted( newBlock.clientId ); + insertBlock( newBlock, insertionIndex, destinationRootClientId ); }, [ insertBlock, destinationRootClientId, insertionIndex ] diff --git a/packages/block-editor/src/components/media-placeholder/README.md b/packages/block-editor/src/components/media-placeholder/README.md index da47806e7b14f3..14647d2ab27c47 100644 --- a/packages/block-editor/src/components/media-placeholder/README.md +++ b/packages/block-editor/src/components/media-placeholder/README.md @@ -63,6 +63,15 @@ This property is similar to the `accept` property. The difference is the format - Required: No - Platform: Web | Mobile +### autoOpenMediaUpload + +If true, the MediaUpload component auto-opens the picker of the respective platform. + +- Type: `Boolean` +- Required: No +- Default: `false` +- Platform: Mobile + ### className Class name added to the placeholder. diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 1193b8a4122d4e..9760fec58e00e8 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -48,6 +48,7 @@ function MediaPlaceholder( props ) { height, backgroundColor, hideContent, + autoOpenMediaUpload, } = props; // use ref to keep media array current for callbacks during rerenders @@ -160,6 +161,7 @@ function MediaPlaceholder( props ) { } multiple={ multiple } isReplacingMedia={ false } + autoOpen={ autoOpenMediaUpload } render={ ( { open, getMediaOptions } ) => { return ( { const otherMediaOptionsWithIcons = otherMediaOptions.map( ( option ) => { @@ -54,6 +62,10 @@ export class MediaUpload extends Component { this.setState( { otherMediaOptions: otherMediaOptionsWithIcons } ); } ); + + if ( autoOpen ) { + this.onPickerPresent(); + } } getAllSources() { @@ -136,8 +148,20 @@ export class MediaUpload extends Component { } onPickerPresent() { + const { autoOpen } = this.props; + const isIOS = Platform.OS === 'ios'; + if ( this.picker ) { - this.picker.presentPicker(); + // the delay below is required because on iOS this action sheet gets dismissed by the close event of the Inserter + // so this delay allows the Inserter to be closed fully before presenting action sheet. + if ( autoOpen && isIOS ) { + delay( + () => this.picker.presentPicker(), + PICKER_OPENING_DELAY + ); + } else { + this.picker.presentPicker(); + } } } diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index a0ffc6ed9bc332..de4139bc457699 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -34,7 +34,7 @@ import { import { Platform, useEffect, useState, useMemo } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; -import { useDispatch, withSelect } from '@wordpress/data'; +import { useDispatch, withSelect, withDispatch } from '@wordpress/data'; import { withViewportMatch } from '@wordpress/viewport'; import { View } from '@wordpress/primitives'; import { store as coreStore } from '@wordpress/core-data'; @@ -81,6 +81,7 @@ function GalleryEdit( props ) { imageSizes, resizedImages, onFocus, + wasBlockJustInserted, } = props; const { columns = defaultColumnsNumber( attributes ), @@ -343,6 +344,9 @@ function GalleryEdit( props ) { onError={ onUploadError } notices={ hasImages ? undefined : noticeUI } onFocus={ onFocus } + autoOpenMediaUpload={ + ! hasImages && isSelected && wasBlockJustInserted() + } /> ); @@ -466,6 +470,22 @@ export default compose( [ resizedImages, }; } ), + withDispatch( ( dispatch, { clientId }, { select } ) => { + return { + wasBlockJustInserted() { + const { clearLastBlockInserted } = dispatch( 'core/editor' ); + const { wasBlockJustInserted } = select( 'core/editor' ); + + const result = wasBlockJustInserted( clientId ); + + if ( result ) { + clearLastBlockInserted(); + return true; + } + return false; + }, + }; + } ), withNotices, withViewportMatch( { isNarrow: '< small' } ), ] )( GalleryEdit ); diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 3f9baab48611f2..5c17a956b84629 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -42,7 +42,7 @@ import { __, sprintf } from '@wordpress/i18n'; import { getProtocol, hasQueryArg } from '@wordpress/url'; import { doAction, hasAction } from '@wordpress/hooks'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; -import { withSelect } from '@wordpress/data'; +import { withSelect, withDispatch } from '@wordpress/data'; import { image as placeholderIcon, textColor, @@ -399,7 +399,13 @@ export class ImageEdit extends Component { render() { const { isCaptionSelected } = this.state; - const { attributes, isSelected, image, clientId } = this.props; + const { + attributes, + isSelected, + image, + clientId, + wasBlockJustInserted, + } = this.props; const { align, url, alt, id, sizeSlug, className } = attributes; const sizeOptionsValid = find( this.sizeOptions, [ @@ -461,6 +467,9 @@ export class ImageEdit extends Component { onSelect={ this.onSelectMediaUploadOption } icon={ this.getPlaceholderIcon() } onFocus={ this.props.onFocus } + autoOpenMediaUpload={ + isSelected && ! url && wasBlockJustInserted() + } /> ); @@ -579,5 +588,21 @@ export default compose( [ imageSizes, }; } ), + withDispatch( ( dispatch, { clientId }, { select } ) => { + return { + wasBlockJustInserted() { + const { clearLastBlockInserted } = dispatch( 'core/editor' ); + const { wasBlockJustInserted } = select( 'core/editor' ); + + const result = wasBlockJustInserted( clientId ); + + if ( result ) { + clearLastBlockInserted(); + return true; + } + return false; + }, + }; + } ), withPreferredColorScheme, ] )( ImageEdit ); diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js index 2d0cf9fbe014e4..3f170fa37a9d70 100644 --- a/packages/block-library/src/video/edit.native.js +++ b/packages/block-library/src/video/edit.native.js @@ -19,7 +19,7 @@ import { ToolbarGroup, PanelBody, } from '@wordpress/components'; -import { withPreferredColorScheme } from '@wordpress/compose'; +import { withPreferredColorScheme, compose } from '@wordpress/compose'; import { BlockCaption, MediaPlaceholder, @@ -35,6 +35,7 @@ import { __, sprintf } from '@wordpress/i18n'; import { isURL, getProtocol } from '@wordpress/url'; import { doAction, hasAction } from '@wordpress/hooks'; import { video as SvgIcon, replace } from '@wordpress/icons'; +import { withDispatch } from '@wordpress/data'; /** * Internal dependencies @@ -189,7 +190,12 @@ class VideoEdit extends Component { } render() { - const { setAttributes, attributes, isSelected } = this.props; + const { + setAttributes, + attributes, + isSelected, + wasBlockJustInserted, + } = this.props; const { id, src } = attributes; const { videoContainerHeight } = this.state; @@ -221,6 +227,9 @@ class VideoEdit extends Component { onSelect={ this.onSelectMediaUploadOption } icon={ this.getIcon( ICON_TYPE.PLACEHOLDER ) } onFocus={ this.props.onFocus } + autoOpenMediaUpload={ + isSelected && ! src && wasBlockJustInserted() + } /> ); @@ -361,4 +370,22 @@ class VideoEdit extends Component { } } -export default withPreferredColorScheme( VideoEdit ); +export default compose( [ + withDispatch( ( dispatch, { clientId }, { select } ) => { + return { + wasBlockJustInserted() { + const { clearLastBlockInserted } = dispatch( 'core/editor' ); + const { wasBlockJustInserted } = select( 'core/editor' ); + + const result = wasBlockJustInserted( clientId ); + + if ( result ) { + clearLastBlockInserted(); + return true; + } + return false; + }, + }; + } ), + withPreferredColorScheme, +] )( VideoEdit ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-gallery.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-gallery.test.js index 37211a5db2e0bb..4789aa0bd5776f 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-gallery.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-gallery.test.js @@ -6,6 +6,9 @@ import { blockNames } from './pages/editor-page'; describe( 'Gutenberg Editor Gallery Block tests', () => { it( 'should be able to add a gallery block', async () => { await editorPage.addNewBlock( blockNames.gallery ); + await editorPage.driver.sleep( 1000 ); + await editorPage.closePicker(); + const galleryBlock = await editorPage.getBlockAtPosition( blockNames.gallery ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js index 30d135e4cdc1e6..40a9a1b38a96f9 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js @@ -8,6 +8,9 @@ import testData from './helpers/test-data'; describe( 'Gutenberg Editor Image Block tests', () => { it( 'should be able to add an image block', async () => { await editorPage.addNewBlock( blockNames.image ); + await editorPage.driver.sleep( 1000 ); + await editorPage.closePicker(); + let imageBlock = await editorPage.getBlockAtPosition( blockNames.image ); diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js index 8fd19373bba37b..a7a73ba8c7aad3 100644 --- a/packages/react-native-editor/__device-tests__/pages/editor-page.js +++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js @@ -526,6 +526,17 @@ class EditorPage { return await typeString( this.driver, textViewElement, text, clear ); } + async closePicker() { + if ( isAndroid() ) { + await swipeDown( this.driver ); + } else { + const cancelButton = await this.driver.elementByAccessibilityId( + 'Cancel' + ); + await cancelButton.click(); + } + } + // ============================= // Unsupported Block functions // ============================= From cb31236c5caaa01bfebcce39eab1c51838beedd6 Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Tue, 16 Mar 2021 19:04:52 -0500 Subject: [PATCH 5/8] Added release notes for auto-opening. --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 66e8a4f347b401..b9af1d8e9be662 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label to i --> ## Unreleased +* [**] The media upload options of the Image, Video and Gallery block automatically opens when the respective block is inserted. [#29546] ## 1.48.0 * [**] Buttons block: added width setting. [#28543] From d865c2be043e430208abef93e59f07aa7aa6893d Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Wed, 31 Mar 2021 10:11:35 -0500 Subject: [PATCH 6/8] [RNMobile] Refactor simplify media flow redux store changes (#30123) * Moved the last block inserted actions from editor to the block-editor * Moved the last block inserted reducer from editor to the block-editor * Moved the last block inserted selector from editor to the block-editor * Fixed es-lint error. * Moved last block inserted actions test from editor to the block-editor * Moved last block inserted reducer test from editor to the block-editor * Moved last block inserted selector test from editor to the block-editor * Moved all calls to last block inserted from editor to block-editor * last block inserter usage in menu native migrated : editor to block-editor * [RNMobile] Refactor: Simplify media flow redux migration (#30238) * Add meta argument to insertBlock action * Add inserter menu source * Update last block inserted reducer Instead of using specific actions for tracking the last block inserted, it uses the actions related to the insertion flow. * Add get last block inserted selector * Refactor gallery edit component withSelect and withDispatch logic has been refactored to use useSelect and useDispatch hooks * Refactor image edit component wasBlockJustInserted is now calculated with getLastBlockInserted * Refactor video edit component wasBlockJustInserted is now calculated with getLastBlockInserted * Fix reset blocks action in last block inserted reducer * Add source param to wasBlockJustInserted selector * Simplify withSelect part of video block * Removed add/clear last block inserted actions and tests due to refactor * Removed addLastBlockInserted from the insert menu's onPress. * rewrote the tests for the lastBlockInserted reducer. * rewrote tests for wasBlockJustInserted selector. * optimized clientId * removed unneeded clientId. * put the expectedSource inside the test meta object. * used expectedState insted {} for state related tests. * used expectedState instead {} for state related tests. * removed parentheses from describe name. * return the same state instead of empty state. * made changes to test name so its intent is clearer. * made the insertion source optional. Co-authored-by: Carlos Garcia --- .../src/components/inserter/menu.native.js | 12 +- packages/block-editor/src/store/actions.js | 13 +- packages/block-editor/src/store/reducer.js | 26 ++++ packages/block-editor/src/store/selectors.js | 16 ++ .../block-editor/src/store/test/reducer.js | 99 +++++++++++++ .../block-editor/src/store/test/selectors.js | 51 +++++++ packages/block-library/src/gallery/edit.js | 137 ++++++++---------- .../block-library/src/image/edit.native.js | 30 ++-- .../block-library/src/video/edit.native.js | 27 ++-- packages/editor/src/store/actions.native.js | 25 ---- packages/editor/src/store/reducer.native.js | 20 --- packages/editor/src/store/selectors.native.js | 11 -- .../editor/src/store/test/actions.native.js | 26 +--- .../editor/src/store/test/reducer.native.js | 27 +--- .../editor/src/store/test/selectors.native.js | 31 +--- 15 files changed, 296 insertions(+), 255 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 1380929f67750e..ddf022e4ffaec5 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -53,8 +53,6 @@ function InserterMenu( { insertDefaultBlock, } = useDispatch( blockEditorStore ); - const { addLastBlockInserted } = useDispatch( 'core/editor' ); - const { items, destinationRootClientId, @@ -135,9 +133,13 @@ function InserterMenu( { innerBlocks ); - addLastBlockInserted( newBlock.clientId ); - - insertBlock( newBlock, insertionIndex, destinationRootClientId ); + insertBlock( + newBlock, + insertionIndex, + destinationRootClientId, + true, + { source: 'inserter_menu' } + ); }, [ insertBlock, destinationRootClientId, insertionIndex ] ); diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index 7fd0555881e346..50f86d515fd13f 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -538,6 +538,7 @@ export function* moveBlockToPosition( * @param {?number} index Index at which block should be inserted. * @param {?string} rootClientId Optional root client ID of block list on which to insert. * @param {?boolean} updateSelection If true block selection will be updated. If false, block selection will not change. Defaults to true. + * @param {?Object} meta Optional Meta values to be passed to the action object. * * @return {Object} Action object. */ @@ -545,9 +546,17 @@ export function insertBlock( block, index, rootClientId, - updateSelection = true + updateSelection = true, + meta ) { - return insertBlocks( [ block ], index, rootClientId, updateSelection ); + return insertBlocks( + [ block ], + index, + rootClientId, + updateSelection, + 0, + meta + ); } /** diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 0930f57bfc5d43..5c30089af2ac34 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1727,6 +1727,31 @@ export function highlightedBlock( state, action ) { return state; } +/** + * Reducer returning the block insertion event list state. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + * + * @return {Object} Updated state. + */ +export function lastBlockInserted( state = {}, action ) { + switch ( action.type ) { + case 'INSERT_BLOCKS': + if ( ! action.updateSelection || ! action.blocks.length ) { + return state; + } + + const clientId = action.blocks[ 0 ].clientId; + const source = action.meta?.source; + + return { clientId, source }; + case 'RESET_BLOCKS': + return {}; + } + return state; +} + export default combineReducers( { blocks, isTyping, @@ -1748,4 +1773,5 @@ export default combineReducers( { hasBlockMovingClientId, automaticChangeStatus, highlightedBlock, + lastBlockInserted, } ); diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 1e6e1a2073ae3f..82f226e081145e 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2084,3 +2084,19 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector( validBlockNames, ] ); + +/** + * Tells if the block with the passed clientId was just inserted. + * + * @param {Object} state Global application state. + * @param {Object} clientId Client Id of the block. + * @param {?string} source Optional insertion source of the block. + * @return {boolean} True if the block matches the last block inserted from the specified source. + */ +export function wasBlockJustInserted( state, clientId, source ) { + const { lastBlockInserted } = state; + return ( + lastBlockInserted.clientId === clientId && + lastBlockInserted.source === source + ); +} diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 826894c8814f54..fd5e06d06c850e 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -33,6 +33,7 @@ import { template, blockListSettings, lastBlockAttributesChange, + lastBlockInserted, } from '../reducer'; describe( 'state', () => { @@ -2944,4 +2945,102 @@ describe( 'state', () => { expect( state ).toBe( null ); } ); } ); + + describe( 'lastBlockInserted', () => { + it( 'should return client id if last block inserted is called with action INSERT_BLOCKS', () => { + const expectedClientId = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f'; + + const action = { + blocks: [ + { + clientId: expectedClientId, + }, + ], + meta: { + source: 'inserter_menu', + }, + type: 'INSERT_BLOCKS', + updateSelection: true, + }; + + const state = lastBlockInserted( {}, action ); + + expect( state.clientId ).toBe( expectedClientId ); + } ); + + it( 'should return inserter_menu source if last block inserted is called with action INSERT_BLOCKS', () => { + const expectedSource = 'inserter_menu'; + + const action = { + blocks: [ + { + clientId: '62bfef6e-d5e9-43ba-b7f9-c77cf354141f', + }, + ], + meta: { + source: expectedSource, + }, + type: 'INSERT_BLOCKS', + updateSelection: true, + }; + + const state = lastBlockInserted( {}, action ); + + expect( state.source ).toBe( expectedSource ); + } ); + + it( 'should return state if last block inserted is called with action INSERT_BLOCKS that is not a updateSelection', () => { + const expectedState = { + clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189', + }; + + const action = { + blocks: [ + { + clientId: '62bfef6e-d5e9-43ba-b7f9-c77cf354141f', + }, + ], + meta: { + source: 'inserter_menu', + }, + type: 'INSERT_BLOCKS', + updateSelection: false, + }; + + const state = lastBlockInserted( expectedState, action ); + + expect( state ).toEqual( expectedState ); + } ); + + it( 'should return state if last block inserted is called with action INSERT_BLOCKS and block list is empty', () => { + const expectedState = { + clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189', + }; + + const action = { + blocks: [], + meta: { + source: 'inserter_menu', + }, + type: 'INSERT_BLOCKS', + updateSelection: true, + }; + + const state = lastBlockInserted( expectedState, action ); + + expect( state ).toEqual( expectedState ); + } ); + + it( 'should return empty state if last block inserted is called with action RESET_BLOCKS', () => { + const expectedState = {}; + + const action = { + type: 'RESET_BLOCKS', + }; + + const state = lastBlockInserted( expectedState, action ); + + expect( state ).toEqual( expectedState ); + } ); + } ); } ); diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 3d2e058dd844f6..467bed7a0b4cfb 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -73,6 +73,7 @@ const { __experimentalGetParsedReusableBlock, __experimentalGetAllowedPatterns, __experimentalGetScopedBlockPatterns, + wasBlockJustInserted, } = selectors; describe( 'selectors', () => { @@ -3450,6 +3451,56 @@ describe( 'selectors', () => { ); } ); } ); + + describe( 'wasBlockJustInserted', () => { + it( 'should return true if the client id passed to wasBlockJustInserted is found within the state', () => { + const expectedClientId = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f'; + const source = 'inserter_menu'; + + const state = { + lastBlockInserted: { + clientId: expectedClientId, + source, + }, + }; + + expect( + wasBlockJustInserted( state, expectedClientId, source ) + ).toBe( true ); + } ); + + it( 'should return false if the client id passed to wasBlockJustInserted is not found within the state', () => { + const expectedClientId = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f'; + const unexpectedClientId = '62bfsed4-d5e9-43ba-b7f9-c77cf565756s'; + const source = 'inserter_menu'; + + const state = { + lastBlockInserted: { + clientId: unexpectedClientId, + source, + }, + }; + + expect( + wasBlockJustInserted( state, expectedClientId, source ) + ).toBe( false ); + } ); + + it( 'should return false if the source passed to wasBlockJustInserted is not found within the state', () => { + const clientId = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f'; + const expectedSource = 'inserter_menu'; + + const state = { + lastBlockInserted: { + clientId, + }, + }; + + expect( + wasBlockJustInserted( state, clientId, expectedSource ) + ).toBe( false ); + } ); + } ); } ); describe( '__experimentalGetParsedReusableBlock', () => { diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index de4139bc457699..1f1f9e52b8179b 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -34,7 +34,7 @@ import { import { Platform, useEffect, useState, useMemo } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; -import { useDispatch, withSelect, withDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { withViewportMatch } from '@wordpress/viewport'; import { View } from '@wordpress/primitives'; import { store as coreStore } from '@wordpress/core-data'; @@ -74,14 +74,11 @@ const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.select( { function GalleryEdit( props ) { const { attributes, + clientId, isSelected, noticeUI, noticeOperations, - mediaUpload, - imageSizes, - resizedImages, onFocus, - wasBlockJustInserted, } = props; const { columns = defaultColumnsNumber( attributes ), @@ -96,6 +93,65 @@ function GalleryEdit( props ) { blockEditorStore ); + const { + imageSizes, + mediaUpload, + getMedia, + wasBlockJustInserted, + } = useSelect( ( select ) => { + const settings = select( blockEditorStore ).getSettings(); + + return { + imageSizes: settings.imageSizes, + mediaUpload: settings.mediaUpload, + getMedia: select( coreStore ).getMedia, + wasBlockJustInserted: select( + blockEditorStore + ).wasBlockJustInserted( clientId, 'inserter_menu' ), + }; + } ); + + const { resizedImages } = useMemo( () => { + if ( isSelected ) { + return reduce( + attributes.ids, + ( currentResizedImages, id ) => { + if ( ! id ) { + return currentResizedImages; + } + const image = getMedia( id ); + const sizes = reduce( + imageSizes, + ( currentSizes, size ) => { + const defaultUrl = get( image, [ + 'sizes', + size.slug, + 'url', + ] ); + const mediaDetailsUrl = get( image, [ + 'media_details', + 'sizes', + size.slug, + 'source_url', + ] ); + return { + ...currentSizes, + [ size.slug ]: defaultUrl || mediaDetailsUrl, + }; + }, + {} + ); + return { + ...currentResizedImages, + [ parseInt( id, 10 ) ]: sizes, + }; + }, + {} + ); + } + return {}; + }, [ isSelected, attributes.ids, imageSizes ] ); + function setAttributes( newAttrs ) { if ( newAttrs.ids ) { throw new Error( @@ -345,7 +401,7 @@ function GalleryEdit( props ) { notices={ hasImages ? undefined : noticeUI } onFocus={ onFocus } autoOpenMediaUpload={ - ! hasImages && isSelected && wasBlockJustInserted() + ! hasImages && isSelected && wasBlockJustInserted } /> ); @@ -417,75 +473,6 @@ function GalleryEdit( props ) { } export default compose( [ - withSelect( ( select, { attributes: { ids }, isSelected } ) => { - const { getMedia } = select( coreStore ); - const { getSettings } = select( blockEditorStore ); - const { imageSizes, mediaUpload } = getSettings(); - - const resizedImages = useMemo( () => { - if ( isSelected ) { - return reduce( - ids, - ( currentResizedImages, id ) => { - if ( ! id ) { - return currentResizedImages; - } - const image = getMedia( id ); - const sizes = reduce( - imageSizes, - ( currentSizes, size ) => { - const defaultUrl = get( image, [ - 'sizes', - size.slug, - 'url', - ] ); - const mediaDetailsUrl = get( image, [ - 'media_details', - 'sizes', - size.slug, - 'source_url', - ] ); - return { - ...currentSizes, - [ size.slug ]: - defaultUrl || mediaDetailsUrl, - }; - }, - {} - ); - return { - ...currentResizedImages, - [ parseInt( id, 10 ) ]: sizes, - }; - }, - {} - ); - } - return {}; - }, [ isSelected, ids, imageSizes ] ); - - return { - imageSizes, - mediaUpload, - resizedImages, - }; - } ), - withDispatch( ( dispatch, { clientId }, { select } ) => { - return { - wasBlockJustInserted() { - const { clearLastBlockInserted } = dispatch( 'core/editor' ); - const { wasBlockJustInserted } = select( 'core/editor' ); - - const result = wasBlockJustInserted( clientId ); - - if ( result ) { - clearLastBlockInserted(); - return true; - } - return false; - }, - }; - } ), withNotices, withViewportMatch( { isNarrow: '< small' } ), ] )( GalleryEdit ); diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 5c17a956b84629..e011286b55ac4a 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -42,7 +42,7 @@ import { __, sprintf } from '@wordpress/i18n'; import { getProtocol, hasQueryArg } from '@wordpress/url'; import { doAction, hasAction } from '@wordpress/hooks'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; -import { withSelect, withDispatch } from '@wordpress/data'; +import { withSelect } from '@wordpress/data'; import { image as placeholderIcon, textColor, @@ -468,7 +468,7 @@ export class ImageEdit extends Component { icon={ this.getPlaceholderIcon() } onFocus={ this.props.onFocus } autoOpenMediaUpload={ - isSelected && ! url && wasBlockJustInserted() + isSelected && ! url && wasBlockJustInserted } /> @@ -567,10 +567,13 @@ export class ImageEdit extends Component { export default compose( [ withSelect( ( select, props ) => { const { getMedia } = select( coreStore ); - const { getSettings } = select( blockEditorStore ); + const { getSettings, wasBlockJustInserted } = select( + blockEditorStore + ); const { attributes: { id, url }, isSelected, + clientId, } = props; const { imageSizes } = getSettings(); const isNotFileUrl = id && getProtocol( url ) !== 'file:'; @@ -583,25 +586,14 @@ export default compose( [ isNotFileUrl && url && ! hasQueryArg( url, 'w' ) ); + return { image: shouldGetMedia ? getMedia( id ) : null, imageSizes, - }; - } ), - withDispatch( ( dispatch, { clientId }, { select } ) => { - return { - wasBlockJustInserted() { - const { clearLastBlockInserted } = dispatch( 'core/editor' ); - const { wasBlockJustInserted } = select( 'core/editor' ); - - const result = wasBlockJustInserted( clientId ); - - if ( result ) { - clearLastBlockInserted(); - return true; - } - return false; - }, + wasBlockJustInserted: wasBlockJustInserted( + clientId, + 'inserter_menu' + ), }; } ), withPreferredColorScheme, diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js index 3f170fa37a9d70..9ab998ea579dad 100644 --- a/packages/block-library/src/video/edit.native.js +++ b/packages/block-library/src/video/edit.native.js @@ -30,12 +30,13 @@ import { VIDEO_ASPECT_RATIO, VideoPlayer, InspectorControls, + store as blockEditorStore, } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; import { isURL, getProtocol } from '@wordpress/url'; import { doAction, hasAction } from '@wordpress/hooks'; import { video as SvgIcon, replace } from '@wordpress/icons'; -import { withDispatch } from '@wordpress/data'; +import { withSelect } from '@wordpress/data'; /** * Internal dependencies @@ -228,7 +229,7 @@ class VideoEdit extends Component { icon={ this.getIcon( ICON_TYPE.PLACEHOLDER ) } onFocus={ this.props.onFocus } autoOpenMediaUpload={ - isSelected && ! src && wasBlockJustInserted() + isSelected && ! src && wasBlockJustInserted } /> @@ -371,21 +372,11 @@ class VideoEdit extends Component { } export default compose( [ - withDispatch( ( dispatch, { clientId }, { select } ) => { - return { - wasBlockJustInserted() { - const { clearLastBlockInserted } = dispatch( 'core/editor' ); - const { wasBlockJustInserted } = select( 'core/editor' ); - - const result = wasBlockJustInserted( clientId ); - - if ( result ) { - clearLastBlockInserted(); - return true; - } - return false; - }, - }; - } ), + withSelect( ( select, { clientId } ) => ( { + wasBlockJustInserted: select( blockEditorStore ).wasBlockJustInserted( + clientId, + 'inserter_menu' + ), + } ) ), withPreferredColorScheme, ] )( VideoEdit ); diff --git a/packages/editor/src/store/actions.native.js b/packages/editor/src/store/actions.native.js index f45eec5ea3ce33..49d40749cb1c7a 100644 --- a/packages/editor/src/store/actions.native.js +++ b/packages/editor/src/store/actions.native.js @@ -25,28 +25,3 @@ export function togglePostTitleSelection( isSelected = true ) { export function* autosave() { RNReactNativeGutenbergBridge.editorDidAutosave(); } - -/** - * Returns an action object to track the last block that was inserted. - * - * @param {Object} clientId The client id of the block. - * - * @return {Object} Action object. - */ -export function addLastBlockInserted( clientId ) { - return { - type: 'ADD_LAST_BLOCK_INSERTED', - clientId, - }; -} - -/** - * Returns an action object to clear the last block that was inserted. - * - * @return {Object} Action object. - */ -export function clearLastBlockInserted() { - return { - type: 'CLEAR_LAST_BLOCK_INSERTED', - }; -} diff --git a/packages/editor/src/store/reducer.native.js b/packages/editor/src/store/reducer.native.js index ec4c91c6b0c26e..d9b3fbcd67888a 100644 --- a/packages/editor/src/store/reducer.native.js +++ b/packages/editor/src/store/reducer.native.js @@ -80,25 +80,6 @@ export function notices( state = [], action ) { return state; } -/** - * Reducer returning the block insertion event list state. - * - * @param {Object} state Current state. - * @param {Object} action Dispatched action. - * - * @return {Object} Updated state. - */ -export function lastBlockInserted( state = {}, action ) { - switch ( action.type ) { - case 'ADD_LAST_BLOCK_INSERTED': - return { ...state, clientId: action.clientId }; - - case 'CLEAR_LAST_BLOCK_INSERTED': - return {}; - } - return state; -} - export default combineReducers( { postId, postType, @@ -112,5 +93,4 @@ export default combineReducers( { editorSettings, clipboard, notices, - lastBlockInserted, } ); diff --git a/packages/editor/src/store/selectors.native.js b/packages/editor/src/store/selectors.native.js index da65a8d08e3e8a..2edfc373213fa2 100644 --- a/packages/editor/src/store/selectors.native.js +++ b/packages/editor/src/store/selectors.native.js @@ -55,14 +55,3 @@ export const isEditedPostAutosaveable = createRegistrySelector( return false; } ); - -/** - * Tells if the block with the passed clientId was just inserted. - * - * @param {Object} state Global application state. - * @param {Object} clientId client id of the block. - * @return {boolean} If the client id exists within the lastBlockInserted state then the block was just inserted. - */ -export function wasBlockJustInserted( state, clientId ) { - return state.lastBlockInserted.clientId === clientId; -} diff --git a/packages/editor/src/store/test/actions.native.js b/packages/editor/src/store/test/actions.native.js index ed00382fa3b7f8..9449d13e164d76 100644 --- a/packages/editor/src/store/test/actions.native.js +++ b/packages/editor/src/store/test/actions.native.js @@ -1,11 +1,7 @@ /** * Internal dependencies */ -import { - togglePostTitleSelection, - addLastBlockInserted, - clearLastBlockInserted, -} from '../actions'; +import { togglePostTitleSelection } from '../actions'; describe( 'actions native', () => { describe( 'togglePostTitleSelection', () => { @@ -17,24 +13,4 @@ describe( 'actions native', () => { } ); } ); } ); - - describe( 'addLastBlockInserted', () => { - it( 'should return the ADD_LAST_BLOCK_INSERTED action', () => { - const expectedClientId = 1; - const result = addLastBlockInserted( expectedClientId ); - expect( result ).toEqual( { - type: 'ADD_LAST_BLOCK_INSERTED', - clientId: expectedClientId, - } ); - } ); - } ); - - describe( 'clearLastBlockInserted', () => { - it( 'should return the CLEAR_LAST_BLOCK_INSERTED action', () => { - const result = clearLastBlockInserted(); - expect( result ).toEqual( { - type: 'CLEAR_LAST_BLOCK_INSERTED', - } ); - } ); - } ); } ); diff --git a/packages/editor/src/store/test/reducer.native.js b/packages/editor/src/store/test/reducer.native.js index 741c157075eab9..c757b67153b6b8 100644 --- a/packages/editor/src/store/test/reducer.native.js +++ b/packages/editor/src/store/test/reducer.native.js @@ -1,11 +1,11 @@ /** * Internal dependencies */ -import { postTitle, lastBlockInserted } from '../reducer'; +import { postTitle } from '../reducer'; describe( 'state native', () => { describe( 'postTitle', () => { - describe( 'isSelected()', () => { + describe( 'isSelected', () => { it( 'should not be selected by default', () => { expect( postTitle( undefined, {} ).isSelected ).toBe( false ); } ); @@ -32,28 +32,5 @@ describe( 'state native', () => { ).toBe( true ); } ); } ); - - describe( 'lastBlockInserted()', () => { - it( 'should return client id of last block inserted', () => { - const expectedClientId = 1; - const action = { - type: 'ADD_LAST_BLOCK_INSERTED', - clientId: expectedClientId, - }; - - expect( - lastBlockInserted( { clientId: expectedClientId }, action ) - .clientId - ).toBe( expectedClientId ); - } ); - - it( 'should return empty state if last block has been cleared', () => { - const action = { - type: 'CLEAR_LAST_BLOCK_INSERTED', - }; - - expect( lastBlockInserted( {}, action ) ).toStrictEqual( {} ); - } ); - } ); } ); } ); diff --git a/packages/editor/src/store/test/selectors.native.js b/packages/editor/src/store/test/selectors.native.js index f16f9fc1554a51..958a68e651f743 100644 --- a/packages/editor/src/store/test/selectors.native.js +++ b/packages/editor/src/store/test/selectors.native.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { isPostTitleSelected, wasBlockJustInserted } from '../selectors'; +import { isPostTitleSelected } from '../selectors'; describe( 'selectors native', () => { describe( 'isPostTitleSelected', () => { @@ -25,33 +25,4 @@ describe( 'selectors native', () => { expect( isPostTitleSelected( state ) ).toBe( false ); } ); } ); - - describe( 'wasBlockJustInserted', () => { - it( 'should return true if the client id passed to wasBlockJustInserted is found within the state', () => { - const expectedClientId = 1; - const state = { - lastBlockInserted: { - clientId: expectedClientId, - }, - }; - - expect( wasBlockJustInserted( state, expectedClientId ) ).toBe( - true - ); - } ); - - it( 'should return false if the client id passed to wasBlockJustInserted is not found within the state', () => { - const expectedClientId = 1; - const unexpectedClientId = 0; - const state = { - lastBlockInserted: { - clientId: unexpectedClientId, - }, - }; - - expect( wasBlockJustInserted( state, expectedClientId ) ).toBe( - false - ); - } ); - } ); } ); From 41351725ebb32105c12c2e253b23036e3c6b43c1 Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Wed, 31 Mar 2021 12:11:36 -0500 Subject: [PATCH 7/8] added wasBlockJustInserted prop needed after merge with trunk. --- packages/block-library/src/image/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 286a6d1dbf0ecf..f5786100b2290c 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -408,7 +408,7 @@ export class ImageEdit extends Component { image, clientId, imageDefaultSize, - wasBlockJustInserted, + wasBlockJustInserted, } = this.props; const { align, url, alt, id, sizeSlug, className } = attributes; From bb98f4c537b5417db69355e6639eaa0e52eb723c Mon Sep 17 00:00:00 2001 From: Joel Dean Date: Mon, 19 Apr 2021 15:02:35 -0500 Subject: [PATCH 8/8] removed updateSelection from reducer so it's updated at all times. --- packages/block-editor/src/store/reducer.js | 2 +- .../block-editor/src/store/test/reducer.js | 26 ------------------- 2 files changed, 1 insertion(+), 27 deletions(-) diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 5c30089af2ac34..68f0f9b684e958 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1738,7 +1738,7 @@ export function highlightedBlock( state, action ) { export function lastBlockInserted( state = {}, action ) { switch ( action.type ) { case 'INSERT_BLOCKS': - if ( ! action.updateSelection || ! action.blocks.length ) { + if ( ! action.blocks.length ) { return state; } diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index fd5e06d06c850e..13e6fe57ae9809 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -2960,7 +2960,6 @@ describe( 'state', () => { source: 'inserter_menu', }, type: 'INSERT_BLOCKS', - updateSelection: true, }; const state = lastBlockInserted( {}, action ); @@ -2981,7 +2980,6 @@ describe( 'state', () => { source: expectedSource, }, type: 'INSERT_BLOCKS', - updateSelection: true, }; const state = lastBlockInserted( {}, action ); @@ -2989,29 +2987,6 @@ describe( 'state', () => { expect( state.source ).toBe( expectedSource ); } ); - it( 'should return state if last block inserted is called with action INSERT_BLOCKS that is not a updateSelection', () => { - const expectedState = { - clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189', - }; - - const action = { - blocks: [ - { - clientId: '62bfef6e-d5e9-43ba-b7f9-c77cf354141f', - }, - ], - meta: { - source: 'inserter_menu', - }, - type: 'INSERT_BLOCKS', - updateSelection: false, - }; - - const state = lastBlockInserted( expectedState, action ); - - expect( state ).toEqual( expectedState ); - } ); - it( 'should return state if last block inserted is called with action INSERT_BLOCKS and block list is empty', () => { const expectedState = { clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189', @@ -3023,7 +2998,6 @@ describe( 'state', () => { source: 'inserter_menu', }, type: 'INSERT_BLOCKS', - updateSelection: true, }; const state = lastBlockInserted( expectedState, action );