tags.
diff --git a/packages/autop/src/test/index.test.js b/packages/autop/src/test/index.test.js
index 8fc73f4e03965..02bffeab830dd 100644
--- a/packages/autop/src/test/index.test.js
+++ b/packages/autop/src/test/index.test.js
@@ -1,10 +1,7 @@
/**
* Internal dependencies
*/
-import {
- autop,
- removep,
-} from '../';
+import { autop, removep } from '../';
test( 'empty string', () => {
expect( autop( '' ) ).toBe( '' );
@@ -81,13 +78,16 @@ done = 0;
expect( autop( str ).trim() ).toBe( expected );
// Make sure HTML breaks are maintained if manually inserted
- str = 'Look at this code\n\nLine1 \n\nCool, huh?';
- expected = 'Look at this code
\nLine1 \nCool, huh?
';
+ str =
+ 'Look at this code\n\nLine1 \n\nCool, huh?';
+ expected =
+ 'Look at this code
\nLine1 \nCool, huh?
';
expect( autop( str ).trim() ).toBe( expected );
} );
test( 'skip input elements', () => {
- const str = 'Username: ' + str + '
' );
} );
@@ -133,7 +133,8 @@ Paragraph two.`;
Paragraph two.`;
- const expected = 'Paragraph one.
\n' + // line breaks only after
+ const expected =
+ '
Paragraph one.
\n' + // line breaks only after
'
' +
'Paragraph one.
\n' + // line breaks only after
+ const shortcodeExpected =
+ '
Paragraph one.
\n' + // line breaks only after
'
[video width="720" height="480" mp4="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4"]' +
'
Paragraph one.
\n' + // line breaks only after
+ const expected1 =
+ '
Paragraph one.
\n' + // line breaks only after
'
' +
'Paragraph one.
\n' + // line breaks only after block tags
+ const expected2 =
+ 'Paragraph one.
\n' + // line breaks only after block tags
'\n' +
'
' +
'Alabama Alaska Arizona Arkansas California Alabama Alaska Arizona Arkansas California ' + str + '
' );
} );
@@ -399,14 +404,8 @@ test( 'that autop treats inline elements as inline', () => {
test( 'element sanity', () => {
[
- [
- 'Hello ',
- 'Hello
\n',
- ],
- [
- 'Hello ',
- 'Hello
\n',
- ],
+ [ 'Hello ', 'Hello
\n' ],
+ [ 'Hello ', 'Hello
\n' ],
[
'Hello ',
'Hello
\n',
diff --git a/packages/babel-plugin-makepot/src/index.js b/packages/babel-plugin-makepot/src/index.js
index ad0cde941aecb..6764c1ff82294 100644
--- a/packages/babel-plugin-makepot/src/index.js
+++ b/packages/babel-plugin-makepot/src/index.js
@@ -93,10 +93,7 @@ const REGEXP_TRANSLATOR_COMMENT = /^\s*translators:\s*([\s\S]+)/im;
function getNodeAsString( node ) {
switch ( node.type ) {
case 'BinaryExpression':
- return (
- getNodeAsString( node.left ) +
- getNodeAsString( node.right )
- );
+ return getNodeAsString( node.left ) + getNodeAsString( node.right );
case 'StringLiteral':
return node.value;
@@ -134,7 +131,10 @@ function getExtractedComment( path, _originalNodeLine ) {
const match = commentNode.value.match( REGEXP_TRANSLATOR_COMMENT );
if ( match ) {
// Extract text from matched translator prefix
- comment = match[ 1 ].split( '\n' ).map( ( text ) => text.trim() ).join( ' ' );
+ comment = match[ 1 ]
+ .split( '\n' )
+ .map( ( text ) => text.trim() )
+ .join( ' ' );
// False return indicates to Lodash to break iteration
return false;
@@ -178,10 +178,7 @@ function isValidTranslationKey( key ) {
* @return {boolean} Whether valid translation keys match.
*/
function isSameTranslation( a, b ) {
- return isEqual(
- pick( a, VALID_TRANSLATION_KEYS ),
- pick( b, VALID_TRANSLATION_KEYS )
- );
+ return isEqual( pick( a, VALID_TRANSLATION_KEYS ), pick( b, VALID_TRANSLATION_KEYS ) );
}
module.exports = function() {
@@ -240,11 +237,15 @@ module.exports = function() {
};
for ( const key in baseData.headers ) {
- baseData.translations[ '' ][ '' ].msgstr.push( `${ key }: ${ baseData.headers[ key ] };\n` );
+ baseData.translations[ '' ][ '' ].msgstr.push(
+ `${ key }: ${ baseData.headers[ key ] };\n`
+ );
}
// Attempt to exract nplurals from header
- const pluralsMatch = ( baseData.headers[ 'plural-forms' ] || '' ).match( /nplurals\s*=\s*(\d+);/ );
+ const pluralsMatch = ( baseData.headers[ 'plural-forms' ] || '' ).match(
+ /nplurals\s*=\s*(\d+);/
+ );
if ( pluralsMatch ) {
nplurals = parseInt( pluralsMatch[ 1 ], 10 );
}
@@ -260,7 +261,9 @@ module.exports = function() {
// Assign file reference comment, ensuring consistent pathname
// reference between Win32 and POSIX
const { filename } = this.file.opts;
- const pathname = relative( '.', filename ).split( sep ).join( '/' );
+ const pathname = relative( '.', filename )
+ .split( sep )
+ .join( '/' );
translation.comments = {
reference: pathname + ':' + path.node.loc.start.line,
};
@@ -294,34 +297,42 @@ module.exports = function() {
const files = Object.keys( strings ).sort();
// Combine translations from each file grouped by context
- const translations = reduce( files, ( memo, file ) => {
- for ( const context in strings[ file ] ) {
- // Within the same file, sort translations by line
- const sortedTranslations = sortBy(
- strings[ file ][ context ],
- 'comments.reference'
- );
-
- forEach( sortedTranslations, ( translation ) => {
- const { msgctxt = '', msgid } = translation;
- if ( ! memo.hasOwnProperty( msgctxt ) ) {
- memo[ msgctxt ] = {};
- }
-
- // Merge references if translation already exists
- if ( isSameTranslation( translation, memo[ msgctxt ][ msgid ] ) ) {
- translation.comments.reference = uniq( [
- memo[ msgctxt ][ msgid ].comments.reference,
- translation.comments.reference,
- ].join( '\n' ).split( '\n' ) ).join( '\n' );
- }
-
- memo[ msgctxt ][ msgid ] = translation;
- } );
- }
-
- return memo;
- }, {} );
+ const translations = reduce(
+ files,
+ ( memo, file ) => {
+ for ( const context in strings[ file ] ) {
+ // Within the same file, sort translations by line
+ const sortedTranslations = sortBy(
+ strings[ file ][ context ],
+ 'comments.reference'
+ );
+
+ forEach( sortedTranslations, ( translation ) => {
+ const { msgctxt = '', msgid } = translation;
+ if ( ! memo.hasOwnProperty( msgctxt ) ) {
+ memo[ msgctxt ] = {};
+ }
+
+ // Merge references if translation already exists
+ if ( isSameTranslation( translation, memo[ msgctxt ][ msgid ] ) ) {
+ translation.comments.reference = uniq(
+ [
+ memo[ msgctxt ][ msgid ].comments.reference,
+ translation.comments.reference,
+ ]
+ .join( '\n' )
+ .split( '\n' )
+ ).join( '\n' );
+ }
+
+ memo[ msgctxt ][ msgid ] = translation;
+ } );
+ }
+
+ return memo;
+ },
+ {}
+ );
// Merge translations from individual files into headers
const data = merge( {}, baseData, { translations } );
diff --git a/packages/babel-plugin-makepot/test/index.js b/packages/babel-plugin-makepot/test/index.js
index 52ae1dcc5b913..32554aa065693 100644
--- a/packages/babel-plugin-makepot/test/index.js
+++ b/packages/babel-plugin-makepot/test/index.js
@@ -74,7 +74,9 @@ describe( 'babel-plugin', () => {
} );
it( 'should traverse up parents until it encounters comment', () => {
- const comment = getCommentFromString( "// translators: Greeting\nconst string = __( 'Hello world' );" );
+ const comment = getCommentFromString(
+ "// translators: Greeting\nconst string = __( 'Hello world' );"
+ );
expect( comment ).toBe( 'Greeting' );
} );
@@ -86,7 +88,9 @@ describe( 'babel-plugin', () => {
} );
it( 'should use multi-line comment starting many lines previous', () => {
- const comment = getCommentFromString( "/* translators: Long comment\nspanning multiple \nlines */\nconst string = __( 'Hello world' );" );
+ const comment = getCommentFromString(
+ "/* translators: Long comment\nspanning multiple \nlines */\nconst string = __( 'Hello world' );"
+ );
expect( comment ).toBe( 'Long comment spanning multiple lines' );
} );
diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js
index c6ec1e3c9a71a..5a9bc8133da81 100644
--- a/packages/babel-preset-default/index.js
+++ b/packages/babel-preset-default/index.js
@@ -1,8 +1,7 @@
module.exports = function( api ) {
let wpBuildOpts = {};
- const isWPBuild = ( name ) => [ 'WP_BUILD_MAIN', 'WP_BUILD_MODULE' ].some(
- ( buildName ) => name === buildName
- );
+ const isWPBuild = ( name ) =>
+ [ 'WP_BUILD_MAIN', 'WP_BUILD_MODULE' ].some( ( buildName ) => name === buildName );
const isTestEnv = api.env() === 'test';
@@ -68,10 +67,13 @@ module.exports = function( api ) {
isDefault: false,
},
],
- [ require.resolve( '@babel/plugin-transform-react-jsx' ), {
- pragma: 'createElement',
- pragmaFrag: 'Fragment',
- } ],
+ [
+ require.resolve( '@babel/plugin-transform-react-jsx' ),
+ {
+ pragma: 'createElement',
+ pragmaFrag: 'Fragment',
+ },
+ ],
require.resolve( '@babel/plugin-proposal-async-generator-functions' ),
maybeGetPluginTransformRuntime(),
].filter( Boolean ),
diff --git a/packages/blob/src/test/index.js b/packages/blob/src/test/index.js
index 7604e3956b6d2..110340e13639e 100644
--- a/packages/blob/src/test/index.js
+++ b/packages/blob/src/test/index.js
@@ -1,9 +1,7 @@
/**
* Internal dependencies
*/
-import {
- isBlobURL,
-} from '../';
+import { isBlobURL } from '../';
describe( 'isBlobURL', () => {
it( 'returns true if the url starts with "blob:"', () => {
diff --git a/packages/block-directory/src/components/block-ratings/stars.js b/packages/block-directory/src/components/block-ratings/stars.js
index 577c3cb15e0dc..9b78e608dae7b 100644
--- a/packages/block-directory/src/components/block-ratings/stars.js
+++ b/packages/block-directory/src/components/block-ratings/stars.js
@@ -9,9 +9,7 @@ import { times } from 'lodash';
import { __, sprintf } from '@wordpress/i18n';
import { Icon } from '@wordpress/components';
-function Stars( {
- rating,
-} ) {
+function Stars( { rating } ) {
const stars = Math.round( rating / 0.5 ) * 0.5;
const fullStarCount = Math.floor( rating );
@@ -20,9 +18,15 @@ function Stars( {
return (
- { times( fullStarCount, ( i ) =>
);
}
diff --git a/packages/block-directory/src/components/downloadable-block-header/index.js b/packages/block-directory/src/components/downloadable-block-header/index.js
index 942c4fda0c7c7..4e765c0ab125d 100644
--- a/packages/block-directory/src/components/downloadable-block-header/index.js
+++ b/packages/block-directory/src/components/downloadable-block-header/index.js
@@ -13,17 +13,17 @@ import BlockRatings from '../block-ratings';
function DownloadableBlockHeader( { icon, title, rating, ratingCount, onClick } ) {
return (
- {
- icon.match( /\.(jpeg|jpg|gif|png)(?:\?.*)?$/ ) !== null ?
- // translators: %s: Name of the plugin e.g: "Akismet".
-
:
-
-
- }
+ { icon.match( /\.(jpeg|jpg|gif|png)(?:\?.*)?$/ ) !== null ? (
+ // translators: %s: Name of the plugin e.g: "Akismet".
+
+ ) : (
+
+
+ ) }
-
+
{ title }
-
- { description }
-
+ { description }
-
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/index.js b/packages/block-directory/src/components/downloadable-block-list-item/index.js
index c5bd8b8f0244e..3eb69eba7d2d7 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/index.js
+++ b/packages/block-directory/src/components/downloadable-block-list-item/index.js
@@ -5,10 +5,7 @@ import DownloadableBlockHeader from '../downloadable-block-header';
import DownloadableBlockAuthorInfo from '../downloadable-block-author-info';
import DownloadableBlockInfo from '../downloadable-block-info';
-function DownloadableBlockListItem( {
- item,
- onClick,
-} ) {
+function DownloadableBlockListItem( { item, onClick } ) {
const {
icon,
title,
diff --git a/packages/block-directory/src/components/downloadable-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js
index 315403267a56c..36b952f3ecc5d 100644
--- a/packages/block-directory/src/components/downloadable-blocks-list/index.js
+++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js
@@ -27,22 +27,23 @@ function DownloadableBlocksList( { items, onHover = noop, children, downloadAndI
*/
/* eslint-disable jsx-a11y/no-redundant-roles */
- { items && items.map( ( item ) =>
- {
- downloadAndInstallBlock( item );
- onHover( null );
- } }
- onFocus={ () => onHover( item ) }
- onMouseEnter={ () => onHover( item ) }
- onMouseLeave={ () => onHover( null ) }
- onBlur={ () => onHover( null ) }
- item={ item }
- />
- ) }
+ { items &&
+ items.map( ( item ) => (
+ {
+ downloadAndInstallBlock( item );
+ onHover( null );
+ } }
+ onFocus={ () => onHover( item ) }
+ onMouseEnter={ () => onHover( item ) }
+ onMouseLeave={ () => onHover( null ) }
+ onBlur={ () => onHover( null ) }
+ item={ item }
+ />
+ ) ) }
{ children }
/* eslint-enable jsx-a11y/no-redundant-roles */
@@ -59,49 +60,44 @@ export default compose(
return {
downloadAndInstallBlock: ( item ) => {
const onDownloadError = () => {
- createErrorNotice(
- __( 'Block previews can’t load.' ),
- {
- id: DOWNLOAD_ERROR_NOTICE_ID,
- actions: [
- {
- label: __( 'Retry' ),
- onClick: () => {
- removeNotice( DOWNLOAD_ERROR_NOTICE_ID );
- downloadBlock( item, onSuccess, onDownloadError );
- },
+ createErrorNotice( __( 'Block previews can’t load.' ), {
+ id: DOWNLOAD_ERROR_NOTICE_ID,
+ actions: [
+ {
+ label: __( 'Retry' ),
+ onClick: () => {
+ removeNotice( DOWNLOAD_ERROR_NOTICE_ID );
+ downloadBlock( item, onSuccess, onDownloadError );
},
- ],
- } );
+ },
+ ],
+ } );
};
const onSuccess = () => {
const createdBlock = onSelect( item );
const onInstallBlockError = () => {
- createErrorNotice(
- __( 'Block previews can\'t install.' ),
- {
- id: INSTALL_ERROR_NOTICE_ID,
- actions: [
- {
- label: __( 'Retry' ),
- onClick: () => {
- removeNotice( INSTALL_ERROR_NOTICE_ID );
- installBlock( item, noop, onInstallBlockError );
- },
+ createErrorNotice( __( "Block previews can't install." ), {
+ id: INSTALL_ERROR_NOTICE_ID,
+ actions: [
+ {
+ label: __( 'Retry' ),
+ onClick: () => {
+ removeNotice( INSTALL_ERROR_NOTICE_ID );
+ installBlock( item, noop, onInstallBlockError );
},
- {
- label: __( 'Remove' ),
- onClick: () => {
- removeNotice( INSTALL_ERROR_NOTICE_ID );
- removeBlocks( createdBlock.clientId );
- unregisterBlockType( item.name );
- },
+ },
+ {
+ label: __( 'Remove' ),
+ onClick: () => {
+ removeNotice( INSTALL_ERROR_NOTICE_ID );
+ removeBlocks( createdBlock.clientId );
+ unregisterBlockType( item.name );
},
- ],
- }
- );
+ },
+ ],
+ } );
};
installBlock( item, noop, onInstallBlockError );
@@ -110,5 +106,5 @@ export default compose(
downloadBlock( item, onSuccess, onDownloadError );
},
};
- } ),
+ } )
)( DownloadableBlocksList );
diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/index.js b/packages/block-directory/src/components/downloadable-blocks-panel/index.js
index 0936ee3eea6f2..f49e96654acc2 100644
--- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js
+++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js
@@ -12,9 +12,21 @@ import { Spinner, withSpokenMessages } from '@wordpress/components';
*/
import DownloadableBlocksList from '../downloadable-blocks-list';
-function DownloadableBlocksPanel( { downloadableItems, onSelect, onHover, hasPermission, isLoading, isWaiting, debouncedSpeak } ) {
+function DownloadableBlocksPanel( {
+ downloadableItems,
+ onSelect,
+ onHover,
+ hasPermission,
+ isLoading,
+ isWaiting,
+ debouncedSpeak,
+} ) {
if ( ! hasPermission ) {
- debouncedSpeak( __( 'No blocks found in your library. Please contact your site administrator to install new blocks.' ) );
+ debouncedSpeak(
+ __(
+ 'No blocks found in your library. Please contact your site administrator to install new blocks.'
+ )
+ );
return (
{ __( 'No blocks found in your library.' ) }
@@ -41,7 +53,11 @@ function DownloadableBlocksPanel( { downloadableItems, onSelect, onHover, hasPer
}
const resultsFoundMessage = sprintf(
- _n( 'No blocks found in your library. We did find %d block available for download.', 'No blocks found in your library. We did find %d blocks available for download.', downloadableItems.length ),
+ _n(
+ 'No blocks found in your library. We did find %d block available for download.',
+ 'No blocks found in your library. We did find %d blocks available for download.',
+ downloadableItems.length
+ ),
downloadableItems.length
);
@@ -51,7 +67,11 @@ function DownloadableBlocksPanel( { downloadableItems, onSelect, onHover, hasPer
{ __( 'No blocks found in your library. These blocks can be downloaded and installed:' ) }
-
+
(
-
+
{
- const {
- getBlockAttributes,
- getSelectedBlockClientId,
- } = select( 'core/block-editor' );
+ const { getBlockAttributes, getSelectedBlockClientId } = select( 'core/block-editor' );
const { caption } = getBlockAttributes( clientId );
const isBlockSelected = getSelectedBlockClientId() === clientId;
diff --git a/packages/block-editor/src/components/block-compare/block-view.js b/packages/block-editor/src/components/block-compare/block-view.js
index ed5e030c7fd4f..861370f6e3edf 100644
--- a/packages/block-editor/src/components/block-compare/block-view.js
+++ b/packages/block-editor/src/components/block-compare/block-view.js
@@ -9,9 +9,7 @@ const BlockView = ( { title, rawContent, renderedContent, action, actionText, cl
{ title }
-
- { rawContent }
-
+
{ rawContent }
{ renderedContent }
@@ -19,7 +17,9 @@ const BlockView = ( { title, rawContent, renderedContent, action, actionText, cl
- { actionText }
+
+ { actionText }
+
);
diff --git a/packages/block-editor/src/components/block-compare/index.js b/packages/block-editor/src/components/block-compare/index.js
index 18638255508ec..f1e4d21fc992d 100644
--- a/packages/block-editor/src/components/block-compare/index.js
+++ b/packages/block-editor/src/components/block-compare/index.js
@@ -27,7 +27,11 @@ class BlockCompare extends Component {
'block-editor-block-compare__removed': item.removed,
} );
- return { item.value } ;
+ return (
+
+ { item.value }
+
+ );
} );
}
@@ -43,8 +47,12 @@ class BlockCompare extends Component {
const newBlocks = castArray( block );
// Get converted block details
- const newContent = newBlocks.map( ( item ) => getSaveContent( item.name, item.attributes, item.innerBlocks ) );
- const renderedContent = newBlocks.map( ( item ) => getSaveElement( item.name, item.attributes, item.innerBlocks ) );
+ const newContent = newBlocks.map( ( item ) =>
+ getSaveContent( item.name, item.attributes, item.innerBlocks )
+ );
+ const renderedContent = newBlocks.map( ( item ) =>
+ getSaveElement( item.name, item.attributes, item.innerBlocks )
+ );
return {
rawContent: newContent.join( '' ),
diff --git a/packages/block-editor/src/components/block-compare/test/block-view.js b/packages/block-editor/src/components/block-compare/test/block-view.js
index 657f326f44ce9..755722983351b 100644
--- a/packages/block-editor/src/components/block-compare/test/block-view.js
+++ b/packages/block-editor/src/components/block-compare/test/block-view.js
@@ -11,7 +11,16 @@ import BlockView from '../block-view';
describe( 'BlockView', () => {
test( 'should match snapshot', () => {
- const wrapper = shallow(
- { ( context ) => (
-
- );
-}, 'withBlockEditContext' );
+export const withBlockEditContext = ( mapContextToProps ) =>
+ createHigherOrderComponent( ( OriginalComponent ) => {
+ return ( props ) => (
+
+ { ( context ) => (
+
+ );
+ }, 'withBlockEditContext' );
/**
* A Higher Order Component used to render conditionally the wrapped
@@ -62,10 +60,6 @@ export const withBlockEditContext = ( mapContextToProps ) => createHigherOrderCo
*/
export const ifBlockEditSelected = createHigherOrderComponent( ( OriginalComponent ) => {
return ( props ) => (
-
- { ( { isSelected } ) => isSelected && (
-
+ { ( { isSelected } ) => isSelected &&
);
}, 'ifBlockEditSelected' );
diff --git a/packages/block-editor/src/components/block-edit/edit.js b/packages/block-editor/src/components/block-edit/edit.js
index 9094435159485..3172916c870a9 100644
--- a/packages/block-editor/src/components/block-edit/edit.js
+++ b/packages/block-editor/src/components/block-edit/edit.js
@@ -18,9 +18,9 @@ export const Edit = ( props ) => {
}
// Generate a class name for the block's editable form
- const generatedClassName = hasBlockSupport( blockType, 'className', true ) ?
- getBlockDefaultClassName( name ) :
- null;
+ const generatedClassName = hasBlockSupport( blockType, 'className', true )
+ ? getBlockDefaultClassName( name )
+ : null;
const className = classnames( generatedClassName, attributes.className );
// `edit` and `save` are functions or components describing the markup
diff --git a/packages/block-editor/src/components/block-edit/edit.native.js b/packages/block-editor/src/components/block-edit/edit.native.js
index 8a4d0ad8350e9..2577ad3e0733e 100644
--- a/packages/block-editor/src/components/block-edit/edit.native.js
+++ b/packages/block-editor/src/components/block-edit/edit.native.js
@@ -14,9 +14,7 @@ export const Edit = ( props ) => {
const Component = blockType.edit;
- return (
-
diff --git a/packages/block-editor/src/components/block-edit/test/edit.js b/packages/block-editor/src/components/block-edit/test/edit.js
index d09ce608cc14b..0a24f55ce2471 100644
--- a/packages/block-editor/src/components/block-edit/test/edit.js
+++ b/packages/block-editor/src/components/block-edit/test/edit.js
@@ -7,11 +7,7 @@ import { noop } from 'lodash';
/**
* WordPress dependencies
*/
-import {
- registerBlockType,
- unregisterBlockType,
- getBlockTypes,
-} from '@wordpress/blocks';
+import { registerBlockType, unregisterBlockType, getBlockTypes } from '@wordpress/blocks';
/**
* Internal dependencies
@@ -70,9 +66,7 @@ describe( 'Edit', () => {
title: 'block title',
} );
- const wrapper = shallow(
-
+
+ ),
};
}
const renderedIcon =
{ renderedIcon }
diff --git a/packages/block-editor/src/components/block-icon/index.native.js b/packages/block-editor/src/components/block-icon/index.native.js
index 4dddda5ecce8f..5708c21d86318 100644
--- a/packages/block-editor/src/components/block-icon/index.native.js
+++ b/packages/block-editor/src/components/block-icon/index.native.js
@@ -12,19 +12,21 @@ import { Path, Icon, SVG } from '@wordpress/components';
export default function BlockIcon( { icon, showColors = false } ) {
if ( get( icon, [ 'src' ] ) === 'block-default' ) {
icon = {
- src:
+
+ ),
};
}
const renderedIcon =
- { renderedIcon }
-
- );
+ return { renderedIcon } ;
}
diff --git a/packages/block-editor/src/components/block-icon/test/index.js b/packages/block-editor/src/components/block-icon/test/index.js
index 8c74330ad34d4..36b0144530977 100644
--- a/packages/block-editor/src/components/block-icon/test/index.js
+++ b/packages/block-editor/src/components/block-icon/test/index.js
@@ -39,7 +39,9 @@ describe( 'BlockIcon', () => {
} );
it( 'adds background and foreground styles when colors are enabled', () => {
- const wrapper = shallow(
- {
- // translators: Button to fix block content
- _x( 'Resolve', 'imperative verb' )
- }
+
+ { // translators: Button to fix block content
+ _x( 'Resolve', 'imperative verb' ) }
,
hasHTMLBlock && (
@@ -87,16 +92,20 @@ export class BlockInvalidWarning extends Component {
}
}
-const blockToClassic = ( block ) => createBlock( 'core/freeform', {
- content: block.originalContent,
-} );
-const blockToHTML = ( block ) => createBlock( 'core/html', {
- content: block.originalContent,
-} );
-const blockToBlocks = ( block ) => rawHandler( {
- HTML: block.originalContent,
-} );
-const recoverBlock = ( { name, attributes, innerBlocks } ) => createBlock( name, attributes, innerBlocks );
+const blockToClassic = ( block ) =>
+ createBlock( 'core/freeform', {
+ content: block.originalContent,
+ } );
+const blockToHTML = ( block ) =>
+ createBlock( 'core/html', {
+ content: block.originalContent,
+ } );
+const blockToBlocks = ( block ) =>
+ rawHandler( {
+ HTML: block.originalContent,
+ } );
+const recoverBlock = ( { name, attributes, innerBlocks } ) =>
+ createBlock( name, attributes, innerBlocks );
export default compose( [
withSelect( ( select, { clientId } ) => ( {
diff --git a/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.js b/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.js
index 08edb75976fba..be93d313342ad 100644
--- a/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.js
+++ b/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.js
@@ -11,10 +11,7 @@ import styles from './block-mobile-floating-toolbar.scss';
const FloatingToolbar = ( { children } ) => {
return (
- { children }
-
+ { children }
);
};
diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js
index fc6834562d895..8644cd748a19a 100644
--- a/packages/block-editor/src/components/block-list/block-popover.js
+++ b/packages/block-editor/src/components/block-list/block-popover.js
@@ -170,10 +170,9 @@ function BlockPopover( {
//
// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
tabIndex={ -1 }
- className={ classnames(
- 'block-editor-block-list__block-popover-inserter',
- { 'is-visible': isInserterShown }
- ) }
+ className={ classnames( 'block-editor-block-list__block-popover-inserter', {
+ 'is-visible': isInserterShown,
+ } ) }
>
@@ -197,11 +196,7 @@ function BlockPopover( {
) }
{ showEmptyBlockSideInserter && (
-
) }
@@ -231,11 +226,16 @@ function wrapperSelector( select ) {
const { __experimentalMoverDirection } = getBlockListSettings( rootClientId ) || {};
// Get Block List Settings for all ancestors of the current Block clientId
- const ancestorBlockListSettings = __experimentalGetBlockListSettingsForBlocks( blockParentsClientIds );
+ const ancestorBlockListSettings = __experimentalGetBlockListSettingsForBlocks(
+ blockParentsClientIds
+ );
// Find the index of the first Block with the `captureDescendantsToolbars` prop defined
// This will be the top most ancestor because getBlockParents() returns tree from top -> bottom
- const topmostAncestorWithCaptureDescendantsToolbarsIndex = findIndex( ancestorBlockListSettings, [ '__experimentalCaptureToolbars', true ] );
+ const topmostAncestorWithCaptureDescendantsToolbarsIndex = findIndex( ancestorBlockListSettings, [
+ '__experimentalCaptureToolbars',
+ true,
+ ] );
let capturingClientId;
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index a0ebc634abb52..ff038162acecb 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -9,11 +9,7 @@ import { animated } from 'react-spring/web.cjs';
* WordPress dependencies
*/
import { useRef, useEffect, useLayoutEffect, useState, useContext } from '@wordpress/element';
-import {
- focus,
- isTextField,
- placeCaretAtHorizontalEdge,
-} from '@wordpress/dom';
+import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
import {
getBlockType,
@@ -24,11 +20,7 @@ import {
} from '@wordpress/blocks';
import { withFilters } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
-import {
- withDispatch,
- withSelect,
- useSelect,
-} from '@wordpress/data';
+import { withDispatch, withSelect, useSelect } from '@wordpress/data';
import { withViewportMatch } from '@wordpress/viewport';
import { compose, pure, ifCondition } from '@wordpress/compose';
@@ -157,14 +149,16 @@ function BlockListBlock( {
}
isMounting.current = false;
- }, [
- isSelected,
- isMultiSelecting,
- isNavigationMode,
- ] );
+ }, [ isSelected, isMultiSelecting, isNavigationMode ] );
// Block Reordering animation
- const animationStyle = useMovingAnimation( wrapper, isSelected || isPartOfMultiSelection, isSelected || isFirstMultiSelected, enableAnimation, animateOnChange );
+ const animationStyle = useMovingAnimation(
+ wrapper,
+ isSelected || isPartOfMultiSelection,
+ isSelected || isFirstMultiSelected,
+ enableAnimation,
+ animateOnChange
+ );
// Other event handlers
@@ -214,12 +208,10 @@ function BlockListBlock( {
// If the block is selected and we're typing the block should not appear.
// Empty paragraph blocks should always show up as unselected.
- const showEmptyBlockSideInserter = ! isNavigationMode && isSelected && isEmptyDefaultBlock && isValid;
+ const showEmptyBlockSideInserter =
+ ! isNavigationMode && isSelected && isEmptyDefaultBlock && isValid;
const shouldAppearSelected =
- ! isFocusMode &&
- ! showEmptyBlockSideInserter &&
- isSelected &&
- ! isTypingWithinBlock;
+ ! isFocusMode && ! showEmptyBlockSideInserter && isSelected && ! isTypingWithinBlock;
const isDragging = isDraggingBlocks && ( isSelected || isPartOfMultiSelection );
@@ -301,27 +293,20 @@ function BlockListBlock( {
role="group"
{ ...wrapperProps }
style={
- wrapperProps && wrapperProps.style ?
- {
- ...wrapperProps.style,
- ...animationStyle,
- } :
- animationStyle
+ wrapperProps && wrapperProps.style
+ ? {
+ ...wrapperProps.style,
+ ...animationStyle,
+ }
+ : animationStyle
}
>
{ isValid && blockEdit }
- { isValid && mode === 'html' && (
-
- { getSaveElement( blockType, attributes ) }
-
,
+ { getSaveElement( blockType, attributes ) }
,
] }
{ !! hasError &&
}
@@ -329,74 +314,69 @@ function BlockListBlock( {
);
}
-const applyWithSelect = withSelect(
- ( select, { clientId, rootClientId, isLargeViewport } ) => {
- const {
- isBlockSelected,
- isAncestorMultiSelected,
- isBlockMultiSelected,
- isFirstMultiSelectedBlock,
- getLastMultiSelectedBlockClientId,
- isTyping,
- getBlockMode,
- isSelectionEnabled,
- getSelectedBlocksInitialCaretPosition,
- getSettings,
- hasSelectedInnerBlock,
- getTemplateLock,
- __unstableGetBlockWithoutInnerBlocks,
- isNavigationMode,
- } = select( 'core/block-editor' );
-
- const block = __unstableGetBlockWithoutInnerBlocks( clientId );
- const isSelected = isBlockSelected( clientId );
- const { focusMode, isRTL } = getSettings();
- const templateLock = getTemplateLock( rootClientId );
- const checkDeep = true;
-
- // "ancestor" is the more appropriate label due to "deep" check
- const isAncestorOfSelectedBlock = hasSelectedInnerBlock( clientId, checkDeep );
-
- // The fallback to `{}` is a temporary fix.
- // This function should never be called when a block is not present in the state.
- // It happens now because the order in withSelect rendering is not correct.
- const { name, attributes, isValid } = block || {};
+const applyWithSelect = withSelect( ( select, { clientId, rootClientId, isLargeViewport } ) => {
+ const {
+ isBlockSelected,
+ isAncestorMultiSelected,
+ isBlockMultiSelected,
+ isFirstMultiSelectedBlock,
+ getLastMultiSelectedBlockClientId,
+ isTyping,
+ getBlockMode,
+ isSelectionEnabled,
+ getSelectedBlocksInitialCaretPosition,
+ getSettings,
+ hasSelectedInnerBlock,
+ getTemplateLock,
+ __unstableGetBlockWithoutInnerBlocks,
+ isNavigationMode,
+ } = select( 'core/block-editor' );
- return {
- isMultiSelected: isBlockMultiSelected( clientId ),
- isPartOfMultiSelection:
- isBlockMultiSelected( clientId ) || isAncestorMultiSelected( clientId ),
- isFirstMultiSelected: isFirstMultiSelectedBlock( clientId ),
- isLastMultiSelected: getLastMultiSelectedBlockClientId() === clientId,
-
- // We only care about this prop when the block is selected
- // Thus to avoid unnecessary rerenders we avoid updating the prop if the block is not selected.
- isTypingWithinBlock:
- ( isSelected || isAncestorOfSelectedBlock ) && isTyping(),
-
- mode: getBlockMode( clientId ),
- isSelectionEnabled: isSelectionEnabled(),
- initialPosition: isSelected ? getSelectedBlocksInitialCaretPosition() : null,
- isEmptyDefaultBlock:
- name && isUnmodifiedDefaultBlock( { name, attributes } ),
- isLocked: !! templateLock,
- isFocusMode: focusMode && isLargeViewport,
- isNavigationMode: isNavigationMode(),
- isRTL,
-
- // Users of the editor.BlockListBlock filter used to be able to access the block prop
- // Ideally these blocks would rely on the clientId prop only.
- // This is kept for backward compatibility reasons.
- block,
-
- name,
- attributes,
- isValid,
- isSelected,
- isAncestorOfSelectedBlock,
- };
- }
-);
+ const block = __unstableGetBlockWithoutInnerBlocks( clientId );
+ const isSelected = isBlockSelected( clientId );
+ const { focusMode, isRTL } = getSettings();
+ const templateLock = getTemplateLock( rootClientId );
+ const checkDeep = true;
+
+ // "ancestor" is the more appropriate label due to "deep" check
+ const isAncestorOfSelectedBlock = hasSelectedInnerBlock( clientId, checkDeep );
+
+ // The fallback to `{}` is a temporary fix.
+ // This function should never be called when a block is not present in the state.
+ // It happens now because the order in withSelect rendering is not correct.
+ const { name, attributes, isValid } = block || {};
+
+ return {
+ isMultiSelected: isBlockMultiSelected( clientId ),
+ isPartOfMultiSelection: isBlockMultiSelected( clientId ) || isAncestorMultiSelected( clientId ),
+ isFirstMultiSelected: isFirstMultiSelectedBlock( clientId ),
+ isLastMultiSelected: getLastMultiSelectedBlockClientId() === clientId,
+
+ // We only care about this prop when the block is selected
+ // Thus to avoid unnecessary rerenders we avoid updating the prop if the block is not selected.
+ isTypingWithinBlock: ( isSelected || isAncestorOfSelectedBlock ) && isTyping(),
+
+ mode: getBlockMode( clientId ),
+ isSelectionEnabled: isSelectionEnabled(),
+ initialPosition: isSelected ? getSelectedBlocksInitialCaretPosition() : null,
+ isEmptyDefaultBlock: name && isUnmodifiedDefaultBlock( { name, attributes } ),
+ isLocked: !! templateLock,
+ isFocusMode: focusMode && isLargeViewport,
+ isNavigationMode: isNavigationMode(),
+ isRTL,
+
+ // Users of the editor.BlockListBlock filter used to be able to access the block prop
+ // Ideally these blocks would rely on the clientId prop only.
+ // This is kept for backward compatibility reasons.
+ block,
+
+ name,
+ attributes,
+ isValid,
+ isSelected,
+ isAncestorOfSelectedBlock,
+ };
+} );
const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
const {
@@ -421,17 +401,13 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
},
onInsertDefaultBlockAfter() {
const { clientId, rootClientId } = ownProps;
- const {
- getBlockIndex,
- } = select( 'core/block-editor' );
+ const { getBlockIndex } = select( 'core/block-editor' );
const index = getBlockIndex( clientId, rootClientId );
insertDefaultBlock( {}, rootClientId, index + 1 );
},
onInsertBlocksAfter( blocks ) {
const { clientId, rootClientId } = ownProps;
- const {
- getBlockIndex,
- } = select( 'core/block-editor' );
+ const { getBlockIndex } = select( 'core/block-editor' );
const index = getBlockIndex( clientId, rootClientId );
insertBlocks( blocks, index + 1, rootClientId );
},
@@ -440,10 +416,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
},
onMerge( forward ) {
const { clientId } = ownProps;
- const {
- getPreviousBlockClientId,
- getNextBlockClientId,
- } = select( 'core/block-editor' );
+ const { getPreviousBlockClientId, getNextBlockClientId } = select( 'core/block-editor' );
if ( forward ) {
const nextBlockClientId = getNextBlockClientId( clientId );
@@ -458,10 +431,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
}
},
onReplace( blocks, indexToSelect ) {
- if (
- blocks.length &&
- ! isUnmodifiedDefaultBlock( blocks[ blocks.length - 1 ] )
- ) {
+ if ( blocks.length && ! isUnmodifiedDefaultBlock( blocks[ blocks.length - 1 ] ) ) {
__unstableMarkLastChangeAsPersistent();
}
replaceBlocks( [ ownProps.clientId ], blocks, indexToSelect );
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index ee70886738af9..c9ff195971111 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -1,11 +1,7 @@
/**
* External dependencies
*/
-import {
- View,
- Text,
- TouchableWithoutFeedback,
-} from 'react-native';
+import { View, Text, TouchableWithoutFeedback } from 'react-native';
/**
* WordPress dependencies
@@ -89,13 +85,15 @@ class BlockListBlock extends Component {
isRootListInnerBlockHolder,
} = this.props;
- const fullSolidBorderStyle = { // define style for full border
+ const fullSolidBorderStyle = {
+ // define style for full border
...styles.fullSolidBordered,
...getStylesFromColorScheme( styles.solidBorderColor, styles.solidBorderColorDark ),
};
- if ( hasChildren ) { // if block has children apply style for selected parent
- return { ...styles.selectedParent, ...fullSolidBorderStyle };
+ if ( hasChildren ) {
+ // if block has children apply style for selected parent
+ return { ...styles.selectedParent, ...fullSolidBorderStyle };
}
// apply semi border selected style when screen is in vertical position
@@ -130,20 +128,23 @@ class BlockListBlock extends Component {
return hasChildren ? styles.neutral : styles.full;
}
- if ( isParentSelected ) { // parent of a block is selected
- const dashedBorderStyle = { // define style for dashed border
+ if ( isParentSelected ) {
+ // parent of a block is selected
+ const dashedBorderStyle = {
+ // define style for dashed border
...styles.dashedBordered,
...getStylesFromColorScheme( styles.dashedBorderColor, styles.dashedBorderColorDark ),
};
// return apply childOfSelected or childOfSelectedLeaf
// margins depending if block has children or not
- return hasChildren ?
- { ...styles.childOfSelected, ...dashedBorderStyle } :
- { ...styles.childOfSelectedLeaf, ...dashedBorderStyle };
+ return hasChildren
+ ? { ...styles.childOfSelected, ...dashedBorderStyle }
+ : { ...styles.childOfSelectedLeaf, ...dashedBorderStyle };
}
- if ( isAncestorSelected ) { // ancestor of a block is selected
+ if ( isAncestorSelected ) {
+ // ancestor of a block is selected
return {
...styles.descendantOfSelectedLeaf,
...( hasChildren && styles.marginHorizontalNone ),
@@ -156,10 +157,7 @@ class BlockListBlock extends Component {
}
applyBlockStyle() {
- const {
- isSelected,
- isDimmed,
- } = this.props;
+ const { isSelected, isDimmed } = this.props;
return [
isSelected ? this.applySelectedBlockStyle() : this.applyUnSelectedBlockStyle(),
@@ -168,10 +166,7 @@ class BlockListBlock extends Component {
}
applyToolbarStyle() {
- const {
- hasChildren,
- isUnregisteredBlock,
- } = this.props;
+ const { hasChildren, isUnregisteredBlock } = this.props;
if ( ! hasChildren || isUnregisteredBlock ) {
return styles.neutralToolbar;
@@ -197,8 +192,8 @@ class BlockListBlock extends Component {
return (
<>
- { showFloatingToolbar &&
- (
+ { showFloatingToolbar && (
+
- ) }
+ ) }
- { isValid ? this.getBlockForType() : { isSelected &&
+ { isValid ? (
+ this.getBlockForType()
+ ) : (
+
+ { isSelected &&
@@ -245,9 +246,7 @@ export default compose( [
getBlockCount,
} = select( 'core/block-editor' );
- const {
- getGroupingBlockName,
- } = select( 'core/blocks' );
+ const { getGroupingBlockName } = select( 'core/blocks' );
const order = getBlockIndex( clientId, rootClientId );
const isSelected = isBlockSelected( clientId );
@@ -273,7 +272,9 @@ export default compose( [
const commonAncestor = getLowestCommonAncestorWithSelectedBlock( clientId );
const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1;
- const firstToSelectId = commonAncestor ? parents[ commonAncestorIndex ] : parents[ parents.length - 1 ];
+ const firstToSelectId = commonAncestor
+ ? parents[ commonAncestorIndex ]
+ : parents[ parents.length - 1 ];
const hasChildren = ! isUnregisteredBlock && !! getBlockCount( clientId );
const hasParent = !! parentId;
@@ -284,8 +285,14 @@ export default compose( [
const selectedParents = selectedBlockClientId ? getBlockParents( selectedBlockClientId ) : [];
const isDescendantSelected = selectedParents.includes( clientId );
const isDescendantOfParentSelected = selectedParents.includes( parentId );
- const isTouchable = isSelected || isDescendantOfParentSelected || isParentSelected || parentId === '';
- const isDimmed = ! isSelected && isSelectedBlockNested && ! isAncestorSelected && ! isDescendantSelected && ( isDescendantOfParentSelected || rootBlockId === clientId );
+ const isTouchable =
+ isSelected || isDescendantOfParentSelected || isParentSelected || parentId === '';
+ const isDimmed =
+ ! isSelected &&
+ isSelectedBlockNested &&
+ ! isAncestorSelected &&
+ ! isDescendantSelected &&
+ ( isDescendantOfParentSelected || rootBlockId === clientId );
const isInnerBlockHolder = name === getGroupingBlockName();
const isRootListInnerBlockHolder = ! isSelectedBlockNested && isInnerBlockHolder;
@@ -325,10 +332,7 @@ export default compose( [
return {
mergeBlocks( forward ) {
const { clientId } = ownProps;
- const {
- getPreviousBlockClientId,
- getNextBlockClientId,
- } = select( 'core/block-editor' );
+ const { getPreviousBlockClientId, getNextBlockClientId } = select( 'core/block-editor' );
if ( forward ) {
const nextBlockClientId = getNextBlockClientId( clientId );
diff --git a/packages/block-editor/src/components/block-list/breadcrumb.js b/packages/block-editor/src/components/block-list/breadcrumb.js
index 2f0c4f28bd918..77fa495db9951 100644
--- a/packages/block-editor/src/components/block-list/breadcrumb.js
+++ b/packages/block-editor/src/components/block-list/breadcrumb.js
@@ -26,20 +26,17 @@ import BlockTitle from '../block-title';
* @return {WPComponent} The component to be rendered.
*/
function BlockBreadcrumb( { clientId, rootClientId, moverDirection, ...props } ) {
- const selected = useSelect( ( select ) => {
- const {
- __unstableGetBlockWithoutInnerBlocks,
- getBlockIndex,
- } = select( 'core/block-editor' );
- const index = getBlockIndex( clientId, rootClientId );
- const { name, attributes } = __unstableGetBlockWithoutInnerBlocks( clientId );
- return { index, name, attributes };
- }, [ clientId, rootClientId ] );
+ const selected = useSelect(
+ ( select ) => {
+ const { __unstableGetBlockWithoutInnerBlocks, getBlockIndex } = select( 'core/block-editor' );
+ const index = getBlockIndex( clientId, rootClientId );
+ const { name, attributes } = __unstableGetBlockWithoutInnerBlocks( clientId );
+ return { index, name, attributes };
+ },
+ [ clientId, rootClientId ]
+ );
const { index, name, attributes } = selected;
- const {
- setNavigationMode,
- removeBlock,
- } = useDispatch( 'core/block-editor' );
+ const { setNavigationMode, removeBlock } = useDispatch( 'core/block-editor' );
const ref = useRef();
// Focus the breadcrumb in navigation mode.
diff --git a/packages/block-editor/src/components/block-list/breadcrumb.native.js b/packages/block-editor/src/components/block-list/breadcrumb.native.js
index ae5d615f43b87..33a9b3ace7c7e 100644
--- a/packages/block-editor/src/components/block-list/breadcrumb.native.js
+++ b/packages/block-editor/src/components/block-list/breadcrumb.native.js
@@ -24,14 +24,23 @@ const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon } )
{/* Open BottomSheet with markup */} }
+ onPress={ () => {
+ /* Open BottomSheet with markup */
+ } }
disabled={ true } /* Disable temporarily since onPress function is empty */
>
- { rootClientId && rootBlockIcon && (
- [
+ ,
+ ] }
{
- const {
- getBlockRootClientId,
- getBlockName,
- } = select( 'core/block-editor' );
+ const { getBlockRootClientId, getBlockName } = select( 'core/block-editor' );
const blockName = getBlockName( clientId );
const blockType = getBlockType( blockName );
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 1fd0f8afa9fc5..48d05a5f629b6 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -56,10 +56,7 @@ function BlockList( {
selectedBlockClientId: getSelectedBlockClientId(),
multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
hasMultiSelection: hasMultiSelection(),
- enableAnimation: (
- ! isTyping() &&
- getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD
- ),
+ enableAnimation: ! isTyping() && getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
};
}
@@ -80,17 +77,11 @@ function BlockList( {
} );
return (
-
+
{ blockClientIds.map( ( clientId, index ) => {
- const isBlockInSelection = hasMultiSelection ?
- multiSelectedBlockClientIds.includes( clientId ) :
- selectedBlockClientId === clientId;
+ const isBlockInSelection = hasMultiSelection
+ ? multiSelectedBlockClientIds.includes( clientId )
+ : selectedBlockClientId === clientId;
return (
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index 6d871a8305e99..df1a9f1d7e2b6 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -34,7 +34,9 @@ export class BlockList extends Component {
this.onCaretVerticalPositionChange = this.onCaretVerticalPositionChange.bind( this );
this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind( this );
- this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind( this );
+ this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind(
+ this
+ );
this.shouldShowInnerBlockAppender = this.shouldShowInnerBlockAppender.bind( this );
}
@@ -43,7 +45,12 @@ export class BlockList extends Component {
}
onCaretVerticalPositionChange( targetId, caretY, previousCaretY ) {
- KeyboardAwareFlatList.handleCaretVerticalPositionChange( this.scrollViewRef, targetId, caretY, previousCaretY );
+ KeyboardAwareFlatList.handleCaretVerticalPositionChange(
+ this.scrollViewRef,
+ targetId,
+ caretY,
+ previousCaretY
+ );
}
scrollViewInnerRef( ref ) {
@@ -59,7 +66,7 @@ export class BlockList extends Component {
const willShowInsertionPoint = shouldShowInsertionPointBefore(); // call without the client_id argument since this is the appender
return (
- 0 );
+ const { blockClientIds, renderAppender } = this.props;
+ return renderAppender && blockClientIds.length > 0;
}
render() {
@@ -89,10 +93,7 @@ export class BlockList extends Component {
} = this.props;
return (
-
+
- )
- }
-
+ ) }
);
}
@@ -146,7 +145,9 @@ export class BlockList extends Component {
onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange }
isSmallScreen={ ! this.props.isFullyBordered }
/>
- { ! this.shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter( clientId ) &&
);
@@ -156,9 +157,11 @@ export class BlockList extends Component {
const paragraphBlock = createBlock( 'core/paragraph' );
return (
<>
- {
- this.addBlockToEndOfPost( paragraphBlock );
- } } >
+ {
+ this.addBlockToEndOfPost( paragraphBlock );
+ } }
+ >
<__experimentalBlockListFooter.Slot />
@@ -186,22 +189,18 @@ export default compose( [
return (
blockInsertionPointIsVisible &&
insertionPoint.rootClientId === rootClientId &&
- (
- // if list is empty, show the insertion point (via the default appender)
- blockClientIds.length === 0 ||
+ // if list is empty, show the insertion point (via the default appender)
+ ( blockClientIds.length === 0 ||
// or if the insertion point is right before the denoted block
- blockClientIds[ insertionPoint.index ] === clientId
- )
+ blockClientIds[ insertionPoint.index ] === clientId )
);
};
const shouldShowInsertionPointAfter = ( clientId ) => {
return (
blockInsertionPointIsVisible &&
insertionPoint.rootClientId === rootClientId &&
-
// if the insertion point is at the end of the list
blockClientIds.length === insertionPoint.index &&
-
// and the denoted block is the last one on the list, show the indicator at the end of the block
blockClientIds[ insertionPoint.index - 1 ] === clientId
);
@@ -221,11 +220,7 @@ export default compose( [
};
} ),
withDispatch( ( dispatch ) => {
- const {
- insertBlock,
- replaceBlock,
- clearSelectedBlock,
- } = dispatch( 'core/block-editor' );
+ const { insertBlock, replaceBlock, clearSelectedBlock } = dispatch( 'core/block-editor' );
return {
clearSelectedBlock,
diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js
index 7ca4d53ca065c..3ff506db3631e 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -19,22 +19,25 @@ import { getClosestTabbable } from '../writing-flow';
import { getBlockDOMNode } from '../../utils/dom';
function Indicator( { clientId } ) {
- const showInsertionPoint = useSelect( ( select ) => {
- const {
- getBlockIndex,
- getBlockInsertionPoint,
- isBlockInsertionPointVisible,
- getBlockRootClientId,
- } = select( 'core/block-editor' );
- const rootClientId = getBlockRootClientId( clientId );
- const blockIndex = getBlockIndex( clientId, rootClientId );
- const insertionPoint = getBlockInsertionPoint();
- return (
- isBlockInsertionPointVisible() &&
- insertionPoint.index === blockIndex &&
- insertionPoint.rootClientId === rootClientId
- );
- }, [ clientId ] );
+ const showInsertionPoint = useSelect(
+ ( select ) => {
+ const {
+ getBlockIndex,
+ getBlockInsertionPoint,
+ isBlockInsertionPointVisible,
+ getBlockRootClientId,
+ } = select( 'core/block-editor' );
+ const rootClientId = getBlockRootClientId( clientId );
+ const blockIndex = getBlockIndex( clientId, rootClientId );
+ const insertionPoint = getBlockInsertionPoint();
+ return (
+ isBlockInsertionPointVisible() &&
+ insertionPoint.index === blockIndex &&
+ insertionPoint.rootClientId === rootClientId
+ );
+ },
+ [ clientId ]
+ );
if ( ! showInsertionPoint ) {
return null;
@@ -104,7 +107,7 @@ export default function InsertionPoint( {
}
const targetRect = target.getBoundingClientRect();
- const isReverse = clientY < targetRect.top + ( targetRect.height / 2 );
+ const isReverse = clientY < targetRect.top + targetRect.height / 2;
const blockNode = getBlockDOMNode( inserterClientId );
const container = isReverse ? containerRef.current : blockNode;
const closest = getClosestTabbable( blockNode, true, container );
@@ -115,46 +118,50 @@ export default function InsertionPoint( {
}
}
- return <>
- { ! isMultiSelecting && ( isInserterShown || isInserterForced ) &&
-
-
- { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ }
-
setIsInserterForced( true ) }
- onBlur={ () => setIsInserterForced( false ) }
- onClick={ focusClosestTabbable }
- // While ideally it would be enough to capture the
- // bubbling focus event from the Inserter, due to the
- // characteristics of click focusing of `button`s in
- // Firefox and Safari, it is not reliable.
- //
- // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
- tabIndex={ -1 }
- className={ classnames(
- 'block-editor-block-list__insertion-point-inserter',
- {
- // Hide the inserter above the selected block.
- 'is-inserter-hidden': inserterClientId === selectedBlockClientId,
- }
- ) }
+ return (
+ <>
+ { ! isMultiSelecting && ( isInserterShown || isInserterForced ) && (
+
-
+
+
+ { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ }
+
setIsInserterForced( true ) }
+ onBlur={ () => setIsInserterForced( false ) }
+ onClick={ focusClosestTabbable }
+ // While ideally it would be enough to capture the
+ // bubbling focus event from the Inserter, due to the
+ // characteristics of click focusing of `button`s in
+ // Firefox and Safari, it is not reliable.
+ //
+ // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+ tabIndex={ -1 }
+ className={ classnames( 'block-editor-block-list__insertion-point-inserter', {
+ // Hide the inserter above the selected block.
+ 'is-inserter-hidden': inserterClientId === selectedBlockClientId,
+ } ) }
+ >
+
+
+
+ ) }
+
+ { children }
- }
-
- { children }
-
- ;
+
+ );
}
diff --git a/packages/block-editor/src/components/block-list/insertion-point.native.js b/packages/block-editor/src/components/block-list/insertion-point.native.js
index a9a2741514783..5f19827ba6840 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.native.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.native.js
@@ -15,13 +15,19 @@ import { withPreferredColorScheme } from '@wordpress/compose';
import styles from './style.scss';
const BlockInsertionPoint = ( { getStylesFromColorScheme } ) => {
- const lineStyle = getStylesFromColorScheme( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
- const labelStyle = getStylesFromColorScheme( styles.labelStyleAddHere, styles.labelStyleAddHereDark );
+ const lineStyle = getStylesFromColorScheme(
+ styles.lineStyleAddHere,
+ styles.lineStyleAddHereDark
+ );
+ const labelStyle = getStylesFromColorScheme(
+ styles.labelStyleAddHere,
+ styles.labelStyleAddHereDark
+ );
return (
-
+
{ __( 'ADD BLOCK HERE' ) }
+ { __( 'ADD BLOCK HERE' ) }
);
diff --git a/packages/block-editor/src/components/block-list/moving-animation.js b/packages/block-editor/src/components/block-list/moving-animation.js
index afa36bb40304d..8c53827772575 100644
--- a/packages/block-editor/src/components/block-list/moving-animation.js
+++ b/packages/block-editor/src/components/block-list/moving-animation.js
@@ -44,7 +44,13 @@ const getAbsolutePosition = ( element ) => {
*
* @return {Object} Style object.
*/
-function useMovingAnimation( ref, isSelected, adjustScrolling, enableAnimation, triggerAnimationOnChange ) {
+function useMovingAnimation(
+ ref,
+ isSelected,
+ adjustScrolling,
+ enableAnimation,
+ triggerAnimationOnChange
+) {
const prefersReducedMotion = useReducedMotion() || ! enableAnimation;
const [ triggeredAnimation, triggerAnimation ] = useReducer( counterReducer, 0 );
const [ finishedAnimation, endAnimation ] = useReducer( counterReducer, 0 );
@@ -80,11 +86,15 @@ function useMovingAnimation( ref, isSelected, adjustScrolling, enableAnimation,
const newTransform = {
x: previous ? previous.left - destination.left : 0,
y: previous ? previous.top - destination.top : 0,
- scrollTop: previous && scrollContainer ? scrollContainer.scrollTop - previous.top + destination.top : 0,
+ scrollTop:
+ previous && scrollContainer
+ ? scrollContainer.scrollTop - previous.top + destination.top
+ : 0,
};
- ref.current.style.transform = newTransform.x === 0 && newTransform.y === 0 ?
- undefined :
- `translate3d(${ newTransform.x }px,${ newTransform.y }px,0)`;
+ ref.current.style.transform =
+ newTransform.x === 0 && newTransform.y === 0
+ ? undefined
+ : `translate3d(${ newTransform.x }px,${ newTransform.y }px,0)`;
triggerAnimation();
setTransform( newTransform );
}, [ triggerAnimationOnChange ] );
@@ -109,25 +119,17 @@ function useMovingAnimation( ref, isSelected, adjustScrolling, enableAnimation,
} );
// Dismiss animations if disabled.
- return prefersReducedMotion ?
- {} :
- {
- transformOrigin: 'center',
- transform: interpolate(
- [
- animationProps.x,
- animationProps.y,
- ],
- ( x, y ) => x === 0 && y === 0 ? undefined : `translate3d(${ x }px,${ y }px,0)`
- ),
- zIndex: interpolate(
- [
- animationProps.x,
- animationProps.y,
- ],
- ( x, y ) => ! isSelected || ( x === 0 && y === 0 ) ? undefined : `1`
- ),
- };
+ return prefersReducedMotion
+ ? {}
+ : {
+ transformOrigin: 'center',
+ transform: interpolate( [ animationProps.x, animationProps.y ], ( x, y ) =>
+ x === 0 && y === 0 ? undefined : `translate3d(${ x }px,${ y }px,0)`
+ ),
+ zIndex: interpolate( [ animationProps.x, animationProps.y ], ( x, y ) =>
+ ! isSelected || ( x === 0 && y === 0 ) ? undefined : `1`
+ ),
+ };
}
export default useMovingAnimation;
diff --git a/packages/block-editor/src/components/block-list/nav-up-icon.js b/packages/block-editor/src/components/block-list/nav-up-icon.js
index 8fa1c8d20bd76..a1878c28df241 100644
--- a/packages/block-editor/src/components/block-list/nav-up-icon.js
+++ b/packages/block-editor/src/components/block-list/nav-up-icon.js
@@ -3,6 +3,16 @@
*/
import { SVG, Path } from '@wordpress/components';
-const NavigateUp =
+
+);
export default NavigateUp;
diff --git a/packages/block-editor/src/components/block-list/root-container.js b/packages/block-editor/src/components/block-list/root-container.js
index 84985f8fd7c07..38f7c0e6e0a12 100644
--- a/packages/block-editor/src/components/block-list/root-container.js
+++ b/packages/block-editor/src/components/block-list/root-container.js
@@ -18,11 +18,9 @@ export const Context = createContext();
export const BlockNodes = createContext();
function selector( select ) {
- const {
- getSelectedBlockClientId,
- hasMultiSelection,
- isMultiSelecting,
- } = select( 'core/block-editor' );
+ const { getSelectedBlockClientId, hasMultiSelection, isMultiSelecting } = select(
+ 'core/block-editor'
+ );
return {
selectedBlockClientId: getSelectedBlockClientId(),
@@ -47,11 +45,7 @@ function onDragStart( event ) {
}
function RootContainer( { children, className }, ref ) {
- const {
- selectedBlockClientId,
- hasMultiSelection,
- isMultiSelecting,
- } = useSelect( selector, [] );
+ const { selectedBlockClientId, hasMultiSelection, isMultiSelecting } = useSelect( selector, [] );
const { selectBlock } = useDispatch( 'core/block-editor' );
const onSelectionStart = useMultiSelection( ref );
@@ -83,15 +77,8 @@ function RootContainer( { children, className }, ref ) {
>
-
- { children }
-
+
+ { children }
diff --git a/packages/block-editor/src/components/block-list/subdirectory-icon.js b/packages/block-editor/src/components/block-list/subdirectory-icon.js
index 9da2bc4a1c88a..f024c51880e4b 100644
--- a/packages/block-editor/src/components/block-list/subdirectory-icon.js
+++ b/packages/block-editor/src/components/block-list/subdirectory-icon.js
@@ -12,7 +12,6 @@ const Subdirectory = ( { ...extraProps } ) => (
{ ...extraProps }
>
- )
-;
-
+
+);
export default Subdirectory;
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 a0ba7de65a0f0..001a7e28af84f 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
@@ -56,15 +56,13 @@ function selector( select ) {
}
function toggleRichText( container, toggle ) {
- Array
- .from( container.querySelectorAll( '.rich-text' ) )
- .forEach( ( node ) => {
- if ( toggle ) {
- node.setAttribute( 'contenteditable', true );
- } else {
- node.removeAttribute( 'contenteditable' );
- }
- } );
+ Array.from( container.querySelectorAll( '.rich-text' ) ).forEach( ( node ) => {
+ if ( toggle ) {
+ node.setAttribute( 'contenteditable', true );
+ } else {
+ node.removeAttribute( 'contenteditable' );
+ }
+ } );
}
export default function useMultiSelection( ref ) {
@@ -76,12 +74,9 @@ export default function useMultiSelection( ref ) {
getBlockParents,
selectedBlockClientId,
} = useSelect( selector, [] );
- const {
- startMultiSelect,
- stopMultiSelect,
- multiSelect,
- selectBlock,
- } = useDispatch( 'core/block-editor' );
+ const { startMultiSelect, stopMultiSelect, multiSelect, selectBlock } = useDispatch(
+ 'core/block-editor'
+ );
const rafId = useRef();
const startClientId = useRef();
const anchorElement = useRef();
@@ -102,10 +97,7 @@ export default function useMultiSelection( ref ) {
const blockNode = getBlockDOMNode( selectedBlockClientId );
const { startContainer, endContainer } = selection.getRangeAt( 0 );
- if (
- ! blockNode.contains( startContainer ) ||
- ! blockNode.contains( endContainer )
- ) {
+ if ( ! blockNode.contains( startContainer ) || ! blockNode.contains( endContainer ) ) {
selection.removeAllRanges();
}
}
@@ -147,46 +139,49 @@ export default function useMultiSelection( ref ) {
selectedBlockClientId,
] );
- const onSelectionChange = useCallback( ( { isSelectionEnd } ) => {
- const selection = window.getSelection();
+ const onSelectionChange = useCallback(
+ ( { isSelectionEnd } ) => {
+ const selection = window.getSelection();
- // If no selection is found, end multi selection and enable all rich
- // text areas.
- if ( ! selection.rangeCount || selection.isCollapsed ) {
- toggleRichText( ref.current, true );
- return;
- }
+ // If no selection is found, end multi selection and enable all rich
+ // text areas.
+ if ( ! selection.rangeCount || selection.isCollapsed ) {
+ toggleRichText( ref.current, true );
+ return;
+ }
- const clientId = getBlockClientId( selection.focusNode );
- const isSingularSelection = startClientId.current === clientId;
+ const clientId = getBlockClientId( selection.focusNode );
+ const isSingularSelection = startClientId.current === clientId;
- if ( isSingularSelection ) {
- selectBlock( clientId );
+ if ( isSingularSelection ) {
+ selectBlock( clientId );
- // If the selection is complete (on mouse up), and no multiple
- // blocks have been selected, set focus back to the anchor element
- // if the anchor element contains the selection. Additionally, rich
- // text elements that were previously disabled can now be enabled
- // again.
- if ( isSelectionEnd ) {
- toggleRichText( ref.current, true );
+ // If the selection is complete (on mouse up), and no multiple
+ // blocks have been selected, set focus back to the anchor element
+ // if the anchor element contains the selection. Additionally, rich
+ // text elements that were previously disabled can now be enabled
+ // again.
+ if ( isSelectionEnd ) {
+ toggleRichText( ref.current, true );
- if ( selection.rangeCount ) {
- const { commonAncestorContainer } = selection.getRangeAt( 0 );
+ if ( selection.rangeCount ) {
+ const { commonAncestorContainer } = selection.getRangeAt( 0 );
- if ( anchorElement.current.contains( commonAncestorContainer ) ) {
- anchorElement.current.focus();
+ if ( anchorElement.current.contains( commonAncestorContainer ) ) {
+ anchorElement.current.focus();
+ }
}
}
- }
- } else {
- const startPath = [ ...getBlockParents( startClientId.current ), startClientId.current ];
- const endPath = [ ...getBlockParents( clientId ), clientId ];
- const depth = Math.min( startPath.length, endPath.length ) - 1;
+ } else {
+ const startPath = [ ...getBlockParents( startClientId.current ), startClientId.current ];
+ const endPath = [ ...getBlockParents( clientId ), clientId ];
+ const depth = Math.min( startPath.length, endPath.length ) - 1;
- multiSelect( startPath[ depth ], endPath[ depth ] );
- }
- }, [ selectBlock, getBlockParents, multiSelect ] );
+ multiSelect( startPath[ depth ], endPath[ depth ] );
+ }
+ },
+ [ selectBlock, getBlockParents, multiSelect ]
+ );
/**
* Handles a mouseup event to end the current mouse multi-selection.
@@ -204,39 +199,45 @@ export default function useMultiSelection( ref ) {
}, [ onSelectionChange, stopMultiSelect ] );
// Only clean up when unmounting, these are added and cleaned up elsewhere.
- useEffect( () => () => {
- document.removeEventListener( 'selectionchange', onSelectionChange );
- window.removeEventListener( 'mouseup', onSelectionEnd );
- window.cancelAnimationFrame( rafId.current );
- }, [ onSelectionChange, onSelectionEnd ] );
+ useEffect(
+ () => () => {
+ document.removeEventListener( 'selectionchange', onSelectionChange );
+ window.removeEventListener( 'mouseup', onSelectionEnd );
+ window.cancelAnimationFrame( rafId.current );
+ },
+ [ onSelectionChange, onSelectionEnd ]
+ );
/**
* Binds event handlers to the document for tracking a pending multi-select
* in response to a mousedown event occurring in a rendered block.
*/
- return useCallback( ( clientId ) => {
- if ( ! isSelectionEnabled ) {
- return;
- }
+ return useCallback(
+ ( clientId ) => {
+ if ( ! isSelectionEnabled ) {
+ return;
+ }
- startClientId.current = clientId;
- anchorElement.current = document.activeElement;
- startMultiSelect();
-
- // `onSelectionStart` is called after `mousedown` and `mouseleave`
- // (from a block). The selection ends when `mouseup` happens anywhere
- // in the window.
- document.addEventListener( 'selectionchange', onSelectionChange );
- window.addEventListener( 'mouseup', onSelectionEnd );
-
- // Removing the contenteditable attributes within the block editor is
- // essential for selection to work across editable areas. The edible
- // hosts are removed, allowing selection to be extended outside the
- // DOM element. `startMultiSelect` sets a flag in the store so the rich
- // text components are updated, but the rerender may happen very slowly,
- // especially in Safari for the blocks that are asynchonously rendered.
- // To ensure the browser instantly removes the selection boundaries, we
- // remove the contenteditable attributes manually.
- toggleRichText( ref.current, false );
- }, [ isSelectionEnabled, startMultiSelect, onSelectionEnd ] );
+ startClientId.current = clientId;
+ anchorElement.current = document.activeElement;
+ startMultiSelect();
+
+ // `onSelectionStart` is called after `mousedown` and `mouseleave`
+ // (from a block). The selection ends when `mouseup` happens anywhere
+ // in the window.
+ document.addEventListener( 'selectionchange', onSelectionChange );
+ window.addEventListener( 'mouseup', onSelectionEnd );
+
+ // Removing the contenteditable attributes within the block editor is
+ // essential for selection to work across editable areas. The edible
+ // hosts are removed, allowing selection to be extended outside the
+ // DOM element. `startMultiSelect` sets a flag in the store so the rich
+ // text components are updated, but the rerender may happen very slowly,
+ // especially in Safari for the blocks that are asynchonously rendered.
+ // To ensure the browser instantly removes the selection boundaries, we
+ // remove the contenteditable attributes manually.
+ toggleRichText( ref.current, false );
+ },
+ [ isSelectionEnabled, startMultiSelect, onSelectionEnd ]
+ );
}
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
index 4be16304d9937..43a34c0466b54 100644
--- a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
+++ b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
@@ -19,11 +19,7 @@ import styles from './style.scss';
import BlockMover from '../block-mover';
import { BlockSettingsButton } from '../block-settings';
-const BlockMobileToolbar = ( {
- clientId,
- onDelete,
- order,
-} ) => (
+const BlockMobileToolbar = ( { clientId, onDelete, order } ) => (
{
- const {
- getBlockIndex,
- } = select( 'core/block-editor' );
+ const { getBlockIndex } = select( 'core/block-editor' );
return {
order: getBlockIndex( clientId ),
@@ -64,5 +56,5 @@ export default compose(
removeBlock( clientId, rootClientId );
},
};
- } ),
+ } )
)( BlockMobileToolbar );
diff --git a/packages/block-editor/src/components/block-mover/icons.js b/packages/block-editor/src/components/block-mover/icons.js
index f3b575bd57a86..a55400d965e02 100644
--- a/packages/block-editor/src/components/block-mover/icons.js
+++ b/packages/block-editor/src/components/block-mover/icons.js
@@ -17,8 +17,10 @@ export const rightArrow = (
export const dragHandle = (
-
);
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index ea5bb8c36d8fe..aebd0f76baa3a 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -45,7 +45,21 @@ export class BlockMover extends Component {
}
render() {
- const { onMoveUp, onMoveDown, __experimentalOrientation: orientation, isRTL, isFirst, isLast, clientIds, blockType, firstIndex, isLocked, instanceId, isHidden, rootClientId } = this.props;
+ const {
+ onMoveUp,
+ onMoveDown,
+ __experimentalOrientation: orientation,
+ isRTL,
+ isFirst,
+ isLast,
+ clientIds,
+ blockType,
+ firstIndex,
+ isLocked,
+ instanceId,
+ isHidden,
+ rootClientId,
+ } = this.props;
const { isFocused } = this.state;
const blocksCount = castArray( clientIds ).length;
if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
@@ -87,7 +101,12 @@ export class BlockMover extends Component {
// to an unfocused state (body as active element) without firing blur on,
// the rendering parent, leaving it unable to react to focus out.
return (
-
+
- {
- getBlockMoverDescription(
- blocksCount,
- blockType && blockType.title,
- firstIndex,
- isFirst,
- isLast,
- -1,
- orientation,
- isRTL,
- )
- }
+
+ { getBlockMoverDescription(
+ blocksCount,
+ blockType && blockType.title,
+ firstIndex,
+ isFirst,
+ isLast,
+ -1,
+ orientation,
+ isRTL
+ ) }
-
- {
- getBlockMoverDescription(
- blocksCount,
- blockType && blockType.title,
- firstIndex,
- isFirst,
- isLast,
- 1,
- orientation,
- isRTL,
- )
- }
+
+ { getBlockMoverDescription(
+ blocksCount,
+ blockType && blockType.title,
+ firstIndex,
+ isFirst,
+ isLast,
+ 1,
+ orientation,
+ isRTL
+ ) }
);
@@ -162,7 +183,13 @@ export class BlockMover extends Component {
export default compose(
withSelect( ( select, { clientIds } ) => {
- const { getBlock, getBlockIndex, getTemplateLock, getBlockRootClientId, getBlockOrder } = select( 'core/block-editor' );
+ const {
+ getBlock,
+ getBlockIndex,
+ getTemplateLock,
+ getBlockRootClientId,
+ getBlockOrder,
+ } = select( 'core/block-editor' );
const normalizedClientIds = castArray( clientIds );
const firstClientId = first( normalizedClientIds );
const block = getBlock( firstClientId );
@@ -171,9 +198,7 @@ export default compose(
const firstIndex = getBlockIndex( firstClientId, rootClientId );
const lastIndex = getBlockIndex( last( normalizedClientIds ), rootClientId );
const { getSettings } = select( 'core/block-editor' );
- const {
- isRTL,
- } = getSettings();
+ const { isRTL } = getSettings();
return {
blockType: block ? getBlockType( block.name ) : null,
@@ -192,5 +217,5 @@ export default compose(
onMoveUp: partial( moveBlocksUp, clientIds, rootClientId ),
};
} ),
- withInstanceId,
+ withInstanceId
)( BlockMover );
diff --git a/packages/block-editor/src/components/block-mover/index.native.js b/packages/block-editor/src/components/block-mover/index.native.js
index 40bc4d550b7ab..1e0cf94fc9994 100644
--- a/packages/block-editor/src/components/block-mover/index.native.js
+++ b/packages/block-editor/src/components/block-mover/index.native.js
@@ -27,14 +27,15 @@ const BlockMover = ( {
return (
<>
{
- const { getBlockIndex, getTemplateLock, getBlockRootClientId, getBlockOrder } = select( 'core/block-editor' );
+ const { getBlockIndex, getTemplateLock, getBlockRootClientId, getBlockOrder } = select(
+ 'core/block-editor'
+ );
const normalizedClientIds = castArray( clientIds );
const firstClientId = first( normalizedClientIds );
const rootClientId = getBlockRootClientId( firstClientId );
@@ -86,5 +90,5 @@ export default compose(
onMoveUp: partial( moveBlocksUp, clientIds, rootClientId ),
};
} ),
- withInstanceId,
+ withInstanceId
)( BlockMover );
diff --git a/packages/block-editor/src/components/block-mover/mover-description.js b/packages/block-editor/src/components/block-mover/mover-description.js
index cb0203f8c60cf..0cb24cf263c72 100644
--- a/packages/block-editor/src/components/block-mover/mover-description.js
+++ b/packages/block-editor/src/components/block-mover/mover-description.js
@@ -20,8 +20,17 @@ import { __, _n, sprintf } from '@wordpress/i18n';
*
* @return {string} Label for the block movement controls.
*/
-export function getBlockMoverDescription( selectedCount, type, firstIndex, isFirst, isLast, dir, orientation, isRTL ) {
- const position = ( firstIndex + 1 );
+export function getBlockMoverDescription(
+ selectedCount,
+ type,
+ firstIndex,
+ isFirst,
+ isLast,
+ dir,
+ orientation,
+ isRTL
+) {
+ const position = firstIndex + 1;
const getMovementDirection = ( moveDirection ) => {
if ( moveDirection === 'up' ) {
@@ -57,7 +66,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
__( 'Move %1$s block from position %2$d down to position %3$d' ),
type,
position,
- ( position + 1 ),
+ position + 1
);
}
@@ -67,7 +76,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
__( 'Move %1$s block from position %2$d left to position %3$d' ),
type,
position,
- ( position + 1 ),
+ position + 1
);
}
@@ -77,7 +86,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
__( 'Move %1$s block from position %2$d right to position %3$d' ),
type,
position,
- ( position + 1 ),
+ position + 1
);
}
}
@@ -90,7 +99,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
return sprintf(
// translators: 1: Type of block (i.e. Text, Image etc)
__( 'Block %1$s is at the end of the content and can’t be moved down' ),
- type,
+ type
);
}
@@ -98,7 +107,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
return sprintf(
// translators: 1: Type of block (i.e. Text, Image etc)
__( 'Block %1$s is at the end of the content and can’t be moved left' ),
- type,
+ type
);
}
@@ -106,7 +115,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
return sprintf(
// translators: 1: Type of block (i.e. Text, Image etc)
__( 'Block %1$s is at the end of the content and can’t be moved right' ),
- type,
+ type
);
}
}
@@ -121,7 +130,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
__( 'Move %1$s block from position %2$d up to position %3$d' ),
type,
position,
- ( position - 1 ),
+ position - 1
);
}
@@ -131,7 +140,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
__( 'Move %1$s block from position %2$d left to position %3$d' ),
type,
position,
- ( position - 1 ),
+ position - 1
);
}
@@ -141,7 +150,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
__( 'Move %1$s block from position %2$d right to position %3$d' ),
type,
position,
- ( position - 1 ),
+ position - 1
);
}
}
@@ -154,7 +163,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
return sprintf(
// translators: 1: Type of block (i.e. Text, Image etc)
__( 'Block %1$s is at the beginning of the content and can’t be moved up' ),
- type,
+ type
);
}
@@ -162,7 +171,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
return sprintf(
// translators: 1: Type of block (i.e. Text, Image etc)
__( 'Block %1$s is at the beginning of the content and can’t be moved left' ),
- type,
+ type
);
}
@@ -170,7 +179,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
return sprintf(
// translators: 1: Type of block (i.e. Text, Image etc)
__( 'Block %1$s is at the beginning of the content and can’t be moved right' ),
- type,
+ type
);
}
}
@@ -189,7 +198,7 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
* @return {string} Label for the block movement controls.
*/
export function getMultiBlockMoverDescription( selectedCount, firstIndex, isFirst, isLast, dir ) {
- const position = ( firstIndex + 1 );
+ const position = firstIndex + 1;
if ( dir < 0 && isFirst ) {
return __( 'Blocks cannot be moved up as they are already at the top' );
diff --git a/packages/block-editor/src/components/block-mover/test/mover-description.js b/packages/block-editor/src/components/block-mover/test/mover-description.js
index 4f491512d7049..03e04c8792790 100644
--- a/packages/block-editor/src/components/block-mover/test/mover-description.js
+++ b/packages/block-editor/src/components/block-mover/test/mover-description.js
@@ -11,152 +11,83 @@ describe( 'block mover', () => {
const label = 'Header: Some Header Text';
it( 'generates a title for the first item moving up', () => {
- expect( getBlockMoverDescription(
- 1,
- label,
- 0,
- true,
- false,
- negativeDirection
- ) ).toBe(
+ expect( getBlockMoverDescription( 1, label, 0, true, false, negativeDirection ) ).toBe(
`Block ${ label } is at the beginning of the content and can’t be moved up`
);
} );
it( 'generates a title for the last item moving down', () => {
- expect( getBlockMoverDescription(
- 1,
- label,
- 3,
- false,
- true,
- positiveDirection,
- ) ).toBe( `Block ${ label } is at the end of the content and can’t be moved down` );
+ expect( getBlockMoverDescription( 1, label, 3, false, true, positiveDirection ) ).toBe(
+ `Block ${ label } is at the end of the content and can’t be moved down`
+ );
} );
it( 'generates a title for the second item moving up', () => {
- expect( getBlockMoverDescription(
- 1,
- label,
- 1,
- false,
- false,
- negativeDirection,
- ) ).toBe( `Move ${ label } block from position 2 up to position 1` );
+ expect( getBlockMoverDescription( 1, label, 1, false, false, negativeDirection ) ).toBe(
+ `Move ${ label } block from position 2 up to position 1`
+ );
} );
it( 'generates a title for the second item moving down', () => {
- expect( getBlockMoverDescription(
- 1,
- label,
- 1,
- false,
- false,
- positiveDirection,
- ) ).toBe( `Move ${ label } block from position 2 down to position 3` );
+ expect( getBlockMoverDescription( 1, label, 1, false, false, positiveDirection ) ).toBe(
+ `Move ${ label } block from position 2 down to position 3`
+ );
} );
it( 'generates a title for the only item in the list', () => {
- expect( getBlockMoverDescription(
- 1,
- label,
- 0,
- true,
- true,
- positiveDirection,
- ) ).toBe( `Block ${ label } is the only block, and cannot be moved` );
+ expect( getBlockMoverDescription( 1, label, 0, true, true, positiveDirection ) ).toBe(
+ `Block ${ label } is the only block, and cannot be moved`
+ );
} );
it( 'indicates that the block can be moved left when the orientation is horizontal and the direction is negative', () => {
- expect( getBlockMoverDescription(
- 1,
- label,
- 1,
- false,
- false,
- negativeDirection,
- 'horizontal'
- ) ).toBe( `Move ${ label } block from position 2 left to position 1` );
+ expect(
+ getBlockMoverDescription( 1, label, 1, false, false, negativeDirection, 'horizontal' )
+ ).toBe( `Move ${ label } block from position 2 left to position 1` );
} );
it( 'indicates that the block can be moved right when the orientation is horizontal and the direction is positive', () => {
- expect( getBlockMoverDescription(
- 1,
- label,
- 1,
- false,
- false,
- positiveDirection,
- 'horizontal'
- ) ).toBe( `Move ${ label } block from position 2 right to position 3` );
+ expect(
+ getBlockMoverDescription( 1, label, 1, false, false, positiveDirection, 'horizontal' )
+ ).toBe( `Move ${ label } block from position 2 right to position 3` );
} );
it( 'indicates that the block cannot be moved left when the orientation is horizontal and the block is the first block', () => {
- expect( getBlockMoverDescription(
- 1,
- label,
- 0,
- true,
- false,
- negativeDirection,
- 'horizontal'
- ) ).toBe(
- `Block ${ label } is at the beginning of the content and can’t be moved left`
- );
+ expect(
+ getBlockMoverDescription( 1, label, 0, true, false, negativeDirection, 'horizontal' )
+ ).toBe( `Block ${ label } is at the beginning of the content and can’t be moved left` );
} );
it( 'indicates that the block cannot be moved right when the orientation is horizontal and the block is the last block', () => {
- expect( getBlockMoverDescription(
- 1,
- label,
- 3,
- false,
- true,
- positiveDirection,
- 'horizontal'
- ) ).toBe( `Block ${ label } is at the end of the content and can’t be moved right` );
+ expect(
+ getBlockMoverDescription( 1, label, 3, false, true, positiveDirection, 'horizontal' )
+ ).toBe( `Block ${ label } is at the end of the content and can’t be moved right` );
} );
} );
describe( 'getMultiBlockMoverDescription', () => {
it( 'generates a title moving multiple blocks up', () => {
- expect( getMultiBlockMoverDescription(
- 4,
- 1,
- false,
- true,
- negativeDirection
- ) ).toBe( 'Move 4 blocks from position 2 up by one place' );
+ expect( getMultiBlockMoverDescription( 4, 1, false, true, negativeDirection ) ).toBe(
+ 'Move 4 blocks from position 2 up by one place'
+ );
} );
it( 'generates a title moving multiple blocks down', () => {
- expect( getMultiBlockMoverDescription(
- 4,
- 0,
- true,
- false,
- positiveDirection
- ) ).toBe( 'Move 4 blocks from position 1 down by one place' );
+ expect( getMultiBlockMoverDescription( 4, 0, true, false, positiveDirection ) ).toBe(
+ 'Move 4 blocks from position 1 down by one place'
+ );
} );
it( 'generates a title for a selection of blocks at the top', () => {
- expect( getMultiBlockMoverDescription(
- 4,
- 1,
- true,
- true,
- negativeDirection
- ) ).toBe( 'Blocks cannot be moved up as they are already at the top' );
+ expect( getMultiBlockMoverDescription( 4, 1, true, true, negativeDirection ) ).toBe(
+ 'Blocks cannot be moved up as they are already at the top'
+ );
} );
it( 'generates a title for a selection of blocks at the bottom', () => {
- expect( getMultiBlockMoverDescription(
- 4,
- 2,
- false,
- true,
- positiveDirection
- ) ).toBe( 'Blocks cannot be moved down as they are already at the bottom' );
+ expect( getMultiBlockMoverDescription( 4, 2, false, true, positiveDirection ) ).toBe(
+ 'Blocks cannot be moved down as they are already at the bottom'
+ );
} );
} );
} );
diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
index a76a7ab563e1c..92b810b529157 100644
--- a/packages/block-editor/src/components/block-navigation/dropdown.js
+++ b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -19,9 +19,16 @@ const MenuIcon = (
);
function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) {
- useShortcut( 'core/edit-post/toggle-block-navigation', useCallback( onToggle, [ onToggle ] ), { bindGlobal: true, isDisabled: ! isEnabled } );
- const shortcut = useSelect( ( select ) =>
- select( 'core/keyboard-shortcuts' ).getShortcutRepresentation( 'core/edit-post/toggle-block-navigation' ), []
+ useShortcut( 'core/edit-post/toggle-block-navigation', useCallback( onToggle, [ onToggle ] ), {
+ bindGlobal: true,
+ isDisabled: ! isEnabled,
+ } );
+ const shortcut = useSelect(
+ ( select ) =>
+ select( 'core/keyboard-shortcuts' ).getShortcutRepresentation(
+ 'core/edit-post/toggle-block-navigation'
+ ),
+ []
);
return (
@@ -41,15 +48,13 @@ function BlockNavigationDropdown( { isDisabled } ) {
const hasBlocks = useSelect( ( select ) => !! select( 'core/block-editor' ).getBlockCount(), [] );
const isEnabled = hasBlocks && ! isDisabled;
- return (
+ return (
(
+
{ __( 'Block navigation' ) }
{ hasHierarchy && (
{
- const {
- getSelectedBlockClientId,
- getBlockHierarchyRootClientId,
- getBlock,
- getBlocks,
- } = select( 'core/block-editor' );
+ const { getSelectedBlockClientId, getBlockHierarchyRootClientId, getBlock, getBlocks } = select(
+ 'core/block-editor'
+ );
const selectedBlockClientId = getSelectedBlockClientId();
return {
rootBlocks: getBlocks(),
- rootBlock: selectedBlockClientId ? getBlock( getBlockHierarchyRootClientId( selectedBlockClientId ) ) : null,
+ rootBlock: selectedBlockClientId
+ ? getBlock( getBlockHierarchyRootClientId( selectedBlockClientId ) )
+ : null,
selectedBlockClientId,
};
} ),
diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js
index 92a8dc13765ad..53b91d79dc284 100644
--- a/packages/block-editor/src/components/block-navigation/list.js
+++ b/packages/block-editor/src/components/block-navigation/list.js
@@ -8,10 +8,7 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { Button } from '@wordpress/components';
-import {
- __experimentalGetBlockLabel as getBlockLabel,
- getBlockType,
-} from '@wordpress/blocks';
+import { __experimentalGetBlockLabel as getBlockLabel, getBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
/**
@@ -54,7 +51,9 @@ export default function BlockNavigationList( {
>
{ __( '(selected block)' ) } }
+ { isSelected && (
+ { __( '(selected block)' ) }
+ ) }
- {
- /*
- * Disable reason: The `list` ARIA role is redundant but
- * Safari+VoiceOver won't announce the list otherwise.
- */
- /* eslint-disable jsx-a11y/no-redundant-roles */
- }
+
+ { /*
+ * Disable reason: The `list` ARIA role is redundant but
+ * Safari+VoiceOver won't announce the list otherwise.
+ */
+ /* eslint-disable jsx-a11y/no-redundant-roles */ }