From 97affa3ec6d864c1964bf5ceb89fce1f0fc069f9 Mon Sep 17 00:00:00 2001 From: Zebulan Stanphill Date: Wed, 1 Jul 2020 19:06:48 -0500 Subject: [PATCH] Block editor: use vanilla JS [].includes. (#21063) --- .../src/components/inserter/menu.js | 8 +------- .../src/components/observe-typing/index.js | 4 ++-- packages/block-editor/src/hooks/align.js | 19 ++++++++++--------- packages/block-editor/src/store/actions.js | 5 +++-- packages/block-editor/src/store/selectors.js | 7 +++---- .../utils/transform-styles/transforms/wrap.js | 7 +------ 6 files changed, 20 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index c86fc5d5d06e11..62fa3616741493 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { includes } from 'lodash'; - /** * WordPress dependencies */ @@ -60,8 +55,7 @@ function InserterMenu( { const showPatterns = ! destinationRootClientId && hasPatterns; const onKeyDown = ( event ) => { if ( - includes( - [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ], + [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].includes( event.keyCode ) ) { 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 1f388d2e22979a..fa1b6db198c59f 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -1,7 +1,8 @@ /** * External dependencies */ -import { castArray, first, get, includes, last, some } from 'lodash'; +import { castArray, first, get, last, some } from 'lodash'; + /** * WordPress dependencies */ @@ -265,7 +266,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 b06c4964294ba0..460eac5e3fb74f 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, @@ -1126,11 +1125,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; }