From 834afce14a8c199c2dd1d2307fba8c44887573e6 Mon Sep 17 00:00:00 2001 From: Zebulan Stanphill Date: Tue, 5 May 2020 13:46:18 -0500 Subject: [PATCH] Block editor: use vanilla JS [].includes. --- .../src/components/inserter/block-list.js | 13 ++----------- .../src/components/observe-typing/index.js | 4 ++-- packages/block-editor/src/hooks/align.js | 19 ++++++++++--------- packages/block-editor/src/store/actions.js | 4 ++-- packages/block-editor/src/store/selectors.js | 7 +++---- .../utils/transform-styles/transforms/wrap.js | 7 +------ 6 files changed, 20 insertions(+), 34 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-list.js b/packages/block-editor/src/components/inserter/block-list.js index a1aafcd54061de..3a23ef2bd84ab4 100644 --- a/packages/block-editor/src/components/inserter/block-list.js +++ b/packages/block-editor/src/components/inserter/block-list.js @@ -1,16 +1,7 @@ /** * External dependencies */ -import { - map, - includes, - filter, - findIndex, - flow, - sortBy, - groupBy, - isEmpty, -} from 'lodash'; +import { map, filter, findIndex, flow, sortBy, groupBy, isEmpty } from 'lodash'; /** * WordPress dependencies @@ -120,7 +111,7 @@ function InserterBlockList( { const childItems = useMemo( () => { return filter( filteredItems, ( { name } ) => - includes( rootChildBlocks, name ) + rootChildBlocks?.includes( name ) ); }, [ filteredItems, rootChildBlocks ] ); diff --git a/packages/block-editor/src/components/observe-typing/index.js b/packages/block-editor/src/components/observe-typing/index.js index 6e50f1360672bc..a0d11776f9ed7e 100644 --- a/packages/block-editor/src/components/observe-typing/index.js +++ b/packages/block-editor/src/components/observe-typing/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { over, includes } from 'lodash'; +import { over } from 'lodash'; /** * WordPress dependencies @@ -39,7 +39,7 @@ const KEY_DOWN_ELIGIBLE_KEY_CODES = [ UP, RIGHT, DOWN, LEFT, ENTER, BACKSPACE ]; */ function isKeyDownEligibleForStartTyping( event ) { const { keyCode, shiftKey } = event; - return ! shiftKey && includes( KEY_DOWN_ELIGIBLE_KEY_CODES, keyCode ); + return ! shiftKey && KEY_DOWN_ELIGIBLE_KEY_CODES.includes( keyCode ); } function ObserveTyping( { children, setTimeout: setSafeTimeout } ) { diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js index 527d12c40583b5..5c650af91f16a4 100644 --- a/packages/block-editor/src/hooks/align.js +++ b/packages/block-editor/src/hooks/align.js @@ -2,7 +2,7 @@ * External dependencies */ import classnames from 'classnames'; -import { get, has, includes, without } from 'lodash'; +import { get, has, without } from 'lodash'; /** * WordPress dependencies @@ -189,7 +189,7 @@ export const withDataAlign = createHigherOrderComponent( ); let wrapperProps = props.wrapperProps; - if ( includes( validAlignments, align ) ) { + if ( validAlignments.includes( align ) ) { wrapperProps = { ...wrapperProps, 'data-align': align }; } @@ -210,13 +210,14 @@ export function addAssignedAlign( props, blockType, attributes ) { const { align } = attributes; const blockAlign = getBlockSupport( blockType, 'align' ); const hasWideBlockSupport = hasBlockSupport( blockType, 'alignWide', true ); - const isAlignValid = includes( - // Compute valid alignments without taking into account, - // if the theme supports wide alignments or not. - // This way changing themes does not impacts the block save. - getValidAlignments( blockAlign, hasWideBlockSupport ), - align - ); + + // Compute valid alignments without taking into account if + // the theme supports wide alignments or not. + // This way changing themes does not impact the block save. + const isAlignValid = getValidAlignments( + blockAlign, + hasWideBlockSupport + ).includes( align ); if ( isAlignValid ) { props.className = classnames( `align${ align }`, props.className ); } diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index a4991797255b02..de8ecdc35be60e 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { castArray, first, get, includes, last, some } from 'lodash'; +import { castArray, first, get, last, some } from 'lodash'; /** * WordPress dependencies @@ -265,7 +265,7 @@ function getBlocksWithDefaultStylesApplied( blocks, blockEditorSettings ) { return block; } const className = get( block, [ 'attributes', 'className' ] ); - if ( includes( className, 'is-style-' ) ) { + if ( className?.includes( 'is-style-' ) ) { return block; } const { attributes = {} } = block; diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index fc9dd38979294b..c227a00f6ed700 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -6,7 +6,6 @@ import { flatMap, first, get, - includes, isArray, isBoolean, last, @@ -1131,11 +1130,11 @@ const canInsertBlockTypeUnmemoized = ( if ( isArray( list ) ) { // TODO: when there is a canonical way to detect that we are editing a post // the following check should be changed to something like: - // if ( includes( list, 'core/post-content' ) && getEditorMode() === 'post-content' && item === null ) - if ( includes( list, 'core/post-content' ) && item === null ) { + // if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null ) + if ( list.includes( 'core/post-content' ) && item === null ) { return true; } - return includes( list, item ); + return list.includes( item ); } return defaultResult; }; diff --git a/packages/block-editor/src/utils/transform-styles/transforms/wrap.js b/packages/block-editor/src/utils/transform-styles/transforms/wrap.js index e9cfafac5740fb..389bcd6f0a1447 100644 --- a/packages/block-editor/src/utils/transform-styles/transforms/wrap.js +++ b/packages/block-editor/src/utils/transform-styles/transforms/wrap.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { includes } from 'lodash'; - /** * @constant string IS_ROOT_TAG Regex to check if the selector is a root tag selector. */ @@ -10,7 +5,7 @@ const IS_ROOT_TAG = /^(body|html|:root).*$/; const wrap = ( namespace, ignore = [] ) => ( node ) => { const updateSelector = ( selector ) => { - if ( includes( ignore, selector.trim() ) ) { + if ( ignore.includes( selector.trim() ) ) { return selector; }