tags.
html = html.replace( /<((li|dt|dd)[^>]*)>/g, ' \t<$1>' );
diff --git a/packages/autop/src/test/index.test.js b/packages/autop/src/test/index.test.js
index 8fc73f4e03965..0c5d86d6d0a2b 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,10 +404,7 @@ test( 'that autop treats inline elements as inline', () => {
test( 'element sanity', () => {
[
- [
- 'Hello ',
- 'Hello
\n',
- ],
+ [ 'Hello ', 'Hello
\n' ],
[
'Hello ',
'Hello
\n',
@@ -482,7 +484,8 @@ test( 'that text before blocks is peed', () => {
} );
test( 'that autop doses not add extra closing p in figure', () => {
- const content1 = 'Caption Caption
@@ -498,8 +501,10 @@ test( 'that autop doses not add extra closing p in figure', () => {
} );
test( 'that autop correctly adds a start and end tag when followed by a div', () => {
- const content = 'Testing autop with a div\ncontent
';
- const expected = 'Testing autop with a div
\ncontent
';
+ const content =
+ 'Testing autop with a div\ncontent
';
+ const expected =
+ 'Testing autop with a div
\ncontent
';
expect( autop( content ).trim() ).toBe( expected );
} );
diff --git a/packages/babel-plugin-import-jsx-pragma/index.js b/packages/babel-plugin-import-jsx-pragma/index.js
index 273df752611c1..a7dd3a2d38155 100644
--- a/packages/babel-plugin-import-jsx-pragma/index.js
+++ b/packages/babel-plugin-import-jsx-pragma/index.js
@@ -48,7 +48,9 @@ module.exports = function( babel ) {
}
const { scopeVariable } = getOptions( state );
- state.hasUndeclaredScopeVariable = ! path.scope.hasBinding( scopeVariable );
+ state.hasUndeclaredScopeVariable = ! path.scope.hasBinding(
+ scopeVariable
+ );
},
JSXFragment( path, state ) {
if ( state.hasUndeclaredScopeVariableFrag ) {
@@ -60,18 +62,27 @@ module.exports = function( babel ) {
return;
}
- state.hasUndeclaredScopeVariableFrag = ! path.scope.hasBinding( scopeVariableFrag );
+ state.hasUndeclaredScopeVariableFrag = ! path.scope.hasBinding(
+ scopeVariableFrag
+ );
},
Program: {
exit( path, state ) {
- const { scopeVariable, scopeVariableFrag, source, isDefault } = getOptions( state );
+ const {
+ scopeVariable,
+ scopeVariableFrag,
+ source,
+ isDefault,
+ } = getOptions( state );
let scopeVariableSpecifier;
let scopeVariableFragSpecifier;
if ( state.hasUndeclaredScopeVariable ) {
if ( isDefault ) {
- scopeVariableSpecifier = t.importDefaultSpecifier( t.identifier( scopeVariable ) );
+ scopeVariableSpecifier = t.importDefaultSpecifier(
+ t.identifier( scopeVariable )
+ );
} else {
scopeVariableSpecifier = t.importSpecifier(
t.identifier( scopeVariable ),
diff --git a/packages/babel-plugin-import-jsx-pragma/test/index.js b/packages/babel-plugin-import-jsx-pragma/test/index.js
index c3e098476db3d..bcd915f1b5dad 100644
--- a/packages/babel-plugin-import-jsx-pragma/test/index.js
+++ b/packages/babel-plugin-import-jsx-pragma/test/index.js
@@ -24,7 +24,8 @@ describe( 'babel-plugin-import-jsx-pragma', () => {
} );
it( 'does nothing if the scope variable is already defined', () => {
- const original = 'const React = require("react");\n\nlet foo =
- { times( fullStarCount, ( i ) =>
);
}
diff --git a/packages/block-directory/src/components/downloadable-block-author-info/index.js b/packages/block-directory/src/components/downloadable-block-author-info/index.js
index b422f1360416c..5c27144430e10 100644
--- a/packages/block-directory/src/components/downloadable-block-author-info/index.js
+++ b/packages/block-directory/src/components/downloadable-block-author-info/index.js
@@ -4,7 +4,11 @@
import { Fragment } from '@wordpress/element';
import { __, _n, sprintf } from '@wordpress/i18n';
-function DownloadableBlockAuthorInfo( { author, authorBlockCount, authorBlockRating } ) {
+function DownloadableBlockAuthorInfo( {
+ author,
+ authorBlockCount,
+ authorBlockRating,
+} ) {
return (
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 c60c1e86de202..78ab2962e60ce 100644
--- a/packages/block-directory/src/components/downloadable-block-header/index.js
+++ b/packages/block-directory/src/components/downloadable-block-header/index.js
@@ -10,20 +10,32 @@ import { __, sprintf } from '@wordpress/i18n';
import { BlockIcon } from '@wordpress/block-editor';
import BlockRatings from '../block-ratings';
-function DownloadableBlockHeader( { icon, title, rating, ratingCount, onClick } ) {
+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 }
);
diff --git a/packages/block-directory/src/components/downloadable-block-header/test/fixtures/index.js b/packages/block-directory/src/components/downloadable-block-header/test/fixtures/index.js
index 469105aea680f..db09e7df68d30 100644
--- a/packages/block-directory/src/components/downloadable-block-header/test/fixtures/index.js
+++ b/packages/block-directory/src/components/downloadable-block-header/test/fixtures/index.js
@@ -1,7 +1,8 @@
const pluginBase = {
name: 'boxer/boxer',
title: 'Boxer',
- description: 'Boxer is a Block that puts your WordPress posts into boxes on a page.',
+ description:
+ 'Boxer is a Block that puts your WordPress posts into boxes on a page.',
id: 'boxer-block',
rating: 5,
rating_count: 1,
@@ -17,4 +18,7 @@ const pluginBase = {
};
export const pluginWithIcon = { ...pluginBase, icon: 'block-default' };
-export const pluginWithImg = { ...pluginBase, icon: 'https://ps.w.org/listicles/assets/icon-128x128.png' };
+export const pluginWithImg = {
+ ...pluginBase,
+ icon: 'https://ps.w.org/listicles/assets/icon-128x128.png',
+};
diff --git a/packages/block-directory/src/components/downloadable-block-header/test/index.js b/packages/block-directory/src/components/downloadable-block-header/test/index.js
index 6c8d044cd8f87..96ba6247170cb 100644
--- a/packages/block-directory/src/components/downloadable-block-header/test/index.js
+++ b/packages/block-directory/src/components/downloadable-block-header/test/index.js
@@ -30,14 +30,19 @@ describe( 'DownloadableBlockHeader', () => {
describe( 'icon rendering', () => {
test( 'should render an
tag', () => {
const wrapper = getContainer( pluginWithImg );
- expect( wrapper.find( 'img' ).prop( 'src' ) ).toEqual( pluginWithImg.icon );
+ expect( wrapper.find( 'img' ).prop( 'src' ) ).toEqual(
+ pluginWithImg.icon
+ );
} );
test( 'should render an
tag if icon URL has query string', () => {
- const iconURLwithQueryString = pluginWithImg.icon + '?rev=2011672&test=234234';
+ const iconURLwithQueryString =
+ pluginWithImg.icon + '?rev=2011672&test=234234';
const plugin = { ...pluginWithImg, icon: iconURLwithQueryString };
const wrapper = getContainer( plugin );
- expect( wrapper.find( 'img' ).prop( 'src' ) ).toEqual( plugin.icon );
+ expect( wrapper.find( 'img' ).prop( 'src' ) ).toEqual(
+ plugin.icon
+ );
} );
test( 'should render a
component', () => {
diff --git a/packages/block-directory/src/components/downloadable-block-info/index.js b/packages/block-directory/src/components/downloadable-block-info/index.js
index 4dbbd8f691ffa..8d647313db6a1 100644
--- a/packages/block-directory/src/components/downloadable-block-info/index.js
+++ b/packages/block-directory/src/components/downloadable-block-info/index.js
@@ -5,7 +5,11 @@ import { Fragment } from '@wordpress/element';
import { Icon } from '@wordpress/components';
import { __, _n, sprintf } from '@wordpress/i18n';
-function DownloadableBlockInfo( { description, activeInstalls, humanizedUpdated } ) {
+function DownloadableBlockInfo( {
+ description,
+ activeInstalls,
+ humanizedUpdated,
+} ) {
return (
@@ -13,10 +17,20 @@ function DownloadableBlockInfo( { description, activeInstalls, humanizedUpdated
-
- { humanizedUpdated }
+
diff --git a/packages/block-directory/src/components/downloadable-block-info/style.scss b/packages/block-directory/src/components/downloadable-block-info/style.scss
index ede38ab7fcf7b..e0771f9906a22 100644
--- a/packages/block-directory/src/components/downloadable-block-info/style.scss
+++ b/packages/block-directory/src/components/downloadable-block-info/style.scss
@@ -7,10 +7,11 @@
justify-content: space-between;
color: $dark-gray-400;
margin-top: $grid-size;
+ font-size: 12px;
.block-directory-downloadable-block-info__column {
display: flex;
- align-items: flex-start;
+ align-items: center;
.dashicon {
font-size: 16px;
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..b63c40d34871f 100644
--- a/packages/block-directory/src/components/downloadable-blocks-list/index.js
+++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js
@@ -6,7 +6,10 @@ import { noop } from 'lodash';
/**
* WordPress dependencies
*/
-import { getBlockMenuDefaultClassName, unregisterBlockType } from '@wordpress/blocks';
+import {
+ getBlockMenuDefaultClassName,
+ unregisterBlockType,
+} from '@wordpress/blocks';
import { withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
@@ -19,7 +22,12 @@ import DownloadableBlockListItem from '../downloadable-block-list-item';
const DOWNLOAD_ERROR_NOTICE_ID = 'block-download-error';
const INSTALL_ERROR_NOTICE_ID = 'block-install-error';
-function DownloadableBlocksList( { items, onHover = noop, children, downloadAndInstallBlock } ) {
+function DownloadableBlocksList( {
+ items,
+ onHover = noop,
+ children,
+ downloadAndInstallBlock,
+} ) {
return (
/*
* Disable reason: The `list` ARIA role is redundant but
@@ -27,22 +35,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 */
@@ -51,7 +60,9 @@ function DownloadableBlocksList( { items, onHover = noop, children, downloadAndI
export default compose(
withDispatch( ( dispatch, props ) => {
- const { installBlock, downloadBlock } = dispatch( 'core/block-directory' );
+ const { installBlock, downloadBlock } = dispatch(
+ 'core/block-directory'
+ );
const { createErrorNotice, removeNotice } = dispatch( 'core/notices' );
const { removeBlocks } = dispatch( 'core/block-editor' );
const { onSelect } = props;
@@ -59,20 +70,22 @@ 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 = () => {
@@ -80,22 +93,32 @@ export default compose(
const onInstallBlockError = () => {
createErrorNotice(
- __( 'Block previews can\'t install.' ),
+ __( "Block previews can't install." ),
{
id: INSTALL_ERROR_NOTICE_ID,
actions: [
{
label: __( 'Retry' ),
onClick: () => {
- removeNotice( INSTALL_ERROR_NOTICE_ID );
- installBlock( item, noop, onInstallBlockError );
+ removeNotice(
+ INSTALL_ERROR_NOTICE_ID
+ );
+ installBlock(
+ item,
+ noop,
+ onInstallBlockError
+ );
},
},
{
label: __( 'Remove' ),
onClick: () => {
- removeNotice( INSTALL_ERROR_NOTICE_ID );
- removeBlocks( createdBlock.clientId );
+ removeNotice(
+ INSTALL_ERROR_NOTICE_ID
+ );
+ removeBlocks(
+ createdBlock.clientId
+ );
unregisterBlockType( item.name );
},
},
@@ -110,5 +133,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..29d7cbb29ecac 100644
--- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js
+++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js
@@ -12,14 +12,28 @@ 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 +55,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
);
@@ -49,9 +67,15 @@ function DownloadableBlocksPanel( { downloadableItems, onSelect, onHover, hasPer
return (
- { __( 'No blocks found in your library. These blocks can be downloaded and installed:' ) }
+ { __(
+ 'No blocks found in your library. These blocks can be downloaded and installed:'
+ ) }
-
);
}
@@ -66,7 +90,9 @@ export default compose( [
} = select( 'core/block-directory' );
const hasPermission = hasInstallBlocksPermission();
- const downloadableItems = hasPermission ? getDownloadableBlocks( filterValue ) : [];
+ const downloadableItems = hasPermission
+ ? getDownloadableBlocks( filterValue )
+ : [];
const isLoading = isRequestingDownloadableBlocks();
return {
diff --git a/packages/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js b/packages/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js
index 9fb2cc8105dc0..b91a3692b6d29 100644
--- a/packages/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js
+++ b/packages/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js
@@ -21,26 +21,24 @@ function InserterMenuDownloadableBlocksPanel() {
return (
<__experimentalInserterMenuExtension>
- {
- ( { onSelect, onHover, filterValue, hasItems } ) => {
- if ( hasItems || ! filterValue ) {
- return null;
- }
-
- if ( debouncedFilterValue !== filterValue ) {
- debouncedSetFilterValue( filterValue );
- }
-
- return (
-
- );
+ { ( { onSelect, onHover, filterValue, hasItems } ) => {
+ if ( hasItems || ! filterValue ) {
+ return null;
}
- }
+
+ if ( debouncedFilterValue !== filterValue ) {
+ debouncedSetFilterValue( filterValue );
+ }
+
+ return (
+
+ );
+ } }
);
}
diff --git a/packages/block-directory/src/store/actions.js b/packages/block-directory/src/store/actions.js
index 46bce90d2f7cb..09ba6381b59ae 100644
--- a/packages/block-directory/src/store/actions.js
+++ b/packages/block-directory/src/store/actions.js
@@ -26,7 +26,11 @@ export function fetchDownloadableBlocks() {
* @return {Object} Action object.
*/
export function receiveDownloadableBlocks( downloadableBlocks, filterValue ) {
- return { type: 'RECEIVE_DOWNLOADABLE_BLOCKS', downloadableBlocks, filterValue };
+ return {
+ type: 'RECEIVE_DOWNLOADABLE_BLOCKS',
+ downloadableBlocks,
+ filterValue,
+ };
}
/**
diff --git a/packages/block-directory/src/store/controls.js b/packages/block-directory/src/store/controls.js
index fbd187b7bbf41..6696a7071b08f 100644
--- a/packages/block-directory/src/store/controls.js
+++ b/packages/block-directory/src/store/controls.js
@@ -111,14 +111,18 @@ export function* loadAssets( assets ) {
}
const controls = {
- SELECT: createRegistryControl( ( registry ) => ( { storeName, selectorName, args } ) => {
- return registry.select( storeName )[ selectorName ]( ...args );
- } ),
- DISPATCH: createRegistryControl( ( registry ) => ( { storeName, dispatcherName, args } ) => {
- return registry.dispatch( storeName )[ dispatcherName ]( ...args );
- } ),
+ SELECT: createRegistryControl(
+ ( registry ) => ( { storeName, selectorName, args } ) => {
+ return registry.select( storeName )[ selectorName ]( ...args );
+ }
+ ),
+ DISPATCH: createRegistryControl(
+ ( registry ) => ( { storeName, dispatcherName, args } ) => {
+ return registry.dispatch( storeName )[ dispatcherName ]( ...args );
+ }
+ ),
API_FETCH( { request } ) {
- return wpApiFetch( { ... request } );
+ return wpApiFetch( { ...request } );
},
LOAD_ASSETS( { assets } ) {
return new Promise( ( resolve, reject ) => {
@@ -128,20 +132,28 @@ const controls = {
forEach( assets, ( asset ) => {
if ( asset.match( /\.js$/ ) !== null ) {
scriptsCount++;
- loadScript( asset, () => {
- scriptsCount--;
- if ( scriptsCount === 0 ) {
- return resolve( scriptsCount );
- }
- }, reject );
+ loadScript(
+ asset,
+ () => {
+ scriptsCount--;
+ if ( scriptsCount === 0 ) {
+ return resolve( scriptsCount );
+ }
+ },
+ reject
+ );
} else {
loadStyle( asset );
}
} );
} else {
- loadScript( assets.editor_script, () => {
- return resolve( 0 );
- }, reject );
+ loadScript(
+ assets.editor_script,
+ () => {
+ return resolve( 0 );
+ },
+ reject
+ );
loadStyle( assets.style );
}
} );
diff --git a/packages/block-directory/src/store/reducer.js b/packages/block-directory/src/store/reducer.js
index 8dc4f3438c318..c0993c56dfaf6 100644
--- a/packages/block-directory/src/store/reducer.js
+++ b/packages/block-directory/src/store/reducer.js
@@ -11,49 +11,84 @@ import { combineReducers } from '@wordpress/data';
*
* @return {Object} Updated state.
*/
-export const downloadableBlocks = ( state = {
- results: {},
- hasPermission: true,
- filterValue: undefined,
- isRequestingDownloadableBlocks: true,
- installedBlockTypes: [],
-}, action ) => {
+export const downloadableBlocks = (
+ state = {
+ results: {},
+ filterValue: undefined,
+ isRequestingDownloadableBlocks: true,
+ },
+ action
+) => {
switch ( action.type ) {
- case 'FETCH_DOWNLOADABLE_BLOCKS' :
+ case 'FETCH_DOWNLOADABLE_BLOCKS':
return {
...state,
isRequestingDownloadableBlocks: true,
};
- case 'RECEIVE_DOWNLOADABLE_BLOCKS' :
+ case 'RECEIVE_DOWNLOADABLE_BLOCKS':
return {
...state,
results: Object.assign( {}, state.results, {
[ action.filterValue ]: action.downloadableBlocks,
} ),
- hasPermission: true,
isRequestingDownloadableBlocks: false,
};
- case 'SET_INSTALL_BLOCKS_PERMISSION' :
- return {
- ...state,
- items: action.hasPermission ? state.items : [],
- hasPermission: action.hasPermission,
- };
- case 'ADD_INSTALLED_BLOCK_TYPE' :
+ }
+ return state;
+};
+
+/**
+ * Reducer managing the installation and deletion of blocks.
+ *
+ * @param {Object} state Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export const blockManagement = (
+ state = {
+ installedBlockTypes: [],
+ },
+ action
+) => {
+ switch ( action.type ) {
+ case 'ADD_INSTALLED_BLOCK_TYPE':
return {
...state,
- installedBlockTypes: [ ...state.installedBlockTypes, action.item ],
+ installedBlockTypes: [
+ ...state.installedBlockTypes,
+ action.item,
+ ],
};
-
- case 'REMOVE_INSTALLED_BLOCK_TYPE' :
+ case 'REMOVE_INSTALLED_BLOCK_TYPE':
return {
...state,
- installedBlockTypes: state.installedBlockTypes.filter( ( blockType ) => blockType.name !== action.item.name ),
+ installedBlockTypes: state.installedBlockTypes.filter(
+ ( blockType ) => blockType.name !== action.item.name
+ ),
};
}
return state;
};
+/**
+ * Reducer returns whether the user can install blocks.
+ *
+ * @param {Object} state Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function hasPermission( state = true, action ) {
+ if ( action.type === 'SET_INSTALL_BLOCKS_PERMISSION' ) {
+ return action.hasPermission;
+ }
+
+ return state;
+}
+
export default combineReducers( {
downloadableBlocks,
+ blockManagement,
+ hasPermission,
} );
diff --git a/packages/block-directory/src/store/resolvers.js b/packages/block-directory/src/store/resolvers.js
index 885257ea72ee8..a1b0d7dfd05be 100644
--- a/packages/block-directory/src/store/resolvers.js
+++ b/packages/block-directory/src/store/resolvers.js
@@ -7,10 +7,14 @@ import { camelCase, mapKeys } from 'lodash';
* Internal dependencies
*/
import { apiFetch } from './controls';
-import { fetchDownloadableBlocks, receiveDownloadableBlocks, setInstallBlocksPermission } from './actions';
+import {
+ fetchDownloadableBlocks,
+ receiveDownloadableBlocks,
+ setInstallBlocksPermission,
+} from './actions';
export default {
- * getDownloadableBlocks( filterValue ) {
+ *getDownloadableBlocks( filterValue ) {
if ( ! filterValue ) {
return;
}
@@ -20,9 +24,11 @@ export default {
const results = yield apiFetch( {
path: `__experimental/block-directory/search?term=${ filterValue }`,
} );
- const blocks = results.map( ( result ) => mapKeys( result, ( value, key ) => {
- return camelCase( key );
- } ) );
+ const blocks = results.map( ( result ) =>
+ mapKeys( result, ( value, key ) => {
+ return camelCase( key );
+ } )
+ );
yield receiveDownloadableBlocks( blocks, filterValue );
} catch ( error ) {
@@ -31,7 +37,7 @@ export default {
}
}
},
- * hasInstallBlocksPermission() {
+ *hasInstallBlocksPermission() {
try {
yield apiFetch( {
path: `__experimental/block-directory/search?term=`,
diff --git a/packages/block-directory/src/store/selectors.js b/packages/block-directory/src/store/selectors.js
index 635bd37b81941..7a1778b1cc09a 100644
--- a/packages/block-directory/src/store/selectors.js
+++ b/packages/block-directory/src/store/selectors.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
/**
* Returns true if application is requesting for downloadable blocks.
*
@@ -37,7 +32,7 @@ export function getDownloadableBlocks( state, filterValue ) {
* @return {boolean} User has permission to install blocks.
*/
export function hasInstallBlocksPermission( state ) {
- return state.downloadableBlocks.hasPermission;
+ return state.hasPermission;
}
/**
@@ -48,5 +43,5 @@ export function hasInstallBlocksPermission( state ) {
* @return {Array} Block type items.
*/
export function getInstalledBlockTypes( state ) {
- return get( state, [ 'downloadableBlocks', 'installedBlockTypes' ], [] );
+ return state.blockManagement.installedBlockTypes;
}
diff --git a/packages/block-directory/src/store/test/fixtures/index.js b/packages/block-directory/src/store/test/fixtures/index.js
new file mode 100644
index 0000000000000..0f7cc95dc8a6b
--- /dev/null
+++ b/packages/block-directory/src/store/test/fixtures/index.js
@@ -0,0 +1,24 @@
+export const downloadableBlock = {
+ name: 'boxer/boxer',
+ title: 'Boxer',
+ description:
+ 'Boxer is a Block that puts your WordPress posts into boxes on a page.',
+ id: 'boxer-block',
+ rating: 5,
+ ratingCount: 1,
+ activeInstalls: 0,
+ authorBlockRating: 5,
+ authorBlockCount: '1',
+ author: 'CK Lee',
+ icon: 'block-default',
+ assets: [
+ 'https://plugins.svn.wordpress.org/boxer-block/trunk/build/index.js',
+ 'https://plugins.svn.wordpress.org/boxer-block/trunk/build/view.js',
+ ],
+ humanizedUpdated: '3 months ago',
+};
+
+export const installedItem = {
+ id: 'boxer-block',
+ name: 'boxer/boxer',
+};
diff --git a/packages/block-directory/src/store/test/reducer.js b/packages/block-directory/src/store/test/reducer.js
new file mode 100644
index 0000000000000..b10edec5845a8
--- /dev/null
+++ b/packages/block-directory/src/store/test/reducer.js
@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
+/**
+ * Internal dependencies
+ */
+import { downloadableBlocks, blockManagement, hasPermission } from '../reducer';
+import { installedItem, downloadableBlock } from './fixtures';
+
+describe( 'state', () => {
+ describe( 'downloadableBlocks()', () => {
+ it( 'should update state to reflect active search', () => {
+ const initialState = deepFreeze( {
+ isRequestingDownloadableBlocks: false,
+ } );
+ const state = downloadableBlocks( initialState, {
+ type: 'FETCH_DOWNLOADABLE_BLOCKS',
+ } );
+
+ expect( state.isRequestingDownloadableBlocks ).toBe( true );
+ } );
+
+ it( 'should update state to reflect search results have returned', () => {
+ const state = downloadableBlocks( undefined, {
+ type: 'RECEIVE_DOWNLOADABLE_BLOCKS',
+ filterValue: downloadableBlock.title,
+ downloadableBlocks: [ downloadableBlock ],
+ } );
+
+ expect( state.isRequestingDownloadableBlocks ).toBe( false );
+ } );
+
+ it( "should set user's search term and save results", () => {
+ const state = downloadableBlocks( undefined, {
+ type: 'RECEIVE_DOWNLOADABLE_BLOCKS',
+ filterValue: downloadableBlock.title,
+ downloadableBlocks: [ downloadableBlock ],
+ } );
+ expect( state.results ).toHaveProperty( downloadableBlock.title );
+ expect( state.results[ downloadableBlock.title ] ).toHaveLength(
+ 1
+ );
+
+ // It should append to the results
+ const updatedState = downloadableBlocks( state, {
+ type: 'RECEIVE_DOWNLOADABLE_BLOCKS',
+ filterValue: 'Test 1',
+ downloadableBlocks: [ downloadableBlock ],
+ } );
+
+ expect( Object.keys( updatedState.results ) ).toHaveLength( 2 );
+ } );
+ } );
+
+ describe( 'blockManagement()', () => {
+ it( 'should start with an empty installedBlockTypes List', () => {
+ const state = blockManagement( undefined, {
+ type: 'NOOP_TYPE',
+ } );
+ expect( state.installedBlockTypes ).toEqual( [] );
+ } );
+
+ it( 'should add item to the installedBlockTypesList', () => {
+ const initialState = deepFreeze( { installedBlockTypes: [] } );
+ const state = blockManagement( initialState, {
+ type: 'ADD_INSTALLED_BLOCK_TYPE',
+ item: installedItem,
+ } );
+
+ expect( state.installedBlockTypes ).toHaveLength( 1 );
+ } );
+
+ it( 'should remove item from the installedBlockTypesList', () => {
+ const initialState = deepFreeze( {
+ installedBlockTypes: [ installedItem ],
+ } );
+ const state = blockManagement( initialState, {
+ type: 'REMOVE_INSTALLED_BLOCK_TYPE',
+ item: installedItem,
+ } );
+
+ expect( state.installedBlockTypes ).toHaveLength( 0 );
+ } );
+ } );
+
+ describe( 'hasPermission()', () => {
+ it( 'should update permissions appropriately', () => {
+ const state = hasPermission( true, {
+ type: 'SET_INSTALL_BLOCKS_PERMISSION',
+ hasPermission: false,
+ } );
+
+ expect( state ).toBe( false );
+ } );
+ } );
+} );
diff --git a/packages/block-directory/src/store/test/selectors.js b/packages/block-directory/src/store/test/selectors.js
new file mode 100644
index 0000000000000..11a019d011f7e
--- /dev/null
+++ b/packages/block-directory/src/store/test/selectors.js
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import { getInstalledBlockTypes } from '../selectors';
+
+describe( 'selectors', () => {
+ describe( 'getInstalledBlockTypes', () => {
+ it( 'should retrieve the block types that are installed', () => {
+ const blockTypes = [ 'fake-type' ];
+ const state = {
+ blockManagement: {
+ installedBlockTypes: blockTypes,
+ },
+ };
+ const installedBlockTypes = getInstalledBlockTypes( state );
+ expect( installedBlockTypes ).toEqual( blockTypes );
+ } );
+ } );
+} );
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 5a0a7339ac3fa..cc1ee80f19420 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -528,7 +528,8 @@ _Returns_
# **WritingFlow**
-Undocumented declaration.
+Handles selection and navigation across blocks. This component should be
+wrapped around BlockList.
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 89dff719ece64..49b4e4fd8fa59 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -22,7 +22,7 @@
"module": "build-module/index.js",
"react-native": "src/index",
"dependencies": {
- "@babel/runtime": "^7.4.4",
+ "@babel/runtime": "^7.8.3",
"@wordpress/a11y": "file:../a11y",
"@wordpress/blob": "file:../blob",
"@wordpress/blocks": "file:../blocks",
@@ -35,6 +35,7 @@
"@wordpress/hooks": "file:../hooks",
"@wordpress/html-entities": "file:../html-entities",
"@wordpress/i18n": "file:../i18n",
+ "@wordpress/icons": "file:../icons",
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
"@wordpress/keycodes": "file:../keycodes",
diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js
index 4f3b9104e1928..9a880f4e67dd3 100644
--- a/packages/block-editor/src/components/alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/alignment-toolbar/index.js
@@ -8,20 +8,21 @@ import { find } from 'lodash';
*/
import { __ } from '@wordpress/i18n';
import { Toolbar } from '@wordpress/components';
+import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
const DEFAULT_ALIGNMENT_CONTROLS = [
{
- icon: 'editor-alignleft',
+ icon: alignLeft,
title: __( 'Align text left' ),
align: 'left',
},
{
- icon: 'editor-aligncenter',
+ icon: alignCenter,
title: __( 'Align text center' ),
align: 'center',
},
{
- icon: 'editor-alignright',
+ icon: alignRight,
title: __( 'Align text right' ),
align: 'right',
},
@@ -40,7 +41,10 @@ export function AlignmentToolbar( props ) {
return () => onChange( value === align ? undefined : align );
}
- const activeAlignment = find( alignmentControls, ( control ) => control.align === value );
+ const activeAlignment = find(
+ alignmentControls,
+ ( control ) => control.align === value
+ );
return (
{
const { align } = control;
- const isActive = ( value === align );
+ const isActive = value === align;
return {
...control,
diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
index 87dc64ceda18f..8ca05b1361631 100644
--- a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
@@ -34,7 +34,14 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
Array [
Object {
"align": "left",
- "icon": "editor-alignleft",
+ "icon":
+ ,
"isActive": true,
"onClick": [Function],
"role": "menuitemradio",
@@ -42,7 +49,14 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
},
Object {
"align": "center",
- "icon": "editor-aligncenter",
+ "icon":
+ ,
"isActive": false,
"onClick": [Function],
"role": "menuitemradio",
@@ -50,7 +64,14 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
},
Object {
"align": "right",
- "icon": "editor-alignright",
+ "icon":
+ ,
"isActive": false,
"onClick": [Function],
"role": "menuitemradio",
@@ -58,7 +79,16 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
},
]
}
- icon="editor-alignleft"
+ icon={
+
+
+ }
isCollapsed={true}
label="Change text alignment"
/>
diff --git a/packages/block-editor/src/components/alignment-toolbar/test/index.js b/packages/block-editor/src/components/alignment-toolbar/test/index.js
index 03662cfdabe81..3ad4397b84da0 100644
--- a/packages/block-editor/src/components/alignment-toolbar/test/index.js
+++ b/packages/block-editor/src/components/alignment-toolbar/test/index.js
@@ -12,7 +12,9 @@ describe( 'AlignmentToolbar', () => {
const alignment = 'left';
const onChangeSpy = jest.fn();
- const wrapper = shallow( {
- return {
- ...BLOCK_ALIGNMENTS_CONTROLS[ control ],
- isActive: value === control,
- role: isCollapsed ? 'menuitemradio' : undefined,
- onClick: applyOrUnset( control ),
- };
- } )
+ icon={
+ activeAlignmentControl
+ ? activeAlignmentControl.icon
+ : defaultAlignmentControl.icon
}
+ label={ __( 'Change alignment' ) }
+ controls={ enabledControls.map( ( control ) => {
+ return {
+ ...BLOCK_ALIGNMENTS_CONTROLS[ control ],
+ isActive: value === control,
+ role: isCollapsed ? 'menuitemradio' : undefined,
+ onClick: applyOrUnset( control ),
+ };
+ } ) }
/>
);
}
@@ -81,5 +99,5 @@ export default compose(
return {
wideControlsEnabled: settings.alignWide,
};
- } ),
+ } )
)( BlockAlignmentToolbar );
diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
index ebc927c8eb816..10e88985b76d5 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
@@ -5,21 +5,42 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = `
controls={
Array [
Object {
- "icon": "align-left",
+ "icon":
+ ,
"isActive": true,
"onClick": [Function],
"role": "menuitemradio",
"title": "Align left",
},
Object {
- "icon": "align-center",
+ "icon":
+ ,
"isActive": false,
"onClick": [Function],
"role": "menuitemradio",
"title": "Align center",
},
Object {
- "icon": "align-right",
+ "icon":
+ ,
"isActive": false,
"onClick": [Function],
"role": "menuitemradio",
@@ -27,7 +48,16 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = `
},
]
}
- icon="align-left"
+ icon={
+
+
+ }
isCollapsed={true}
label="Change alignment"
/>
diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/index.js b/packages/block-editor/src/components/block-alignment-toolbar/test/index.js
index c7a208006849e..976aa7d4abd89 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/test/index.js
+++ b/packages/block-editor/src/components/block-alignment-toolbar/test/index.js
@@ -12,7 +12,9 @@ describe( 'BlockAlignmentToolbar', () => {
const alignment = 'left';
const onChange = jest.fn();
- const wrapper = shallow(
+
{ hasSelection && (
@@ -65,7 +75,10 @@ const BlockBreadcrumb = function() {
) ) }
{ !! clientId && (
-
+
) }
diff --git a/packages/block-editor/src/components/block-caption/index.native.js b/packages/block-editor/src/components/block-caption/index.native.js
new file mode 100644
index 0000000000000..818bc3b41c0ab
--- /dev/null
+++ b/packages/block-editor/src/components/block-caption/index.native.js
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Caption, RichText } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { withDispatch, withSelect } from '@wordpress/data';
+
+const BlockCaption = ( {
+ accessible,
+ accessibilityLabelCreator,
+ onBlur,
+ onChange,
+ onFocus,
+ isSelected,
+ shouldDisplay,
+ text,
+} ) => (
+
+
+);
+
+export default compose( [
+ withSelect( ( select, { clientId } ) => {
+ const { getBlockAttributes, getSelectedBlockClientId } = select(
+ 'core/block-editor'
+ );
+ const { caption } = getBlockAttributes( clientId );
+ const isBlockSelected = getSelectedBlockClientId() === clientId;
+
+ // We'll render the caption so that the soft keyboard is not forced to close on Android
+ // but still hide it by setting its display style to none. See wordpress-mobile/gutenberg-mobile#1221
+ const shouldDisplay =
+ ! RichText.isEmpty( caption ) > 0 || isBlockSelected;
+
+ return {
+ shouldDisplay,
+ text: caption,
+ };
+ } ),
+ withDispatch( ( dispatch, { clientId } ) => {
+ const { updateBlockAttributes } = dispatch( 'core/block-editor' );
+ return {
+ onChange: ( caption ) => {
+ updateBlockAttributes( clientId, { caption } );
+ },
+ };
+ } ),
+] )( BlockCaption );
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index f060612622804..674d437d9c7a3 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -8,8 +8,12 @@ function BlockCard( { blockType } ) {
-
{ blockType.title }
-
{ blockType.description }
+
+ { blockType.title }
+
+
+ { blockType.description }
+
);
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..7bb45a4402f24 100644
--- a/packages/block-editor/src/components/block-compare/block-view.js
+++ b/packages/block-editor/src/components/block-compare/block-view.js
@@ -3,11 +3,20 @@
*/
import { Button } from '@wordpress/components';
-const BlockView = ( { title, rawContent, renderedContent, action, actionText, className } ) => {
+const BlockView = ( {
+ title,
+ rawContent,
+ renderedContent,
+ action,
+ actionText,
+ className,
+} ) => {
return (
-
{ title }
+
+ { title }
+
{ rawContent }
@@ -19,7 +28,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..f80ca412ce511 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( '' ),
@@ -53,10 +61,19 @@ class BlockCompare extends Component {
}
render() {
- const { block, onKeep, onConvert, convertor, convertButtonText } = this.props;
+ const {
+ block,
+ onKeep,
+ onConvert,
+ convertor,
+ convertButtonText,
+ } = this.props;
const original = this.getOriginalContent( block );
const converted = this.getConvertedContent( convertor( block ) );
- const difference = this.getDifference( original.rawContent, converted.rawContent );
+ const difference = this.getDifference(
+ original.rawContent,
+ converted.rawContent
+ );
return (
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(
);
+ const wrapper = shallow(
+
+ );
expect( wrapper ).toMatchSnapshot();
} );
diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js
index b5851d57a51fb..dd87e2c5a08fd 100644
--- a/packages/block-editor/src/components/block-draggable/index.js
+++ b/packages/block-editor/src/components/block-draggable/index.js
@@ -11,28 +11,35 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect, useRef } from '@wordpress/element';
const BlockDraggable = ( { children, clientIds } ) => {
- const {
- srcRootClientId,
- index,
- isDraggable,
- } = useSelect( ( select ) => {
- const {
- getBlockIndex,
- getBlockRootClientId,
- getTemplateLock,
- } = select( 'core/block-editor' );
- const normalizedClientIds = castArray( clientIds );
- const rootClientId = normalizedClientIds.length === 1 ? getBlockRootClientId( normalizedClientIds[ 0 ] ) : null;
- const templateLock = rootClientId ? getTemplateLock( rootClientId ) : null;
+ const { srcRootClientId, index, isDraggable } = useSelect(
+ ( select ) => {
+ const {
+ getBlockIndex,
+ getBlockRootClientId,
+ getTemplateLock,
+ } = select( 'core/block-editor' );
+ const normalizedClientIds = castArray( clientIds );
+ const rootClientId =
+ normalizedClientIds.length === 1
+ ? getBlockRootClientId( normalizedClientIds[ 0 ] )
+ : null;
+ const templateLock = rootClientId
+ ? getTemplateLock( rootClientId )
+ : null;
- return {
- index: getBlockIndex( normalizedClientIds[ 0 ], rootClientId ),
- srcRootClientId: rootClientId,
- isDraggable: normalizedClientIds.length === 1 && 'all' !== templateLock,
- };
- }, [ clientIds ] );
+ return {
+ index: getBlockIndex( normalizedClientIds[ 0 ], rootClientId ),
+ srcRootClientId: rootClientId,
+ isDraggable:
+ normalizedClientIds.length === 1 && 'all' !== templateLock,
+ };
+ },
+ [ clientIds ]
+ );
const isDragging = useRef( false );
- const { startDraggingBlocks, stopDraggingBlocks } = useDispatch( 'core/block-editor' );
+ const { startDraggingBlocks, stopDraggingBlocks } = useDispatch(
+ 'core/block-editor'
+ );
// Stop dragging blocks if the block draggable is unmounted
useEffect( () => {
@@ -69,14 +76,12 @@ const BlockDraggable = ( { children, clientIds } ) => {
isDragging.current = false;
} }
>
- {
- ( { onDraggableStart, onDraggableEnd } ) => {
- return children( {
- onDraggableStart,
- onDraggableEnd,
- } );
- }
- }
+ { ( { onDraggableStart, onDraggableEnd } ) => {
+ return children( {
+ onDraggableStart,
+ onDraggableEnd,
+ } );
+ } }
);
};
diff --git a/packages/block-editor/src/components/block-drop-zone/index.js b/packages/block-editor/src/components/block-drop-zone/index.js
index e3c93300790f5..6f15cb0284af0 100644
--- a/packages/block-editor/src/components/block-drop-zone/index.js
+++ b/packages/block-editor/src/components/block-drop-zone/index.js
@@ -1,23 +1,14 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
/**
* WordPress dependencies
*/
-import {
- DropZone,
- withFilters,
-} from '@wordpress/components';
+import { __unstableUseDropZone as useDropZone } from '@wordpress/components';
import {
pasteHandler,
getBlockTransforms,
findTransform,
} from '@wordpress/blocks';
-import { Component } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useState, useCallback } from '@wordpress/element';
const parseDropEvent = ( event ) => {
let result = {
@@ -32,7 +23,10 @@ const parseDropEvent = ( event ) => {
}
try {
- result = Object.assign( result, JSON.parse( event.dataTransfer.getData( 'text' ) ) );
+ result = Object.assign(
+ result,
+ JSON.parse( event.dataTransfer.getData( 'text' ) )
+ );
} catch ( err ) {
return result;
}
@@ -40,118 +34,10 @@ const parseDropEvent = ( event ) => {
return result;
};
-class BlockDropZone extends Component {
- constructor() {
- super( ...arguments );
-
- this.onFilesDrop = this.onFilesDrop.bind( this );
- this.onHTMLDrop = this.onHTMLDrop.bind( this );
- this.onDrop = this.onDrop.bind( this );
- }
-
- getInsertIndex( position ) {
- const { clientId, rootClientId, getBlockIndex } = this.props;
- if ( clientId !== undefined ) {
- const index = getBlockIndex( clientId, rootClientId );
- return ( position && position.y === 'top' ) ? index : index + 1;
- }
- }
-
- onFilesDrop( files, position ) {
- if ( ! this.props.hasUploadPermissions ) {
- return;
- }
- const transformation = findTransform(
- getBlockTransforms( 'from' ),
- ( transform ) => transform.type === 'files' && transform.isMatch( files )
- );
-
- if ( transformation ) {
- const insertIndex = this.getInsertIndex( position );
- const blocks = transformation.transform( files, this.props.updateBlockAttributes );
- this.props.insertBlocks( blocks, insertIndex );
- }
- }
-
- onHTMLDrop( HTML, position ) {
- const blocks = pasteHandler( { HTML, mode: 'BLOCKS' } );
-
- if ( blocks.length ) {
- this.props.insertBlocks( blocks, this.getInsertIndex( position ) );
- }
- }
-
- onDrop( event, position ) {
- const { rootClientId: dstRootClientId, clientId: dstClientId, getClientIdsOfDescendants, getBlockIndex } = this.props;
- const { srcRootClientId, srcClientId, srcIndex, type } = parseDropEvent( event );
-
- const isBlockDropType = ( dropType ) => dropType === 'block';
- const isSameLevel = ( srcRoot, dstRoot ) => {
- // Note that rootClientId of top-level blocks will be undefined OR a void string,
- // so we also need to account for that case separately.
- return ( srcRoot === dstRoot ) || ( ! srcRoot === true && ! dstRoot === true );
- };
- const isSameBlock = ( src, dst ) => src === dst;
- const isSrcBlockAnAncestorOfDstBlock = ( src, dst ) => getClientIdsOfDescendants( [ src ] ).some( ( id ) => id === dst );
-
- if ( ! isBlockDropType( type ) ||
- isSameBlock( srcClientId, dstClientId ) ||
- isSrcBlockAnAncestorOfDstBlock( srcClientId, dstClientId || dstRootClientId ) ) {
- return;
- }
-
- const dstIndex = dstClientId ? getBlockIndex( dstClientId, dstRootClientId ) : undefined;
- const positionIndex = this.getInsertIndex( position );
- // If the block is kept at the same level and moved downwards,
- // subtract to account for blocks shifting upward to occupy its old position.
- const insertIndex = dstIndex && srcIndex < dstIndex && isSameLevel( srcRootClientId, dstRootClientId ) ? positionIndex - 1 : positionIndex;
- this.props.moveBlockToPosition( srcClientId, srcRootClientId, insertIndex );
- }
-
- render() {
- const { hasUploadPermissions, isLockedAll } = this.props;
- if ( isLockedAll ) {
- return null;
- }
- const index = this.getInsertIndex();
- const isAppender = index === undefined;
- return (
-
- );
- }
-}
+export default function useBlockDropZone( { element, rootClientId } ) {
+ const [ clientId, setClientId ] = useState( null );
-export default compose(
- withDispatch( ( dispatch, ownProps ) => {
- const {
- insertBlocks,
- updateBlockAttributes,
- moveBlockToPosition,
- } = dispatch( 'core/block-editor' );
-
- return {
- insertBlocks( blocks, index ) {
- const { rootClientId } = ownProps;
-
- insertBlocks( blocks, index, rootClientId );
- },
- updateBlockAttributes( ...args ) {
- updateBlockAttributes( ...args );
- },
- moveBlockToPosition( srcClientId, srcRootClientId, dstIndex ) {
- const { rootClientId: dstRootClientId } = ownProps;
- moveBlockToPosition( srcClientId, srcRootClientId, dstRootClientId, dstIndex );
- },
- };
- } ),
- withSelect( ( select, { rootClientId } ) => {
+ function selector( select ) {
const {
getBlockIndex,
getClientIdsOfDescendants,
@@ -160,10 +46,168 @@ export default compose(
} = select( 'core/block-editor' );
return {
getBlockIndex,
+ blockIndex: getBlockIndex( clientId, rootClientId ),
getClientIdsOfDescendants,
hasUploadPermissions: !! getSettings().mediaUpload,
isLockedAll: getTemplateLock( rootClientId ) === 'all',
};
- } ),
- withFilters( 'editor.BlockDropZone' )
-)( BlockDropZone );
+ }
+
+ const {
+ getBlockIndex,
+ blockIndex,
+ getClientIdsOfDescendants,
+ hasUploadPermissions,
+ isLockedAll,
+ } = useSelect( selector, [ rootClientId, clientId ] );
+ const {
+ insertBlocks,
+ updateBlockAttributes,
+ moveBlockToPosition,
+ } = useDispatch( 'core/block-editor' );
+
+ const onFilesDrop = useCallback(
+ ( files ) => {
+ if ( ! hasUploadPermissions ) {
+ return;
+ }
+
+ const transformation = findTransform(
+ getBlockTransforms( 'from' ),
+ ( transform ) =>
+ transform.type === 'files' && transform.isMatch( files )
+ );
+
+ if ( transformation ) {
+ const blocks = transformation.transform(
+ files,
+ updateBlockAttributes
+ );
+ insertBlocks( blocks, blockIndex, rootClientId );
+ }
+ },
+ [
+ hasUploadPermissions,
+ updateBlockAttributes,
+ insertBlocks,
+ blockIndex,
+ rootClientId,
+ ]
+ );
+
+ const onHTMLDrop = useCallback(
+ ( HTML ) => {
+ const blocks = pasteHandler( { HTML, mode: 'BLOCKS' } );
+
+ if ( blocks.length ) {
+ insertBlocks( blocks, blockIndex, rootClientId );
+ }
+ },
+ [ insertBlocks, blockIndex, rootClientId ]
+ );
+
+ const onDrop = useCallback(
+ ( event ) => {
+ const {
+ srcRootClientId,
+ srcClientId,
+ srcIndex,
+ type,
+ } = parseDropEvent( event );
+
+ const isBlockDropType = ( dropType ) => dropType === 'block';
+ const isSameLevel = ( srcRoot, dstRoot ) => {
+ // Note that rootClientId of top-level blocks will be undefined OR a void string,
+ // so we also need to account for that case separately.
+ return (
+ srcRoot === dstRoot ||
+ ( ! srcRoot === true && ! dstRoot === true )
+ );
+ };
+ const isSameBlock = ( src, dst ) => src === dst;
+ const isSrcBlockAnAncestorOfDstBlock = ( src, dst ) =>
+ getClientIdsOfDescendants( [ src ] ).some(
+ ( id ) => id === dst
+ );
+
+ if (
+ ! isBlockDropType( type ) ||
+ isSameBlock( srcClientId, clientId ) ||
+ isSrcBlockAnAncestorOfDstBlock(
+ srcClientId,
+ clientId || rootClientId
+ )
+ ) {
+ return;
+ }
+
+ const dstIndex = clientId
+ ? getBlockIndex( clientId, rootClientId )
+ : undefined;
+ const positionIndex = blockIndex;
+ // If the block is kept at the same level and moved downwards,
+ // subtract to account for blocks shifting upward to occupy its old position.
+ const insertIndex =
+ dstIndex &&
+ srcIndex < dstIndex &&
+ isSameLevel( srcRootClientId, rootClientId )
+ ? positionIndex - 1
+ : positionIndex;
+ moveBlockToPosition(
+ srcClientId,
+ srcRootClientId,
+ rootClientId,
+ insertIndex
+ );
+ },
+ [
+ getClientIdsOfDescendants,
+ getBlockIndex,
+ clientId,
+ blockIndex,
+ moveBlockToPosition,
+ rootClientId,
+ ]
+ );
+
+ const { position } = useDropZone( {
+ element,
+ onFilesDrop,
+ onHTMLDrop,
+ onDrop,
+ isDisabled: isLockedAll,
+ withPosition: true,
+ } );
+
+ useEffect( () => {
+ if ( position ) {
+ const { y } = position;
+ const rect = element.current.getBoundingClientRect();
+
+ const offset = y - rect.top;
+ const target = Array.from( element.current.children ).find(
+ ( blockEl ) => {
+ return (
+ blockEl.offsetTop + blockEl.offsetHeight / 2 > offset
+ );
+ }
+ );
+
+ if ( ! target ) {
+ return;
+ }
+
+ const targetClientId = target.id.slice( 'block-'.length );
+
+ if ( ! targetClientId ) {
+ return;
+ }
+
+ setClientId( targetClientId );
+ }
+ }, [ position ] );
+
+ if ( position ) {
+ return clientId;
+ }
+}
diff --git a/packages/block-editor/src/components/block-drop-zone/style.scss b/packages/block-editor/src/components/block-drop-zone/style.scss
deleted file mode 100644
index 8135c66f32ffa..0000000000000
--- a/packages/block-editor/src/components/block-drop-zone/style.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-// Dropzones
-.block-editor-block-drop-zone {
- border: none;
- border-radius: 0;
-
- .components-drop-zone__content,
- &.is-dragging-over-element .components-drop-zone__content {
- display: none;
- }
-
- &.is-close-to-bottom,
- &.is-close-to-top {
- background: none;
- }
-
- &.is-close-to-top {
- border-top: 3px solid theme(primary);
- }
-
- &.is-close-to-bottom {
- border-bottom: 3px solid theme(primary);
- }
-
- &.is-appender.is-active.is-dragging-over-document {
- border-bottom: none;
- }
-}
diff --git a/packages/block-editor/src/components/block-edit/context.js b/packages/block-editor/src/components/block-edit/context.js
index 08f2ac9f1dd6b..0ab6570bd5da0 100644
--- a/packages/block-editor/src/components/block-edit/context.js
+++ b/packages/block-editor/src/components/block-edit/context.js
@@ -39,18 +39,19 @@ export function useBlockEditContext() {
*
* @return {WPComponent} Enhanced component with injected context as props.
*/
-export const withBlockEditContext = ( mapContextToProps ) => createHigherOrderComponent( ( OriginalComponent ) => {
- return ( props ) => (
-
- { ( context ) => (
-
- );
-}, 'withBlockEditContext' );
+export const withBlockEditContext = ( mapContextToProps ) =>
+ createHigherOrderComponent( ( OriginalComponent ) => {
+ return ( props ) => (
+
+ { ( context ) => (
+
+ );
+ }, 'withBlockEditContext' );
/**
* A Higher Order Component used to render conditionally the wrapped
@@ -60,12 +61,15 @@ export const withBlockEditContext = ( mapContextToProps ) => createHigherOrderCo
*
* @return {WPComponent} Component which renders only when the BlockEdit is selected.
*/
-export const ifBlockEditSelected = createHigherOrderComponent( ( OriginalComponent ) => {
- return ( props ) => (
-
- { ( { isSelected } ) => isSelected && (
-
- );
-}, 'ifBlockEditSelected' );
+export const ifBlockEditSelected = createHigherOrderComponent(
+ ( OriginalComponent ) => {
+ return ( props ) => (
+
+ { ( { 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 c7e0ba97e305e..c31095753d206 100644
--- a/packages/block-editor/src/components/block-edit/edit.js
+++ b/packages/block-editor/src/components/block-edit/edit.js
@@ -7,7 +7,11 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { withFilters } from '@wordpress/components';
-import { getBlockDefaultClassName, hasBlockSupport, getBlockType } from '@wordpress/blocks';
+import {
+ getBlockDefaultClassName,
+ hasBlockSupport,
+ getBlockType,
+} from '@wordpress/blocks';
export const Edit = ( props ) => {
const { attributes = {}, name } = props;
@@ -18,16 +22,15 @@ 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
// with which a block is displayed. If `blockType` is valid, assign
// them preferentially as the render value for the block.
const Component = blockType.edit || blockType.save;
-
return
;
};
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 (
-
- );
+ return
;
};
export default withFilters( 'editor.BlockEdit' )( Edit );
diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js
index 403a5cd87898e..3057ff3b4cf72 100644
--- a/packages/block-editor/src/components/block-edit/index.js
+++ b/packages/block-editor/src/components/block-edit/index.js
@@ -21,19 +21,42 @@ class BlockEdit extends Component {
// It is important to return the same object if props haven't changed
// to avoid unnecessary rerenders.
// See https://reactjs.org/docs/context.html#caveats.
- this.propsToContext = memize(
- this.propsToContext.bind( this ),
- { maxSize: 1 }
- );
+ this.propsToContext = memize( this.propsToContext.bind( this ), {
+ maxSize: 1,
+ } );
}
- propsToContext( name, isSelected, clientId, onFocus, onCaretVerticalPositionChange ) {
- return { name, isSelected, clientId, onFocus, onCaretVerticalPositionChange };
+ propsToContext(
+ name,
+ isSelected,
+ clientId,
+ onFocus,
+ onCaretVerticalPositionChange
+ ) {
+ return {
+ name,
+ isSelected,
+ clientId,
+ onFocus,
+ onCaretVerticalPositionChange,
+ };
}
render() {
- const { name, isSelected, clientId, onFocus, onCaretVerticalPositionChange } = this.props;
- const value = this.propsToContext( name, isSelected, clientId, onFocus, onCaretVerticalPositionChange );
+ const {
+ name,
+ isSelected,
+ clientId,
+ onFocus,
+ onCaretVerticalPositionChange,
+ } = this.props;
+ const value = this.propsToContext(
+ name,
+ isSelected,
+ clientId,
+ onFocus,
+ onCaretVerticalPositionChange
+ );
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..0b07eb03b2aad 100644
--- a/packages/block-editor/src/components/block-edit/test/edit.js
+++ b/packages/block-editor/src/components/block-edit/test/edit.js
@@ -74,7 +74,9 @@ describe( 'Edit', () => {
+
+ ),
};
}
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..f7e2317b4e2d4 100644
--- a/packages/block-editor/src/components/block-icon/test/index.js
+++ b/packages/block-editor/src/components/block-icon/test/index.js
@@ -17,7 +17,9 @@ describe( 'BlockIcon', () => {
it( 'renders a Icon', () => {
const wrapper = shallow(
@@ -53,13 +61,8 @@ const BlockInspector = ( {
-
- { appender }
-
-
+
+ { appender }
+
);
}
export default withSelect( ( select, { rootClientId } ) => {
- const {
- getBlockOrder,
- canInsertBlockType,
- getTemplateLock,
- } = select( 'core/block-editor' );
+ const { getBlockOrder, canInsertBlockType, getTemplateLock } = select(
+ 'core/block-editor'
+ );
return {
isLocked: !! getTemplateLock( rootClientId ),
blockClientIds: getBlockOrder( rootClientId ),
- canInsertDefaultBlock: canInsertBlockType( getDefaultBlockName(), rootClientId ),
+ canInsertDefaultBlock: canInsertBlockType(
+ getDefaultBlockName(),
+ rootClientId
+ ),
};
} )( BlockListAppender );
diff --git a/packages/block-editor/src/components/block-list-appender/index.native.js b/packages/block-editor/src/components/block-list-appender/index.native.js
index 2a77fe797d132..6b33b1f5c08b7 100644
--- a/packages/block-editor/src/components/block-list-appender/index.native.js
+++ b/packages/block-editor/src/components/block-list-appender/index.native.js
@@ -28,9 +28,7 @@ function BlockListAppender( {
}
if ( CustomAppender ) {
- return (
-
- { children }
-
-);
-
-// `bubblesVirtually` is required in order to avoid
-// events triggered on the child toolbar from bubbling
-// up to the parent Block.
-export const ChildToolbarSlot = () => (
-
-
);
}
diff --git a/packages/block-editor/src/components/block-list/block-html.js b/packages/block-editor/src/components/block-list/block-html.js
index f9a83feaafb3c..b8f684b62f309 100644
--- a/packages/block-editor/src/components/block-list/block-html.js
+++ b/packages/block-editor/src/components/block-list/block-html.js
@@ -1,4 +1,3 @@
-
/**
* External dependencies
*/
@@ -9,23 +8,42 @@ import TextareaAutosize from 'react-autosize-textarea';
*/
import { useEffect, useState } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
-import { getBlockAttributes, getBlockContent, getBlockType, isValidBlockContent, getSaveContent } from '@wordpress/blocks';
+import {
+ getBlockAttributes,
+ getBlockContent,
+ getBlockType,
+ isValidBlockContent,
+ getSaveContent,
+} from '@wordpress/blocks';
function BlockHTML( { clientId } ) {
const [ html, setHtml ] = useState( '' );
- const { block } = useSelect( ( select ) => ( {
- block: select( 'core/block-editor' ).getBlock( clientId ),
- } ), [ clientId ] );
+ const { block } = useSelect(
+ ( select ) => ( {
+ block: select( 'core/block-editor' ).getBlock( clientId ),
+ } ),
+ [ clientId ]
+ );
const { updateBlock } = useDispatch( 'core/block-editor' );
const onChange = () => {
const blockType = getBlockType( block.name );
- const attributes = getBlockAttributes( blockType, html, block.attributes );
+ const attributes = getBlockAttributes(
+ blockType,
+ html,
+ block.attributes
+ );
// If html is empty we reset the block to the default HTML and mark it as valid to avoid triggering an error
const content = html ? html : getSaveContent( blockType, attributes );
- const isValid = html ? isValidBlockContent( blockType, attributes, content ) : true;
+ const isValid = html
+ ? isValidBlockContent( blockType, attributes, content )
+ : true;
- updateBlock( clientId, { attributes, originalContent: content, isValid } );
+ updateBlock( clientId, {
+ attributes,
+ originalContent: content,
+ isValid,
+ } );
// Ensure the state is updated if we reset so it displays the default content
if ( ! html ) {
diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.js b/packages/block-editor/src/components/block-list/block-invalid-warning.js
index 0a541263bbb36..1fa98168e96ed 100644
--- a/packages/block-editor/src/components/block-list/block-invalid-warning.js
+++ b/packages/block-editor/src/components/block-list/block-invalid-warning.js
@@ -4,11 +4,7 @@
import { __, _x } from '@wordpress/i18n';
import { Button, Modal } from '@wordpress/components';
import { Component } from '@wordpress/element';
-import {
- getBlockType,
- createBlock,
- rawHandler,
-} from '@wordpress/blocks';
+import { getBlockType, createBlock, rawHandler } from '@wordpress/blocks';
import { compose } from '@wordpress/compose';
import { withDispatch, withSelect } from '@wordpress/data';
@@ -36,33 +32,54 @@ export class BlockInvalidWarning extends Component {
}
render() {
- const { convertToHTML, convertToBlocks, convertToClassic, attemptBlockRecovery, block } = this.props;
+ const {
+ convertToHTML,
+ convertToBlocks,
+ convertToClassic,
+ attemptBlockRecovery,
+ block,
+ } = this.props;
const hasHTMLBlock = !! getBlockType( 'core/html' );
const { compare } = this.state;
const hiddenActions = [
- { title: __( 'Convert to Classic Block' ), onClick: convertToClassic },
- { title: __( 'Attempt Block Recovery' ), onClick: attemptBlockRecovery },
+ {
+ title: __( 'Convert to Classic Block' ),
+ onClick: convertToClassic,
+ },
+ {
+ title: __( 'Attempt Block Recovery' ),
+ onClick: attemptBlockRecovery,
+ },
];
return (
<>
- {
- // translators: Button to fix block content
- _x( 'Resolve', 'imperative verb' )
- }
+
+ { // translators: Button to fix block content
+ _x( 'Resolve', 'imperative verb' ) }
,
hasHTMLBlock && (
-
+
{ __( 'Convert to HTML' ) }
),
] }
secondaryActions={ hiddenActions }
>
- { __( 'This block contains unexpected or invalid content.' ) }
+ { __(
+ 'This block contains unexpected or invalid content.'
+ ) }
{ compare && (
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-mobile-floating-toolbar.native.scss b/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.scss
index 0f64938c4beff..5b12591ec4436 100644
--- a/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.scss
+++ b/packages/block-editor/src/components/block-list/block-mobile-floating-toolbar.native.scss
@@ -1,3 +1,5 @@
+$floating-toolbar-height: 44;
+
.floatingToolbar {
background-color: $dark-gray-500;
margin: auto;
diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js
new file mode 100644
index 0000000000000..2a70b80c2dafa
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/block-popover.js
@@ -0,0 +1,320 @@
+/**
+ * External dependencies
+ */
+import { findIndex } from 'lodash';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useCallback, useContext } from '@wordpress/element';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+import { Popover } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BlockBreadcrumb from './breadcrumb';
+import BlockContextualToolbar from './block-contextual-toolbar';
+import Inserter from '../inserter';
+import { BlockNodes } from './root-container';
+
+function selector( select ) {
+ const {
+ isNavigationMode,
+ isMultiSelecting,
+ hasMultiSelection,
+ isTyping,
+ isCaretWithinFormattedText,
+ getSettings,
+ getLastMultiSelectedBlockClientId,
+ } = select( 'core/block-editor' );
+ return {
+ isNavigationMode: isNavigationMode(),
+ isMultiSelecting: isMultiSelecting(),
+ isTyping: isTyping(),
+ isCaretWithinFormattedText: isCaretWithinFormattedText(),
+ hasMultiSelection: hasMultiSelection(),
+ hasFixedToolbar: getSettings().hasFixedToolbar,
+ lastClientId: getLastMultiSelectedBlockClientId(),
+ };
+}
+
+function BlockPopover( {
+ clientId,
+ rootClientId,
+ name,
+ align,
+ isValid,
+ moverDirection,
+ isEmptyDefaultBlock,
+ capturingClientId,
+} ) {
+ const {
+ isNavigationMode,
+ isMultiSelecting,
+ isTyping,
+ isCaretWithinFormattedText,
+ hasMultiSelection,
+ hasFixedToolbar,
+ lastClientId,
+ } = useSelect( selector, [] );
+ const isLargeViewport = useViewportMatch( 'medium' );
+ const [ isToolbarForced, setIsToolbarForced ] = useState( false );
+ const [ isInserterShown, setIsInserterShown ] = useState( false );
+ const [ blockNodes ] = useContext( BlockNodes );
+
+ const showEmptyBlockSideInserter =
+ ! isNavigationMode && isEmptyDefaultBlock && isValid;
+ const shouldShowBreadcrumb = isNavigationMode;
+ const shouldShowContextualToolbar =
+ ! isNavigationMode &&
+ ! hasFixedToolbar &&
+ isLargeViewport &&
+ ! showEmptyBlockSideInserter &&
+ ! isMultiSelecting &&
+ ( ! isTyping || isCaretWithinFormattedText );
+ const canFocusHiddenToolbar =
+ ! isNavigationMode &&
+ ! shouldShowContextualToolbar &&
+ ! hasFixedToolbar &&
+ ! isEmptyDefaultBlock;
+
+ useShortcut(
+ 'core/block-editor/focus-toolbar',
+ useCallback( () => setIsToolbarForced( true ), [] ),
+ {
+ bindGlobal: true,
+ eventName: 'keydown',
+ isDisabled: ! canFocusHiddenToolbar,
+ }
+ );
+
+ if (
+ ! shouldShowBreadcrumb &&
+ ! shouldShowContextualToolbar &&
+ ! isToolbarForced &&
+ ! showEmptyBlockSideInserter
+ ) {
+ return null;
+ }
+
+ let node = blockNodes[ clientId ];
+
+ if ( capturingClientId ) {
+ node = document.getElementById( 'block-' + capturingClientId );
+ }
+
+ if ( ! node ) {
+ return null;
+ }
+
+ // A block may specify a different target element for the toolbar.
+ if ( node.classList.contains( 'is-block-collapsed' ) ) {
+ node = node.querySelector( '.is-block-content' ) || node;
+ }
+
+ let anchorRef = node;
+
+ if ( hasMultiSelection ) {
+ const bottomNode = blockNodes[ lastClientId ];
+
+ // Wait to render the popover until the bottom reference is available
+ // as well.
+ if ( ! bottomNode ) {
+ return null;
+ }
+
+ anchorRef = {
+ top: node,
+ bottom: bottomNode,
+ };
+ }
+
+ function onFocus() {
+ setIsInserterShown( true );
+ }
+
+ function onBlur() {
+ setIsInserterShown( false );
+ }
+
+ // Position above the anchor, pop out towards the right, and position in the
+ // left corner. For the side inserter, pop out towards the left, and
+ // position in the right corner.
+ // To do: refactor `Popover` to make this prop clearer.
+ const popoverPosition = showEmptyBlockSideInserter
+ ? 'top left right'
+ : 'top right left';
+
+ return (
+ setIsToolbarForced( false ) }
+ shouldAnchorIncludePadding
+ >
+ { ( shouldShowContextualToolbar || isToolbarForced ) && (
+
+
+ ) }
+ { ( shouldShowContextualToolbar || isToolbarForced ) && (
+
+
+ ) }
+
+ );
+}
+
+function wrapperSelector( select ) {
+ const {
+ getSelectedBlockClientId,
+ getFirstMultiSelectedBlockClientId,
+ getBlockRootClientId,
+ __unstableGetBlockWithoutInnerBlocks,
+ getBlockParents,
+ getBlockListSettings,
+ __experimentalGetBlockListSettingsForBlocks,
+ } = select( 'core/block-editor' );
+
+ const clientId =
+ getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
+
+ if ( ! clientId ) {
+ return;
+ }
+
+ const rootClientId = getBlockRootClientId( clientId );
+ const { name, attributes = {}, isValid } =
+ __unstableGetBlockWithoutInnerBlocks( clientId ) || {};
+ const blockParentsClientIds = getBlockParents( clientId );
+ const { __experimentalMoverDirection } =
+ getBlockListSettings( rootClientId ) || {};
+
+ // Get Block List Settings for all ancestors of the current Block clientId
+ 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 ]
+ );
+
+ let capturingClientId;
+
+ if ( topmostAncestorWithCaptureDescendantsToolbarsIndex !== -1 ) {
+ capturingClientId =
+ blockParentsClientIds[
+ topmostAncestorWithCaptureDescendantsToolbarsIndex
+ ];
+ }
+
+ return {
+ clientId,
+ rootClientId: getBlockRootClientId( clientId ),
+ name,
+ align: attributes.align,
+ isValid,
+ moverDirection: __experimentalMoverDirection,
+ isEmptyDefaultBlock:
+ name && isUnmodifiedDefaultBlock( { name, attributes } ),
+ capturingClientId,
+ };
+}
+
+export default function WrappedBlockPopover() {
+ const selected = useSelect( wrapperSelector, [] );
+
+ if ( ! selected ) {
+ return null;
+ }
+
+ const {
+ clientId,
+ rootClientId,
+ name,
+ align,
+ isValid,
+ moverDirection,
+ isEmptyDefaultBlock,
+ capturingClientId,
+ } = selected;
+
+ if ( ! name ) {
+ return null;
+ }
+
+ return (
+ { blockEdit }
;
+ }
+
if ( mode !== 'visual' ) {
blockEdit = { blockEdit }
;
}
- /**
- * Renders an individual `BlockContextualToolbar` component.
- * This needs to be a function which generates the component
- * on demand as we can only have a single toolbar for each render.
- * This is because of the `isForcingContextualToolbar` logic which
- * relies on a single toolbar being rendered to update the boolean
- * value of the ref used to track the "force" state.
- */
- const renderBlockContextualToolbar = () => (
-
- { shouldShowInsertionPoint && (
-
- { ( isCapturingDescendantToolbars ) && (
- // A slot made available on all ancestors of the selected Block
- // to allow child Blocks to render their toolbars into the DOM
- // of the appropriate parent.
-
+
+ { isValid && blockEdit }
+ { isValid && mode === 'html' && (
+
- { ! hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && renderBlockContextualToolbar() }
- { hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
- // If the parent Block is set to consume toolbars of the child Blocks
- // then render the child Block's toolbar into the Slot provided
- // by the parent.
-
- { renderBlockContextualToolbar() }
-
- ) }
- { shouldShowBreadcrumb && (
-
- ) }
-
-
- { isValid && blockEdit }
- { isValid && mode === 'html' && (
-
- { getSaveElement( blockType, attributes ) }
-
,
- ] }
-
- { !! hasError &&
-
-
- ) }
-
+ />,
+
+ { getSaveElement( blockType, attributes ) }
+
,
+ ] }
+
+ { !! hasError &&
+ { showFloatingToolbar && (
+
this.props.onSelect( parentId ) }
+ onClick={ () =>
+ this.props.onSelect( parentId )
+ }
icon={ NavigateUpSVG }
/>
- ) }
+ ) }
- { isValid ? this.getBlockForType() :
+ { isSelected && (
+
@@ -240,7 +264,6 @@ export default compose( [
withSelect( ( select, { clientId, rootClientId } ) => {
const {
getBlockIndex,
- getBlocks,
isBlockSelected,
__unstableGetBlockWithoutInnerBlocks,
getBlockHierarchyRootClientId,
@@ -252,19 +275,18 @@ 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 );
- const isLastBlock = order === getBlocks().length - 1;
+ const isLastBlock = order === getBlockCount( rootClientId ) - 1;
const block = __unstableGetBlockWithoutInnerBlocks( clientId );
const { name, attributes, isValid } = block || {};
+
+ const isUnregisteredBlock = name === getUnregisteredTypeHandlerName();
const blockType = getBlockType( name || 'core/missing' );
const title = blockType.title;
const icon = blockType.icon;
- const getAccessibilityLabelExtra = blockType.__experimentalGetAccessibilityLabel;
const parents = getBlockParents( clientId, true );
const parentId = parents[ 0 ] || '';
@@ -277,24 +299,47 @@ export default compose( [
const selectedBlockClientId = getSelectedBlockClientId();
- const commonAncestor = getLowestCommonAncestorWithSelectedBlock( clientId );
+ 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 = !! getBlockCount( clientId );
+ const hasChildren =
+ ! isUnregisteredBlock && !! getBlockCount( clientId );
const hasParent = !! parentId;
- const isParentSelected = selectedBlockClientId && selectedBlockClientId === parentId;
- const isAncestorSelected = selectedBlockClientId && parents.includes( selectedBlockClientId );
- const isSelectedBlockNested = !! getBlockRootClientId( selectedBlockClientId );
+ const isParentSelected =
+ selectedBlockClientId && selectedBlockClientId === parentId;
+ const isAncestorSelected =
+ selectedBlockClientId && parents.includes( selectedBlockClientId );
+ const isSelectedBlockNested = !! getBlockRootClientId(
+ selectedBlockClientId
+ );
- const selectedParents = selectedBlockClientId ? getBlockParents( selectedBlockClientId ) : [];
+ 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 isDescendantOfParentSelected = selectedParents.includes(
+ parentId
+ );
+ const isTouchable =
+ isSelected ||
+ isDescendantOfParentSelected ||
+ isParentSelected ||
+ parentId === '';
+ const isDimmed =
+ ! isSelected &&
+ isSelectedBlockNested &&
+ ! isAncestorSelected &&
+ ! isDescendantSelected &&
+ ( isDescendantOfParentSelected || rootBlockId === clientId );
const isInnerBlockHolder = name === getGroupingBlockName();
- const isRootListInnerBlockHolder = ! isSelectedBlockNested && isInnerBlockHolder;
+ const isRootListInnerBlockHolder =
+ ! isSelectedBlockNested && isInnerBlockHolder;
return {
icon,
@@ -306,7 +351,6 @@ export default compose( [
isLastBlock,
isSelected,
isValid,
- getAccessibilityLabelExtra,
showFloatingToolbar,
parentId,
isParentSelected,
@@ -317,6 +361,7 @@ export default compose( [
isTouchable,
isDimmed,
isRootListInnerBlockHolder,
+ isUnregisteredBlock,
};
} ),
withDispatch( ( dispatch, ownProps, { select } ) => {
@@ -342,7 +387,9 @@ export default compose( [
mergeBlocks( clientId, nextBlockClientId );
}
} else {
- const previousBlockClientId = getPreviousBlockClientId( clientId );
+ const previousBlockClientId = getPreviousBlockClientId(
+ clientId
+ );
if ( previousBlockClientId ) {
mergeBlocks( previousBlockClientId, clientId );
}
diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss
index ff9cea835a83c..f22e071255353 100644
--- a/packages/block-editor/src/components/block-list/block.native.scss
+++ b/packages/block-editor/src/components/block-list/block.native.scss
@@ -54,6 +54,19 @@
margin-right: 0;
}
+.marginVerticalDescendant {
+ margin-bottom: $block-selected-vertical-margin-descendant;
+}
+
+.marginVerticalChild {
+ margin-bottom: $block-selected-vertical-margin-child;
+}
+
+.marginVerticalNone {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
.blockTitle {
background-color: $gray;
padding-left: 8px;
@@ -75,12 +88,16 @@
.selectedLeaf {
margin: $block-selected-margin;
- padding: $block-selected-to-content;
+ padding-left: $block-selected-to-content;
+ padding-right: $block-selected-to-content;
+ padding-top: $block-selected-to-content;
}
.selectedRootLeaf {
margin: 0;
- padding: $block-edge-to-content;
+ padding-left: $block-edge-to-content;
+ padding-right: $block-edge-to-content;
+ padding-top: $block-edge-to-content;
}
.selectedParent {
@@ -130,3 +147,8 @@
background-color: #e9eff3;
opacity: 0.4;
}
+
+.neutralToolbar {
+ margin-left: -$block-edge-to-content;
+ margin-right: -$block-edge-to-content;
+}
diff --git a/packages/block-editor/src/components/block-list/breadcrumb.js b/packages/block-editor/src/components/block-list/breadcrumb.js
index 89c8f0e0c4c91..a47db75152663 100644
--- a/packages/block-editor/src/components/block-list/breadcrumb.js
+++ b/packages/block-editor/src/components/block-list/breadcrumb.js
@@ -2,8 +2,13 @@
* WordPress dependencies
*/
import { Toolbar, Button } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { BACKSPACE, DELETE } from '@wordpress/keycodes';
+import {
+ getBlockType,
+ __experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
+} from '@wordpress/blocks';
/**
* Internal dependencies
@@ -15,21 +20,73 @@ import BlockTitle from '../block-title';
* descends from a root block, a button is displayed enabling the user to select
* the root block.
*
- * @param {string} props.clientId Client ID of block.
+ * @param {string} props Component props.
+ * @param {string} props.clientId Client ID of block.
+ *
* @return {WPComponent} The component to be rendered.
*/
-const BlockBreadcrumb = forwardRef( ( { clientId, ...props }, ref ) => {
- const { setNavigationMode } = useDispatch( 'core/block-editor' );
+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 { index, name, attributes } = selected;
+ const { setNavigationMode, removeBlock } = useDispatch(
+ 'core/block-editor'
+ );
+ const ref = useRef();
+
+ // Focus the breadcrumb in navigation mode.
+ useEffect( () => {
+ ref.current.focus();
+ } );
+
+ function onKeyDown( event ) {
+ const { keyCode } = event;
+
+ if ( keyCode === BACKSPACE || keyCode === DELETE ) {
+ removeBlock( clientId );
+ event.preventDefault();
+ }
+ }
+
+ const blockType = getBlockType( name );
+ const label = getAccessibleBlockLabel(
+ blockType,
+ attributes,
+ index + 1,
+ moverDirection
+ );
return (
- setNavigationMode( false ) }>
+ setNavigationMode( false ) }
+ onKeyDown={ onKeyDown }
+ label={ label }
+ >
);
-} );
+}
export default BlockBreadcrumb;
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 0bea56e4da6dd..37d26abe1cff5 100644
--- a/packages/block-editor/src/components/block-list/breadcrumb.native.js
+++ b/packages/block-editor/src/components/block-list/breadcrumb.native.js
@@ -19,17 +19,48 @@ import SubdirectorSVG from './subdirectory-icon';
import styles from './breadcrumb.scss';
-const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon } ) => {
+const BlockBreadcrumb = ( {
+ clientId,
+ blockIcon,
+ rootClientId,
+ rootBlockIcon,
+} ) => {
return (
- {/* Open BottomSheet with markup */} }>
- { rootClientId && rootBlockIcon && (
- [ {
+ /* Open BottomSheet with markup */
+ } }
+ disabled={
+ true
+ } /* Disable temporarily since onPress function is empty */
+ >
+ { rootClientId &&
+ rootBlockIcon && [
+
+ ,
+ ] }
+
+
);
@@ -37,10 +68,9 @@ const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon } )
export default compose( [
withSelect( ( select, { clientId } ) => {
- 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/breadcrumb.native.scss b/packages/block-editor/src/components/block-list/breadcrumb.native.scss
index 8e9b103446291..7bc6ccd559763 100644
--- a/packages/block-editor/src/components/block-list/breadcrumb.native.scss
+++ b/packages/block-editor/src/components/block-list/breadcrumb.native.scss
@@ -4,11 +4,13 @@
justify-content: flex-start;
padding-left: 5;
padding-right: 15;
+ flex-shrink: 1;
}
.breadcrumbTitle {
color: $white;
margin-left: 4;
+ flex-shrink: 1;
}
.icon {
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 7100e7ced012f..ffb5320faa1aa 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -6,8 +6,8 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { useRef } from '@wordpress/element';
import { AsyncModeProvider, useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
/**
* Internal dependencies
@@ -15,7 +15,8 @@ import { AsyncModeProvider, useSelect } from '@wordpress/data';
import BlockListBlock from './block';
import BlockListAppender from '../block-list-appender';
import __experimentalBlockListFooter from '../block-list-footer';
-import useMultiSelection from './use-multi-selection';
+import RootContainer from './root-container';
+import useBlockDropZone from '../block-drop-zone';
/**
* If the block count exceeds the threshold, we disable the reordering animation
@@ -34,7 +35,6 @@ const forceSyncUpdates = ( WrappedComponent ) => ( props ) => {
function BlockList( {
className,
rootClientId,
- __experimentalMoverDirection: moverDirection = 'vertical',
isDraggable,
renderAppender,
__experimentalUIParts = {},
@@ -56,10 +56,9 @@ function BlockList( {
selectedBlockClientId: getSelectedBlockClientId(),
multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
hasMultiSelection: hasMultiSelection(),
- enableAnimation: (
+ enableAnimation:
! isTyping() &&
- getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD
- ),
+ getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
};
}
@@ -71,17 +70,16 @@ function BlockList( {
hasMultiSelection,
enableAnimation,
} = useSelect( selector, [ rootClientId ] );
- const ref = useRef();
- const onSelectionStart = useMultiSelection( { ref, rootClientId } );
- const uiParts = {
- hasMovers: true,
- hasSelectedUI: true,
- ...__experimentalUIParts,
- };
+ const Container = rootClientId ? 'div' : RootContainer;
+ const ref = useRef();
+ const targetClientId = useBlockDropZone( {
+ element: ref,
+ rootClientId,
+ } );
return (
-
{ blockClientIds.map( ( clientId, index ) => {
- const isBlockInSelection = hasMultiSelection ?
- multiSelectedBlockClientIds.includes( clientId ) :
- selectedBlockClientId === clientId;
+ const isBlockInSelection = hasMultiSelection
+ ? multiSelectedBlockClientIds.includes( clientId )
+ : selectedBlockClientId === clientId;
return (
-
+
);
@@ -116,9 +121,12 @@ function BlockList( {
- 0;
+ }
+
render() {
const {
clearSelectedBlock,
@@ -75,7 +97,7 @@ export class BlockList extends Component {
title,
header,
withFooter = true,
- renderAppender,
+ isReadOnly,
isRootList,
} = this.props;
@@ -85,7 +107,9 @@ export class BlockList extends Component {
onAccessibilityEscape={ clearSelectedBlock }
>
- )
- }
-
+ ) }
);
}
- isReplaceable( block ) {
- if ( ! block ) {
- return false;
- }
- return isUnmodifiedDefaultBlock( block );
- }
+ renderItem( { item: clientId } ) {
+ const {
+ isReadOnly,
+ shouldShowInsertionPointBefore,
+ shouldShowInsertionPointAfter,
+ } = this.props;
- renderItem( { item: clientId, index } ) {
- const { shouldShowBlockAtIndex, shouldShowInsertionPointBefore, shouldShowInsertionPointAfter } = this.props;
return (
- { shouldShowInsertionPointBefore( clientId ) &&
+ { shouldShowInsertionPointBefore( clientId ) && (
+
);
}
@@ -147,9 +182,11 @@ export class BlockList extends Component {
const paragraphBlock = createBlock( 'core/paragraph' );
return (
<>
- {
- this.addBlockToEndOfPost( paragraphBlock );
- } } >
+ {
+ this.addBlockToEndOfPost( paragraphBlock );
+ } }
+ >
<__experimentalBlockListFooter.Slot />
@@ -162,79 +199,55 @@ export default compose( [
withSelect( ( select, { rootClientId } ) => {
const {
getBlockCount,
- getBlockIndex,
getBlockOrder,
getSelectedBlockClientId,
getBlockInsertionPoint,
isBlockInsertionPointVisible,
- getSelectedBlock,
+ getSettings,
} = select( 'core/block-editor' );
- const {
- getGroupingBlockName,
- } = select( 'core/blocks' );
-
const selectedBlockClientId = getSelectedBlockClientId();
const blockClientIds = getBlockOrder( rootClientId );
const insertionPoint = getBlockInsertionPoint();
const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
- const selectedBlock = getSelectedBlock();
- const hasInnerBlocks = selectedBlock && selectedBlock.name === getGroupingBlockName();
const shouldShowInsertionPointBefore = ( clientId ) => {
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
);
};
- const selectedBlockIndex = getBlockIndex( selectedBlockClientId, rootClientId );
-
- const shouldShowBlockAtIndex = ( index ) => {
- const shouldHideBlockAtIndex = (
- ! hasInnerBlocks && blockInsertionPointIsVisible &&
- // if `index` === `insertionPoint.index`, then block is replaceable
- index === insertionPoint.index &&
- // only hide selected block
- index === selectedBlockIndex
- );
- return ! shouldHideBlockAtIndex;
- };
+ const isReadOnly = getSettings().readOnly;
return {
blockClientIds,
blockCount: getBlockCount( rootClientId ),
isBlockInsertionPointVisible: isBlockInsertionPointVisible(),
- shouldShowBlockAtIndex,
shouldShowInsertionPointBefore,
shouldShowInsertionPointAfter,
selectedBlockClientId,
+ isReadOnly,
isRootList: rootClientId === undefined,
};
} ),
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 d9e7580314ee1..11ef726060509 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -6,69 +6,180 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
+import { useState, useRef } from '@wordpress/element';
+import { Popover } from '@wordpress/components';
+import { placeCaretAtVerticalEdge } from '@wordpress/dom';
/**
* Internal dependencies
*/
import Inserter from '../inserter';
+import { getClosestTabbable } from '../writing-flow';
+import { getBlockDOMNode } from '../../utils/dom';
-export default function BlockInsertionPoint( { rootClientId, clientId } ) {
- const [ isInserterFocused, setInserterFocused ] = useState( false );
- const showInsertionPoint = useSelect( ( select ) => {
- const {
- getBlockIndex,
- getBlockInsertionPoint,
- isBlockInsertionPointVisible,
- } = select( 'core/block-editor' );
- const blockIndex = getBlockIndex( clientId, rootClientId );
- const insertionPoint = getBlockInsertionPoint();
- return (
- isBlockInsertionPointVisible() &&
- insertionPoint.index === blockIndex &&
- insertionPoint.rootClientId === rootClientId
+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 ]
+ );
+
+ if ( ! showInsertionPoint ) {
+ return null;
+ }
+
+ return (
+
+ );
+}
+
+export default function InsertionPoint( {
+ className,
+ isMultiSelecting,
+ selectedBlockClientId,
+ children,
+ containerRef,
+} ) {
+ const [ isInserterShown, setIsInserterShown ] = useState( false );
+ const [ isInserterForced, setIsInserterForced ] = useState( false );
+ const [ inserterElement, setInserterElement ] = useState( null );
+ const [ inserterClientId, setInserterClientId ] = useState( null );
+ const ref = useRef();
+
+ function onMouseMove( event ) {
+ if ( event.target.className !== className ) {
+ if ( isInserterShown ) {
+ setIsInserterShown( false );
+ }
+ return;
+ }
+
+ const rect = event.target.getBoundingClientRect();
+ const offset = event.clientY - rect.top;
+ const element = Array.from( event.target.children ).find(
+ ( blockEl ) => {
+ return blockEl.offsetTop > offset;
+ }
);
- }, [ clientId, rootClientId ] );
-
- function onFocus( event ) {
- // Stop propagation of the focus event to avoid selecting the current
- // block while inserting a new block, as it is not relevant to sibling
- // insertion and conflicts with contextual toolbar placement.
- event.stopPropagation();
- setInserterFocused( true );
+
+ if ( ! element ) {
+ return;
+ }
+
+ const clientId = element.id.slice( 'block-'.length );
+
+ if ( ! clientId ) {
+ return;
+ }
+
+ const elementRect = element.getBoundingClientRect();
+
+ if (
+ event.clientX > elementRect.right ||
+ event.clientX < elementRect.left
+ ) {
+ if ( isInserterShown ) {
+ setIsInserterShown( false );
+ }
+ return;
+ }
+
+ setIsInserterShown( true );
+ setInserterElement( element );
+ setInserterClientId( clientId );
}
- function onBlur() {
- setInserterFocused( false );
+ function focusClosestTabbable( event ) {
+ const { clientX, clientY, target } = event;
+
+ // Only handle click on the wrapper specifically, and not an event
+ // bubbled from the inserter itself.
+ if ( target !== ref.current ) {
+ return;
+ }
+
+ const targetRect = target.getBoundingClientRect();
+ const isReverse = clientY < targetRect.top + targetRect.height / 2;
+ const blockNode = getBlockDOMNode( inserterClientId );
+ const container = isReverse ? containerRef.current : blockNode;
+ const closest = getClosestTabbable( blockNode, true, container );
+ const rect = new window.DOMRect( clientX, clientY, 0, 16 );
+
+ if ( closest ) {
+ placeCaretAtVerticalEdge( closest, isReverse, rect, false );
+ }
}
return (
-
- { showInsertionPoint && (
-
+ <>
+ { ! 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,
+ }
+ ) }
+ >
+
+
) }
-
-
+
{ __( '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..6af4ba78ea634 100644
--- a/packages/block-editor/src/components/block-list/moving-animation.js
+++ b/packages/block-editor/src/components/block-list/moving-animation.js
@@ -6,7 +6,12 @@ import { useSpring, interpolate } from 'react-spring/web.cjs';
/**
* WordPress dependencies
*/
-import { useState, useLayoutEffect, useReducer, useMemo } from '@wordpress/element';
+import {
+ useState,
+ useLayoutEffect,
+ useReducer,
+ useMemo,
+} from '@wordpress/element';
import { useReducedMotion } from '@wordpress/compose';
import { getScrollContainer } from '@wordpress/dom';
@@ -44,11 +49,24 @@ 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 [ triggeredAnimation, triggerAnimation ] = useReducer(
+ counterReducer,
+ 0
+ );
const [ finishedAnimation, endAnimation ] = useReducer( counterReducer, 0 );
- const [ transform, setTransform ] = useState( { x: 0, y: 0, scrollTop: 0 } );
+ const [ transform, setTransform ] = useState( {
+ x: 0,
+ y: 0,
+ scrollTop: 0,
+ } );
const previous = ref.current ? getAbsolutePosition( ref.current ) : null;
const scrollContainer = useMemo( () => {
@@ -70,7 +88,8 @@ function useMovingAnimation( ref, isSelected, adjustScrolling, enableAnimation,
// just move directly to the final scroll position
ref.current.style.transform = 'none';
const destination = getAbsolutePosition( ref.current );
- scrollContainer.scrollTop = scrollContainer.scrollTop - previous.top + destination.top;
+ scrollContainer.scrollTop =
+ scrollContainer.scrollTop - previous.top + destination.top;
}
return;
@@ -80,11 +99,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 ] );
@@ -102,32 +125,35 @@ function useMovingAnimation( ref, isSelected, adjustScrolling, enableAnimation,
config: { mass: 5, tension: 2000, friction: 200 },
immediate: prefersReducedMotion,
onFrame: ( props ) => {
- if ( adjustScrolling && scrollContainer && ! prefersReducedMotion && props.y ) {
+ if (
+ adjustScrolling &&
+ scrollContainer &&
+ ! prefersReducedMotion &&
+ props.y
+ ) {
scrollContainer.scrollTop = transform.scrollTop + props.y;
}
},
} );
// 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..ae1d897660af7 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,21 @@
*/
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
new file mode 100644
index 0000000000000..84985f8fd7c07
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/root-container.js
@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, forwardRef, useState } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useMultiSelection from './use-multi-selection';
+import { getBlockClientId } from '../../utils/dom';
+import InsertionPoint from './insertion-point';
+import BlockPopover from './block-popover';
+
+/** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
+
+export const Context = createContext();
+export const BlockNodes = createContext();
+
+function selector( select ) {
+ const {
+ getSelectedBlockClientId,
+ hasMultiSelection,
+ isMultiSelecting,
+ } = select( 'core/block-editor' );
+
+ return {
+ selectedBlockClientId: getSelectedBlockClientId(),
+ hasMultiSelection: hasMultiSelection(),
+ isMultiSelecting: isMultiSelecting(),
+ };
+}
+
+/**
+ * Prevents default dragging behavior within a block.
+ * To do: we must handle this in the future and clean up the drag target.
+ * Previously dragging was prevented for multi-selected, but this is no longer
+ * needed.
+ *
+ * @param {WPSyntheticEvent} event Synthetic drag event.
+ */
+function onDragStart( event ) {
+ // Ensure we target block content, not block controls.
+ if ( getBlockClientId( event.target ) ) {
+ event.preventDefault();
+ }
+}
+
+function RootContainer( { children, className }, ref ) {
+ const {
+ selectedBlockClientId,
+ hasMultiSelection,
+ isMultiSelecting,
+ } = useSelect( selector, [] );
+ const { selectBlock } = useDispatch( 'core/block-editor' );
+ const onSelectionStart = useMultiSelection( ref );
+
+ /**
+ * Marks the block as selected when focused and not already selected. This
+ * specifically handles the case where block does not set focus on its own
+ * (via `setFocus`), typically if there is no focusable input in the block.
+ *
+ * @param {WPSyntheticEvent} event
+ */
+ function onFocus( event ) {
+ if ( hasMultiSelection ) {
+ return;
+ }
+
+ const clientId = getBlockClientId( event.target );
+
+ if ( clientId && clientId !== selectedBlockClientId ) {
+ selectBlock( clientId );
+ }
+ }
+
+ return (
+
+
+
+
+ { children }
+
+
+
+
+ );
+}
+
+export default forwardRef( RootContainer );
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 6e624c54de821..739aa957b266d 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -1,21 +1,21 @@
.block-editor-block-list__layout .block-editor-block-list__block.is-selected { // Needs specificity to override inherited styles.
// While block is being dragged, dim the slot dragged from, and hide some UI.
&.is-dragging {
- .block-editor-block-list__block-edit::before {
+ &::before {
border: none;
}
- > .block-editor-block-list__block-edit > * {
+ > * {
background: $light-gray-100;
}
- > .block-editor-block-list__block-edit > * > * {
+ > * > * {
visibility: hidden;
}
}
- > .block-editor-block-list__block-edit .reusable-block-edit-panel * {
- z-index: z-index(".block-editor-block-list__block-edit .reusable-block-edit-panel *");
+ .reusable-block-edit-panel * {
+ z-index: z-index(".block-editor-block-list__block .reusable-block-edit-panel *");
}
}
@@ -31,6 +31,7 @@
.block-editor-block-list__layout {
padding-left: $block-padding;
padding-right: $block-padding;
+ position: relative;
// Beyond the mobile breakpoint, compensate for side UI.
@include break-small() {
@@ -83,34 +84,30 @@
* Block border layout
*/
- .block-editor-block-list__block-edit {
- position: relative;
-
- &::before {
- z-index: z-index(".block-editor-block-list__block-edit::before");
- content: "";
- position: absolute;
- border: $border-width solid transparent;
- border-left: none;
- box-shadow: none;
- pointer-events: none;
- transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
- @include reduce-motion("transition");
+ &::before {
+ z-index: z-index(".block-editor-block-list__block::before");
+ content: "";
+ position: absolute;
+ border: $border-width solid transparent;
+ border-left: none;
+ box-shadow: none;
+ pointer-events: none;
+ transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
+ @include reduce-motion("transition");
- // Include a transparent outline for Windows High Contrast mode.
- outline: $border-width solid transparent;
+ // Include a transparent outline for Windows High Contrast mode.
+ outline: $border-width solid transparent;
- // Go edge-to-edge on mobile.
- right: -$block-padding;
- left: -$block-padding;
- top: -$block-padding;
- bottom: -$block-padding;
- }
+ // Go edge-to-edge on mobile.
+ right: -$block-padding;
+ left: -$block-padding;
+ top: -$block-padding;
+ bottom: -$block-padding;
}
// Selected style.
&.is-selected {
- > .block-editor-block-list__block-edit::before {
+ &::before {
// Use opacity to work in various editor styles.
border-color: $dark-opacity-light-800;
box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;
@@ -130,7 +127,7 @@
}
}
- &.is-navigate-mode > .block-editor-block-list__block-edit::before {
+ .is-navigate-mode &::before {
border-color: $blue-medium-focus;
box-shadow: inset $block-left-border-width 0 0 0 $blue-medium-focus;
@@ -151,6 +148,10 @@
opacity: 1;
}
}
+
+ &.is-drop-target::before {
+ border-top: 3px solid theme(primary);
+ }
}
@@ -164,7 +165,8 @@
// When selecting multiple blocks, we provide an additional selection indicator.
.block-editor-block-list__block.is-multi-selected {
// Show selection borders around every non-nested block's actual footprint.
- > .block-editor-block-list__block-edit > [data-block] {
+ &:not(.is-block-collapsed),
+ .is-block-content {
box-shadow: 0 0 0 2px $blue-medium-focus;
border-radius: 1px;
@@ -184,11 +186,6 @@
}
}
}
-
- // Toolbar is captured
- &.has-toolbar-captured > .block-editor-block-list__block-edit::before {
- left: 0; // place "selected" indicator closer to block due to no toolbar
- }
}
@@ -202,7 +199,7 @@
}
// Warnings
- &.has-warning .block-editor-block-list__block-edit {
+ &.has-warning {
// When a block has a warning, you shouldn't be able to manipulate the contents.
> * {
pointer-events: none;
@@ -215,7 +212,7 @@
}
}
- &.has-warning .block-editor-block-list__block-edit::before {
+ &.has-warning::before {
// Use opacity to work in various editor styles.
border-color: $dark-opacity-light-500;
border-left: $border-width solid $dark-opacity-light-500;
@@ -225,7 +222,7 @@
}
}
- &.has-warning.is-selected .block-editor-block-list__block-edit::before {
+ &.has-warning.is-selected::before {
// Use opacity to work in various editor styles.
border-color: $dark-opacity-light-800;
border-left-color: transparent;
@@ -235,7 +232,7 @@
}
}
- &.has-warning .block-editor-block-list__block-edit::after {
+ &.has-warning::after {
content: "";
position: absolute;
background-color: rgba($light-gray-100, 0.4);
@@ -247,11 +244,11 @@
}
// Avoid conflict with the multi-selection highlight color.
- &.has-warning.is-multi-selected .block-editor-block-list__block-edit::after {
+ &.has-warning.is-multi-selected::after {
background-color: transparent;
}
- &.has-warning.is-selected .block-editor-block-list__block-edit::after {
+ &.has-warning.is-selected::after {
bottom: ( $block-toolbar-height - $block-padding - $border-width );
@include break-small() {
@@ -260,14 +257,14 @@
}
// Reusable blocks.
- &.is-reusable.is-selected > .block-editor-block-list__block-edit::before {
+ &.is-reusable.is-selected::before {
border-left-color: transparent;
border-style: dashed;
border-width: $border-width;
}
// Reusable blocks clickthrough overlays.
- &.is-reusable > .block-editor-block-list__block-edit .block-editor-inner-blocks.has-overlay {
+ &.is-reusable > .block-editor-inner-blocks.has-overlay {
// Remove only the top click overlay.
&::after {
display: none;
@@ -280,7 +277,7 @@
}
// Select tool/navigation mode shows the default cursor until an additional click edits.
- &.is-navigate-mode {
+ .is-navigate-mode & {
cursor: default;
}
@@ -294,37 +291,27 @@
// When images are floated, the block itself should collapse to zero height.
height: 0;
- // Hide block border when an image is floated.
- .block-editor-block-list__block-edit {
- &::before {
- content: none;
- }
-
- // This margin won't collapse on its own, so zero it out.
- margin-top: 0;
+ &::before {
+ content: none;
}
}
// Left.
- &[data-align="left"] {
+ &[data-align="left"] > .is-block-content {
// This is in the editor only; the image should be floated on the frontend.
- > .block-editor-block-list__block-edit {
- /*!rtl:begin:ignore*/
- float: left;
- margin-right: 2em;
- /*!rtl:end:ignore*/
- }
+ /*!rtl:begin:ignore*/
+ float: left;
+ margin-right: 2em;
+ /*!rtl:end:ignore*/
}
// Right.
- &[data-align="right"] {
+ &[data-align="right"] > .is-block-content {
// Right: This is in the editor only; the image should be floated on the frontend.
- > .block-editor-block-list__block-edit {
- /*!rtl:begin:ignore*/
- float: right;
- margin-left: 2em;
- /*!rtl:end:ignore*/
- }
+ /*!rtl:begin:ignore*/
+ float: right;
+ margin-left: 2em;
+ /*!rtl:end:ignore*/
}
// Wide and full-wide.
@@ -335,17 +322,15 @@
// Full-wide.
&[data-align="full"] {
- > .block-editor-block-list__block-edit {
- margin-left: -$block-padding;
- margin-right: -$block-padding;
+ margin-left: -$block-padding;
+ margin-right: -$block-padding;
- @include break-small() {
- margin-left: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width;
- margin-right: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width;
- }
+ @include break-small() {
+ margin-left: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width;
+ margin-right: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width;
}
- > .block-editor-block-list__block-edit::before {
+ &::before {
left: 0;
right: 0;
border-left-width: 0;
@@ -358,17 +343,9 @@
float: none;
}
- // Dropzones.
- .block-editor-block-drop-zone {
- top: -4px;
- bottom: -3px;
- margin: 0 $block-padding;
- }
-
// This essentially duplicates the mobile styles for the appender component.
// It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec
.block-editor-block-list__layout {
- .block-editor-block-list__empty-block-inserter,
.block-editor-default-block-appender .block-editor-inserter {
left: auto;
right: $grid-size;
@@ -410,13 +387,30 @@
display: flex;
}
- position: absolute;
- bottom: auto;
- left: 0;
- right: 0;
justify-content: center;
- height: $block-padding + 8px;
+ // Clicks on the inserter are redirected to the nearest tabbable element.
+ cursor: text;
+
+ // Hide the inserter above the selected block.
+ &.is-inserter-hidden .block-editor-inserter__toggle {
+ opacity: 0;
+ pointer-events: none;
+ }
+}
+
+.block-editor-block-list__block-popover-inserter {
+ position: absolute;
+ top: -9999em;
+ margin-bottom: $block-padding;
+
+ &.is-visible {
+ position: static;
+ }
+}
+
+.block-editor-block-list__insertion-point-inserter,
+.block-editor-block-list__block-popover-inserter {
// Show a clickable plus.
.block-editor-inserter__toggle {
border-radius: 50%;
@@ -424,38 +418,13 @@
background: $white;
height: $block-padding * 2;
width: $block-padding * 2;
- padding: $grid-size-small;
+ padding: 0;
+ justify-content: center;
&:not(:disabled):not([aria-disabled="true"]):hover {
box-shadow: none;
}
}
-
- // Hide both the button until hovered.
- opacity: 0;
- transition: opacity 0.1s linear;
- @include reduce-motion("transition");
-
- &:hover,
- &.is-visible {
- opacity: 1;
- }
-}
-
-// Don't show the sibling inserter before the selected block.
-.edit-post-layout:not(.has-fixed-toolbar) {
- // The child selector is necessary for this to work properly in nested contexts.
- .is-selected > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter,
- .is-focused > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter {
- opacity: 0;
- pointer-events: none;
-
- &:hover,
- &.is-visible {
- opacity: 1;
- pointer-events: auto;
- }
- }
}
// This is the edge-to-edge hover area that contains the plus.
@@ -549,38 +518,6 @@
}
}
-.block-editor-block-list__block {
- @include break-small {
- // Increase the hover and selection area around blocks.
- // This makes the blue hover line and the settings button appear even if
- // the mouse cursor is technically outside the block.
- // This improves usability by making it possible to click somewhat outside
- // the block and select it. (eg. A fuzzy click target.)
- &::before {
- bottom: 0;
- content: "";
- left: -$block-padding * 2;
- position: absolute;
- right: -$block-padding * 2;
- top: 0;
- }
-
- // Remove the fuzzy click area effect set above on nested blocks.
- // It should only applies to top-level blocks; applying this rule to
- // nested blocks will result in difficult-to-use and possibly overlapping
- // click targets.
- & &::before {
- left: 0;
- right: 0;
- }
-
- // Don't use this for full-wide blocks, as there's no clearance to accommodate extra area on the side.
- &[data-align="full"]::before {
- content: none;
- }
- }
-}
-
.block-editor-block-list__block .block-editor-warning {
z-index: z-index(".block-editor-warning");
position: relative;
@@ -601,24 +538,43 @@
}
}
+.block-editor-block-list__insertion-point-popover {
+ z-index: z-index(".block-editor-block-list__insertion-point-popover");
+
+ .components-popover__content {
+ background: none;
+ border: none;
+ box-shadow: none;
+ overflow-y: visible;
+ }
+}
+
.components-popover.block-editor-block-list__block-popover {
z-index: z-index(".block-editor-block-list__block-popover");
.components-popover__content {
- margin-left: 0 !important;
+ margin: 0 !important;
min-width: auto;
background: none;
border: none;
box-shadow: none;
overflow-y: visible;
+ // Allow clicking through the toolbar holder.
+ pointer-events: none;
+
+ > * {
+ pointer-events: all;
+ }
+
.block-editor-block-contextual-toolbar,
.block-editor-block-list__breadcrumb {
margin-bottom: $block-padding - $border-width;
margin-left: - $block-padding;
}
- .block-editor-block-contextual-toolbar[data-align="full"] {
+ .block-editor-block-contextual-toolbar[data-align="full"],
+ .block-editor-block-list__breadcrumb[data-align="full"] {
margin-left: 0;
}
}
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 }
>
-
);
}
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 46580878ff684..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
@@ -10,6 +10,7 @@ import { ToolbarButton } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
+import { trash } from '@wordpress/icons';
/**
* Internal dependencies
@@ -18,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 } ) => (
@@ -47,9 +42,7 @@ const BlockMobileToolbar = ( {
export default compose(
withSelect( ( select, { clientId } ) => {
- const {
- getBlockIndex,
- } = select( 'core/block-editor' );
+ const { getBlockIndex } = select( 'core/block-editor' );
return {
order: getBlockIndex( clientId ),
@@ -63,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 2a15b8a6159d5..1ebd7922cd4b4 100644
--- a/packages/block-editor/src/components/block-mover/icons.js
+++ b/packages/block-editor/src/components/block-mover/icons.js
@@ -1,36 +1,41 @@
/**
* WordPress dependencies
*/
-import { Path, Polygon, SVG } from '@wordpress/components';
-
-export const upArrow = (
-
-
-);
+import { Path, SVG } from '@wordpress/components';
export const leftArrow = (
-
+
);
-export const downArrow = (
-
-
-);
-
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 84475b9c60b98..7e29326458fd1 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -18,7 +18,8 @@ import { withInstanceId, compose } from '@wordpress/compose';
* Internal dependencies
*/
import { getBlockMoverDescription } from './mover-description';
-import { leftArrow, rightArrow, upArrow, downArrow, dragHandle } from './icons';
+import { leftArrow, rightArrow, dragHandle } from './icons';
+import { chevronUp, chevronDown } from '@wordpress/icons';
import BlockDraggable from '../block-draggable';
export class BlockMover extends Component {
@@ -44,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 ) ) {
@@ -56,12 +71,12 @@ export class BlockMover extends Component {
if ( orientation === 'horizontal' ) {
return isRTL ? rightArrow : leftArrow;
}
- return upArrow;
+ return chevronUp;
} else if ( moveDirection === 'down' ) {
if ( orientation === 'horizontal' ) {
return isRTL ? leftArrow : rightArrow;
}
- return downArrow;
+ return chevronDown;
}
return null;
};
@@ -86,13 +101,21 @@ 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
+ ) }
);
@@ -161,18 +189,27 @@ 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 );
- const rootClientId = getBlockRootClientId( first( normalizedClientIds ) );
+ const rootClientId = getBlockRootClientId(
+ first( normalizedClientIds )
+ );
const blockOrder = getBlockOrder( rootClientId );
const firstIndex = getBlockIndex( firstClientId, rootClientId );
- const lastIndex = getBlockIndex( last( normalizedClientIds ), 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,
@@ -185,11 +222,13 @@ export default compose(
};
} ),
withDispatch( ( dispatch, { clientIds, rootClientId } ) => {
- const { moveBlocksDown, moveBlocksUp } = dispatch( 'core/block-editor' );
+ const { moveBlocksDown, moveBlocksUp } = dispatch(
+ 'core/block-editor'
+ );
return {
onMoveDown: partial( moveBlocksDown, clientIds, rootClientId ),
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..27bf29650e9a9 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 (
<>
+
);
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 (
@@ -38,14 +54,20 @@ function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) {
}
function BlockNavigationDropdown( { isDisabled } ) {
- const hasBlocks = useSelect( ( select ) => !! select( 'core/block-editor' ).getBlockCount(), [] );
+ const hasBlocks = useSelect(
+ ( select ) => !! select( 'core/block-editor' ).getBlockCount(),
+ []
+ );
const isEnabled = hasBlocks && ! isDisabled;
- return (
+ return (
(
-
- { __( 'Block navigation' ) }
+
+ { __( 'Block navigation' ) }
+
{ hasHierarchy && (
selectBlock( block.clientId ) }
>
{ __( '(selected block)' ) } }
+ { getBlockLabel( blockType, block.attributes ) }
+ { isSelected && (
+
+ { __( '(selected block)' ) }
+
+ ) }
- { showNestedBlocks && !! block.innerBlocks && !! block.innerBlocks.length && (
-
- {
- /*
- * Disable reason: The `list` ARIA role is redundant but
- * Safari+VoiceOver won't announce the list otherwise.
- */
- /* eslint-disable jsx-a11y/no-redundant-roles */
- }
-
- { patterns.map( ( pattern ) => (
-
- onSelect( pattern ) }
- className="block-editor-block-pattern-picker__pattern"
- label={ pattern.label }
- />
-
- ) ) }
-
- { /* eslint-enable jsx-a11y/no-redundant-roles */ }
- { allowSkip && (
-
- onSelect() }
- >
- { __( 'Skip' ) }
-
-
- ) }
-
- );
-}
-
-export default BlockPatternPicker;
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 00ae9233a1250..9215221096e95 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -9,7 +9,13 @@ import classnames from 'classnames';
*/
import { Disabled } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
-import { useLayoutEffect, useState, useRef, useReducer, useMemo } from '@wordpress/element';
+import {
+ useLayoutEffect,
+ useState,
+ useRef,
+ useReducer,
+ useMemo,
+} from '@wordpress/element';
/**
* Internal dependencies
@@ -37,24 +43,36 @@ function ScaledBlockPreview( { blocks, viewportWidth, padding = 0 } ) {
// If we're previewing a single block, scale the preview to fit it.
if ( blocks.length === 1 ) {
const block = blocks[ 0 ];
- const previewElement = getBlockPreviewContainerDOMNode( block.clientId, containerElement );
+ const previewElement = getBlockPreviewContainerDOMNode(
+ block.clientId
+ );
if ( ! previewElement ) {
return;
}
let containerElementRect = containerElement.getBoundingClientRect();
containerElementRect = {
- width: containerElementRect.width - ( padding * 2 ),
- height: containerElementRect.height - ( padding * 2 ),
+ width: containerElementRect.width - padding * 2,
+ height: containerElementRect.height - padding * 2,
left: containerElementRect.left,
top: containerElementRect.top,
};
const scaledElementRect = previewElement.getBoundingClientRect();
- const scale = containerElementRect.width / scaledElementRect.width || 1;
- const offsetX = ( -( scaledElementRect.left - containerElementRect.left ) * scale ) + padding;
- const offsetY = ( containerElementRect.height > scaledElementRect.height * scale ) ?
- ( ( containerElementRect.height - ( scaledElementRect.height * scale ) ) / 2 ) + padding : 0;
+ const scale =
+ containerElementRect.width / scaledElementRect.width || 1;
+ const offsetX =
+ -( scaledElementRect.left - containerElementRect.left ) *
+ scale +
+ padding;
+ const offsetY =
+ containerElementRect.height >
+ scaledElementRect.height * scale
+ ? ( containerElementRect.height -
+ scaledElementRect.height * scale ) /
+ 2 +
+ padding
+ : 0;
setPreviewScale( scale );
setPosition( { x: offsetX, y: offsetY } );
@@ -92,34 +110,43 @@ function ScaledBlockPreview( { blocks, viewportWidth, padding = 0 } ) {
return (
-
+
);
}
-export function BlockPreview( { blocks, viewportWidth = 700, padding, settings } ) {
+export function BlockPreview( {
+ blocks,
+ viewportWidth = 700,
+ padding,
+ settings,
+} ) {
const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
- const [ recompute, triggerRecompute ] = useReducer( ( state ) => state + 1, 0 );
+ const [ recompute, triggerRecompute ] = useReducer(
+ ( state ) => state + 1,
+ 0
+ );
useLayoutEffect( triggerRecompute, [ blocks ] );
return (
-
- {
- /*
- * The key prop is used to force recomputing the preview
- * by remounting the component, ScaledBlockPreview is not meant to
- * be rerendered.
- */
- }
+
+ { /*
+ * The key prop is used to force recomputing the preview
+ * by remounting the component, ScaledBlockPreview is not meant to
+ * be rerendered.
+ */ }
div section {
height: auto;
}
diff --git a/packages/block-editor/src/components/block-selection-clearer/index.js b/packages/block-editor/src/components/block-selection-clearer/index.js
index be39e5df9e7de..69f49a37b4dce 100644
--- a/packages/block-editor/src/components/block-selection-clearer/index.js
+++ b/packages/block-editor/src/components/block-selection-clearer/index.js
@@ -15,7 +15,9 @@ class BlockSelectionClearer extends Component {
super( ...arguments );
this.bindContainer = this.bindContainer.bind( this );
- this.clearSelectionIfFocusTarget = this.clearSelectionIfFocusTarget.bind( this );
+ this.clearSelectionIfFocusTarget = this.clearSelectionIfFocusTarget.bind(
+ this
+ );
}
bindContainer( ref ) {
@@ -36,7 +38,7 @@ class BlockSelectionClearer extends Component {
clearSelectedBlock,
} = this.props;
- const hasSelection = ( hasSelectedBlock || hasMultiSelection );
+ const hasSelection = hasSelectedBlock || hasMultiSelection;
if ( event.target === this.container && hasSelection ) {
clearSelectedBlock();
}
@@ -60,7 +62,9 @@ class BlockSelectionClearer extends Component {
export default compose( [
withSelect( ( select ) => {
- const { hasSelectedBlock, hasMultiSelection } = select( 'core/block-editor' );
+ const { hasSelectedBlock, hasMultiSelection } = select(
+ 'core/block-editor'
+ );
return {
hasSelectedBlock: hasSelectedBlock(),
diff --git a/packages/block-editor/src/components/block-settings-menu/block-convert-button.js b/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
index 0a619c61f2b9d..3d321a2010ec0 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
@@ -11,11 +11,7 @@ export default function BlockConvertButton( { shouldRender, onClick, small } ) {
const label = __( 'Convert to Blocks' );
return (
-
+
{ ! small && label }
);
diff --git a/packages/block-editor/src/components/block-settings-menu/block-html-convert-button.js b/packages/block-editor/src/components/block-settings-menu/block-html-convert-button.js
index 3527d7d0d460c..339b6cdbd11e7 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-html-convert-button.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-html-convert-button.js
@@ -16,13 +16,14 @@ export default compose(
return {
block,
- shouldRender: ( block && block.name === 'core/html' ),
+ shouldRender: block && block.name === 'core/html',
};
} ),
withDispatch( ( dispatch, { block } ) => ( {
- onClick: () => dispatch( 'core/block-editor' ).replaceBlocks(
- block.clientId,
- rawHandler( { HTML: getBlockContent( block ) } ),
- ),
- } ) ),
+ onClick: () =>
+ dispatch( 'core/block-editor' ).replaceBlocks(
+ block.clientId,
+ rawHandler( { HTML: getBlockContent( block ) } )
+ ),
+ } ) )
)( BlockConvertButton );
diff --git a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
index 39cd5d097c133..acf1f37830e13 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
@@ -12,21 +12,25 @@ import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
-export function BlockModeToggle( { blockType, mode, onToggleMode, small = false, isCodeEditingEnabled = true } ) {
- if ( ! hasBlockSupport( blockType, 'html', true ) || ! isCodeEditingEnabled ) {
+export function BlockModeToggle( {
+ blockType,
+ mode,
+ onToggleMode,
+ small = false,
+ isCodeEditingEnabled = true,
+} ) {
+ if (
+ ! hasBlockSupport( blockType, 'html', true ) ||
+ ! isCodeEditingEnabled
+ ) {
return null;
}
- const label = mode === 'visual' ?
- __( 'Edit as HTML' ) :
- __( 'Edit visually' );
+ const label =
+ mode === 'visual' ? __( 'Edit as HTML' ) : __( 'Edit visually' );
return (
-
+
{ ! small && label }
);
@@ -34,7 +38,9 @@ export function BlockModeToggle( { blockType, mode, onToggleMode, small = false,
export default compose( [
withSelect( ( select, { clientId } ) => {
- const { getBlock, getBlockMode, getSettings } = select( 'core/block-editor' );
+ const { getBlock, getBlockMode, getSettings } = select(
+ 'core/block-editor'
+ );
const block = getBlock( clientId );
const isCodeEditingEnabled = getSettings().codeEditingEnabled;
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-menu-first-item.js b/packages/block-editor/src/components/block-settings-menu/block-settings-menu-first-item.js
index e01f943684ffe..43f83d136abe7 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-settings-menu-first-item.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-settings-menu-first-item.js
@@ -3,7 +3,9 @@
*/
import { createSlotFill } from '@wordpress/components';
-const { Fill: __experimentalBlockSettingsMenuFirstItem, Slot } = createSlotFill( '__experimentalBlockSettingsMenuFirstItem' );
+const { Fill: __experimentalBlockSettingsMenuFirstItem, Slot } = createSlotFill(
+ '__experimentalBlockSettingsMenuFirstItem'
+);
__experimentalBlockSettingsMenuFirstItem.Slot = Slot;
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-menu-plugins-extension.js b/packages/block-editor/src/components/block-settings-menu/block-settings-menu-plugins-extension.js
index a750b5b36cc18..7a3058b4c945b 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-settings-menu-plugins-extension.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-settings-menu-plugins-extension.js
@@ -3,7 +3,10 @@
*/
import { createSlotFill } from '@wordpress/components';
-const { Fill: __experimentalBlockSettingsMenuPluginsExtension, Slot } = createSlotFill( '__experimentalBlockSettingsMenuPluginsExtension' );
+const {
+ Fill: __experimentalBlockSettingsMenuPluginsExtension,
+ Slot,
+} = createSlotFill( '__experimentalBlockSettingsMenuPluginsExtension' );
__experimentalBlockSettingsMenuPluginsExtension.Slot = Slot;
diff --git a/packages/block-editor/src/components/block-settings-menu/block-unknown-convert-button.js b/packages/block-editor/src/components/block-settings-menu/block-unknown-convert-button.js
index 46eda45141ad1..7bbce60bf6dfe 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-unknown-convert-button.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-unknown-convert-button.js
@@ -1,7 +1,11 @@
/**
* WordPress dependencies
*/
-import { getFreeformContentHandlerName, rawHandler, serialize } from '@wordpress/blocks';
+import {
+ getFreeformContentHandlerName,
+ rawHandler,
+ serialize,
+} from '@wordpress/blocks';
import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
@@ -16,13 +20,15 @@ export default compose(
return {
block,
- shouldRender: ( block && block.name === getFreeformContentHandlerName() ),
+ shouldRender:
+ block && block.name === getFreeformContentHandlerName(),
};
} ),
withDispatch( ( dispatch, { block } ) => ( {
- onClick: () => dispatch( 'core/block-editor' ).replaceBlocks(
- block.clientId,
- rawHandler( { HTML: serialize( block ) } )
- ),
- } ) ),
+ onClick: () =>
+ dispatch( 'core/block-editor' ).replaceBlocks(
+ block.clientId,
+ rawHandler( { HTML: serialize( block ) } )
+ ),
+ } ) )
)( BlockConvertButton );
diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
index 7a2fd7a8c7e1b..8bd25660890eb 100644
--- a/packages/block-editor/src/components/block-settings-menu/index.js
+++ b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -14,6 +14,7 @@ import {
MenuItem,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
+import { trash } from '@wordpress/icons';
/**
* Internal dependencies
@@ -36,12 +37,20 @@ export function BlockSettingsMenu( { clientIds } ) {
const firstBlockClientId = blockClientIds[ 0 ];
const shortcuts = useSelect( ( select ) => {
- const { getShortcutRepresentation } = select( 'core/keyboard-shortcuts' );
+ const { getShortcutRepresentation } = select(
+ 'core/keyboard-shortcuts'
+ );
return {
- duplicate: getShortcutRepresentation( 'core/block-editor/duplicate' ),
+ duplicate: getShortcutRepresentation(
+ 'core/block-editor/duplicate'
+ ),
remove: getShortcutRepresentation( 'core/block-editor/remove' ),
- insertAfter: getShortcutRepresentation( 'core/block-editor/insert-after' ),
- insertBefore: getShortcutRepresentation( 'core/block-editor/insert-before' ),
+ insertAfter: getShortcutRepresentation(
+ 'core/block-editor/insert-after'
+ ),
+ insertBefore: getShortcutRepresentation(
+ 'core/block-editor/insert-before'
+ ),
};
}, [] );
@@ -81,8 +90,10 @@ export function BlockSettingsMenu( { clientIds } ) {
) }
{ canDuplicate && (
@@ -92,18 +103,26 @@ export function BlockSettingsMenu( { clientIds } ) {
{ canInsertDefaultBlock && (
<>
{ __( 'Insert Before' ) }
{ __( 'Insert After' ) }
@@ -122,12 +141,18 @@ export function BlockSettingsMenu( { clientIds } ) {
{ ! isLocked && (
- { _n( 'Remove Block', 'Remove Blocks', count ) }
+ { _n(
+ 'Remove Block',
+ 'Remove Blocks',
+ count
+ ) }
) }
diff --git a/packages/block-editor/src/components/block-settings/button.native.js b/packages/block-editor/src/components/block-settings/button.native.js
index ab2e1601a8880..5225e8bb988c4 100644
--- a/packages/block-editor/src/components/block-settings/button.native.js
+++ b/packages/block-editor/src/components/block-settings/button.native.js
@@ -7,12 +7,13 @@ import { withDispatch } from '@wordpress/data';
const { Fill, Slot } = createSlotFill( 'SettingsToolbarButton' );
-const SettingsButton = ( { openGeneralSidebar } ) =>
+const SettingsButton = ( { openGeneralSidebar } ) => (
diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js
index 1b59377f29161..fe59d3060a29f 100644
--- a/packages/block-editor/src/components/block-settings/container.native.js
+++ b/packages/block-editor/src/components/block-settings/container.native.js
@@ -11,7 +11,11 @@ import { InspectorControls } from '@wordpress/block-editor';
*/
import styles from './container.native.scss';
-function BottomSheetSettings( { editorSidebarOpened, closeGeneralSidebar, ...props } ) {
+function BottomSheetSettings( {
+ editorSidebarOpened,
+ closeGeneralSidebar,
+ ...props
+} ) {
return (
-
);
}
export default compose( [
withSelect( ( select ) => {
- const {
- isEditorSidebarOpened,
- } = select( 'core/edit-post' );
+ const { isEditorSidebarOpened } = select( 'core/edit-post' );
return {
editorSidebarOpened: isEditorSidebarOpened(),
@@ -42,5 +44,4 @@ export default compose( [
closeGeneralSidebar,
};
} ),
-]
-)( BottomSheetSettings );
+] )( BottomSheetSettings );
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index f3fd2b2f85a8a..0c4352d41530a 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -12,7 +12,11 @@ import { withSelect, withDispatch } from '@wordpress/data';
import TokenList from '@wordpress/token-list';
import { ENTER, SPACE } from '@wordpress/keycodes';
import { _x } from '@wordpress/i18n';
-import { getBlockType, cloneBlock, getBlockFromExample } from '@wordpress/blocks';
+import {
+ getBlockType,
+ cloneBlock,
+ getBlockFromExample,
+} from '@wordpress/blocks';
/**
* Internal dependencies
@@ -90,7 +94,11 @@ function BlockStyles( {
const activeStyle = getActiveStyle( styles, className );
function updateClassName( style ) {
- const updatedClassName = replaceActiveStyle( className, activeStyle, style );
+ const updatedClassName = replaceActiveStyle(
+ className,
+ activeStyle,
+ style
+ );
onChangeClassName( updatedClassName );
onHoverClassName( null );
onSwitch();
@@ -99,23 +107,33 @@ function BlockStyles( {
return (
{ styles.map( ( style ) => {
- const styleClassName = replaceActiveStyle( className, activeStyle, style );
+ const styleClassName = replaceActiveStyle(
+ className,
+ activeStyle,
+ style
+ );
return (
updateClassName( style ) }
onKeyDown={ ( event ) => {
- if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
+ if (
+ ENTER === event.keyCode ||
+ SPACE === event.keyCode
+ ) {
event.preventDefault();
updateClassName( style );
}
} }
- onMouseEnter={ () => onHoverClassName( styleClassName ) }
+ onMouseEnter={ () =>
+ onHoverClassName( styleClassName )
+ }
onMouseLeave={ () => onHoverClassName( null ) }
role="button"
tabIndex="0"
@@ -125,12 +143,18 @@ function BlockStyles( {
@@ -161,9 +185,12 @@ export default compose( [
withDispatch( ( dispatch, { clientId } ) => {
return {
onChangeClassName( newClassName ) {
- dispatch( 'core/block-editor' ).updateBlockAttributes( clientId, {
- className: newClassName,
- } );
+ dispatch( 'core/block-editor' ).updateBlockAttributes(
+ clientId,
+ {
+ className: newClassName,
+ }
+ );
},
};
} ),
diff --git a/packages/block-editor/src/components/block-styles/test/index.js b/packages/block-editor/src/components/block-styles/test/index.js
index 639d92ed4aeaa..6b73864d08c94 100644
--- a/packages/block-editor/src/components/block-styles/test/index.js
+++ b/packages/block-editor/src/components/block-styles/test/index.js
@@ -5,40 +5,28 @@ import { getActiveStyle, replaceActiveStyle } from '../';
describe( 'getActiveStyle', () => {
it( 'Should return the undefined if no active style', () => {
- const styles = [
- { name: 'small' },
- { name: 'big' },
- ];
+ const styles = [ { name: 'small' }, { name: 'big' } ];
const className = 'custom-className';
expect( getActiveStyle( styles, className ) ).toBeUndefined();
} );
it( 'Should return the default style if no active style', () => {
- const styles = [
- { name: 'small' },
- { name: 'big', isDefault: true },
- ];
+ const styles = [ { name: 'small' }, { name: 'big', isDefault: true } ];
const className = 'custom-className';
expect( getActiveStyle( styles, className ).name ).toBe( 'big' );
} );
it( 'Should return the active style', () => {
- const styles = [
- { name: 'small' },
- { name: 'big', isDefault: true },
- ];
+ const styles = [ { name: 'small' }, { name: 'big', isDefault: true } ];
const className = 'this-is-custom is-style-small';
expect( getActiveStyle( styles, className ).name ).toBe( 'small' );
} );
it( 'Should return the first active style', () => {
- const styles = [
- { name: 'small' },
- { name: 'big', isDefault: true },
- ];
+ const styles = [ { name: 'small' }, { name: 'big', isDefault: true } ];
const className = 'this-is-custom is-style-small is-style-big';
expect( getActiveStyle( styles, className ).name ).toBe( 'small' );
@@ -51,8 +39,9 @@ describe( 'replaceActiveStyle', () => {
const newStyle = { name: 'small' };
const className = 'custom-class';
- expect( replaceActiveStyle( className, activeStyle, newStyle ) )
- .toBe( 'custom-class is-style-small' );
+ expect( replaceActiveStyle( className, activeStyle, newStyle ) ).toBe(
+ 'custom-class is-style-small'
+ );
} );
it( 'Should add the new style if no active style (no existing class)', () => {
@@ -60,8 +49,9 @@ describe( 'replaceActiveStyle', () => {
const newStyle = { name: 'small' };
const className = '';
- expect( replaceActiveStyle( className, activeStyle, newStyle ) )
- .toBe( 'is-style-small' );
+ expect( replaceActiveStyle( className, activeStyle, newStyle ) ).toBe(
+ 'is-style-small'
+ );
} );
it( 'Should add the new style if no active style (unassigned default)', () => {
@@ -69,8 +59,9 @@ describe( 'replaceActiveStyle', () => {
const newStyle = { name: 'small' };
const className = '';
- expect( replaceActiveStyle( className, activeStyle, newStyle ) )
- .toBe( 'is-style-small' );
+ expect( replaceActiveStyle( className, activeStyle, newStyle ) ).toBe(
+ 'is-style-small'
+ );
} );
it( 'Should replace the previous active style', () => {
@@ -78,7 +69,8 @@ describe( 'replaceActiveStyle', () => {
const newStyle = { name: 'small' };
const className = 'custom-class is-style-large';
- expect( replaceActiveStyle( className, activeStyle, newStyle ) )
- .toBe( 'custom-class is-style-small' );
+ expect( replaceActiveStyle( className, activeStyle, newStyle ) ).toBe(
+ 'custom-class is-style-small'
+ );
} );
} );
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 09561f63199cd..421c26ebe09b5 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -7,8 +7,21 @@ import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash';
* WordPress dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
-import { Dropdown, Button, Toolbar, PanelBody, Path, SVG } from '@wordpress/components';
-import { getBlockType, getPossibleBlockTransformations, switchToBlockType, cloneBlock, getBlockFromExample } from '@wordpress/blocks';
+import {
+ Dropdown,
+ Button,
+ Toolbar,
+ PanelBody,
+ Path,
+ SVG,
+} from '@wordpress/components';
+import {
+ getBlockType,
+ getPossibleBlockTransformations,
+ switchToBlockType,
+ cloneBlock,
+ getBlockFromExample,
+} from '@wordpress/blocks';
import { Component } from '@wordpress/element';
import { DOWN } from '@wordpress/keycodes';
import { withSelect, withDispatch } from '@wordpress/data';
@@ -36,7 +49,12 @@ export class BlockSwitcher extends Component {
}
render() {
- const { blocks, onTransform, inserterItems, hasBlockStyles } = this.props;
+ const {
+ blocks,
+ onTransform,
+ inserterItems,
+ hasBlockStyles,
+ } = this.props;
const { hoveredClassName } = this.state;
if ( ! blocks || ! blocks.length ) {
@@ -44,7 +62,9 @@ export class BlockSwitcher extends Component {
}
const hoveredBlock = hoveredClassName ? blocks[ 0 ] : null;
- const hoveredBlockType = hoveredClassName ? getBlockType( hoveredBlock.name ) : null;
+ const hoveredBlockType = hoveredClassName
+ ? getBlockType( hoveredBlock.name )
+ : null;
const itemsByName = mapKeys( inserterItems, ( { name } ) => name );
const possibleBlockTransformations = orderBy(
@@ -58,7 +78,8 @@ export class BlockSwitcher extends Component {
// When selection consists of blocks of multiple types, display an
// appropriate icon to communicate the non-uniformity.
- const isSelectionOfSameType = uniq( map( blocks, 'name' ) ).length === 1;
+ const isSelectionOfSameType =
+ uniq( map( blocks, 'name' ) ).length === 1;
let icon;
if ( isSelectionOfSameType ) {
@@ -95,18 +116,17 @@ export class BlockSwitcher extends Component {
onToggle();
}
};
- const label = (
- 1 === blocks.length ?
- __( 'Change block type or style' ) :
- sprintf(
- _n(
- 'Change type of %d block',
- 'Change type of %d blocks',
+ const label =
+ 1 === blocks.length
+ ? __( 'Change block type or style' )
+ : sprintf(
+ _n(
+ 'Change type of %d block',
+ 'Change type of %d blocks',
+ blocks.length
+ ),
blocks.length
- ),
- blocks.length
- )
- );
+ );
return (
@@ -118,21 +138,28 @@ export class BlockSwitcher extends Component {
label={ label }
onKeyDown={ openOnArrowDown }
showTooltip
- icon={ (
+ icon={
<>
+
- ) }
+ }
/>
);
} }
renderContent={ ( { onClose } ) => (
<>
- { ( hasBlockStyles || possibleBlockTransformations.length !== 0 ) &&
+ { ( hasBlockStyles ||
+ possibleBlockTransformations.length !== 0 ) && (
- { hasBlockStyles &&
+ { hasBlockStyles && (
- }
- { possibleBlockTransformations.length !== 0 &&
+ ) }
+ { possibleBlockTransformations.length !== 0 && (
( {
- id: destinationBlockType.name,
- icon: destinationBlockType.icon,
- title: destinationBlockType.title,
- } ) ) }
+ items={ possibleBlockTransformations.map(
+ ( destinationBlockType ) => ( {
+ id:
+ destinationBlockType.name,
+ icon:
+ destinationBlockType.icon,
+ title:
+ destinationBlockType.title,
+ } )
+ ) }
onSelect={ ( item ) => {
onTransform( blocks, item.id );
onClose();
} }
/>
- }
+ ) }
- }
- { ( hoveredClassName !== null ) &&
+ ) }
+ { hoveredClassName !== null && (
-
{ __( 'Preview' ) }
+
+ { __( 'Preview' ) }
+
- }
+ ) }
) }
/>
@@ -189,9 +238,15 @@ export class BlockSwitcher extends Component {
export default compose(
withSelect( ( select, { clientIds } ) => {
- const { getBlocksByClientId, getBlockRootClientId, getInserterItems } = select( 'core/block-editor' );
+ const {
+ getBlocksByClientId,
+ getBlockRootClientId,
+ getInserterItems,
+ } = select( 'core/block-editor' );
const { getBlockStyles } = select( 'core/blocks' );
- const rootClientId = getBlockRootClientId( first( castArray( clientIds ) ) );
+ const rootClientId = getBlockRootClientId(
+ first( castArray( clientIds ) )
+ );
const blocks = getBlocksByClientId( clientIds );
const firstBlock = blocks && blocks.length === 1 ? blocks[ 0 ] : null;
const styles = firstBlock && getBlockStyles( firstBlock.name );
@@ -208,5 +263,5 @@ export default compose(
switchToBlockType( blocks, name )
);
},
- } ) ),
+ } ) )
)( BlockSwitcher );
diff --git a/packages/block-editor/src/components/block-switcher/multi-blocks-switcher.js b/packages/block-editor/src/components/block-switcher/multi-blocks-switcher.js
index 8adae420dab99..a68093f982b0f 100644
--- a/packages/block-editor/src/components/block-switcher/multi-blocks-switcher.js
+++ b/packages/block-editor/src/components/block-switcher/multi-blocks-switcher.js
@@ -8,7 +8,10 @@ import { withSelect } from '@wordpress/data';
*/
import BlockSwitcher from './';
-export function MultiBlocksSwitcher( { isMultiBlockSelection, selectedBlockClientIds } ) {
+export function MultiBlocksSwitcher( {
+ isMultiBlockSelection,
+ selectedBlockClientIds,
+} ) {
if ( ! isMultiBlockSelection ) {
return null;
}
@@ -17,12 +20,12 @@ export function MultiBlocksSwitcher( { isMultiBlockSelection, selectedBlockClien
);
}
-export default withSelect(
- ( select ) => {
- const selectedBlockClientIds = select( 'core/block-editor' ).getMultiSelectedBlockClientIds();
- return {
- isMultiBlockSelection: selectedBlockClientIds.length > 1,
- selectedBlockClientIds,
- };
- }
-)( MultiBlocksSwitcher );
+export default withSelect( ( select ) => {
+ const selectedBlockClientIds = select(
+ 'core/block-editor'
+ ).getMultiSelectedBlockClientIds();
+ return {
+ isMultiBlockSelection: selectedBlockClientIds.length > 1,
+ selectedBlockClientIds,
+ };
+} )( MultiBlocksSwitcher );
diff --git a/packages/block-editor/src/components/block-switcher/test/index.js b/packages/block-editor/src/components/block-switcher/test/index.js
index daa39038cbbf2..dea53770ca7d0 100644
--- a/packages/block-editor/src/components/block-switcher/test/index.js
+++ b/packages/block-editor/src/components/block-switcher/test/index.js
@@ -51,7 +51,7 @@ describe( 'BlockSwitcher', () => {
registerBlockType( 'core/heading', {
category: 'common',
title: 'Heading',
- edit: () => { },
+ edit: () => {},
save: () => {},
transforms: {
to: [
@@ -73,14 +73,16 @@ describe( 'BlockSwitcher', () => {
registerBlockType( 'core/paragraph', {
category: 'common',
title: 'Paragraph',
- edit: () => { },
+ edit: () => {},
save: () => {},
transforms: {
- to: [ {
- type: 'block',
- blocks: [ 'core/heading' ],
- transform: () => {},
- } ],
+ to: [
+ {
+ type: 'block',
+ blocks: [ 'core/heading' ],
+ transform: () => {},
+ },
+ ],
},
} );
} );
@@ -97,15 +99,15 @@ describe( 'BlockSwitcher', () => {
} );
test( 'should render switcher with blocks', () => {
- const blocks = [
- headingBlock1,
- ];
+ const blocks = [ headingBlock1 ];
const inserterItems = [
{ name: 'core/heading', frecency: 1 },
{ name: 'core/paragraph', frecency: 1 },
];
- const wrapper = shallow(
);
+ const wrapper = shallow(
+
+ );
expect( wrapper ).toMatchSnapshot();
} );
@@ -117,7 +119,9 @@ describe( 'BlockSwitcher', () => {
{ name: 'core/paragraph', frecency: 1 },
];
- const wrapper = shallow(
);
+ const wrapper = shallow(
+
+ );
expect( wrapper ).toMatchSnapshot();
} );
@@ -129,15 +133,15 @@ describe( 'BlockSwitcher', () => {
{ name: 'core/paragraph', frecency: 1 },
];
- const wrapper = shallow(
);
+ const wrapper = shallow(
+
+ );
expect( wrapper ).toMatchSnapshot();
} );
describe( 'Dropdown', () => {
- const blocks = [
- headingBlock1,
- ];
+ const blocks = [ headingBlock1 ];
const inserterItems = [
{ name: 'core/quote', frecency: 1 },
@@ -149,7 +153,13 @@ describe( 'BlockSwitcher', () => {
const onTransformStub = jest.fn();
const getDropdown = () => {
- const blockSwitcher = shallow(
);
+ const blockSwitcher = shallow(
+
+ );
return blockSwitcher.find( 'Dropdown' );
};
@@ -170,8 +180,17 @@ describe( 'BlockSwitcher', () => {
} );
test( 'should simulate a keydown event, which should call onToggle and open transform toggle.', () => {
- const toggleClosed = shallow( getDropdown().props().renderToggle( { onToggle: onToggleStub, isOpen: false } ) );
- const iconButtonClosed = toggleClosed.find( 'ForwardRef(Button)' );
+ const toggleClosed = shallow(
+ getDropdown()
+ .props()
+ .renderToggle( {
+ onToggle: onToggleStub,
+ isOpen: false,
+ } )
+ );
+ const iconButtonClosed = toggleClosed.find(
+ 'ForwardRef(Button)'
+ );
iconButtonClosed.simulate( 'keydown', mockKeyDown );
@@ -179,7 +198,14 @@ describe( 'BlockSwitcher', () => {
} );
test( 'should simulate a click event, which should call onToggle.', () => {
- const toggleOpen = shallow( getDropdown().props().renderToggle( { onToggle: onToggleStub, isOpen: true } ) );
+ const toggleOpen = shallow(
+ getDropdown()
+ .props()
+ .renderToggle( {
+ onToggle: onToggleStub,
+ isOpen: true,
+ } )
+ );
const iconButtonOpen = toggleOpen.find( 'ForwardRef(Button)' );
iconButtonOpen.simulate( 'keydown', mockKeyDown );
@@ -191,7 +217,13 @@ describe( 'BlockSwitcher', () => {
describe( '.renderContent', () => {
test( 'should create the transform items for the chosen block. A heading block will have 3 items', () => {
const onCloseStub = jest.fn();
- const content = shallow(
{ getDropdown().props().renderContent( { onClose: onCloseStub } ) }
);
+ const content = shallow(
+
+ { getDropdown()
+ .props()
+ .renderContent( { onClose: onCloseStub } ) }
+
+ );
const blockList = content.find( 'BlockTypesList' );
expect( blockList.prop( 'items' ) ).toHaveLength( 1 );
} );
diff --git a/packages/block-editor/src/components/block-switcher/test/multi-blocks-switcher.js b/packages/block-editor/src/components/block-switcher/test/multi-blocks-switcher.js
index 30199f6c59852..5e99eaba7f675 100644
--- a/packages/block-editor/src/components/block-switcher/test/multi-blocks-switcher.js
+++ b/packages/block-editor/src/components/block-switcher/test/multi-blocks-switcher.js
@@ -11,9 +11,7 @@ import { MultiBlocksSwitcher } from '../multi-blocks-switcher';
describe( 'MultiBlocksSwitcher', () => {
test( 'should return null when the selection is not a multi block selection.', () => {
const isMultiBlockSelection = false;
- const selectedBlockClientIds = [
- 'clientid',
- ];
+ const selectedBlockClientIds = [ 'clientid' ];
const wrapper = shallow(
{
test( 'should return a BlockSwitcher element matching the snapshot.', () => {
const isMultiBlockSelection = true;
- const selectedBlockClientIds = [
- 'clientid-1',
- 'clientid-2',
- ];
+ const selectedBlockClientIds = [ 'clientid-1', 'clientid-2' ];
const wrapper = shallow(
{
+export default function BlockToolbar() {
+ const {
+ blockClientIds,
+ isValid,
+ mode,
+ moverDirection,
+ hasMovers = true,
+ } = useSelect( ( select ) => {
const {
getBlockMode,
getSelectedBlockClientIds,
isBlockValid,
+ getBlockRootClientId,
+ getBlockListSettings,
} = select( 'core/block-editor' );
const selectedBlockClientIds = getSelectedBlockClientIds();
+ const blockRootClientId = getBlockRootClientId(
+ selectedBlockClientIds[ 0 ]
+ );
+
+ const { __experimentalMoverDirection, __experimentalUIParts = {} } =
+ getBlockListSettings( blockRootClientId ) || {};
return {
blockClientIds: selectedBlockClientIds,
- isValid: selectedBlockClientIds.length === 1 ?
- isBlockValid( selectedBlockClientIds[ 0 ] ) :
- null,
- mode: selectedBlockClientIds.length === 1 ?
- getBlockMode( selectedBlockClientIds[ 0 ] ) :
- null,
+ rootClientId: blockRootClientId,
+ isValid:
+ selectedBlockClientIds.length === 1
+ ? isBlockValid( selectedBlockClientIds[ 0 ] )
+ : null,
+ mode:
+ selectedBlockClientIds.length === 1
+ ? getBlockMode( selectedBlockClientIds[ 0 ] )
+ : null,
+ moverDirection: __experimentalMoverDirection,
+ hasMovers: __experimentalUIParts.hasMovers,
};
}, [] );
@@ -41,10 +60,12 @@ export default function BlockToolbar( { moverDirection, hasMovers = true } ) {
if ( blockClientIds.length > 1 ) {
return (
- { hasMovers && (
@@ -53,15 +74,23 @@ export default function BlockToolbar( { moverDirection, hasMovers = true } ) {
return (
- { hasMovers && (
) }
+ { hasMovers && (
+
+ ) }
{ mode === 'visual' && isValid && (
<>
-
-
+
+
) }
diff --git a/packages/block-editor/src/components/block-toolbar/index.native.js b/packages/block-editor/src/components/block-toolbar/index.native.js
index 13627f86d6f43..1819c5b2e5ba1 100644
--- a/packages/block-editor/src/components/block-toolbar/index.native.js
+++ b/packages/block-editor/src/components/block-toolbar/index.native.js
@@ -21,12 +21,14 @@ export default function BlockToolbar() {
return {
blockClientIds: selectedBlockClientIds,
- isValid: selectedBlockClientIds.length === 1 ?
- isBlockValid( selectedBlockClientIds[ 0 ] ) :
- null,
- mode: selectedBlockClientIds.length === 1 ?
- getBlockMode( selectedBlockClientIds[ 0 ] ) :
- null,
+ isValid:
+ selectedBlockClientIds.length === 1
+ ? isBlockValid( selectedBlockClientIds[ 0 ] )
+ : null,
+ mode:
+ selectedBlockClientIds.length === 1
+ ? getBlockMode( selectedBlockClientIds[ 0 ] )
+ : null,
};
}, [] );
diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
index 42b85658c7d39..b806457e71a40 100644
--- a/packages/block-editor/src/components/block-types-list/index.js
+++ b/packages/block-editor/src/components/block-types-list/index.js
@@ -8,7 +8,50 @@ import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
*/
import InserterListItem from '../inserter-list-item';
-function BlockTypesList( { items, onSelect, onHover = () => {}, children } ) {
+function BlockTypesList( {
+ items = [],
+ onSelect,
+ onHover = () => {},
+ children,
+} ) {
+ const normalizedItems = items.reduce( ( result, item ) => {
+ const { variations = [] } = item;
+ const hasDefaultVariation = variations.some(
+ ( { isDefault } ) => isDefault
+ );
+
+ // If there is no default inserter variation provided,
+ // then default block type is displayed.
+ if ( ! hasDefaultVariation ) {
+ result.push( item );
+ }
+
+ if ( variations.length ) {
+ result = result.concat(
+ variations.map( ( variation ) => {
+ return {
+ ...item,
+ id: `${ item.id }-${ variation.name }`,
+ icon: variation.icon || item.icon,
+ title: variation.title || item.title,
+ description: variation.description || item.description,
+ // If `example` is explicitly undefined for the variation, the preview will not be shown.
+ example: variation.hasOwnProperty( 'example' )
+ ? variation.example
+ : item.example,
+ initialAttributes: {
+ ...item.initialAttributes,
+ ...variation.attributes,
+ },
+ innerBlocks: variation.innerBlocks,
+ };
+ } )
+ );
+ }
+
+ return result;
+ }, [] );
+
return (
/*
* Disable reason: The `list` ARIA role is redundant but
@@ -16,23 +59,25 @@ function BlockTypesList( { items, onSelect, onHover = () => {}, children } ) {
*/
/* eslint-disable jsx-a11y/no-redundant-roles */
- { items && items.map( ( item ) =>
- {
- onSelect( item );
- onHover( null );
- } }
- onFocus={ () => onHover( item ) }
- onMouseEnter={ () => onHover( item ) }
- onMouseLeave={ () => onHover( null ) }
- onBlur={ () => onHover( null ) }
- isDisabled={ item.isDisabled }
- title={ item.title }
- />
- ) }
+ { normalizedItems.map( ( item ) => {
+ return (
+ {
+ onSelect( item );
+ onHover( null );
+ } }
+ onFocus={ () => onHover( item ) }
+ onMouseEnter={ () => onHover( item ) }
+ onMouseLeave={ () => onHover( null ) }
+ onBlur={ () => onHover( null ) }
+ isDisabled={ item.isDisabled }
+ title={ item.title }
+ />
+ );
+ } ) }
{ children }
/* eslint-enable jsx-a11y/no-redundant-roles */
diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
new file mode 100644
index 0000000000000..6bf2646f83349
--- /dev/null
+++ b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, Placeholder } from '@wordpress/components';
+
+function BlockVariationPicker( {
+ icon = 'layout',
+ label = __( 'Choose variation' ),
+ instructions = __( 'Select a variation to start with.' ),
+ variations,
+ onSelect,
+ allowSkip,
+} ) {
+ const classes = classnames( 'block-editor-block-variation-picker', {
+ 'has-many-variations': variations.length > 4,
+ } );
+
+ return (
+
+ { /*
+ * Disable reason: The `list` ARIA role is redundant but
+ * Safari+VoiceOver won't announce the list otherwise.
+ */
+ /* eslint-disable jsx-a11y/no-redundant-roles */ }
+
+ { variations.map( ( variation ) => (
+
+ onSelect( variation ) }
+ className="block-editor-block-variation-picker__variation"
+ label={ variation.title }
+ />
+
+ ) ) }
+
+ { /* eslint-enable jsx-a11y/no-redundant-roles */ }
+ { allowSkip && (
+
+ onSelect() }>
+ { __( 'Skip' ) }
+
+
+ ) }
+
+ );
+}
+
+export default BlockVariationPicker;
diff --git a/packages/block-editor/src/components/block-pattern-picker/style.scss b/packages/block-editor/src/components/block-variation-picker/style.scss
similarity index 78%
rename from packages/block-editor/src/components/block-pattern-picker/style.scss
rename to packages/block-editor/src/components/block-variation-picker/style.scss
index 9fabc94d8fe14..63460d6fcfe98 100644
--- a/packages/block-editor/src/components/block-pattern-picker/style.scss
+++ b/packages/block-editor/src/components/block-variation-picker/style.scss
@@ -1,4 +1,4 @@
-.block-editor-block-pattern-picker {
+.block-editor-block-variation-picker {
.components-placeholder__instructions {
// Defer to vertical margins applied by template picker options.
margin-bottom: 0;
@@ -10,14 +10,14 @@
flex-direction: column;
}
- &.has-many-patterns .components-placeholder__fieldset {
+ &.has-many-variations .components-placeholder__fieldset {
// Allow options to occupy a greater amount of the available space if
// many options exist.
max-width: 90%;
}
}
-.block-editor-block-pattern-picker__patterns.block-editor-block-pattern-picker__patterns {
+.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
display: flex;
justify-content: flex-start;
flex-direction: row;
@@ -29,17 +29,17 @@
> li {
list-style: none;
- margin: 0 $grid-size 0 0;
+ margin: $grid-size/2 $grid-size $grid-size/2 0;
flex-shrink: 1;
max-width: 100px;
}
- .block-editor-block-pattern-picker__pattern {
+ .block-editor-block-variation-picker__variation {
padding: $grid-size;
}
}
-.block-editor-block-pattern-picker__pattern {
+.block-editor-block-variation-picker__variation {
width: 100%;
&.components-button.has-icon {
diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/icons.js b/packages/block-editor/src/components/block-vertical-alignment-toolbar/icons.js
index 4642eddb367c7..1404e63a33205 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-toolbar/icons.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-toolbar/icons.js
@@ -4,22 +4,36 @@
import { Path, SVG } from '@wordpress/components';
export const alignBottom = (
-
+
);
export const alignCenter = (
-
+
);
export const alignTop = (
-
+
diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js
index 917353c5a50dd..ee48eae9ee5ed 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js
@@ -16,40 +16,57 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
},
center: {
icon: alignCenter,
- title: _x( 'Vertically Align Middle', 'Block vertical alignment setting' ),
+ title: _x(
+ 'Vertically Align Middle',
+ 'Block vertical alignment setting'
+ ),
},
bottom: {
icon: alignBottom,
- title: _x( 'Vertically Align Bottom', 'Block vertical alignment setting' ),
+ title: _x(
+ 'Vertically Align Bottom',
+ 'Block vertical alignment setting'
+ ),
},
};
const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ];
const DEFAULT_CONTROL = 'top';
-export function BlockVerticalAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS, isCollapsed = true } ) {
+export function BlockVerticalAlignmentToolbar( {
+ value,
+ onChange,
+ controls = DEFAULT_CONTROLS,
+ isCollapsed = true,
+} ) {
function applyOrUnset( align ) {
return () => onChange( value === align ? undefined : align );
}
const activeAlignment = BLOCK_ALIGNMENTS_CONTROLS[ value ];
- const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
+ const defaultAlignmentControl =
+ BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
return (
{
- return {
- ...BLOCK_ALIGNMENTS_CONTROLS[ control ],
- isActive: value === control,
- role: isCollapsed ? 'menuitemradio' : undefined,
- onClick: applyOrUnset( control ),
- };
- } )
+ icon={
+ activeAlignment
+ ? activeAlignment.icon
+ : defaultAlignmentControl.icon
}
+ label={ _x(
+ 'Change vertical alignment',
+ 'Block vertical alignment setting label'
+ ) }
+ controls={ controls.map( ( control ) => {
+ return {
+ ...BLOCK_ALIGNMENTS_CONTROLS[ control ],
+ isActive: value === control,
+ role: isCollapsed ? 'menuitemradio' : undefined,
+ onClick: applyOrUnset( control ),
+ };
+ } ) }
/>
);
}
diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/index.js b/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/index.js
index 6840e35ba6331..60a84fbe872c6 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/index.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/index.js
@@ -12,7 +12,12 @@ describe( 'BlockVerticalAlignmentToolbar', () => {
const alignment = 'top';
const onChange = jest.fn();
- const wrapper = shallow( {
- let label;
- if ( hasSingleBlockType ) {
- // translators: %s: the name of the block when there is only one
- label = sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle );
- } else {
- label = _x( 'Add block', 'Generic label for block inserter button' );
- }
- const isToggleButton = ! hasSingleBlockType;
- return (
-
-
- { label }
-
-
+ {
+ let label;
+ if ( hasSingleBlockType ) {
+ // translators: %s: the name of the block when there is only one
+ label = sprintf(
+ _x( 'Add %s', 'directly add the only allowed block' ),
+ blockTitle
);
- } }
- isAppender
- />
-
+ } else {
+ label = _x(
+ 'Add block',
+ 'Generic label for block inserter button'
+ );
+ }
+ const isToggleButton = ! hasSingleBlockType;
+ return (
+
+
+
+ { label }
+
+
+
+ );
+ } }
+ isAppender
+ />
);
}
diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js
index 2a3f6ef2ea9fb..070993d3d9848 100644
--- a/packages/block-editor/src/components/button-block-appender/index.native.js
+++ b/packages/block-editor/src/components/button-block-appender/index.native.js
@@ -15,9 +15,22 @@ import { Button, Dashicon } from '@wordpress/components';
import Inserter from '../inserter';
import styles from './styles.scss';
-function ButtonBlockAppender( { rootClientId, getStylesFromColorScheme, showSeparator } ) {
- const appenderStyle = { ...styles.appender, ...getStylesFromColorScheme( styles.appenderLight, styles.appenderDark ) };
- const addBlockButtonStyle = getStylesFromColorScheme( styles.addBlockButton, styles.addBlockButtonDark );
+function ButtonBlockAppender( {
+ rootClientId,
+ getStylesFromColorScheme,
+ showSeparator,
+} ) {
+ const appenderStyle = {
+ ...styles.appender,
+ ...getStylesFromColorScheme(
+ styles.appenderLight,
+ styles.appenderDark
+ ),
+ };
+ const addBlockButtonStyle = getStylesFromColorScheme(
+ styles.addBlockButton,
+ styles.addBlockButtonDark
+ );
return (
<>
diff --git a/packages/block-editor/src/components/caption/index.native.js b/packages/block-editor/src/components/caption/index.native.js
index 664ec75da9411..4669f1b8a4c3e 100644
--- a/packages/block-editor/src/components/caption/index.native.js
+++ b/packages/block-editor/src/components/caption/index.native.js
@@ -7,59 +7,50 @@ import { View } from 'react-native';
* WordPress dependencies
*/
import { RichText } from '@wordpress/block-editor';
-import { compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
-const Caption = ( { accessible, accessibilityLabel, onBlur, onChange, onFocus, isSelected, shouldDisplay, text } ) => (
- (
+
);
-export default compose( [
- withSelect( ( select, { accessibilityLabelCreator, clientId } ) => {
- const {
- getBlockAttributes,
- getSelectedBlockClientId,
- } = select( 'core/block-editor' );
- const { caption } = getBlockAttributes( clientId );
- const accessibilityLabel = accessibilityLabelCreator ? accessibilityLabelCreator( caption ) : undefined;
- const isBlockSelected = getSelectedBlockClientId() === clientId;
-
- // We'll render the caption so that the soft keyboard is not forced to close on Android
- // but still hide it by setting its display style to none. See wordpress-mobile/gutenberg-mobile#1221
- const shouldDisplay = ! RichText.isEmpty( caption ) > 0 || isBlockSelected;
-
- return {
- accessibilityLabel,
- shouldDisplay,
- text: caption,
- };
- } ),
- withDispatch( ( dispatch, { clientId } ) => {
- const { updateBlockAttributes } = dispatch( 'core/block-editor' );
- return {
- onChange: ( caption ) => {
- updateBlockAttributes( clientId, { caption } );
- },
- };
- } ),
-] )( Caption );
+export default Caption;
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index f0a360392b77d..bb4c84c0d9f96 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -7,83 +7,86 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
-
- Test Color
-
-
-
+
+
-
- Clear
-
+
+
+ Custom Color
+
+
+
+ Clear
+
+
-
-
-
- { canChooseAColor && canChooseAGradient && (
-
- ( setCurrentTab( 'color' ) ) }
- >
- { __( 'Solid Color' ) }
-
- ( setCurrentTab( 'gradient' ) ) }
- >
- { __( 'Gradient' ) }
-
-
- ) }
- { currentTab === 'color' && (
- {
- onColorChange( newColor );
- onGradientChange();
- } :
- onColorChange
- }
- { ... { colors, disableCustomColors } }
- />
- ) }
- { currentTab === 'gradient' && (
- {
- onGradientChange( newGradient );
- onColorChange();
- } :
- onGradientChange
- }
- { ... { gradients, disableCustomGradients } }
- />
+ className={ classnames(
+ 'block-editor-color-gradient-control',
+ className
) }
+ >
+
+
+
+
+
+ { canChooseAColor && canChooseAGradient && (
+
+ setCurrentTab( 'color' ) }
+ >
+ { __( 'Solid Color' ) }
+
+ setCurrentTab( 'gradient' ) }
+ >
+ { __( 'Gradient' ) }
+
+
+ ) }
+ { ( currentTab === 'color' || ! canChooseAGradient ) && (
+ {
+ onColorChange( newColor );
+ onGradientChange();
+ }
+ : onColorChange
+ }
+ { ...{ colors, disableCustomColors } }
+ />
+ ) }
+ { ( currentTab === 'gradient' || ! canChooseAColor ) && (
+ {
+ onGradientChange( newGradient );
+ onColorChange();
+ }
+ : onGradientChange
+ }
+ { ...{ gradients, disableCustomGradients } }
+ />
+ ) }
+
);
}
function ColorGradientControlSelect( props ) {
- const colorGradientSettings = useSelect(
- ( select ) => {
- const settings = select( 'core/block-editor' ).getSettings();
- return pick( settings, colorsAndGradientKeys );
- }
+ const colorGradientSettings = useSelect( ( select ) => {
+ const settings = select( 'core/block-editor' ).getSettings();
+ return pick( settings, colorsAndGradientKeys );
+ } );
+ return (
+
{ title }
-
);
return (
@@ -129,17 +147,21 @@ export const PanelColorGradientSettingsInner = ( {
};
const PanelColorGradientSettingsSelect = ( props ) => {
- const colorGradientSettings = useSelect(
- ( select ) => {
- const settings = select( 'core/block-editor' ).getSettings();
- return pick( settings, colorsAndGradientKeys );
- }
+ const colorGradientSettings = useSelect( ( select ) => {
+ const settings = select( 'core/block-editor' ).getSettings();
+ return pick( settings, colorsAndGradientKeys );
+ } );
+ return (
+
) );
@@ -23,34 +25,58 @@ describe( 'createCustomColorsHOC', () => {
} );
it( 'setting the color to a value in the provided custom color array updated the backgroundColor attribute', () => {
- const withCustomColors = createCustomColorsHOC( [ { name: 'Red', slug: 'red', color: 'ff0000' } ] );
- const EnhancedComponent = withCustomColors( 'backgroundColor' )( ( props ) => (
- props.setBackgroundColor( 'ff0000' ) }>Test Me
+ const withCustomColors = createCustomColorsHOC( [
+ { name: 'Red', slug: 'red', color: 'ff0000' },
+ ] );
+ const EnhancedComponent = withCustomColors(
+ 'backgroundColor'
+ )( ( props ) => (
+ props.setBackgroundColor( 'ff0000' ) }>
+ Test Me
+
) );
const setAttributes = jest.fn();
const wrapper = mount(
- props.setBackgroundColor( '000000' ) }>Test Me
+ const withCustomColors = createCustomColorsHOC( [
+ { name: 'Red', slug: 'red', color: 'ff0000' },
+ ] );
+ const EnhancedComponent = withCustomColors(
+ 'backgroundColor'
+ )( ( props ) => (
+ props.setBackgroundColor( '000000' ) }>
+ Test Me
+
) );
const setAttributes = jest.fn();
const wrapper = mount(
-
{ contrastCheckers &&
- ( Array.isArray( contrastCheckers ) ?
- contrastCheckers.map( ( { backgroundColor, textColor, ...rest } ) => {
- backgroundColor = resolveContrastCheckerColor(
- backgroundColor,
- colorSettings,
- detectedBackgroundColorRef.current
- );
- textColor = resolveContrastCheckerColor(
- textColor,
- colorSettings,
- detectedColorRef.current
- );
- return (
-
);
const InspectorControlsColorPanel = ( props ) => (
@@ -115,23 +118,31 @@ const InspectorControlsColorPanel = ( props ) => (
export default function __experimentalUseColors(
colorConfigs,
{
- panelTitle = __( 'Color Settings' ),
+ panelTitle = __( 'Color settings' ),
colorPanelProps,
contrastCheckers,
panelChildren,
+ colorDetector: {
+ targetRef,
+ backgroundColorTargetRef = targetRef,
+ textColorTargetRef = targetRef,
+ } = {},
} = {
- panelTitle: __( 'Color Settings' ),
+ panelTitle: __( 'Color settings' ),
},
deps = []
) {
const { clientId } = useBlockEditContext();
const { attributes, settingsColors } = useSelect(
( select ) => {
- const { getBlockAttributes, getSettings } = select( 'core/block-editor' );
+ const { getBlockAttributes, getSettings } = select(
+ 'core/block-editor'
+ );
const colors = getSettings().colors;
return {
attributes: getBlockAttributes( clientId ),
- settingsColors: ! colors || colors === true ? DEFAULT_COLORS : colors,
+ settingsColors:
+ ! colors || colors === true ? DEFAULT_COLORS : colors,
};
},
[ clientId ]
@@ -145,7 +156,14 @@ export default function __experimentalUseColors(
const createComponent = useMemo(
() =>
memoize(
- ( name, property, className, color, colorValue, customColor ) => ( {
+ (
+ name,
+ property,
+ className,
+ color,
+ colorValue,
+ customColor
+ ) => ( {
children,
className: componentClassName = '',
style: componentStyle = {},
@@ -161,10 +179,18 @@ export default function __experimentalUseColors(
}
return cloneElement( child, {
- className: classnames( componentClassName, child.props.className, {
- [ `has-${ kebabCase( color ) }-${ kebabCase( property ) }` ]: color,
- [ className || `has-${ kebabCase( name ) }` ]: color || customColor,
- } ),
+ className: classnames(
+ componentClassName,
+ child.props.className,
+ {
+ [ `has-${ kebabCase( color ) }-${ kebabCase(
+ property
+ ) }` ]: color,
+ [ className ||
+ `has-${ kebabCase( name ) }` ]:
+ color || customColor,
+ }
+ ),
style: {
...colorStyle,
...componentStyle,
@@ -180,14 +206,20 @@ export default function __experimentalUseColors(
() =>
memoize(
( name, colors ) => ( newColor ) => {
- const color = colors.find( ( _color ) => _color.color === newColor );
+ const color = colors.find(
+ ( _color ) => _color.color === newColor
+ );
setAttributes( {
- [ color ? camelCase( `custom ${ name }` ) : name ]: undefined,
+ [ color
+ ? camelCase( `custom ${ name }` )
+ : name ]: undefined,
} );
setAttributes( {
- [ color ? name : camelCase( `custom ${ name }` ) ]: color ?
- color.slug :
- newColor,
+ [ color
+ ? name
+ : camelCase( `custom ${ name }` ) ]: color
+ ? color.slug
+ : newColor,
} );
},
{
@@ -197,15 +229,18 @@ export default function __experimentalUseColors(
[ setAttributes, colorConfigs.length ]
);
- const detectedBackgroundColorRef = useRef();
- const detectedColorRef = useRef();
- const ColorDetector = useMemo( () => {
+ const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+ const [ detectedColor, setDetectedColor ] = useState();
+
+ useEffect( () => {
if ( ! contrastCheckers ) {
return undefined;
}
let needsBackgroundColor = false;
let needsColor = false;
- for ( const { backgroundColor, textColor } of castArray( contrastCheckers ) ) {
+ for ( const { backgroundColor, textColor } of castArray(
+ contrastCheckers
+ ) ) {
if ( ! needsBackgroundColor ) {
needsBackgroundColor = backgroundColor === true;
}
@@ -216,48 +251,29 @@ export default function __experimentalUseColors(
break;
}
}
- return (
- ( needsBackgroundColor || needsColor ) &&
- withFallbackStyles(
- (
- node,
- {
- querySelector,
- backgroundColorSelector = querySelector,
- textColorSelector = querySelector,
- }
- ) => {
- let backgroundColorNode = node;
- let textColorNode = node;
- if ( backgroundColorSelector ) {
- backgroundColorNode = node.parentNode.querySelector(
- backgroundColorSelector
- );
- }
- if ( textColorSelector ) {
- textColorNode = node.parentNode.querySelector( textColorSelector );
- }
- let backgroundColor;
- const color = getComputedStyle( textColorNode ).color;
- if ( needsBackgroundColor ) {
- backgroundColor = getComputedStyle( backgroundColorNode )
- .backgroundColor;
- while (
- backgroundColor === 'rgba(0, 0, 0, 0)' &&
- backgroundColorNode.parentNode &&
- backgroundColorNode.parentNode === Node.ELEMENT_NODE
- ) {
- backgroundColorNode = backgroundColorNode.parentNode;
- backgroundColor = getComputedStyle( backgroundColorNode )
- .backgroundColor;
- }
- }
- detectedBackgroundColorRef.current = backgroundColor;
- detectedColorRef.current = color;
- return { backgroundColor, color };
- }
- )( () => <> )
- );
+
+ if ( needsColor ) {
+ setDetectedColor(
+ getComputedStyle( textColorTargetRef.current ).color
+ );
+ }
+
+ if ( needsBackgroundColor ) {
+ let backgroundColorNode = backgroundColorTargetRef.current;
+ let backgroundColor = getComputedStyle( backgroundColorNode )
+ .backgroundColor;
+ while (
+ backgroundColor === 'rgba(0, 0, 0, 0)' &&
+ backgroundColorNode.parentNode &&
+ backgroundColorNode.parentNode.nodeType === Node.ELEMENT_NODE
+ ) {
+ backgroundColorNode = backgroundColorNode.parentNode;
+ backgroundColor = getComputedStyle( backgroundColorNode )
+ .backgroundColor;
+ }
+
+ setDetectedBackgroundColor( backgroundColor );
+ }
}, [
colorConfigs.reduce(
( acc, colorConfig ) =>
@@ -294,9 +310,9 @@ export default function __experimentalUseColors(
const customColor = attributes[ camelCase( `custom ${ name }` ) ];
// We memoize the non-primitives to avoid unnecessary updates
// when they are used as props for other components.
- const _color = customColor ?
- undefined :
- colors.find( ( __color ) => __color.slug === color );
+ const _color = customColor
+ ? undefined
+ : colors.find( ( __color ) => __color.slug === color );
acc[ componentName ] = createComponent(
name,
property,
@@ -306,14 +322,16 @@ export default function __experimentalUseColors(
customColor
);
acc[ componentName ].displayName = componentName;
- acc[ componentName ].color = customColor ?
- customColor :
- _color && _color.color;
+ acc[ componentName ].color = customColor
+ ? customColor
+ : _color && _color.color;
acc[ componentName ].slug = color;
acc[ componentName ].setColor = createSetColor( name, colors );
colorSettings[ componentName ] = {
- value: _color ? _color.color : attributes[ camelCase( `custom ${ name }` ) ],
+ value: _color
+ ? _color.color
+ : attributes[ camelCase( `custom ${ name }` ) ],
onChange: acc[ componentName ].setColor,
label: panelLabel,
colors,
@@ -331,11 +349,12 @@ export default function __experimentalUseColors(
const wrappedColorPanelProps = {
title: panelTitle,
+ initialOpen: false,
colorSettings,
colorPanelProps,
contrastCheckers,
- detectedBackgroundColorRef,
- detectedColorRef,
+ detectedBackgroundColor,
+ detectedColor,
panelChildren,
};
return {
@@ -344,7 +363,12 @@ export default function __experimentalUseColors(
InspectorControlsColorPanel: (
{
/>
);
- expect( wrapperSmallFontSize.find( Notice ).children().text() ).toBe( 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.' );
+ expect(
+ wrapperSmallFontSize
+ .find( Notice )
+ .children()
+ .text()
+ ).toBe(
+ 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+ );
const wrapperLargeText = mount(
{
/>
);
- expect( wrapperNoLargeText.find( Notice ).children().text() ).toBe( 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.' );
+ expect(
+ wrapperNoLargeText
+ .find( Notice )
+ .children()
+ .text()
+ ).toBe(
+ 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+ );
} );
test( 'should render null when the colors meet AA WCAG guidelines, with only fallback colors.', () => {
@@ -166,7 +206,8 @@ describe( 'ContrastChecker', () => {
);
}
+
export default compose(
withSelect( ( select, ownProps ) => {
- const { getBlockCount, getBlockName, isBlockValid, getSettings, getTemplateLock } = select( 'core/block-editor' );
+ const {
+ getBlockCount,
+ getBlockName,
+ isBlockValid,
+ getSettings,
+ getTemplateLock,
+ } = select( 'core/block-editor' );
const isEmpty = ! getBlockCount( ownProps.rootClientId );
- const isLastBlockDefault = getBlockName( ownProps.lastBlockClientId ) === getDefaultBlockName();
+ const isLastBlockDefault =
+ getBlockName( ownProps.lastBlockClientId ) ===
+ getDefaultBlockName();
const isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );
const { bodyPlaceholder } = getSettings();
@@ -82,10 +95,9 @@ export default compose(
};
} ),
withDispatch( ( dispatch, ownProps ) => {
- const {
- insertDefaultBlock,
- startTyping,
- } = dispatch( 'core/block-editor' );
+ const { insertDefaultBlock, startTyping } = dispatch(
+ 'core/block-editor'
+ );
return {
onAppend() {
@@ -95,5 +107,5 @@ export default compose(
startTyping();
},
};
- } ),
+ } )
)( DefaultBlockAppender );
diff --git a/packages/block-editor/src/components/default-block-appender/index.native.js b/packages/block-editor/src/components/default-block-appender/index.native.js
index 4f361376f6d58..726c060241d63 100644
--- a/packages/block-editor/src/components/default-block-appender/index.native.js
+++ b/packages/block-editor/src/components/default-block-appender/index.native.js
@@ -29,17 +29,18 @@ export function DefaultBlockAppender( {
return null;
}
- const value = typeof placeholder === 'string' ? decodeEntities( placeholder ) : __( 'Start writingโฆ' );
+ const value =
+ typeof placeholder === 'string'
+ ? decodeEntities( placeholder )
+ : __( 'Start writingโฆ' );
return (
-
-
- {} }
- />
+
+
+ {} } />
);
@@ -47,10 +48,17 @@ export function DefaultBlockAppender( {
export default compose(
withSelect( ( select, ownProps ) => {
- const { getBlockCount, getBlockName, isBlockValid, getTemplateLock } = select( 'core/block-editor' );
+ const {
+ getBlockCount,
+ getBlockName,
+ isBlockValid,
+ getTemplateLock,
+ } = select( 'core/block-editor' );
const isEmpty = ! getBlockCount( ownProps.rootClientId );
- const isLastBlockDefault = getBlockName( ownProps.lastBlockClientId ) === getDefaultBlockName();
+ const isLastBlockDefault =
+ getBlockName( ownProps.lastBlockClientId ) ===
+ getDefaultBlockName();
const isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );
return {
@@ -59,10 +67,9 @@ export default compose(
};
} ),
withDispatch( ( dispatch, ownProps ) => {
- const {
- insertDefaultBlock,
- startTyping,
- } = dispatch( 'core/block-editor' );
+ const { insertDefaultBlock, startTyping } = dispatch(
+ 'core/block-editor'
+ );
return {
onAppend() {
@@ -72,5 +79,5 @@ export default compose(
startTyping();
},
};
- } ),
+ } )
)( DefaultBlockAppender );
diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
index b1368fb2a2b06..01d61a95aa4e1 100644
--- a/packages/block-editor/src/components/default-block-appender/style.scss
+++ b/packages/block-editor/src/components/default-block-appender/style.scss
@@ -62,7 +62,6 @@
.components-button.has-icon {
width: $block-side-ui-width;
height: $block-side-ui-width;
- margin-right: 12px;
padding: 0;
}
@@ -89,10 +88,7 @@
@include break-small {
display: flex;
- align-items: center;
height: 100%;
- left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
- right: auto;
}
&:disabled {
@@ -114,3 +110,9 @@
}
}
}
+
+.block-editor-default-block-appender .block-editor-inserter {
+ @include break-small {
+ align-items: center;
+ }
+}
diff --git a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
index d9a8e74b5994a..b237704948105 100644
--- a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -5,7 +5,6 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
className="wp-block block-editor-default-block-appender"
data-root-client-id=""
>
-
-
- {
it( 'should match snapshot', () => {
const onAppend = jest.fn();
- const wrapper = shallow(
- { label }
-
+ { label }
(
- pick(
- select( 'core/block-editor' ).getSettings(),
- [ 'gradients', 'disableCustomGradients' ]
- )
- ), [] );
+ const { gradients, disableCustomGradients } = useSelect(
+ ( select ) =>
+ pick( select( 'core/block-editor' ).getSettings(), [
+ 'gradients',
+ 'disableCustomGradients',
+ ] ),
+ []
+ );
return (
<__experimentalGradientPicker
- gradients={ props.gradients !== undefined ? props.gradient : gradients }
- disableCustomGradients={ props.disableCustomGradients !== undefined ? props.disableCustomGradients : disableCustomGradients }
+ gradients={
+ props.gradients !== undefined ? props.gradient : gradients
+ }
+ disableCustomGradients={
+ props.disableCustomGradients !== undefined
+ ? props.disableCustomGradients
+ : disableCustomGradients
+ }
{ ...props }
/>
);
}
export default function( props ) {
- const ComponentToUse = props.gradients !== undefined && props.disableCustomGradients !== undefined ?
- __experimentalGradientPicker :
- GradientPickerWithGradients;
- return (
-
);
}
diff --git a/packages/block-editor/src/components/gradients/index.js b/packages/block-editor/src/components/gradients/index.js
index abd623c817786..988ca37da2cfe 100644
--- a/packages/block-editor/src/components/gradients/index.js
+++ b/packages/block-editor/src/components/gradients/index.js
@@ -26,13 +26,19 @@ function getGradientValueBySlug( gradients, slug ) {
return gradient && gradient.gradient;
}
-export function __experimentalGetGradientObjectByGradientValue( gradients, value ) {
+export function __experimentalGetGradientObjectByGradientValue(
+ gradients,
+ value
+) {
const gradient = find( gradients, [ 'gradient', value ] );
return gradient;
}
function getGradientSlugByValue( gradients, value ) {
- const gradient = __experimentalGetGradientObjectByGradientValue( gradients, value );
+ const gradient = __experimentalGetGradientObjectByGradientValue(
+ gradients,
+ value
+ );
return gradient && gradient.slug;
}
@@ -42,15 +48,20 @@ export function __experimentalUseGradient( {
} = {} ) {
const { clientId } = useBlockEditContext();
- const { gradients, gradient, customGradient } = useSelect( ( select ) => {
- const { getBlockAttributes, getSettings } = select( 'core/block-editor' );
- const attributes = getBlockAttributes( clientId );
- return {
- gradient: attributes[ gradientAttribute ],
- customGradient: attributes[ customGradientAttribute ],
- gradients: getSettings().gradients,
- };
- }, [ clientId, gradientAttribute, customGradientAttribute ] );
+ const { gradients, gradient, customGradient } = useSelect(
+ ( select ) => {
+ const { getBlockAttributes, getSettings } = select(
+ 'core/block-editor'
+ );
+ const attributes = getBlockAttributes( clientId );
+ return {
+ gradient: attributes[ gradientAttribute ],
+ customGradient: attributes[ customGradientAttribute ],
+ gradients: getSettings().gradients,
+ };
+ },
+ [ clientId, gradientAttribute, customGradientAttribute ]
+ );
const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
const setGradient = useCallback(
diff --git a/packages/block-editor/src/components/ignore-nested-events/index.js b/packages/block-editor/src/components/ignore-nested-events/index.js
deleted file mode 100644
index c419d282a7602..0000000000000
--- a/packages/block-editor/src/components/ignore-nested-events/index.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * External dependencies
- */
-import { reduce } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { Component, forwardRef, createElement } from '@wordpress/element';
-
-/**
- * Component which renders a div with passed props applied except the optional
- * `childHandledEvents` prop. Event prop handlers are replaced with a proxying
- * event handler to capture and prevent events from being handled by ancestor
- * `IgnoreNestedEvents` elements by testing the presence of a private property
- * assigned on the event object.
- *
- * Optionally accepts an `childHandledEvents` prop array, which can be used in
- * instances where an inner `IgnoreNestedEvents` element exists and the outer
- * element should stop propagation but not invoke a callback handler, since it
- * would be assumed these are invoked by the child element.
- *
- * @type {WPComponent}
- */
-export class IgnoreNestedEvents extends Component {
- constructor() {
- super( ...arguments );
-
- this.proxyEvent = this.proxyEvent.bind( this );
-
- // The event map is responsible for tracking an event type to a React
- // component prop name, since it is easy to determine event type from
- // a React prop name, but not the other way around.
- this.eventMap = {};
- }
-
- /**
- * General event handler which only calls to its original props callback if
- * it has not already been handled by a descendant IgnoreNestedEvents.
- *
- * @param {Event} event Event object.
- */
- proxyEvent( event ) {
- // Skip if already handled (i.e. assume nested block)
- if ( event.nativeEvent._blockHandled ) {
- return;
- }
-
- // Assign into the native event, since React will reuse their synthetic
- // event objects and this property assignment could otherwise leak.
- //
- // See: https://reactjs.org/docs/events.html#event-pooling
- event.nativeEvent._blockHandled = true;
-
- // Invoke original prop handler
- const propKey = this.eventMap[ event.type ];
-
- if ( this.props[ propKey ] ) {
- this.props[ propKey ]( event );
- }
- }
-
- render() {
- const { childHandledEvents = [], forwardedRef, tagName = 'div', ...props } = this.props;
-
- const eventHandlers = reduce( [
- ...childHandledEvents,
- ...Object.keys( props ),
- ], ( result, key ) => {
- // Try to match prop key as event handler
- const match = key.match( /^on([A-Z][a-zA-Z]+)$/ );
- if ( match ) {
- // Re-map the prop to the local proxy handler to check whether
- // the event has already been handled.
- result[ key ] = this.proxyEvent;
-
- // Assign event -> propName into an instance variable, so as to
- // avoid re-renders which could be incurred either by setState
- // or in mapping values to a newly created function.
- this.eventMap[ match[ 1 ].toLowerCase() ] = key;
- }
-
- return result;
- }, {} );
-
- return createElement( tagName, { ref: forwardedRef, ...props, ...eventHandlers } );
- }
-}
-
-const forwardedIgnoreNestedEvents = ( props, ref ) => {
- return
-
- );
-
- wrapper.childAt( 0 ).simulate( 'click' );
-
- expect( spyInner ).toHaveBeenCalled();
- expect( spyOuter ).not.toHaveBeenCalled();
- } );
-
- it( 'stops propagation of child handled events', () => {
- const spyOuter = jest.fn();
- const spyInner = jest.fn();
- const wrapper = shallow(
-
-
-
-
-
- );
-
- const div = wrapper.childAt( 0 ).childAt( 0 );
- div.simulate( 'click' );
-
- expect( spyInner ).not.toHaveBeenCalled();
- expect( spyOuter ).not.toHaveBeenCalled();
- } );
-} );
diff --git a/packages/block-editor/src/components/image-size-control/README.md b/packages/block-editor/src/components/image-size-control/README.md
new file mode 100644
index 0000000000000..21eb3cfa1823f
--- /dev/null
+++ b/packages/block-editor/src/components/image-size-control/README.md
@@ -0,0 +1,108 @@
+# ImageSizeControl
+
+Allow users to control the width & height of an image.
+
+## Usage
+
+Render a ImageSizeControl.
+
+```jsx
+import { ImageSizeControl } from '@wordpress/components';
+import { withState } from '@wordpress/compose';
+
+const MyImageSizeControl = withState( {
+ width: null,
+ height: null,
+} )( ( { width, height, setState } ) => {
+ // In this example, we have one image with a fixed size of 600x600.
+ const imageWidth = 600;
+ const imageHeight = 600;
+
+ return (
+ setState( value ) }
+ width={ width }
+ height={ height }
+ imageWidth={ imageWidth }
+ imageHeight={ imageHeight }
+ />
+ );
+} );
+```
+
+## Props
+
+The component accepts the following props:
+
+### slug
+
+The currently-selected image size slug (`thumbnail`, `large`, etc). This is used by the parent component to get the specific image, which is used to populate `imageHeight` & `imageWidth`. This is not required, but necessary when `imageSizeOptions` is used.
+
+- Type: `string`
+- Required: No
+
+### height
+
+The height of the image when displayed.
+
+- Type: `number`
+- Required: No
+
+### width
+
+The width of the image when displayed.
+
+- Type: `number`
+- Required: No
+
+### onChange
+
+The function called when the image size changes. It is passed an object with `{ width, height }` (potentially just one if only one dimension changed).
+
+- Type: `Function`
+- Required: Yes
+
+### onChangeImage
+
+The function called when a new image size is selected. It is passed the `slug` as an argument. This is not required, but necessary when `imageSizeOptions` is used.
+
+- Type: `Function`
+- Required: No
+
+### imageSizeOptions
+
+An array of image size slugs and labels. Should be of the format:
+
+```js
+[
+ { value: 'thumbnail', label: 'Thumbnail' },
+ { value: 'medium', label: 'Medium' },
+ ...
+]
+```
+
+If not provided, the "Image Size" dropdown is not displayed.
+
+- Type: `array`
+- Required: No
+
+### isResizable
+
+A boolean control for showing the resize fields "Image Dimensions". Set this to false if you want images to always be the fixed size of the selected image.
+
+- Type: `boolean`
+- Required: No
+
+### imageWidth
+
+The width of the currently selected image, used for calculating the percentage sizes. This will likely be updated when the image size slug changes, but does not control the image display (that's the `width` prop).
+
+- Type: `number`
+- Required: Yes
+
+### imageHeight
+
+The height of the currently selected image, used for calculating the percentage sizes. This will likely be updated when the image size slug changes, but does not control the image display (that's the `height` prop).
+
+- Type: `number`
+- Required: Yes
diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js
new file mode 100644
index 0000000000000..1637c6c611532
--- /dev/null
+++ b/packages/block-editor/src/components/image-size-control/index.js
@@ -0,0 +1,129 @@
+/**
+ * External dependencies
+ */
+import { isEmpty, noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+ Button,
+ ButtonGroup,
+ SelectControl,
+ TextControl,
+} from '@wordpress/components';
+import { Component } from '@wordpress/element';
+
+class ImageSizeControl extends Component {
+ /**
+ * Run additional operations during component initialization.
+ *
+ * @param {Object} props
+ */
+ constructor( props ) {
+ super( props );
+
+ this.updateDimensions = this.updateDimensions.bind( this );
+ }
+
+ updateDimensions( width = undefined, height = undefined ) {
+ return () => {
+ this.props.onChange( { width, height } );
+ };
+ }
+
+ render() {
+ const {
+ imageWidth,
+ imageHeight,
+ imageSizeOptions = [],
+ isResizable = true,
+ slug,
+ width,
+ height,
+ onChange,
+ onChangeImage = noop,
+ } = this.props;
+
+ return (
+ <>
+ { ! isEmpty( imageSizeOptions ) && (
+
+
+ { __( 'Image Dimensions' ) }
+
+
+
+ onChange( { width: parseInt( value, 10 ) } )
+ }
+ />
+
+ onChange( {
+ height: parseInt( value, 10 ),
+ } )
+ }
+ />
+
+
+
+ { [ 25, 50, 75, 100 ].map( ( scale ) => {
+ const scaledWidth = Math.round(
+ imageWidth * ( scale / 100 )
+ );
+ const scaledHeight = Math.round(
+ imageHeight * ( scale / 100 )
+ );
+
+ const isCurrent =
+ width === scaledWidth &&
+ height === scaledHeight;
+
+ return (
+
+ { scale }%
+
+ );
+ } ) }
+
+
+ { __( 'Reset' ) }
+
+
+
>`
The template is defined as a list of block items. Such blocks can have predefined attributes, placeholder, content, etc. Block templates allow specifying a default initial state for an InnerBlocks area.
-More information about templates can be found in [template docs](/docs/developers/block-api/block-templates.md).
+More information about templates can be found in [template docs](/docs/designers-developers/developers/block-api/block-templates.md).
```jsx
const TEMPLATE = [ [ 'core/columns', {}, [
@@ -100,7 +100,7 @@ If false the selection should not be updated when child blocks specified in the
### `templateLock`
* **Type:** `String|Boolean`
-Template locking of `InnerBlocks` is similar to [Custom Post Type templates locking](/docs/developers/block-api/block-templates.md#locking).
+Template locking of `InnerBlocks` is similar to [Custom Post Type templates locking](/docs/designers-developers/developers/block-api/block-templates.md#locking).
Template locking allows locking the `InnerBlocks` area for the current template.
*Options:*
diff --git a/packages/block-editor/src/components/inner-blocks/button-block-appender.js b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
index 6e26bb0856b5a..5823a5e42c7b0 100644
--- a/packages/block-editor/src/components/inner-blocks/button-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
@@ -6,7 +6,10 @@ import withClientId from './with-client-id';
export const ButtonBlockAppender = ( { clientId, showSeparator } ) => {
return (
-
{ ! templateInProcess && (
-
);
@@ -141,6 +180,7 @@ InnerBlocks = compose( [
getBlockRootClientId,
getTemplateLock,
isNavigationMode,
+ isLastBlockChangePersistent,
} = select( 'core/block-editor' );
const { clientId, isSmallScreen } = ownProps;
const block = getBlock( clientId );
@@ -149,22 +189,38 @@ InnerBlocks = compose( [
return {
block,
blockListSettings: getBlockListSettings( clientId ),
- hasOverlay: block.name !== 'core/template' && ! isBlockSelected( clientId ) && ! hasSelectedInnerBlock( clientId, true ),
+ hasOverlay:
+ block.name !== 'core/template' &&
+ ! isBlockSelected( clientId ) &&
+ ! hasSelectedInnerBlock( clientId, true ),
parentLock: getTemplateLock( rootClientId ),
enableClickThrough: isNavigationMode() || isSmallScreen,
+ isLastBlockChangePersistent: isLastBlockChangePersistent(),
};
} ),
withDispatch( ( dispatch, ownProps ) => {
const {
replaceInnerBlocks,
+ __unstableMarkNextChangeAsNotPersistent,
updateBlockListSettings,
} = dispatch( 'core/block-editor' );
- const { block, clientId, templateInsertUpdatesSelection = true } = ownProps;
+ const {
+ block,
+ clientId,
+ templateInsertUpdatesSelection = true,
+ } = ownProps;
return {
replaceInnerBlocks( blocks ) {
- replaceInnerBlocks( clientId, blocks, block.innerBlocks.length === 0 && templateInsertUpdatesSelection );
+ replaceInnerBlocks(
+ clientId,
+ blocks,
+ block.innerBlocks.length === 0 &&
+ templateInsertUpdatesSelection &&
+ blocks.length !== 0
+ );
},
+ __unstableMarkNextChangeAsNotPersistent,
updateNestedSettings( settings ) {
dispatch( updateBlockListSettings( clientId, settings ) );
},
@@ -176,9 +232,9 @@ InnerBlocks = compose( [
InnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
InnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
-InnerBlocks.Content = withBlockContentContext(
- ( { BlockContent } ) =>
{
event.preventDefault();
onClick();
diff --git a/packages/block-editor/src/components/inserter-menu-extension/index.js b/packages/block-editor/src/components/inserter-menu-extension/index.js
index bc493945d9f36..c93b6fda2850b 100644
--- a/packages/block-editor/src/components/inserter-menu-extension/index.js
+++ b/packages/block-editor/src/components/inserter-menu-extension/index.js
@@ -3,7 +3,9 @@
*/
import { createSlotFill } from '@wordpress/components';
-const { Fill: __experimentalInserterMenuExtension, Slot } = createSlotFill( '__experimentalInserterMenuExtension' );
+const { Fill: __experimentalInserterMenuExtension, Slot } = createSlotFill(
+ '__experimentalInserterMenuExtension'
+);
__experimentalInserterMenuExtension.Slot = Slot;
diff --git a/packages/block-editor/src/components/inserter/child-blocks.js b/packages/block-editor/src/components/inserter/child-blocks.js
index 94764a94b4fe7..362a56b79035a 100644
--- a/packages/block-editor/src/components/inserter/child-blocks.js
+++ b/packages/block-editor/src/components/inserter/child-blocks.js
@@ -27,17 +27,13 @@ function ChildBlocks( { rootBlockIcon, rootBlockTitle, items, ...props } ) {
export default compose(
ifCondition( ( { items } ) => items && items.length > 0 ),
withSelect( ( select, { rootClientId } ) => {
- const {
- getBlockType,
- } = select( 'core/blocks' );
- const {
- getBlockName,
- } = select( 'core/block-editor' );
+ const { getBlockType } = select( 'core/blocks' );
+ const { getBlockName } = select( 'core/block-editor' );
const rootBlockName = getBlockName( rootClientId );
const rootBlockType = getBlockType( rootBlockName );
return {
rootBlockTitle: rootBlockType && rootBlockType.title,
rootBlockIcon: rootBlockType && rootBlockType.icon,
};
- } ),
+ } )
)( ChildBlocks );
diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
index 863881afe5a91..34a430a04545f 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { get } from 'lodash';
+import { size } from 'lodash';
/**
* WordPress dependencies
*/
@@ -11,26 +11,34 @@ import { Dropdown, Button } from '@wordpress/components';
import { Component } from '@wordpress/element';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose, ifCondition } from '@wordpress/compose';
-import {
- createBlock,
-} from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
+import { plusCircle } from '@wordpress/icons';
/**
* Internal dependencies
*/
import InserterMenu from './menu';
-const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasSingleBlockType } ) => {
+const defaultRenderToggle = ( {
+ onToggle,
+ disabled,
+ isOpen,
+ blockTitle,
+ hasSingleBlockType,
+} ) => {
let label;
if ( hasSingleBlockType ) {
// translators: %s: the name of the block when there is only one
- label = sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle );
+ label = sprintf(
+ _x( 'Add %s', 'directly add the only allowed block' ),
+ blockTitle
+ );
} else {
label = _x( 'Add block', 'Generic label for block inserter button' );
}
return (
{
+ withSelect( ( select, { clientId, rootClientId } ) => {
const {
+ getBlockRootClientId,
hasInserterItems,
__experimentalGetAllowedBlocks,
} = select( 'core/block-editor' );
+ const { __experimentalGetBlockVariations: getBlockVariations } = select(
+ 'core/blocks'
+ );
+
+ rootClientId =
+ rootClientId || getBlockRootClientId( clientId ) || undefined;
const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId );
- const hasSingleBlockType = allowedBlocks && ( get( allowedBlocks, [ 'length' ], 0 ) === 1 );
+ const hasSingleBlockType =
+ size( allowedBlocks ) === 1 &&
+ size(
+ getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
+ ) === 0;
let allowedBlockType = false;
if ( hasSingleBlockType ) {
@@ -154,6 +183,7 @@ export default compose( [
hasSingleBlockType,
blockTitle: allowedBlockType ? allowedBlockType.title : '',
allowedBlockType,
+ rootClientId,
};
} ),
withDispatch( ( dispatch, ownProps, { select } ) => {
@@ -192,9 +222,7 @@ export default compose( [
return getBlockOrder( rootClientId ).length;
}
- const {
- insertBlock,
- } = dispatch( 'core/block-editor' );
+ const { insertBlock } = dispatch( 'core/block-editor' );
const blockToInsert = createBlock( allowedBlockType.name );
@@ -207,7 +235,10 @@ export default compose( [
if ( ! selectBlockOnInsert ) {
// translators: %s: the name of the block that has been added
- const message = sprintf( __( '%s block added' ), allowedBlockType.title );
+ const message = sprintf(
+ __( '%s block added' ),
+ allowedBlockType.title
+ );
speak( message );
}
},
diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js
index 8f66f5458f229..49530fdd4049d 100644
--- a/packages/block-editor/src/components/inserter/index.native.js
+++ b/packages/block-editor/src/components/inserter/index.native.js
@@ -2,11 +2,16 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Dropdown, ToolbarButton, Dashicon } from '@wordpress/components';
+import {
+ Dropdown,
+ ToolbarButton,
+ Dashicon,
+ Picker,
+} from '@wordpress/components';
import { Component } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
/**
* Internal dependencies
@@ -15,22 +20,25 @@ import styles from './style.scss';
import InserterMenu from './menu';
import BlockInsertionPoint from '../block-list/insertion-point';
-const defaultRenderToggle = ( { onToggle, disabled, style } ) => (
+const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
( this.picker = instance ) }
+ options={ this.getInsertionOptions() }
+ onChange={ onPickerSelect }
+ hideCancelButton
+ />
+
+ );
}
/**
@@ -82,16 +211,22 @@ class Inserter extends Component {
* @return {WPElement} Dropdown content element.
*/
renderContent( { onClose, isOpen } ) {
- const { rootClientId, clientId, isAppender } = this.props;
-
+ const { clientId, isAppender } = this.props;
+ const {
+ destinationRootClientId,
+ shouldReplaceBlock,
+ insertionIndex,
+ } = this.state;
return (
-
+
{ __( 'Search for a block' ) }
-
- }
+ ) }
{ map( categories, ( category ) => {
- const categoryItems = itemsPerCategory[ category.slug ];
+ const categoryItems =
+ itemsPerCategory[ category.slug ];
if ( ! categoryItems || ! categoryItems.length ) {
return null;
}
@@ -292,10 +377,44 @@ export class InserterMenu extends Component {
title={ category.title }
icon={ category.icon }
opened={ isPanelOpen( category.slug ) }
- onToggle={ this.onTogglePanel( category.slug ) }
+ onToggle={ this.onTogglePanel(
+ category.slug
+ ) }
ref={ this.bindPanel( category.slug ) }
>
-
+
);
} ) }
@@ -309,10 +428,16 @@ export class InserterMenu extends Component {
icon="controls-repeat"
ref={ this.bindPanel( 'reusable' ) }
>
-
{ __( 'Manage all reusable blocks' ) }
@@ -333,7 +458,9 @@ export class InserterMenu extends Component {
}
if ( ! hasItems ) {
return (
- { __( 'No blocks found.' ) }
+
+ { __( 'No blocks found.' ) }
+
);
}
return null;
@@ -347,18 +474,36 @@ export class InserterMenu extends Component {
{ hoveredItem && (
<>
{ ! isReusableBlock( hoveredItem ) && (
-
- { ( isReusableBlock( hoveredItem ) || hoveredItemBlockType.example ) ? (
+ { isReusableBlock( hoveredItem ) ||
+ hoveredItemBlockType.example ? (
@@ -373,7 +518,9 @@ export class InserterMenu extends Component {
{ ! hoveredItem && (
-
{ __( 'Content blocks' ) }
+
+ { __( 'Content blocks' ) }
+
{ __(
'Welcome to the wonderful world of blocks! Blocks are the basis of all content within the editor.'
@@ -392,7 +539,9 @@ export class InserterMenu extends Component {
{ __experimentalCreateInterpolateElement(
- __( 'While writing, you can press / to quickly insert new blocks.' ),
+ __(
+ 'While writing, you can press / to quickly insert new blocks.'
+ ),
{ kbd:
@@ -407,47 +556,57 @@ export class InserterMenu extends Component {
}
export default compose(
- withSelect( ( select, { clientId, isAppender, rootClientId, showInserterHelpPanel } ) => {
- const {
- getInserterItems,
- getBlockName,
- getBlockRootClientId,
- getBlockSelectionEnd,
- getSettings,
- } = select( 'core/block-editor' );
- const {
- getCategories,
- getChildBlockNames,
- } = select( 'core/blocks' );
-
- let destinationRootClientId = rootClientId;
- if ( ! destinationRootClientId && ! clientId && ! isAppender ) {
- const end = getBlockSelectionEnd();
- if ( end ) {
- destinationRootClientId = getBlockRootClientId( end ) || undefined;
+ withSelect(
+ (
+ select,
+ { clientId, isAppender, rootClientId, showInserterHelpPanel }
+ ) => {
+ const {
+ getInserterItems,
+ getBlockName,
+ getBlockRootClientId,
+ getBlockSelectionEnd,
+ getSettings,
+ } = select( 'core/block-editor' );
+ const {
+ getCategories,
+ getCollections,
+ getChildBlockNames,
+ } = select( 'core/blocks' );
+
+ let destinationRootClientId = rootClientId;
+ if ( ! destinationRootClientId && ! clientId && ! isAppender ) {
+ const end = getBlockSelectionEnd();
+ if ( end ) {
+ destinationRootClientId =
+ getBlockRootClientId( end ) || undefined;
+ }
}
- }
- const destinationRootBlockName = getBlockName( destinationRootClientId );
-
- const {
- showInserterHelpPanel: showInserterHelpPanelSetting,
- __experimentalFetchReusableBlocks: fetchReusableBlocks,
- } = getSettings();
+ const destinationRootBlockName = getBlockName(
+ destinationRootClientId
+ );
- return {
- categories: getCategories(),
- rootChildBlocks: getChildBlockNames( destinationRootBlockName ),
- items: getInserterItems( destinationRootClientId ),
- showInserterHelpPanel: showInserterHelpPanel && showInserterHelpPanelSetting,
- destinationRootClientId,
- fetchReusableBlocks,
- };
- } ),
+ const {
+ showInserterHelpPanel: showInserterHelpPanelSetting,
+ __experimentalFetchReusableBlocks: fetchReusableBlocks,
+ } = getSettings();
+
+ return {
+ categories: getCategories(),
+ collections: getCollections(),
+ rootChildBlocks: getChildBlockNames( destinationRootBlockName ),
+ items: getInserterItems( destinationRootClientId ),
+ showInserterHelpPanel:
+ showInserterHelpPanel && showInserterHelpPanelSetting,
+ destinationRootClientId,
+ fetchReusableBlocks,
+ };
+ }
+ ),
withDispatch( ( dispatch, ownProps, { select } ) => {
- const {
- showInsertionPoint,
- hideInsertionPoint,
- } = dispatch( 'core/block-editor' );
+ const { showInsertionPoint, hideInsertionPoint } = dispatch(
+ 'core/block-editor'
+ );
// To avoid duplication, getInsertionIndex is extracted and used in two event handlers
// This breaks the withDispatch not containing any logic rule.
@@ -484,23 +643,28 @@ export default compose(
},
hideInsertionPoint,
onSelect( item ) {
- const {
- replaceBlocks,
- insertBlock,
- } = dispatch( 'core/block-editor' );
- const {
- getSelectedBlock,
- } = select( 'core/block-editor' );
+ const { replaceBlocks, insertBlock } = dispatch(
+ 'core/block-editor'
+ );
+ const { getSelectedBlock } = select( 'core/block-editor' );
const {
isAppender,
onSelect,
__experimentalSelectBlockOnInsert: selectBlockOnInsert,
} = ownProps;
- const { name, title, initialAttributes } = item;
+ const { name, title, initialAttributes, innerBlocks } = item;
const selectedBlock = getSelectedBlock();
- const insertedBlock = createBlock( name, initialAttributes );
-
- if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) {
+ const insertedBlock = createBlock(
+ name,
+ initialAttributes,
+ createBlocksFromInnerBlocksTemplate( innerBlocks )
+ );
+
+ if (
+ ! isAppender &&
+ selectedBlock &&
+ isUnmodifiedDefaultBlock( selectedBlock )
+ ) {
replaceBlocks( selectedBlock.clientId, insertedBlock );
} else {
insertBlock(
@@ -512,7 +676,10 @@ export default compose(
if ( ! selectBlockOnInsert ) {
// translators: %s: the name of the block that has been added
- const message = sprintf( __( '%s block added' ), title );
+ const message = sprintf(
+ __( '%s block added' ),
+ title
+ );
speak( message );
}
}
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
index 782017a527d88..27573aeca96a7 100644
--- a/packages/block-editor/src/components/inserter/menu.native.js
+++ b/packages/block-editor/src/components/inserter/menu.native.js
@@ -7,12 +7,13 @@ import { FlatList, View, Text, TouchableHighlight } from 'react-native';
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
-import {
- createBlock,
- isUnmodifiedDefaultBlock,
-} from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
import { withDispatch, withSelect } from '@wordpress/data';
-import { withInstanceId, compose, withPreferredColorScheme } from '@wordpress/compose';
+import {
+ withInstanceId,
+ compose,
+ withPreferredColorScheme,
+} from '@wordpress/compose';
import { BottomSheet, Icon } from '@wordpress/components';
/**
@@ -24,6 +25,7 @@ export class InserterMenu extends Component {
constructor() {
super( ...arguments );
+ this.onClose = this.onClose.bind( this );
this.onLayout = this.onLayout.bind( this );
this.state = {
numberOfColumns: this.calculateNumberOfColumns(),
@@ -31,29 +33,37 @@ export class InserterMenu extends Component {
}
componentDidMount() {
- this.onOpen();
+ this.props.showInsertionPoint();
}
componentWillUnmount() {
- this.onClose();
+ this.props.hideInsertionPoint();
}
calculateNumberOfColumns() {
const bottomSheetWidth = BottomSheet.getWidth();
- const { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } = styles.modalItem;
- const { paddingLeft: containerPaddingLeft, paddingRight: containerPaddingRight } = styles.content;
+ const {
+ paddingLeft: itemPaddingLeft,
+ paddingRight: itemPaddingRight,
+ } = styles.modalItem;
+ const {
+ paddingLeft: containerPaddingLeft,
+ paddingRight: containerPaddingRight,
+ } = styles.content;
const { width: itemWidth } = styles.modalIconWrapper;
const itemTotalWidth = itemWidth + itemPaddingLeft + itemPaddingRight;
- const containerTotalWidth = bottomSheetWidth - ( containerPaddingLeft + containerPaddingRight );
+ const containerTotalWidth =
+ bottomSheetWidth - ( containerPaddingLeft + containerPaddingRight );
return Math.floor( containerTotalWidth / itemTotalWidth );
}
- onOpen() {
- this.props.showInsertionPoint();
- }
-
onClose() {
- this.props.hideInsertionPoint();
+ // if should replace but didn't insert any block
+ // re-insert default block
+ if ( this.props.shouldReplaceBlock ) {
+ this.props.insertDefaultBlock();
+ }
+ this.props.onDismiss();
}
onLayout() {
@@ -64,14 +74,23 @@ export class InserterMenu extends Component {
render() {
const { getStylesFromColorScheme } = this.props;
const bottomPadding = styles.contentBottomPadding;
- const modalIconWrapperStyle = getStylesFromColorScheme( styles.modalIconWrapper, styles.modalIconWrapperDark );
- const modalIconStyle = getStylesFromColorScheme( styles.modalIcon, styles.modalIconDark );
- const modalItemLabelStyle = getStylesFromColorScheme( styles.modalItemLabel, styles.modalItemLabelDark );
+ const modalIconWrapperStyle = getStylesFromColorScheme(
+ styles.modalIconWrapper,
+ styles.modalIconWrapperDark
+ );
+ const modalIconStyle = getStylesFromColorScheme(
+ styles.modalIcon,
+ styles.modalIconDark
+ );
+ const modalItemLabelStyle = getStylesFromColorScheme(
+ styles.modalItemLabel,
+ styles.modalItemLabelDark
+ );
return (
@@ -82,27 +101,34 @@ export class InserterMenu extends Component {
keyboardShouldPersistTaps="always"
numColumns={ this.state.numberOfColumns }
data={ this.props.items }
- ItemSeparatorComponent={ () =>
+ ItemSeparatorComponent={ () => (
this.props.onSelect( item ) }>
+ onPress={ () => this.props.onSelect( item ) }
+ >
-
- { item.title }
+
+ { item.title }
+
- }
+ ) }
/>
);
@@ -116,110 +142,93 @@ export default compose(
getBlockName,
getBlockRootClientId,
getBlockSelectionEnd,
+ getSettings,
} = select( 'core/block-editor' );
- const {
- getChildBlockNames,
- } = select( 'core/blocks' );
+ const { getChildBlockNames } = select( 'core/blocks' );
let destinationRootClientId = rootClientId;
if ( ! destinationRootClientId && ! clientId && ! isAppender ) {
const end = getBlockSelectionEnd();
if ( end ) {
- destinationRootClientId = getBlockRootClientId( end ) || undefined;
+ destinationRootClientId =
+ getBlockRootClientId( end ) || undefined;
}
}
- const destinationRootBlockName = getBlockName( destinationRootClientId );
+ const destinationRootBlockName = getBlockName(
+ destinationRootClientId
+ );
+
+ const {
+ __experimentalShouldInsertAtTheTop: shouldInsertAtTheTop,
+ } = getSettings();
return {
rootChildBlocks: getChildBlockNames( destinationRootBlockName ),
items: getInserterItems( destinationRootClientId ),
destinationRootClientId,
+ shouldInsertAtTheTop,
};
} ),
withDispatch( ( dispatch, ownProps, { select } ) => {
const {
showInsertionPoint,
hideInsertionPoint,
+ removeBlock,
+ resetBlocks,
+ clearSelectedBlock,
+ insertBlock,
+ insertDefaultBlock,
} = dispatch( 'core/block-editor' );
- // To avoid duplication, getInsertionIndex is extracted and used in two event handlers
- // This breaks the withDispatch not containing any logic rule.
- // Since it's a function only called when the event handlers are called,
- // it's fine to extract it.
- // eslint-disable-next-line no-restricted-syntax
- function getInsertionIndex() {
- const {
- getBlock,
- getBlockIndex,
- getBlockSelectionEnd,
- getBlockOrder,
- } = select( 'core/block-editor' );
- const {
- isPostTitleSelected,
- } = select( 'core/editor' );
- const { clientId, destinationRootClientId, isAppender } = ownProps;
-
- // if post title is selected insert as first block
- if ( isPostTitleSelected() ) {
- return 0;
- }
-
- // If the clientId is defined, we insert at the position of the block.
- if ( clientId ) {
- return getBlockIndex( clientId, destinationRootClientId );
- }
-
- // If there a selected block,
- const end = getBlockSelectionEnd();
- // `end` argument (id) can refer to the component which is removed
- // due to pressing `undo` button, that's why we need to check
- // if `getBlock( end) is valid, otherwise `null` is passed
- if ( ! isAppender && end && getBlock( end ) ) {
- // and the last selected block is unmodified (empty), it will be replaced
- if ( isUnmodifiedDefaultBlock( getBlock( end ) ) ) {
- return getBlockIndex( end, destinationRootClientId );
- }
-
- // we insert after the selected block.
- return getBlockIndex( end, destinationRootClientId ) + 1;
- }
-
- // Otherwise, we insert at the end of the current rootClientId
- return getBlockOrder( destinationRootClientId ).length;
- }
-
return {
showInsertionPoint() {
- const index = getInsertionIndex();
- showInsertionPoint( ownProps.destinationRootClientId, index );
+ if ( ownProps.shouldReplaceBlock ) {
+ const { getBlockOrder, getBlockCount } = select(
+ 'core/block-editor'
+ );
+
+ const count = getBlockCount();
+ if ( count === 1 ) {
+ // removing the last block is not possible with `removeBlock` action
+ // it always inserts a default block if the last of the blocks have been removed
+ clearSelectedBlock();
+ resetBlocks( [] );
+ } else {
+ const blockToReplace = getBlockOrder(
+ ownProps.destinationRootClientId
+ )[ ownProps.insertionIndex ];
+
+ removeBlock( blockToReplace, false );
+ }
+ }
+ showInsertionPoint(
+ ownProps.destinationRootClientId,
+ ownProps.insertionIndex
+ );
},
hideInsertionPoint,
onSelect( item ) {
- const {
- replaceBlocks,
- insertBlock,
- } = dispatch( 'core/block-editor' );
- const {
- getSelectedBlock,
- } = select( 'core/block-editor' );
- const { isAppender } = ownProps;
const { name, initialAttributes } = item;
- const selectedBlock = getSelectedBlock();
+
const insertedBlock = createBlock( name, initialAttributes );
- if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) {
- replaceBlocks( selectedBlock.clientId, insertedBlock );
- } else {
- insertBlock(
- insertedBlock,
- getInsertionIndex(),
- ownProps.destinationRootClientId
- );
- }
+
+ insertBlock(
+ insertedBlock,
+ ownProps.insertionIndex,
+ ownProps.destinationRootClientId
+ );
ownProps.onSelect();
},
+ insertDefaultBlock() {
+ insertDefaultBlock(
+ {},
+ ownProps.destinationRootClientId,
+ ownProps.insertionIndex
+ );
+ },
};
} ),
withInstanceId,
- withPreferredColorScheme,
+ withPreferredColorScheme
)( InserterMenu );
diff --git a/packages/block-editor/src/components/inserter/search-items.js b/packages/block-editor/src/components/inserter/search-items.js
index 6eb910d33df7f..23bae5d9b3860 100644
--- a/packages/block-editor/src/components/inserter/search-items.js
+++ b/packages/block-editor/src/components/inserter/search-items.js
@@ -6,6 +6,8 @@ import {
differenceWith,
find,
get,
+ intersectionWith,
+ isEmpty,
words,
} from 'lodash';
@@ -37,7 +39,8 @@ const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
return differenceWith(
unmatchedTerms,
normalizeSearchTerm( unprocessedTerms ),
- ( unmatchedTerm, unprocessedTerm ) => unprocessedTerm.includes( unmatchedTerm )
+ ( unmatchedTerm, unprocessedTerm ) =>
+ unprocessedTerm.includes( unmatchedTerm )
);
};
@@ -46,41 +49,89 @@ const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
*
* @param {Array} items Item list
* @param {Array} categories Available categories.
+ * @param {Array} collections Available collections.
* @param {string} searchTerm Search term.
*
* @return {Array} Filtered item list.
*/
-export const searchItems = ( items, categories, searchTerm ) => {
- const normalizedTerms = normalizeSearchTerm( searchTerm );
+export const searchItems = ( items, categories, collections, searchTerm ) => {
+ const normalizedSearchTerms = normalizeSearchTerm( searchTerm );
- if ( normalizedTerms.length === 0 ) {
+ if ( normalizedSearchTerms.length === 0 ) {
return items;
}
- return items.filter( ( { title, category, keywords = [] } ) => {
- let unmatchedTerms = removeMatchingTerms(
- normalizedTerms,
- title
- );
+ return items
+ .filter(
+ ( { name, title, category, keywords = [], variations = [] } ) => {
+ let unmatchedTerms = removeMatchingTerms(
+ normalizedSearchTerms,
+ title
+ );
- if ( unmatchedTerms.length === 0 ) {
- return true;
- }
+ if ( unmatchedTerms.length === 0 ) {
+ return true;
+ }
- unmatchedTerms = removeMatchingTerms(
- unmatchedTerms,
- keywords.join( ' ' ),
- );
+ unmatchedTerms = removeMatchingTerms(
+ unmatchedTerms,
+ keywords.join( ' ' )
+ );
- if ( unmatchedTerms.length === 0 ) {
- return true;
- }
+ if ( unmatchedTerms.length === 0 ) {
+ return true;
+ }
- unmatchedTerms = removeMatchingTerms(
- unmatchedTerms,
- get( find( categories, { slug: category } ), [ 'title' ] ),
- );
+ unmatchedTerms = removeMatchingTerms(
+ unmatchedTerms,
+ get( find( categories, { slug: category } ), [ 'title' ] )
+ );
- return unmatchedTerms.length === 0;
- } );
+ const itemCollection = collections[ name.split( '/' )[ 0 ] ];
+ if ( itemCollection ) {
+ unmatchedTerms = removeMatchingTerms(
+ unmatchedTerms,
+ itemCollection.title
+ );
+ }
+
+ if ( unmatchedTerms.length === 0 ) {
+ return true;
+ }
+
+ unmatchedTerms = removeMatchingTerms(
+ unmatchedTerms,
+ variations
+ .map( ( variation ) => variation.title )
+ .join( ' ' )
+ );
+
+ return unmatchedTerms.length === 0;
+ }
+ )
+ .map( ( item ) => {
+ if ( isEmpty( item.variations ) ) {
+ return item;
+ }
+
+ const matchedVariations = item.variations.filter( ( variation ) => {
+ return (
+ intersectionWith(
+ normalizedSearchTerms,
+ normalizeSearchTerm( variation.title ),
+ ( termToMatch, labelTerm ) =>
+ labelTerm.includes( termToMatch )
+ ).length > 0
+ );
+ } );
+ // When no partterns matched, fallback to all variations.
+ if ( isEmpty( matchedVariations ) ) {
+ return item;
+ }
+
+ return {
+ ...item,
+ variations: matchedVariations,
+ };
+ } );
};
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 528c46adb87d7..92ae8f762e5a7 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -24,13 +24,6 @@ $block-inserter-search-height: 38px;
}
.block-editor-inserter__toggle {
- display: inline-flex;
- align-items: center;
- color: $dark-gray-500;
- background: none;
- cursor: pointer;
- border: none;
- outline: none;
transition: color 0.2s ease;
@include reduce-motion("transition");
}
diff --git a/packages/block-editor/src/components/inserter/test/fixtures/index.js b/packages/block-editor/src/components/inserter/test/fixtures/index.js
index eb698c5c07801..d3b46654736c9 100644
--- a/packages/block-editor/src/components/inserter/test/fixtures/index.js
+++ b/packages/block-editor/src/components/inserter/test/fixtures/index.js
@@ -7,6 +7,13 @@ export const categories = [
{ slug: 'reusable', title: 'Reusable blocks' },
];
+export const collections = {
+ core: {
+ icon: undefined,
+ title: 'Core',
+ },
+};
+
export const textItem = {
id: 'core/text-block',
name: 'core/text-block',
@@ -17,6 +24,30 @@ export const textItem = {
utility: 1,
};
+export const withVariationsItem = {
+ id: 'core/block-with-variations',
+ name: 'core/block-with-variations',
+ initialAttributes: {},
+ title: 'With Variations',
+ category: 'widgets',
+ isDisabled: false,
+ utility: 0,
+ variations: [
+ {
+ name: 'variation-one',
+ title: 'Variation One',
+ },
+ {
+ name: 'variation-two',
+ title: 'Variation Two',
+ },
+ {
+ name: 'variation-three',
+ title: 'Variation Three',
+ },
+ ],
+};
+
export const advancedTextItem = {
id: 'core/advanced-text-block',
name: 'core/advanced-text-block',
@@ -80,6 +111,7 @@ export const reusableItem = {
export default [
textItem,
+ withVariationsItem,
advancedTextItem,
someOtherItem,
moreItem,
diff --git a/packages/block-editor/src/components/inserter/test/index.native.js b/packages/block-editor/src/components/inserter/test/index.native.js
index a08000e3ffaed..f1fe84684a16a 100644
--- a/packages/block-editor/src/components/inserter/test/index.native.js
+++ b/packages/block-editor/src/components/inserter/test/index.native.js
@@ -6,13 +6,22 @@ import renderer from 'react-test-renderer';
/**
* Internal dependencies
*/
-import Inserter from '../index';
+import { Inserter } from '../index';
import '../../..'; // Ensure store dependencies are imported via root.
+const getStylesFromColorScheme = () => {
+ return { color: 'white' };
+};
+
describe( 'Inserter', () => {
it( 'button contains the testID "add-block-button"', () => {
- const component = renderer.create(
);
- const rendered = component.toJSON();
- expect( rendered.children[ 0 ].props.testID ).toEqual( 'add-block-button' );
+ const testRenderer = renderer.create(
+
+ );
+ const testInstance = testRenderer.root;
+
+ expect( () => {
+ testInstance.findByProps( { testID: 'add-block-button' } );
+ } ).not.toThrow();
} );
} );
diff --git a/packages/block-editor/src/components/inserter/test/menu.js b/packages/block-editor/src/components/inserter/test/menu.js
index 178bced703a4b..70881f2f30ce3 100644
--- a/packages/block-editor/src/components/inserter/test/menu.js
+++ b/packages/block-editor/src/components/inserter/test/menu.js
@@ -8,12 +8,13 @@ import ReactDOM from 'react-dom';
/**
* Internal dependencies
*/
-import items, { categories } from './fixtures';
+import items, { categories, collections } from './fixtures';
import { InserterMenu } from '../menu';
const DEFAULT_PROPS = {
position: 'top center',
categories,
+ collections,
items,
debouncedSpeak: noop,
fetchReusableBlocks: noop,
@@ -58,8 +59,9 @@ const assertNoResultsMessageNotToBePresent = ( element ) => {
};
const assertOpenedPanels = ( element, expectedOpen = 0 ) => {
- expect( element.querySelectorAll( '.components-panel__body.is-opened ' ) )
- .toHaveLength( expectedOpen );
+ expect(
+ element.querySelectorAll( '.components-panel__body.is-opened ' )
+ ).toHaveLength( expectedOpen );
};
const getTabButtonWithContent = ( element, content ) => {
@@ -74,8 +76,12 @@ const getTabButtonWithContent = ( element, content ) => {
};
const performSearchWithText = ( element, searchText ) => {
- const searchElement = element.querySelector( '.block-editor-inserter__search' );
- TestUtils.Simulate.change( searchElement, { target: { value: searchText } } );
+ const searchElement = element.querySelector(
+ '.block-editor-inserter__search'
+ );
+ TestUtils.Simulate.change( searchElement, {
+ target: { value: searchText },
+ } );
};
describe( 'InserterMenu', () => {
@@ -88,9 +94,9 @@ describe( 'InserterMenu', () => {
} );
it( 'should show nothing if there are no items', () => {
- const element = initializeMenuDefaultStateAndReturnElement(
- { items: [] }
- );
+ const element = initializeMenuDefaultStateAndReturnElement( {
+ items: [],
+ } );
const visibleBlocks = element.querySelector(
'.block-editor-block-types-list__item'
);
@@ -112,9 +118,9 @@ describe( 'InserterMenu', () => {
} );
it( 'should limit the number of items shown in the suggested tab', () => {
- const element = initializeMenuDefaultStateAndReturnElement(
- { maxSuggestedItems: 2 }
- );
+ const element = initializeMenuDefaultStateAndReturnElement( {
+ maxSuggestedItems: 2,
+ } );
const visibleBlocks = element.querySelectorAll(
'.block-editor-block-types-list__list-item'
);
@@ -160,7 +166,10 @@ describe( 'InserterMenu', () => {
it( 'should show the common category blocks', () => {
const element = initializeAllClosedMenuStateAndReturnElement();
- const commonBlocksTab = getTabButtonWithContent( element, 'Common blocks' );
+ const commonBlocksTab = getTabButtonWithContent(
+ element,
+ 'Common blocks'
+ );
TestUtils.Simulate.click( commonBlocksTab );
@@ -185,7 +194,7 @@ describe( 'InserterMenu', () => {
TestUtils.Simulate.click( layoutTab );
const disabledBlocks = element.querySelectorAll(
- '.block-editor-block-types-list__item[disabled]'
+ '.block-editor-block-types-list__item[disabled], .block-editor-block-types-list__item[aria-disabled="true"]'
);
expect( disabledBlocks ).toHaveLength( 1 );
@@ -196,13 +205,13 @@ describe( 'InserterMenu', () => {
const element = initializeMenuDefaultStateAndReturnElement();
performSearchWithText( element, 'text' );
- assertOpenedPanels( element, 2 );
+ assertOpenedPanels( element, 3 );
const matchingCategories = element.querySelectorAll(
'.components-panel__body-toggle'
);
- expect( matchingCategories ).toHaveLength( 2 );
+ expect( matchingCategories ).toHaveLength( 3 );
expect( matchingCategories[ 0 ].textContent ).toBe( 'Common blocks' );
expect( matchingCategories[ 1 ].textContent ).toBe( 'Embeds' );
@@ -210,7 +219,7 @@ describe( 'InserterMenu', () => {
'.block-editor-block-types-list__item-title'
);
- expect( visibleBlocks ).toHaveLength( 3 );
+ expect( visibleBlocks ).toHaveLength( 5 );
expect( visibleBlocks[ 0 ].textContent ).toBe( 'Text' );
expect( visibleBlocks[ 1 ].textContent ).toBe( 'Advanced Text' );
expect( visibleBlocks[ 2 ].textContent ).toBe( 'A Text Embed' );
@@ -222,13 +231,13 @@ describe( 'InserterMenu', () => {
const element = initializeMenuDefaultStateAndReturnElement();
performSearchWithText( element, ' text' );
- assertOpenedPanels( element, 2 );
+ assertOpenedPanels( element, 3 );
const matchingCategories = element.querySelectorAll(
'.components-panel__body-toggle'
);
- expect( matchingCategories ).toHaveLength( 2 );
+ expect( matchingCategories ).toHaveLength( 3 );
expect( matchingCategories[ 0 ].textContent ).toBe( 'Common blocks' );
expect( matchingCategories[ 1 ].textContent ).toBe( 'Embeds' );
@@ -236,7 +245,7 @@ describe( 'InserterMenu', () => {
'.block-editor-block-types-list__item-title'
);
- expect( visibleBlocks ).toHaveLength( 3 );
+ expect( visibleBlocks ).toHaveLength( 5 );
expect( visibleBlocks[ 0 ].textContent ).toBe( 'Text' );
expect( visibleBlocks[ 1 ].textContent ).toBe( 'Advanced Text' );
expect( visibleBlocks[ 2 ].textContent ).toBe( 'A Text Embed' );
diff --git a/packages/block-editor/src/components/inserter/test/search-items.js b/packages/block-editor/src/components/inserter/test/search-items.js
index e4f42c5e4a76c..01c0bace32328 100644
--- a/packages/block-editor/src/components/inserter/test/search-items.js
+++ b/packages/block-editor/src/components/inserter/test/search-items.js
@@ -3,83 +3,103 @@
*/
import items, {
categories,
+ collections,
textItem,
advancedTextItem,
moreItem,
youtubeItem,
textEmbedItem,
} from './fixtures';
-import {
- normalizeSearchTerm,
- searchItems,
-} from '../search-items';
+import { normalizeSearchTerm, searchItems } from '../search-items';
describe( 'normalizeSearchTerm', () => {
it( 'should return an empty array when no words detected', () => {
- expect( normalizeSearchTerm( ' - !? *** ' ) ).toEqual(
- []
- );
+ expect( normalizeSearchTerm( ' - !? *** ' ) ).toEqual( [] );
} );
it( 'should remove diacritics', () => {
- expect( normalizeSearchTerm( 'mรฉdia' ) ).toEqual(
- [ 'media' ]
- );
+ expect( normalizeSearchTerm( 'mรฉdia' ) ).toEqual( [ 'media' ] );
} );
it( 'should trim whitespace', () => {
- expect( normalizeSearchTerm( ' mรฉdia ' ) ).toEqual(
- [ 'media' ]
- );
+ expect( normalizeSearchTerm( ' mรฉdia ' ) ).toEqual( [ 'media' ] );
} );
it( 'should convert to lowercase', () => {
- expect( normalizeSearchTerm( ' Mรฉdia ' ) ).toEqual(
- [ 'media' ]
- );
+ expect( normalizeSearchTerm( ' Mรฉdia ' ) ).toEqual( [ 'media' ] );
} );
it( 'should extract only words', () => {
- expect( normalizeSearchTerm( ' Mรฉdia & Text Tag-Cloud > 123' ) ).toEqual(
- [ 'media', 'text', 'tag', 'cloud', '123' ]
- );
+ expect(
+ normalizeSearchTerm( ' Mรฉdia & Text Tag-Cloud > 123' )
+ ).toEqual( [ 'media', 'text', 'tag', 'cloud', '123' ] );
} );
} );
describe( 'searchItems', () => {
it( 'should return back all items when no terms detected', () => {
- expect( searchItems( items, categories, ' - ? * ' ) ).toBe(
+ expect( searchItems( items, categories, collections, ' - ? * ' ) ).toBe(
items
);
} );
it( 'should search items using the title ignoring case', () => {
- expect( searchItems( items, categories, 'TEXT' ) ).toEqual(
- [ textItem, advancedTextItem, textEmbedItem ]
- );
+ expect(
+ searchItems( items, categories, collections, 'TEXT' )
+ ).toEqual( [ textItem, advancedTextItem, textEmbedItem ] );
} );
it( 'should search items using the keywords and partial terms', () => {
- expect( searchItems( items, categories, 'GOOGL' ) ).toEqual(
- [ youtubeItem ]
- );
+ expect(
+ searchItems( items, categories, collections, 'GOOGL' )
+ ).toEqual( [ youtubeItem ] );
} );
it( 'should search items using the categories', () => {
- expect( searchItems( items, categories, 'LAYOUT' ) ).toEqual(
- [ moreItem ]
- );
+ expect(
+ searchItems( items, categories, collections, 'LAYOUT' )
+ ).toEqual( [ moreItem ] );
} );
it( 'should ignore a leading slash on a search term', () => {
- expect( searchItems( items, categories, '/GOOGL' ) ).toEqual(
- [ youtubeItem ]
- );
+ expect(
+ searchItems( items, categories, collections, '/GOOGL' )
+ ).toEqual( [ youtubeItem ] );
} );
it( 'should match words using the mix of the title, category and keywords', () => {
- expect( searchItems( items, categories, 'youtube embed video' ) ).toEqual(
- [ youtubeItem ]
+ expect(
+ searchItems( items, categories, collections, 'youtube embed video' )
+ ).toEqual( [ youtubeItem ] );
+ } );
+
+ it( 'should match words using also variations and return all matched variations', () => {
+ const filteredItems = searchItems(
+ items,
+ categories,
+ collections,
+ 'variation'
+ );
+
+ expect( filteredItems ).toHaveLength( 1 );
+ expect( filteredItems[ 0 ].variations ).toHaveLength( 3 );
+ } );
+
+ it( 'should match words using also variations and filter out unmatched variations', () => {
+ const filteredItems = searchItems(
+ items,
+ categories,
+ collections,
+ 'variations two three'
+ );
+
+ expect( filteredItems ).toHaveLength( 1 );
+ expect( filteredItems[ 0 ].variations ).toHaveLength( 2 );
+ expect( filteredItems[ 0 ].variations[ 0 ].title ).toBe(
+ 'Variation Two'
+ );
+ expect( filteredItems[ 0 ].variations[ 1 ].title ).toBe(
+ 'Variation Three'
);
} );
} );
diff --git a/packages/block-editor/src/components/inspector-controls/README.md b/packages/block-editor/src/components/inspector-controls/README.md
index 2c6a21d59dbaf..50719c8ab672a 100644
--- a/packages/block-editor/src/components/inspector-controls/README.md
+++ b/packages/block-editor/src/components/inspector-controls/README.md
@@ -1,4 +1,4 @@
-# Inspector Controls
+# InspectorControls
@@ -235,7 +235,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
```
{% ESNext %}
```js
-const { registerBlockType } = wp.blocks;
+import { registerBlockType } from '@wordpress/blocks';
const {
CheckboxControl,
RadioControl,
diff --git a/packages/block-editor/src/components/inspector-controls/index.native.js b/packages/block-editor/src/components/inspector-controls/index.native.js
index 341a7bcc049e7..730dfaba5b37d 100644
--- a/packages/block-editor/src/components/inspector-controls/index.native.js
+++ b/packages/block-editor/src/components/inspector-controls/index.native.js
@@ -20,7 +20,7 @@ const FillWithSettingsButton = ( { children, ...props } ) => {
return (
<>
{ children }
- { React.Children.count( children ) > 0 && (
) }
+ { React.Children.count( children ) > 0 &&
}
);
};
@@ -33,4 +33,3 @@ InspectorControls.Slot = Slot;
* @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inspector-controls/README.md
*/
export default InspectorControls;
-
diff --git a/packages/block-editor/src/components/keyboard-shortcuts/index.js b/packages/block-editor/src/components/keyboard-shortcuts/index.js
index 7363c5235b6c0..3259707632cd9 100644
--- a/packages/block-editor/src/components/keyboard-shortcuts/index.js
+++ b/packages/block-editor/src/components/keyboard-shortcuts/index.js
@@ -13,7 +13,9 @@ import { __ } from '@wordpress/i18n';
function KeyboardShortcuts() {
// Shortcuts Logic
const { clientIds, rootBlocksClientIds } = useSelect( ( select ) => {
- const { getSelectedBlockClientIds, getBlockOrder } = select( 'core/block-editor' );
+ const { getSelectedBlockClientIds, getBlockOrder } = select(
+ 'core/block-editor'
+ );
return {
clientIds: getSelectedBlockClientIds(),
rootBlocksClientIds: getBlockOrder(),
@@ -33,10 +35,13 @@ function KeyboardShortcuts() {
// Prevents reposition Chrome devtools pane shortcut when devtools are open.
useShortcut(
'core/block-editor/duplicate',
- useCallback( ( event ) => {
- event.preventDefault();
- duplicateBlocks( clientIds );
- }, [ clientIds, duplicateBlocks ] ),
+ useCallback(
+ ( event ) => {
+ event.preventDefault();
+ duplicateBlocks( clientIds );
+ },
+ [ clientIds, duplicateBlocks ]
+ ),
{ bindGlobal: true, isDisabled: clientIds.length === 0 }
);
@@ -44,10 +49,13 @@ function KeyboardShortcuts() {
// is used to prevent any obscure unknown shortcuts from triggering.
useShortcut(
'core/block-editor/remove',
- useCallback( ( event ) => {
- event.preventDefault();
- removeBlocks( clientIds );
- }, [ clientIds, removeBlocks ] ),
+ useCallback(
+ ( event ) => {
+ event.preventDefault();
+ removeBlocks( clientIds );
+ },
+ [ clientIds, removeBlocks ]
+ ),
{ bindGlobal: true, isDisabled: clientIds.length === 0 }
);
@@ -55,44 +63,65 @@ function KeyboardShortcuts() {
// is used to prevent any obscure unknown shortcuts from triggering.
useShortcut(
'core/block-editor/insert-after',
- useCallback( ( event ) => {
- event.preventDefault();
- insertAfterBlock( last( clientIds ) );
- }, [ clientIds, insertAfterBlock ] ),
+ useCallback(
+ ( event ) => {
+ event.preventDefault();
+ insertAfterBlock( last( clientIds ) );
+ },
+ [ clientIds, insertAfterBlock ]
+ ),
{ bindGlobal: true, isDisabled: clientIds.length === 0 }
);
// Prevent 'view recently closed tabs' in Opera using preventDefault.
useShortcut(
'core/block-editor/insert-before',
- useCallback( ( event ) => {
- event.preventDefault();
- insertBeforeBlock( first( clientIds ) );
- }, [ clientIds, insertBeforeBlock ] ),
+ useCallback(
+ ( event ) => {
+ event.preventDefault();
+ insertBeforeBlock( first( clientIds ) );
+ },
+ [ clientIds, insertBeforeBlock ]
+ ),
{ bindGlobal: true, isDisabled: clientIds.length === 0 }
);
useShortcut(
'core/block-editor/delete-multi-selection',
- useCallback( ( event ) => {
- event.preventDefault();
- removeBlocks( clientIds );
- }, [ clientIds, removeBlocks ] ),
+ useCallback(
+ ( event ) => {
+ event.preventDefault();
+ removeBlocks( clientIds );
+ },
+ [ clientIds, removeBlocks ]
+ ),
{ isDisabled: clientIds.length < 1 }
);
- useShortcut( 'core/block-editor/select-all', useCallback( ( event ) => {
- event.preventDefault();
- multiSelect( first( rootBlocksClientIds ), last( rootBlocksClientIds ) );
- }, [ rootBlocksClientIds, multiSelect ] ) );
+ useShortcut(
+ 'core/block-editor/select-all',
+ useCallback(
+ ( event ) => {
+ event.preventDefault();
+ multiSelect(
+ first( rootBlocksClientIds ),
+ last( rootBlocksClientIds )
+ );
+ },
+ [ rootBlocksClientIds, multiSelect ]
+ )
+ );
useShortcut(
'core/block-editor/unselect',
- useCallback( ( event ) => {
- event.preventDefault();
- clearSelectedBlock();
- window.getSelection().removeAllRanges();
- }, [ clientIds, clearSelectedBlock ] ),
+ useCallback(
+ ( event ) => {
+ event.preventDefault();
+ clearSelectedBlock();
+ window.getSelection().removeAllRanges();
+ },
+ [ clientIds, clearSelectedBlock ]
+ ),
{ isDisabled: clientIds.length < 2 }
);
@@ -126,7 +155,9 @@ function KeyboardShortcutsRegister() {
registerShortcut( {
name: 'core/block-editor/insert-before',
category: 'block',
- description: __( 'Insert a new block before the selected block(s).' ),
+ description: __(
+ 'Insert a new block before the selected block(s).'
+ ),
keyCombination: {
modifier: 'primaryAlt',
character: 't',
@@ -136,7 +167,9 @@ function KeyboardShortcutsRegister() {
registerShortcut( {
name: 'core/block-editor/insert-after',
category: 'block',
- description: __( 'Insert a new block after the selected block(s).' ),
+ description: __(
+ 'Insert a new block after the selected block(s).'
+ ),
keyCombination: {
modifier: 'primaryAlt',
character: 'y',
@@ -150,15 +183,19 @@ function KeyboardShortcutsRegister() {
keyCombination: {
character: 'del',
},
- aliases: [ {
- character: 'backspace',
- } ],
+ aliases: [
+ {
+ character: 'backspace',
+ },
+ ],
} );
registerShortcut( {
name: 'core/block-editor/select-all',
category: 'selection',
- description: __( 'Select all text when typing. Press again to select all blocks.' ),
+ description: __(
+ 'Select all text when typing. Press again to select all blocks.'
+ ),
keyCombination: {
modifier: 'primary',
character: 'a',
diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md
index af25dfc2f42fe..64bde7b5658ce 100644
--- a/packages/block-editor/src/components/link-control/README.md
+++ b/packages/block-editor/src/components/link-control/README.md
@@ -1,18 +1,27 @@
# Link Control
+Renders a link control. A link control is a controlled input which maintains
+a value associated with a link (HTML anchor element) and relevant settings
+for how that link is expected to behave.
+
## Props
-### className
+### value
-- Type: `String`
-- Required: Yes
+- Type: `Object`
+- Required: No
-### currentLink
+Current link value.
-- Type: `Object`
-- Required: Yes
+A link value contains is composed as a union of the default properties and any custom settings values.
+
+Default properties include:
-### currentSettings
+- `url` (`string`): Link URL.
+- `title` (`string`, optional): Link title.
+- `opensInNewTab` (`boolean`, optional): Whether link should open in a new browser tab.This value is only assigned if not providing a custom `settings` prop.
+
+### settings
- Type: `Array`
- Required: No
@@ -20,90 +29,38 @@
```
[
{
- id: 'newTab',
+ id: 'opensInNewTab',
title: 'Open in New Tab',
- checked: false,
},
];
```
-An array of settings objects. Each object will used to render a `ToggleControl` for that setting. See also `onSettingsChange`.
-
-### fetchSearchSuggestions
-
-- Type: `Function`
-- Required: No
-
-## Event handlers
-
-### onChangeMode
-
-- Type: `Function`
-- Required: No
-
-Use this callback to know when the LinkControl component changes its mode to `edit` or `show`
-through of its function parameter.
-
-```es6
-
{ console.log( `Mode change to ${ mode } mode.` ) }
-/>
-```
+An array of settings objects. Each object will used to render a `ToggleControl` for that setting.
### onClose
- Type: `Function`
- Required: No
-### onKeyDown
+### onChange
- Type: `Function`
- Required: No
-### onKeyPress
-
-- Type: `Function`
-- Required: No
-
-### onLinkChange
-
-- Type: `Function`
-- Required: No
+Value change handler, called with the updated value if the user selects a new link or updates settings.
-Use this callback to take an action after a user set or updated a link.
-The function callback will receive the selected item, or Null.
-
-```es6
+```jsx
{
- item
- ? console.log( `The item selected has the ${ item.id } id.` )
- : console.warn( 'No Item selected.' );
+ onChange={ ( nextValue ) => {
+ console.log( `The selected item URL: ${ nextValue.url }.` );
}
/>
-```
+```
-### onSettingsChange
+### showInitialSuggestions
-- Type: `Function`
+- Type: `boolean`
- Required: No
-- Args:
- - `id` - the `id` property of the setting that changed (eg: `newTab`).
- - `value` - the `checked` value of the control.
- - `settings` - the current settings object.
-
-Called when any of the settings supplied as `currentSettings` are changed/toggled. May be used to attribute a Block's `attributes` with the current state of the control.
-
-```
- setAttributes( { [ setting ]: value } ) }
-/>
-```
+- Default: `false`
+Whether to present initial suggestions immediately.
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 18ae9da7c5401..5f95d64adde6d 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -2,25 +2,20 @@
* External dependencies
*/
import classnames from 'classnames';
-import { isFunction, noop, startsWith } from 'lodash';
+import { noop, startsWith } from 'lodash';
/**
* WordPress dependencies
*/
+import { Button, ExternalLink, VisuallyHidden } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
import {
- Button,
- ExternalLink,
- Popover,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-import {
+ useRef,
useCallback,
useState,
- useEffect,
Fragment,
+ useEffect,
} from '@wordpress/element';
-
import {
safeDecodeURI,
filterURLForDisplay,
@@ -28,9 +23,9 @@ import {
prependHTTP,
getProtocol,
} from '@wordpress/url';
-
-import { withInstanceId, compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
/**
* Internal dependencies
@@ -39,83 +34,130 @@ import LinkControlSettingsDrawer from './settings-drawer';
import LinkControlSearchItem from './search-item';
import LinkControlSearchInput from './search-input';
-const MODE_EDIT = 'edit';
-// const MODE_SHOW = 'show';
+/**
+ * Default properties associated with a link control value.
+ *
+ * @typedef WPLinkControlDefaultValue
+ *
+ * @property {string} url Link URL.
+ * @property {string=} title Link title.
+ * @property {boolean=} opensInNewTab Whether link should open in a new browser
+ * tab. This value is only assigned if not
+ * providing a custom `settings` prop.
+ */
+
+/**
+ * Custom settings values associated with a link.
+ *
+ * @typedef {{[setting:string]:any}} WPLinkControlSettingsValue
+ */
+
+/**
+ * Custom settings values associated with a link.
+ *
+ * @typedef WPLinkControlSetting
+ *
+ * @property {string} id Identifier to use as property for setting value.
+ * @property {string} title Human-readable label to show in user interface.
+ */
+
+/**
+ * Properties associated with a link control value, composed as a union of the
+ * default properties and any custom settings values.
+ *
+ * @typedef {WPLinkControlDefaultValue&WPLinkControlSettingsValue} WPLinkControlValue
+ */
+
+/** @typedef {(nextValue:WPLinkControlValue)=>void} WPLinkControlOnChangeProp */
+
+/**
+ * @typedef WPLinkControlProps
+ *
+ * @property {(WPLinkControlSetting[])=} settings An array of settings objects. Each object will used to
+ * render a `ToggleControl` for that setting.
+ * @property {(search:string)=>Promise=} fetchSearchSuggestions Fetches suggestions for a given search term,
+ * returning a promise resolving once fetch is complete.
+ * @property {WPLinkControlValue=} value Current link value.
+ * @property {WPLinkControlOnChangeProp=} onChange Value change handler, called with the updated value if
+ * the user selects a new link or updates settings.
+ * @property {boolean=} showInitialSuggestions Whether to present initial suggestions immediately.
+ */
+/**
+ * Renders a link control. A link control is a controlled input which maintains
+ * a value associated with a link (HTML anchor element) and relevant settings
+ * for how that link is expected to behave.
+ *
+ * @param {WPLinkControlProps} props Component props.
+ */
function LinkControl( {
- className,
- currentLink,
- currentSettings,
- fetchSearchSuggestions,
- instanceId,
- onClose = noop,
- onChangeMode = noop,
- onKeyDown = noop,
- onKeyPress = noop,
- onLinkChange = noop,
- onSettingsChange = noop,
+ value,
+ settings,
+ onChange = noop,
+ showInitialSuggestions,
} ) {
- // State
- const [ inputValue, setInputValue ] = useState( '' );
- const [ isEditingLink, setIsEditingLink ] = useState( false );
+ const wrapperNode = useRef();
+ const instanceId = useInstanceId( LinkControl );
+ const [ inputValue, setInputValue ] = useState(
+ ( value && value.url ) || ''
+ );
+ const [ isEditingLink, setIsEditingLink ] = useState(
+ ! value || ! value.url
+ );
+ const isEndingEditWithFocus = useRef( false );
+ const { fetchSearchSuggestions } = useSelect( ( select ) => {
+ const { getSettings } = select( 'core/block-editor' );
+ return {
+ fetchSearchSuggestions: getSettings()
+ .__experimentalFetchLinkSuggestions,
+ };
+ }, [] );
+ const displayURL =
+ ( value && filterURLForDisplay( safeDecodeURI( value.url ) ) ) || '';
- // Effects
useEffect( () => {
- // If we have a link then stop editing mode
- if ( currentLink ) {
- setIsEditingLink( false );
- } else {
- setIsEditingLink( true );
+ // When `isEditingLink` is set to `false`, a focus loss could occur
+ // since the link input may be removed from the DOM. To avoid this,
+ // reinstate focus to a suitable target if focus has in-fact been lost.
+ // Note that the check is necessary because while typically unsetting
+ // edit mode would render the read-only mode's link element, it isn't
+ // guaranteed. The link input may continue to be shown if the next value
+ // is still unassigned after calling `onChange`.
+ const hadFocusLoss =
+ isEndingEditWithFocus.current &&
+ wrapperNode.current &&
+ ! wrapperNode.current.contains( document.activeElement );
+
+ if ( hadFocusLoss ) {
+ // Prefer to focus a natural focusable descendent of the wrapper,
+ // but settle for the wrapper if there are no other options.
+ const nextFocusTarget =
+ focus.focusable.find( wrapperNode.current )[ 0 ] ||
+ wrapperNode.current;
+
+ nextFocusTarget.focus();
}
- }, [ currentLink ] );
- // Handlers
+ isEndingEditWithFocus.current = false;
+ }, [ isEditingLink ] );
/**
* onChange LinkControlSearchInput event handler
*
- * @param {string} value Current value returned by the search.
- */
- const onInputChange = ( value = '' ) => {
- setInputValue( value );
- };
-
- // Utils
-
- /**
- * Handler function which switches the mode of the component,
- * between `edit` and `show` mode.
- * Also, it calls `onChangeMode` callback function.
- *
- * @param {string} mode Component mode: `show` or `edit`.
+ * @param {string} val Current value returned by the search.
*/
- const setMode = ( mode = 'show' ) => () => {
- setIsEditingLink( MODE_EDIT === mode );
-
- // Populate input searcher whether
- // the current link has a title.
- if ( currentLink && currentLink.title ) {
- setInputValue( currentLink.title );
- }
-
- if ( isFunction( onChangeMode ) ) {
- onChangeMode( mode );
- }
- };
-
- const closeLinkUI = () => {
- resetInput();
- onClose();
+ const onInputChange = ( val = '' ) => {
+ setInputValue( val );
};
const resetInput = () => {
setInputValue( '' );
};
- const handleDirectEntry = ( value ) => {
+ const handleDirectEntry = ( val ) => {
let type = 'URL';
- const protocol = getProtocol( value ) || '';
+ const protocol = getProtocol( val ) || '';
if ( protocol.includes( 'mailto' ) ) {
type = 'mailto';
@@ -125,65 +167,138 @@ function LinkControl( {
type = 'tel';
}
- if ( startsWith( value, '#' ) ) {
+ if ( startsWith( val, '#' ) ) {
type = 'internal';
}
- return Promise.resolve(
- [ {
+ return Promise.resolve( [
+ {
id: '-1',
- title: value,
- url: type === 'URL' ? prependHTTP( value ) : value,
+ title: val,
+ url: type === 'URL' ? prependHTTP( val ) : val,
type,
- } ]
- );
+ },
+ ] );
};
- const handleEntitySearch = async ( value ) => {
+ const handleEntitySearch = async ( val, args ) => {
const results = await Promise.all( [
- fetchSearchSuggestions( value ),
- handleDirectEntry( value ),
+ fetchSearchSuggestions( val, {
+ ...( args.isInitialSuggestions ? { perPage: 3 } : {} ),
+ } ),
+ handleDirectEntry( val ),
] );
- const couldBeURL = ! value.includes( ' ' );
+ const couldBeURL = ! val.includes( ' ' );
// If it's potentially a URL search then concat on a URL search suggestion
// just for good measure. That way once the actual results run out we always
// have a URL option to fallback on.
- return couldBeURL ? results[ 0 ].concat( results[ 1 ] ) : results[ 0 ];
+ return couldBeURL && ! args.isInitialSuggestions
+ ? results[ 0 ].concat( results[ 1 ] )
+ : results[ 0 ];
};
- // Effects
- const getSearchHandler = useCallback( ( value ) => {
- const protocol = getProtocol( value ) || '';
- const isMailto = protocol.includes( 'mailto' );
- const isInternal = startsWith( value, '#' );
- const isTel = protocol.includes( 'tel' );
+ /**
+ * Cancels editing state and marks that focus may need to be restored after
+ * the next render, if focus was within the wrapper when editing finished.
+ */
+ function stopEditing() {
+ isEndingEditWithFocus.current =
+ !! wrapperNode.current &&
+ wrapperNode.current.contains( document.activeElement );
- const handleManualEntry = isInternal || isMailto || isTel || isURL( value ) || ( value && value.includes( 'www.' ) );
+ setIsEditingLink( false );
+ }
- return ( handleManualEntry ) ? handleDirectEntry( value ) : handleEntitySearch( value );
- }, [ handleDirectEntry, fetchSearchSuggestions ] );
+ // Effects
+ const getSearchHandler = useCallback(
+ ( val, args ) => {
+ const protocol = getProtocol( val ) || '';
+ const isMailto = protocol.includes( 'mailto' );
+ const isInternal = startsWith( val, '#' );
+ const isTel = protocol.includes( 'tel' );
+
+ const handleManualEntry =
+ isInternal ||
+ isMailto ||
+ isTel ||
+ isURL( val ) ||
+ ( val && val.includes( 'www.' ) );
+
+ return handleManualEntry
+ ? handleDirectEntry( val, args )
+ : handleEntitySearch( val, args );
+ },
+ [ handleDirectEntry, fetchSearchSuggestions ]
+ );
// Render Components
- const renderSearchResults = ( { suggestionsListProps, buildSuggestionItemProps, suggestions, selectedSuggestion, isLoading } ) => {
- const resultsListClasses = classnames( 'block-editor-link-control__search-results', {
- 'is-loading': isLoading,
- } );
+ const renderSearchResults = ( {
+ suggestionsListProps,
+ buildSuggestionItemProps,
+ suggestions,
+ selectedSuggestion,
+ isLoading,
+ isInitialSuggestions,
+ } ) => {
+ const resultsListClasses = classnames(
+ 'block-editor-link-control__search-results',
+ {
+ 'is-loading': isLoading,
+ }
+ );
const manualLinkEntryTypes = [ 'url', 'mailto', 'tel', 'internal' ];
+ const searchResultsLabelId = isInitialSuggestions
+ ? `block-editor-link-control-search-results-label-${ instanceId }`
+ : undefined;
+ const labelText = isInitialSuggestions
+ ? __( 'Recently updated' )
+ : sprintf( __( 'Search results for %s' ), inputValue );
+ // According to guidelines aria-label should be added if the label
+ // itself is not visible.
+ // See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
+ const ariaLabel = isInitialSuggestions ? undefined : labelText;
+ const SearchResultsLabel = (
+
+ { labelText }
+
+ );
return (
-
+ { isInitialSuggestions ? (
+ SearchResultsLabel
+ ) : (
+
{ SearchResultsLabel }
+ ) }
+
+
{ suggestions.map( ( suggestion, index ) => (
onLinkChange( suggestion ) }
+ onClick={ () => {
+ onChange( { ...value, ...suggestion } );
+ stopEditing();
+ } }
isSelected={ index === selectedSuggestion }
- isURL={ manualLinkEntryTypes.includes( suggestion.type.toLowerCase() ) }
+ isURL={ manualLinkEntryTypes.includes(
+ suggestion.type.toLowerCase()
+ ) }
searchTerm={ inputValue }
/>
) ) }
@@ -193,77 +308,73 @@ function LinkControl( {
};
return (
-
-
-
-
- { ( ! isEditingLink && currentLink ) && (
-
-
- { __( 'Currently selected' ) }:
-
- {
+ onChange( { ...value, ...suggestion } );
+ stopEditing();
+ } }
+ renderSuggestions={ renderSearchResults }
+ fetchSuggestions={ getSearchHandler }
+ onReset={ resetInput }
+ showInitialSuggestions={ showInitialSuggestions }
+ />
+ ) : (
+
+
+ { __( 'Currently selected' ) }:
+
+
+
+
-
-
-
- { currentLink.title }
-
- { filterURLForDisplay( safeDecodeURI( currentLink.url ) ) || '' }
+ { ( value && value.title ) || displayURL }
+
+ { value && value.title && (
+
+ { displayURL }
-
-
- { __( 'Change' ) }
-
-
-
- ) }
-
- { isEditingLink && (
-
- ) }
-
- { ! isEditingLink && (
-
- ) }
-
-
+ ) }
+
+
+
setIsEditingLink( true ) }
+ className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit"
+ >
+ { __( 'Edit' ) }
+
+
);
}
-export default compose(
- withInstanceId,
- withSelect( ( select, ownProps ) => {
- if ( ownProps.fetchSearchSuggestions && isFunction( ownProps.fetchSearchSuggestions ) ) {
- return;
- }
-
- const { getSettings } = select( 'core/block-editor' );
- return {
- fetchSearchSuggestions: getSettings().__experimentalFetchLinkSuggestions,
- };
- } )
-)( LinkControl );
+export default LinkControl;
diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
index 615f062b3fe01..4d8f39f9489d0 100644
--- a/packages/block-editor/src/components/link-control/search-input.js
+++ b/packages/block-editor/src/components/link-control/search-input.js
@@ -1,16 +1,34 @@
-
/**
* WordPress dependencies
*/
+import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
-import { ENTER } from '@wordpress/keycodes';
+import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
/**
* Internal dependencies
*/
import { URLInput } from '../';
+const handleLinkControlOnKeyDown = ( event ) => {
+ const { keyCode } = event;
+
+ if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( keyCode ) > -1 ) {
+ // Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
+ event.stopPropagation();
+ }
+};
+
+const handleLinkControlOnKeyPress = ( event ) => {
+ const { keyCode } = event;
+
+ event.stopPropagation();
+
+ if ( keyCode === ENTER ) {
+ }
+};
+
const LinkControlSearchInput = ( {
value,
onChange,
@@ -18,24 +36,26 @@ const LinkControlSearchInput = ( {
renderSuggestions,
fetchSuggestions,
onReset,
- onKeyDown,
- onKeyPress,
+ showInitialSuggestions,
} ) => {
+ const [ selectedSuggestion, setSelectedSuggestion ] = useState();
+
const selectItemHandler = ( selection, suggestion ) => {
onChange( selection );
-
- if ( suggestion ) {
- onSelect( suggestion );
- }
+ setSelectedSuggestion( suggestion );
};
- const stopFormEventsPropagation = ( event ) => {
+ function selectSuggestionOrCurrentInputValue( event ) {
+ // Avoid default forms behavior, since it's being handled custom here.
event.preventDefault();
- event.stopPropagation();
- };
+
+ // Interpret the selected value as either the selected suggestion, if
+ // exists, or otherwise the current input value as entered.
+ onSelect( selectedSuggestion || { url: value } );
+ }
return (
-
);
};
diff --git a/packages/block-editor/src/components/link-control/search-item.js b/packages/block-editor/src/components/link-control/search-item.js
index 7b086860d3056..a3c4fb37f4eb5 100644
--- a/packages/block-editor/src/components/link-control/search-item.js
+++ b/packages/block-editor/src/components/link-control/search-item.js
@@ -8,16 +8,18 @@ import classnames from 'classnames';
*/
import { safeDecodeURI } from '@wordpress/url';
import { __ } from '@wordpress/i18n';
-import {
- Button,
- Icon,
- TextHighlight,
-} from '@wordpress/components';
+import { Button, Icon, TextHighlight } from '@wordpress/components';
-export const LinkControlSearchItem = ( { itemProps, suggestion, isSelected = false, onClick, isURL = false, searchTerm = '' } ) => {
+export const LinkControlSearchItem = ( {
+ itemProps,
+ suggestion,
+ isSelected = false,
+ onClick,
+ isURL = false,
+ searchTerm = '',
+} ) => {
return (
{ isURL && (
-
-
-
+
{ ! isURL && ( safeDecodeURI( suggestion.url ) || '' ) }
- { isURL && (
- __( 'Press ENTER to add this link' )
- ) }
+ { isURL && __( 'Press ENTER to add this link' ) }
{ suggestion.type && (
- { suggestion.type }
+
+ { suggestion.type }
+
) }
);
};
export default LinkControlSearchItem;
-
diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js
index 3d9f957e207a8..0df253d11a1eb 100644
--- a/packages/block-editor/src/components/link-control/settings-drawer.js
+++ b/packages/block-editor/src/components/link-control/settings-drawer.js
@@ -7,25 +7,29 @@ import { noop } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import {
- ToggleControl,
-} from '@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
const defaultSettings = [
{
- id: 'newTab',
+ id: 'opensInNewTab',
title: __( 'Open in New Tab' ),
- checked: false,
},
];
-const LinkControlSettingsDrawer = ( { settings = defaultSettings, onSettingChange = noop } ) => {
+const LinkControlSettingsDrawer = ( {
+ value,
+ onChange = noop,
+ settings = defaultSettings,
+} ) => {
if ( ! settings || ! settings.length ) {
return null;
}
- const handleSettingChange = ( setting ) => ( value ) => {
- onSettingChange( setting.id, value, settings );
+ const handleSettingChange = ( setting ) => ( newValue ) => {
+ onChange( {
+ ...value,
+ [ setting.id ]: newValue,
+ } );
};
const theSettings = settings.map( ( setting ) => (
@@ -34,7 +38,8 @@ const LinkControlSettingsDrawer = ( { settings = defaultSettings, onSettingChang
key={ setting.id }
label={ setting.title }
onChange={ handleSettingChange( setting ) }
- checked={ setting.checked } />
+ checked={ value ? value[ setting.id ] : false }
+ />
) );
return (
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index ef01a96da4bfc..32238baa40673 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -1,10 +1,10 @@
-.block-editor-link-control__search {
+.block-editor-link-control {
position: relative;
min-width: $modal-min-width;
}
// LinkControl popover.
-.block-editor-link-control__search .block-editor-link-control__search-input {
+.block-editor-link-control .block-editor-link-control__search-input {
// Specificity override.
&.block-editor-link-control__search-input input[type="text"] {
width: calc(100% - #{$grid-size-large*2});
@@ -67,11 +67,17 @@
}
}
+.block-editor-link-control__search-results-label {
+ padding: 15px 30px 0 30px;
+ display: block;
+ font-size: 1.1em;
+}
+
.block-editor-link-control__search-results {
margin: 0;
padding: $grid-size-large/2 $grid-size-large $grid-size-large;
max-height: 200px;
- overflow-y: scroll; // allow results list to scroll
+ overflow-y: auto; // allow results list to scroll
&.is-loading {
opacity: 0.2;
@@ -191,7 +197,6 @@
.block-editor-link-control .block-editor-link-control__search-input .components-spinner {
display: block;
z-index: 100;
- float: none;
&.components-spinner { // Specificity override.
position: absolute;
diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
index 9401b97e1e490..f634dc91d0985 100644
--- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Basic rendering should display with required props 1`] = `"
"`;
+exports[`Basic rendering should render 1`] = `"
"`;
diff --git a/packages/block-editor/src/components/link-control/test/fixtures/index.js b/packages/block-editor/src/components/link-control/test/fixtures/index.js
index fc974749c982b..b470155977a30 100644
--- a/packages/block-editor/src/components/link-control/test/fixtures/index.js
+++ b/packages/block-editor/src/components/link-control/test/fixtures/index.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { uniqueId } from 'lodash';
+import { uniqueId, take } from 'lodash';
export const fauxEntitySuggestions = [
{
@@ -27,15 +27,22 @@ export const fauxEntitySuggestions = [
},
{
id: uniqueId(),
- title: 'This is another Post with a much longer title just to be really annoying and to try and break the UI',
+ title:
+ 'This is another Post with a much longer title just to be really annoying and to try and break the UI',
type: 'Post',
info: '1 month ago',
url: `?p=${ uniqueId() }`,
},
];
-// export const fetchFauxEntitySuggestions = async () => fauxEntitySuggestions;
-
-export const fetchFauxEntitySuggestions = () => {
- return Promise.resolve( fauxEntitySuggestions );
+/* eslint-disable no-unused-vars */
+export const fetchFauxEntitySuggestions = (
+ val = '',
+ { perPage = null } = {}
+) => {
+ const suggestions = perPage
+ ? take( fauxEntitySuggestions, perPage )
+ : fauxEntitySuggestions;
+ return Promise.resolve( suggestions );
};
+/* eslint-enable no-unused-vars */
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index 5a69142b5f495..65d7729c973dc 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -7,14 +7,20 @@ import { first, last, nth } from 'lodash';
/**
* WordPress dependencies
*/
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
import { UP, DOWN, ENTER } from '@wordpress/keycodes';
/**
* Internal dependencies
*/
-import LinkControl from '../index';
+import LinkControl from '../';
import { fauxEntitySuggestions, fetchFauxEntitySuggestions } from './fixtures';
+const mockFetchSearchSuggestions = jest.fn();
+
+jest.mock( '@wordpress/data/src/components/use-select', () => () => ( {
+ fetchSearchSuggestions: mockFetchSearchSuggestions,
+} ) );
+
/**
* Wait for next tick of event loop. This is required
* because the `fetchSearchSuggestions` Promise will
@@ -33,6 +39,7 @@ beforeEach( () => {
// setup a DOM element as a render target
container = document.createElement( 'div' );
document.body.appendChild( container );
+ mockFetchSearchSuggestions.mockImplementation( fetchFauxEntitySuggestions );
} );
afterEach( () => {
@@ -40,23 +47,21 @@ afterEach( () => {
unmountComponentAtNode( container );
container.remove();
container = null;
+ mockFetchSearchSuggestions.mockReset();
} );
describe( 'Basic rendering', () => {
- it( 'should display with required props', () => {
+ it( 'should render', () => {
act( () => {
- render(
-
, container
- );
+ render(
, container );
} );
// Search Input UI
- const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+ const searchInput = container.querySelector(
+ 'input[aria-label="URL"]'
+ );
- // expect( searchInputLabel ).not.toBeNull();
expect( searchInput ).not.toBeNull();
-
expect( container.innerHTML ).toMatchSnapshot();
} );
} );
@@ -67,20 +72,21 @@ describe( 'Searching for a link', () => {
let resolver;
- const fauxRequest = () => new Promise( ( resolve ) => {
- resolver = resolve;
- } );
+ const fauxRequest = () =>
+ new Promise( ( resolve ) => {
+ resolver = resolve;
+ } );
+
+ mockFetchSearchSuggestions.mockImplementation( fauxRequest );
act( () => {
- render(
-
, container
- );
+ render(
, container );
} );
// Search Input UI
- const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+ const searchInput = container.querySelector(
+ 'input[aria-label="URL"]'
+ );
// Simulate searching for a term
act( () => {
@@ -91,7 +97,9 @@ describe( 'Searching for a link', () => {
await eventLoopTick();
// TODO: select these by aria relationship to autocomplete rather than arbitary selector.
- const searchResultElements = container.querySelectorAll( '[role="menu"] button[role="menuitem"]' );
+ const searchResultElements = container.querySelectorAll(
+ '[role="menu"] button[role="menuitem"]'
+ );
let loadingUI = container.querySelector( '.components-spinner' );
@@ -110,20 +118,18 @@ describe( 'Searching for a link', () => {
expect( loadingUI ).toBeNull();
} );
- it( 'should display only search suggestions when current input value is not URL-like', async ( ) => {
+ it( 'should display only search suggestions when current input value is not URL-like', async () => {
const searchTerm = 'Hello world';
const firstFauxSuggestion = first( fauxEntitySuggestions );
act( () => {
- render(
-
, container
- );
+ render(
, container );
} );
// Search Input UI
- const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+ const searchInput = container.querySelector(
+ 'input[aria-label="URL"]'
+ );
// Simulate searching for a term
act( () => {
@@ -134,67 +140,89 @@ describe( 'Searching for a link', () => {
await eventLoopTick();
// TODO: select these by aria relationship to autocomplete rather than arbitary selector.
- const searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
- const firstSearchResultItemHTML = first( searchResultElements ).innerHTML;
+ const searchResultElements = container.querySelectorAll(
+ '[role="listbox"] [role="option"]'
+ );
+ const firstSearchResultItemHTML = first( searchResultElements )
+ .innerHTML;
const lastSearchResultItemHTML = last( searchResultElements ).innerHTML;
- expect( searchResultElements ).toHaveLength( fauxEntitySuggestions.length );
+ expect( searchResultElements ).toHaveLength(
+ fauxEntitySuggestions.length
+ );
// Sanity check that a search suggestion shows up corresponding to the data
- expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( firstFauxSuggestion.title ) );
- expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( firstFauxSuggestion.type ) );
+ expect( firstSearchResultItemHTML ).toEqual(
+ expect.stringContaining( firstFauxSuggestion.title )
+ );
+ expect( firstSearchResultItemHTML ).toEqual(
+ expect.stringContaining( firstFauxSuggestion.type )
+ );
// The fallback URL suggestion should not be shown when input is not URL-like
- expect( lastSearchResultItemHTML ).not.toEqual( expect.stringContaining( 'URL' ) );
+ expect( lastSearchResultItemHTML ).not.toEqual(
+ expect.stringContaining( 'URL' )
+ );
} );
it.each( [
[ 'couldbeurlorentitysearchterm' ],
[ 'ThisCouldAlsoBeAValidURL' ],
- ] )( 'should display a URL suggestion as a default fallback for the search term "%s" which could potentially be a valid url.', async ( searchTerm ) => {
- act( () => {
- render(
-
, container
- );
- } );
-
- // Search Input UI
- const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+ ] )(
+ 'should display a URL suggestion as a default fallback for the search term "%s" which could potentially be a valid url.',
+ async ( searchTerm ) => {
+ act( () => {
+ render(
, container );
+ } );
- // Simulate searching for a term
- act( () => {
- Simulate.change( searchInput, { target: { value: searchTerm } } );
- } );
+ // Search Input UI
+ const searchInput = container.querySelector(
+ 'input[aria-label="URL"]'
+ );
- // fetchFauxEntitySuggestions resolves on next "tick" of event loop
- await eventLoopTick();
+ // Simulate searching for a term
+ act( () => {
+ Simulate.change( searchInput, {
+ target: { value: searchTerm },
+ } );
+ } );
- // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
- const searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
- const lastSearchResultItemHTML = last( searchResultElements ).innerHTML;
- const additionalDefaultFallbackURLSuggestionLength = 1;
+ // fetchFauxEntitySuggestions resolves on next "tick" of event loop
+ await eventLoopTick();
- // We should see a search result for each of the expect search suggestions
- // plus 1 additional one for the fallback URL suggestion
- expect( searchResultElements ).toHaveLength( fauxEntitySuggestions.length + additionalDefaultFallbackURLSuggestionLength );
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ const searchResultElements = container.querySelectorAll(
+ '[role="listbox"] [role="option"]'
+ );
+ const lastSearchResultItemHTML = last( searchResultElements )
+ .innerHTML;
+ const additionalDefaultFallbackURLSuggestionLength = 1;
+
+ // We should see a search result for each of the expect search suggestions
+ // plus 1 additional one for the fallback URL suggestion
+ expect( searchResultElements ).toHaveLength(
+ fauxEntitySuggestions.length +
+ additionalDefaultFallbackURLSuggestionLength
+ );
- // The last item should be a URL search suggestion
- expect( lastSearchResultItemHTML ).toEqual( expect.stringContaining( searchTerm ) );
- expect( lastSearchResultItemHTML ).toEqual( expect.stringContaining( 'URL' ) );
- expect( lastSearchResultItemHTML ).toEqual( expect.stringContaining( 'Press ENTER to add this link' ) );
- } );
+ // The last item should be a URL search suggestion
+ expect( lastSearchResultItemHTML ).toEqual(
+ expect.stringContaining( searchTerm )
+ );
+ expect( lastSearchResultItemHTML ).toEqual(
+ expect.stringContaining( 'URL' )
+ );
+ expect( lastSearchResultItemHTML ).toEqual(
+ expect.stringContaining( 'Press ENTER to add this link' )
+ );
+ }
+ );
- it( 'should reset the input field and the search results when search term is cleared or reset', async ( ) => {
+ it( 'should reset the input field and the search results when search term is cleared or reset', async () => {
const searchTerm = 'Hello world';
act( () => {
- render(
-
, container
- );
+ render(
, container );
} );
let searchResultElements;
@@ -212,10 +240,14 @@ describe( 'Searching for a link', () => {
await eventLoopTick();
// TODO: select these by aria relationship to autocomplete rather than arbitary selector.
- searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
+ searchResultElements = container.querySelectorAll(
+ '[role="listbox"] [role="option"]'
+ );
// Check we have definitely rendered some suggestions
- expect( searchResultElements ).toHaveLength( fauxEntitySuggestions.length );
+ expect( searchResultElements ).toHaveLength(
+ fauxEntitySuggestions.length
+ );
// Grab the reset button now it's available
const resetUI = container.querySelector( '[aria-label="Reset"]' );
@@ -227,7 +259,9 @@ describe( 'Searching for a link', () => {
await eventLoopTick();
// TODO: select these by aria relationship to autocomplete rather than arbitary selector.
- searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
+ searchResultElements = container.querySelectorAll(
+ '[role="listbox"] [role="option"]'
+ );
searchInput = container.querySelector( 'input[aria-label="URL"]' );
expect( searchInput.value ).toBe( '' );
@@ -240,72 +274,211 @@ describe( 'Manual link entry', () => {
[ 'https://make.wordpress.org' ], // explicit https
[ 'http://make.wordpress.org' ], // explicit http
[ 'www.wordpress.org' ], // usage of "www"
- ] )( 'should display a single suggestion result when the current input value is URL-like (eg: %s)', async ( searchTerm ) => {
- act( () => {
- render(
-
, container
+ ] )(
+ 'should display a single suggestion result when the current input value is URL-like (eg: %s)',
+ async ( searchTerm ) => {
+ act( () => {
+ render(
, container );
+ } );
+
+ // Search Input UI
+ const searchInput = container.querySelector(
+ 'input[aria-label="URL"]'
);
- } );
- // Search Input UI
- const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+ // Simulate searching for a term
+ act( () => {
+ Simulate.change( searchInput, {
+ target: { value: searchTerm },
+ } );
+ } );
- // Simulate searching for a term
- act( () => {
- Simulate.change( searchInput, { target: { value: searchTerm } } );
- } );
+ // fetchFauxEntitySuggestions resolves on next "tick" of event loop
+ await eventLoopTick();
- // fetchFauxEntitySuggestions resolves on next "tick" of event loop
- await eventLoopTick();
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ const searchResultElements = container.querySelectorAll(
+ '[role="listbox"] [role="option"]'
+ );
+ const firstSearchResultItemHTML =
+ searchResultElements[ 0 ].innerHTML;
+ const expectedResultsLength = 1;
- // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
- const searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
- const firstSearchResultItemHTML = searchResultElements[ 0 ].innerHTML;
- const expectedResultsLength = 1;
-
- expect( searchResultElements ).toHaveLength( expectedResultsLength );
- expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( searchTerm ) );
- expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( 'URL' ) );
- expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( 'Press ENTER to add this link' ) );
- } );
+ expect( searchResultElements ).toHaveLength(
+ expectedResultsLength
+ );
+ expect( firstSearchResultItemHTML ).toEqual(
+ expect.stringContaining( searchTerm )
+ );
+ expect( firstSearchResultItemHTML ).toEqual(
+ expect.stringContaining( 'URL' )
+ );
+ expect( firstSearchResultItemHTML ).toEqual(
+ expect.stringContaining( 'Press ENTER to add this link' )
+ );
+ }
+ );
describe( 'Alternative link protocols and formats', () => {
it.each( [
[ 'mailto:example123456@wordpress.org', 'mailto' ],
[ 'tel:example123456@wordpress.org', 'tel' ],
[ '#internal-anchor', 'internal' ],
- ] )( 'should recognise "%s" as a %s link and handle as manual entry by displaying a single suggestion', async ( searchTerm, searchType ) => {
- act( () => {
- render(
-
, container
+ ] )(
+ 'should recognise "%s" as a %s link and handle as manual entry by displaying a single suggestion',
+ async ( searchTerm, searchType ) => {
+ act( () => {
+ render(
, container );
+ } );
+
+ // Search Input UI
+ const searchInput = container.querySelector(
+ 'input[aria-label="URL"]'
);
- } );
- // Search Input UI
- const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+ // Simulate searching for a term
+ act( () => {
+ Simulate.change( searchInput, {
+ target: { value: searchTerm },
+ } );
+ } );
- // Simulate searching for a term
- act( () => {
- Simulate.change( searchInput, { target: { value: searchTerm } } );
- } );
+ // fetchFauxEntitySuggestions resolves on next "tick" of event loop
+ await eventLoopTick();
- // fetchFauxEntitySuggestions resolves on next "tick" of event loop
- await eventLoopTick();
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ const searchResultElements = container.querySelectorAll(
+ '[role="listbox"] [role="option"]'
+ );
+ const firstSearchResultItemHTML =
+ searchResultElements[ 0 ].innerHTML;
+ const expectedResultsLength = 1;
- // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
- const searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
- const firstSearchResultItemHTML = searchResultElements[ 0 ].innerHTML;
- const expectedResultsLength = 1;
+ expect( searchResultElements ).toHaveLength(
+ expectedResultsLength
+ );
+ expect( firstSearchResultItemHTML ).toEqual(
+ expect.stringContaining( searchTerm )
+ );
+ expect( firstSearchResultItemHTML ).toEqual(
+ expect.stringContaining( searchType )
+ );
+ expect( firstSearchResultItemHTML ).toEqual(
+ expect.stringContaining( 'Press ENTER to add this link' )
+ );
+ }
+ );
+ } );
+} );
- expect( searchResultElements ).toHaveLength( expectedResultsLength );
- expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( searchTerm ) );
- expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( searchType ) );
- expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( 'Press ENTER to add this link' ) );
+describe( 'Default search suggestions', () => {
+ it( 'should display a list of initial search suggestions when there is no search value or suggestions', async () => {
+ const expectedResultsLength = 3; // set within `LinkControl`
+
+ act( () => {
+ render(
, container );
} );
+
+ await eventLoopTick();
+
+ // Search Input UI
+ const searchInput = container.querySelector(
+ 'input[aria-label="URL"]'
+ );
+
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ const searchResultsWrapper = container.querySelector(
+ '[role="listbox"]'
+ );
+ const initialSearchResultElements = searchResultsWrapper.querySelectorAll(
+ '[role="option"]'
+ );
+
+ const searchResultsLabel = container.querySelector(
+ `#${ searchResultsWrapper.getAttribute( 'aria-labelledby' ) }`
+ );
+
+ // Verify input has no value has default suggestions should only show
+ // when this does not have a value
+ expect( searchInput.value ).toBe( '' );
+
+ // Ensure only called once as a guard against potential infinite
+ // re-render loop within `componentDidUpdate` calling `updateSuggestions`
+ // which has calls to `setState` within it.
+ expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
+
+ // Verify the search results already display the initial suggestions
+ expect( initialSearchResultElements ).toHaveLength(
+ expectedResultsLength
+ );
+
+ expect( searchResultsLabel.innerHTML ).toEqual( 'Recently updated' );
+ } );
+
+ it( 'should not display initial suggestions when input value is present', async () => {
+ let searchResultElements;
+ //
+ // Render with an initial value an ensure that no initial suggestions
+ // are shown.
+ //
+ act( () => {
+ render(
+
,
+ container
+ );
+ } );
+
+ await eventLoopTick();
+
+ expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
+
+ //
+ // Click the "Edit/Change" button and check initial suggestions are not
+ // shown.
+ //
+ const currentLinkUI = container.querySelector(
+ '.block-editor-link-control__search-item.is-current'
+ );
+ const currentLinkBtn = currentLinkUI.querySelector( 'button' );
+
+ act( () => {
+ Simulate.click( currentLinkBtn );
+ } );
+
+ await eventLoopTick();
+
+ searchResultElements = container.querySelectorAll(
+ '[role="listbox"] [role="option"]'
+ );
+
+ expect( searchResultElements ).toHaveLength( 0 );
+
+ expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
+
+ //
+ // Reset the search to empty and check the initial suggestions are now shown.
+ //
+ const resetUI = container.querySelector( '[aria-label="Reset"]' );
+
+ act( () => {
+ Simulate.click( resetUI );
+ } );
+
+ await eventLoopTick();
+
+ searchResultElements = container.querySelectorAll(
+ '[role="listbox"] [role="option"]'
+ );
+
+ expect( searchResultElements ).toHaveLength( 3 );
+
+ // Ensure only called once as a guard against potential infinite
+ // re-render loop within `componentDidUpdate` calling `updateSuggestions`
+ // which has calls to `setState` within it.
+ expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
} );
} );
@@ -316,56 +489,54 @@ describe( 'Selecting links', () => {
const LinkControlConsumer = () => {
const [ link ] = useState( selectedLink );
- return (
-
- );
+ return
;
};
act( () => {
- render(
-
, container
- );
+ render(
, container );
} );
// TODO: select by aria role or visible text
- const currentLink = container.querySelector( '.block-editor-link-control__search-item.is-current' );
+ const currentLink = container.querySelector(
+ '.block-editor-link-control__search-item.is-current'
+ );
const currentLinkHTML = currentLink.innerHTML;
- const currentLinkAnchor = currentLink.querySelector( `[href="${ selectedLink.url }"]` );
-
- expect( currentLinkHTML ).toEqual( expect.stringContaining( selectedLink.title ) );
- expect( currentLinkHTML ).toEqual( expect.stringContaining( selectedLink.type ) );
- expect( currentLinkHTML ).toEqual( expect.stringContaining( 'Change' ) );
+ const currentLinkAnchor = currentLink.querySelector(
+ `[href="${ selectedLink.url }"]`
+ );
+
+ expect( currentLinkHTML ).toEqual(
+ expect.stringContaining( selectedLink.title )
+ );
+ expect( currentLinkHTML ).toEqual(
+ expect.stringContaining( selectedLink.type )
+ );
+ expect( currentLinkHTML ).toEqual( expect.stringContaining( 'Edit' ) );
expect( currentLinkAnchor ).not.toBeNull();
} );
it( 'should hide "selected" link UI and display search UI prepopulated with previously selected link title when "Change" button is clicked', () => {
const selectedLink = first( fauxEntitySuggestions );
- const spyOnEditMode = jest.fn();
const LinkControlConsumer = () => {
const [ link, setLink ] = useState( selectedLink );
return (
setLink( suggestion ) }
- fetchSearchSuggestions={ fetchFauxEntitySuggestions }
- onChangeMode={ spyOnEditMode( 'edit' ) }
+ value={ link }
+ onChange={ ( suggestion ) => setLink( suggestion ) }
/>
);
};
act( () => {
- render(
- setLink( suggestion ) }
- fetchSearchSuggestions={ fetchFauxEntitySuggestions }
- />
- );
- };
+ [
+ 'url',
+ 'https://www.wordpress.org',
+ {
+ id: '1',
+ title: 'https://www.wordpress.org',
+ url: 'https://www.wordpress.org',
+ type: 'URL',
+ },
+ ], // url
+ ] )(
+ 'should display a current selected link UI when a %s suggestion for the search "%s" is clicked',
+ async ( type, searchTerm, selectedLink ) => {
+ const LinkControlConsumer = () => {
+ const [ link, setLink ] = useState();
+
+ return (
+ setLink( suggestion ) }
+ />
+ );
+ };
- act( () => {
- render(
- setLink( suggestion ) }
- fetchSearchSuggestions={ fetchFauxEntitySuggestions }
- />
- );
- };
+ [
+ 'url',
+ 'https://www.wordpress.org',
+ {
+ id: '1',
+ title: 'https://www.wordpress.org',
+ url: 'https://www.wordpress.org',
+ type: 'URL',
+ },
+ ], // url
+ ] )(
+ 'should display a current selected link UI when an %s suggestion for the search "%s" is selected using the keyboard',
+ async ( type, searchTerm, selectedLink ) => {
+ const LinkControlConsumer = () => {
+ const [ link, setLink ] = useState();
+
+ return (
+ setLink( suggestion ) }
+ />
+ );
+ };
- act( () => {
- render(
-
+ focusTarget.current.focus() }
+ />
+
+ );
+ };
+
+ act( () => {
+ render( ( this.picker = instance ) }
+ options={ this.getMediaOptionsItems() }
+ onChange={ this.onPickerSelect }
+ />
+ );
+
+ return this.props.render( {
+ open: this.onPickerPresent,
+ mediaOptions,
+ } );
+ }
+}
+
+export default MediaEdit;
diff --git a/packages/block-editor/src/components/media-placeholder/README.md b/packages/block-editor/src/components/media-placeholder/README.md
index 6fee3970c843b..2667516d6a6d7 100644
--- a/packages/block-editor/src/components/media-placeholder/README.md
+++ b/packages/block-editor/src/components/media-placeholder/README.md
@@ -7,7 +7,7 @@ MediaPlaceholder
An example usage which sets the URL of the selected image to `theImage` attributes.
-```
+```js
const { MediaPlaceholder } = wp.blockEditor;
...
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index e22befc7e0ed4..1874c431a83d0 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -1,13 +1,7 @@
/**
* External dependencies
*/
-import {
- every,
- get,
- isArray,
- noop,
- startsWith,
-} from 'lodash';
+import { every, get, isArray, noop, startsWith } from 'lodash';
import classnames from 'classnames';
/**
@@ -78,7 +72,9 @@ export class MediaPlaceholder extends Component {
return false;
}
return every( allowedTypes, ( allowedType ) => {
- return allowedType === 'image' || startsWith( allowedType, 'image/' );
+ return (
+ allowedType === 'image' || startsWith( allowedType, 'image/' )
+ );
} );
}
@@ -87,7 +83,10 @@ export class MediaPlaceholder extends Component {
}
componentDidUpdate( prevProps ) {
- if ( get( prevProps.value, [ 'src' ], '' ) !== get( this.props.value, [ 'src' ], '' ) ) {
+ if (
+ get( prevProps.value, [ 'src' ], '' ) !==
+ get( this.props.value, [ 'src' ], '' )
+ ) {
this.setState( { src: get( this.props.value, [ 'src' ], '' ) } );
}
}
@@ -166,7 +165,9 @@ export class MediaPlaceholder extends Component {
let title = labels.title;
if ( ! mediaUpload && ! onSelectURL ) {
- instructions = __( 'To edit this block, you need permission to upload media.' );
+ instructions = __(
+ 'To edit this block, you need permission to upload media.'
+ );
}
if ( instructions === undefined || title === undefined ) {
@@ -176,14 +177,22 @@ export class MediaPlaceholder extends Component {
const isVideo = isOneType && 'video' === allowedTypes[ 0 ];
if ( instructions === undefined && mediaUpload ) {
- instructions = __( 'Upload a media file or pick one from your media library.' );
+ instructions = __(
+ 'Upload a media file or pick one from your media library.'
+ );
if ( isAudio ) {
- instructions = __( 'Upload an audio file, pick one from your media library, or add one with a URL.' );
+ instructions = __(
+ 'Upload an audio file, pick one from your media library, or add one with a URL.'
+ );
} else if ( isImage ) {
- instructions = __( 'Upload an image file, pick one from your media library, or add one with a URL.' );
+ instructions = __(
+ 'Upload an image file, pick one from your media library, or add one with a URL.'
+ );
} else if ( isVideo ) {
- instructions = __( 'Upload a video file, pick one from your media library, or add one with a URL.' );
+ instructions = __(
+ 'Upload a video file, pick one from your media library, or add one with a URL.'
+ );
}
}
@@ -203,7 +212,9 @@ export class MediaPlaceholder extends Component {
const placeholderClassName = classnames(
'block-editor-media-placeholder',
className,
- { 'is-appender': isAppender }
+ {
+ 'is-appender': isAppender,
+ }
);
return (
@@ -239,32 +250,27 @@ export class MediaPlaceholder extends Component {
}
renderCancelLink() {
- const {
- onCancel,
- } = this.props;
- return ( onCancel &&
-
- { __( 'Cancel' ) }
-
+ const { onCancel } = this.props;
+ return (
+ onCancel && (
+
+ { __( 'Cancel' ) }
+
+ )
);
}
renderUrlSelectionUI() {
- const {
- onSelectURL,
- } = this.props;
+ const { onSelectURL } = this.props;
if ( ! onSelectURL ) {
return null;
}
- const {
- isURLInputVisible,
- src,
- } = this.state;
+ const { isURLInputVisible, src } = this.state;
return (
id ) :
- value.id
+ isArray( value ) ? value.map( ( { id } ) => id ) : value.id
}
render={ ( { open } ) => {
return (
@@ -352,7 +356,10 @@ export class MediaPlaceholder extends Component {
{ this.renderCancelLink() }
);
- return this.renderPlaceholder( content, openFileDialog );
+ return this.renderPlaceholder(
+ content,
+ openFileDialog
+ );
} }
/>
@@ -387,28 +394,28 @@ export class MediaPlaceholder extends Component {
}
render() {
- const {
- disableMediaButtons,
- dropZoneUIOnly,
- } = this.props;
+ const { disableMediaButtons, dropZoneUIOnly } = this.props;
if ( dropZoneUIOnly || disableMediaButtons ) {
if ( dropZoneUIOnly ) {
- deprecated( 'wp.blockEditor.MediaPlaceholder dropZoneUIOnly prop', {
- alternative: 'disableMediaButtons',
- } );
+ deprecated(
+ 'wp.blockEditor.MediaPlaceholder dropZoneUIOnly prop',
+ {
+ alternative: 'disableMediaButtons',
+ }
+ );
}
return (
-
- { this.renderDropZone() }
-
+ { this.renderDropZone() }
);
}
return (
{ this.renderMediaUploadChecked() }
@@ -429,5 +436,5 @@ const applyWithSelect = withSelect( ( select ) => {
*/
export default compose(
applyWithSelect,
- withFilters( 'editor.MediaPlaceholder' ),
+ withFilters( 'editor.MediaPlaceholder' )
)( MediaPlaceholder );
diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
index e120c53daf2c0..c1a4def4e0e8c 100644
--- a/packages/block-editor/src/components/media-placeholder/index.native.js
+++ b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -15,12 +15,21 @@ import {
} from '@wordpress/block-editor';
import { Dashicon } from '@wordpress/components';
import { withPreferredColorScheme } from '@wordpress/compose';
+import { useRef } from '@wordpress/element';
/**
* Internal dependencies
*/
import styles from './styles.scss';
+// remove duplicates after gallery append
+const dedupMedia = ( media ) =>
+ uniqWith(
+ media,
+ ( media1, media2 ) =>
+ media1.id === media2.id || media1.url === media2.url
+ );
+
function MediaPlaceholder( props ) {
const {
addToGallery,
@@ -35,11 +44,18 @@ function MediaPlaceholder( props ) {
value = [],
} = props;
- const setMedia = multiple && addToGallery ?
- ( selected ) => onSelect( uniqWith( [ ...value, ...selected ], ( media1, media2 ) => {
- return media1.id === media2.id || media1.url === media2.url;
- } ) ) :
- onSelect;
+ // use ref to keep media array current for callbacks during rerenders
+ const mediaRef = useRef( value );
+ mediaRef.current = value;
+
+ // append and deduplicate media array for gallery use case
+ const setMedia =
+ multiple && addToGallery
+ ? ( selected ) =>
+ onSelect(
+ dedupMedia( [ ...mediaRef.current, ...selected ] )
+ )
+ : onSelect;
const isOneType = allowedTypes.length === 1;
const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
@@ -73,16 +89,20 @@ function MediaPlaceholder( props ) {
accessibilityHint = __( 'Double tap to select a video' );
}
- const emptyStateTitleStyle = getStylesFromColorScheme( styles.emptyStateTitle, styles.emptyStateTitleDark );
- const addMediaButtonStyle = getStylesFromColorScheme( styles.addMediaButton, styles.addMediaButtonDark );
+ const emptyStateTitleStyle = getStylesFromColorScheme(
+ styles.emptyStateTitle,
+ styles.emptyStateTitleDark
+ );
+ const addMediaButtonStyle = getStylesFromColorScheme(
+ styles.addMediaButton,
+ styles.addMediaButtonDark
+ );
const renderContent = () => {
if ( isAppender === undefined || ! isAppender ) {
return (
<>
-
- { icon }
-
+ { icon }
{ placeholderTitle }
@@ -107,8 +127,14 @@ function MediaPlaceholder( props ) {
return null;
}
- const appenderStyle = getStylesFromColorScheme( styles.appender, styles.appenderDark );
- const emptyStateContainerStyle = getStylesFromColorScheme( styles.emptyStateContainer, styles.emptyStateContainerDark );
+ const appenderStyle = getStylesFromColorScheme(
+ styles.appender,
+ styles.appenderDark
+ );
+ const emptyStateContainerStyle = getStylesFromColorScheme(
+ styles.emptyStateContainer,
+ styles.emptyStateContainerDark
+ );
return (
@@ -129,12 +155,14 @@ function MediaPlaceholder( props ) {
onPress={ ( event ) => {
props.onFocus( event );
open();
- } }>
+ } }
+ >
+ ] }
+ >
{ getMediaOptions() }
{ renderContent() }
diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss
index c5bf2a49ed13c..c43c95ca0b47e 100644
--- a/packages/block-editor/src/components/media-placeholder/styles.native.scss
+++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss
@@ -60,7 +60,7 @@
.addMediaButton {
color: $white;
- background-color: $dark-gray-500;
+ background-color: $toolbar-button;
border-radius: $icon-button-size-small / 2;
overflow: hidden;
size: $icon-button-size-small;
@@ -68,5 +68,5 @@
.addMediaButtonDark {
color: $background-dark-secondary;
- background-color: $gray-40;
+ background-color: $gray-20;
}
diff --git a/packages/block-editor/src/components/media-placeholder/test/index.js b/packages/block-editor/src/components/media-placeholder/test/index.js
index 6d7050eb84f06..32496cf65ddd5 100644
--- a/packages/block-editor/src/components/media-placeholder/test/index.js
+++ b/packages/block-editor/src/components/media-placeholder/test/index.js
@@ -12,8 +12,8 @@ jest.mock( '../../media-upload/check', () => () => null );
describe( 'MediaPlaceholder', () => {
it( 'renders successfully when allowedTypes property is not specified', () => {
- expect( () => mount(
-
+
{ __( 'Open Media Library' ) }
) }
@@ -174,23 +168,27 @@ const MediaReplaceFlow = (
} }
/>
- { onSelectURL && ( setShowURLInput( ! showURLInput ) ) }
- aria-expanded={ showURLInput }
- >
- { __( 'Insert from URL' ) }
- }
+ { onSelectURL && (
+
+ setShowURLInput( ! showURLInput )
+ }
+ aria-expanded={ showURLInput }
+ >
+ { __( 'Insert from URL' ) }
+
+ ) }
- { showURLInput &&
- { urlInputUIContent }
-
}
+ { showURLInput && (
+
+ { urlInputUIContent }
+
+ ) }
) }
/>
);
};
-export default compose(
- withNotices,
-)( MediaReplaceFlow );
+export default compose( withNotices )( MediaReplaceFlow );
diff --git a/packages/block-editor/src/components/media-upload-progress/image-size.native.js b/packages/block-editor/src/components/media-upload-progress/image-size.native.js
index ade5984c1cada..3e022777fce2c 100644
--- a/packages/block-editor/src/components/media-upload-progress/image-size.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/image-size.native.js
@@ -62,7 +62,10 @@ class ImageSize extends Component {
if ( this.image === undefined || this.container === undefined ) {
return;
}
- const { width, height } = calculatePreferedImageSize( this.image, this.container );
+ const { width, height } = calculatePreferedImageSize(
+ this.image,
+ this.container
+ );
this.setState( { width, height } );
}
diff --git a/packages/block-editor/src/components/media-upload-progress/index.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js
index ca13038a2795e..63f53c97a1d3a 100644
--- a/packages/block-editor/src/components/media-upload-progress/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/index.native.js
@@ -3,16 +3,12 @@
*/
import React from 'react';
import { View } from 'react-native';
-import {
- subscribeMediaUpload,
-} from 'react-native-gutenberg-bridge';
+import { subscribeMediaUpload } from 'react-native-gutenberg-bridge';
/**
* WordPress dependencies
*/
-import {
- Spinner,
-} from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
/**
@@ -71,7 +67,11 @@ export class MediaUploadProgress extends React.Component {
}
updateMediaProgress( payload ) {
- this.setState( { progress: payload.progress, isUploadInProgress: true, isUploadFailed: false } );
+ this.setState( {
+ progress: payload.progress,
+ isUploadInProgress: true,
+ isUploadFailed: false,
+ } );
if ( this.props.onUpdateMediaProgress ) {
this.props.onUpdateMediaProgress( payload );
}
@@ -103,9 +103,11 @@ export class MediaUploadProgress extends React.Component {
if ( this.subscriptionParentMediaUpload ) {
return;
}
- this.subscriptionParentMediaUpload = subscribeMediaUpload( ( payload ) => {
- this.mediaUpload( payload );
- } );
+ this.subscriptionParentMediaUpload = subscribeMediaUpload(
+ ( payload ) => {
+ this.mediaUpload( payload );
+ }
+ );
}
removeMediaUploadListener() {
@@ -119,17 +121,19 @@ export class MediaUploadProgress extends React.Component {
const { isUploadInProgress, isUploadFailed } = this.state;
const showSpinner = this.state.isUploadInProgress;
const progress = this.state.progress * 100;
- const retryMessage = __( 'Failed to insert media.\nPlease tap for options.' );
+ const retryMessage = __(
+ 'Failed to insert media.\nPlease tap for options.'
+ );
return (
- { showSpinner &&
+ { showSpinner && (
- }
- { coverUrl &&
-
+ ) }
+ { coverUrl && (
+
{ ( sizes ) => {
const {
imageWidthWithinContainer,
@@ -137,30 +141,37 @@ export class MediaUploadProgress extends React.Component {
} = sizes;
let finalHeight = imageHeightWithinContainer;
- if ( height > 0 && height < imageHeightWithinContainer ) {
+ if (
+ height > 0 &&
+ height < imageHeightWithinContainer
+ ) {
finalHeight = height;
}
let finalWidth = imageWidthWithinContainer;
- if ( width > 0 && width < imageWidthWithinContainer ) {
+ if (
+ width > 0 &&
+ width < imageWidthWithinContainer
+ ) {
finalWidth = width;
}
- return ( this.props.renderContent( {
+ return this.props.renderContent( {
isUploadInProgress,
isUploadFailed,
finalWidth,
finalHeight,
imageWidthWithinContainer,
retryMessage,
- } ) );
+ } );
} }
- }
- { ! coverUrl && this.props.renderContent( {
- isUploadInProgress,
- isUploadFailed,
- retryMessage,
- } ) }
+ ) }
+ { ! coverUrl &&
+ this.props.renderContent( {
+ isUploadInProgress,
+ isUploadFailed,
+ retryMessage,
+ } ) }
);
}
diff --git a/packages/block-editor/src/components/media-upload-progress/test/index.native.js b/packages/block-editor/src/components/media-upload-progress/test/index.native.js
index e7c48e80d05df..41a542b3703ca 100644
--- a/packages/block-editor/src/components/media-upload-progress/test/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/test/index.native.js
@@ -2,9 +2,7 @@
* External dependencies
*/
import { shallow } from 'enzyme';
-import {
- sendMediaUpload,
-} from 'react-native-gutenberg-bridge';
+import { sendMediaUpload } from 'react-native-gutenberg-bridge';
/**
* Internal dependencies
@@ -42,7 +40,11 @@ describe( 'MediaUploadProgress component', () => {
it( 'listens media upload progress', () => {
const progress = 10;
- const payload = { state: MEDIA_UPLOAD_STATE_UPLOADING, mediaId: MEDIA_ID, progress };
+ const payload = {
+ state: MEDIA_UPLOAD_STATE_UPLOADING,
+ mediaId: MEDIA_ID,
+ progress,
+ };
const onUpdateMediaProgress = jest.fn();
@@ -64,7 +66,11 @@ describe( 'MediaUploadProgress component', () => {
} );
it( 'does not get affected by unrelated media uploads', () => {
- const payload = { state: MEDIA_UPLOAD_STATE_UPLOADING, mediaId: 1, progress: 20 };
+ const payload = {
+ state: MEDIA_UPLOAD_STATE_UPLOADING,
+ mediaId: 1,
+ progress: 20,
+ };
const onUpdateMediaProgress = jest.fn();
const wrapper = shallow(
{
it( 'listens media upload success', () => {
const progress = 10;
- const payloadSuccess = { state: MEDIA_UPLOAD_STATE_SUCCEEDED, mediaId: MEDIA_ID };
- const payloadUploading = { state: MEDIA_UPLOAD_STATE_UPLOADING, mediaId: MEDIA_ID, progress };
+ const payloadSuccess = {
+ state: MEDIA_UPLOAD_STATE_SUCCEEDED,
+ mediaId: MEDIA_ID,
+ };
+ const payloadUploading = {
+ state: MEDIA_UPLOAD_STATE_UPLOADING,
+ mediaId: MEDIA_ID,
+ progress,
+ };
const onFinishMediaUploadWithSuccess = jest.fn();
const wrapper = shallow(
{} }
/>
@@ -103,19 +118,30 @@ describe( 'MediaUploadProgress component', () => {
expect( wrapper.instance().state.isUploadInProgress ).toEqual( false );
expect( onFinishMediaUploadWithSuccess ).toHaveBeenCalledTimes( 1 );
- expect( onFinishMediaUploadWithSuccess ).toHaveBeenCalledWith( payloadSuccess );
+ expect( onFinishMediaUploadWithSuccess ).toHaveBeenCalledWith(
+ payloadSuccess
+ );
} );
it( 'listens media upload fail', () => {
const progress = 10;
- const payloadFail = { state: MEDIA_UPLOAD_STATE_FAILED, mediaId: MEDIA_ID };
- const payloadUploading = { state: MEDIA_UPLOAD_STATE_UPLOADING, mediaId: MEDIA_ID, progress };
+ const payloadFail = {
+ state: MEDIA_UPLOAD_STATE_FAILED,
+ mediaId: MEDIA_ID,
+ };
+ const payloadUploading = {
+ state: MEDIA_UPLOAD_STATE_UPLOADING,
+ mediaId: MEDIA_ID,
+ progress,
+ };
const onFinishMediaUploadWithFailure = jest.fn();
const wrapper = shallow(
{} }
/>
@@ -130,13 +156,22 @@ describe( 'MediaUploadProgress component', () => {
expect( wrapper.instance().state.isUploadInProgress ).toEqual( false );
expect( wrapper.instance().state.isUploadFailed ).toEqual( true );
expect( onFinishMediaUploadWithFailure ).toHaveBeenCalledTimes( 1 );
- expect( onFinishMediaUploadWithFailure ).toHaveBeenCalledWith( payloadFail );
+ expect( onFinishMediaUploadWithFailure ).toHaveBeenCalledWith(
+ payloadFail
+ );
} );
it( 'listens media upload reset', () => {
const progress = 10;
- const payloadReset = { state: MEDIA_UPLOAD_STATE_RESET, mediaId: MEDIA_ID };
- const payloadUploading = { state: MEDIA_UPLOAD_STATE_UPLOADING, mediaId: MEDIA_ID, progress };
+ const payloadReset = {
+ state: MEDIA_UPLOAD_STATE_RESET,
+ mediaId: MEDIA_ID,
+ };
+ const payloadUploading = {
+ state: MEDIA_UPLOAD_STATE_UPLOADING,
+ mediaId: MEDIA_ID,
+ progress,
+ };
const onMediaUploadStateReset = jest.fn();
diff --git a/packages/block-editor/src/components/media-upload/check.js b/packages/block-editor/src/components/media-upload/check.js
index c1fb3398020f4..7059dfc3f196c 100644
--- a/packages/block-editor/src/components/media-upload/check.js
+++ b/packages/block-editor/src/components/media-upload/check.js
@@ -3,7 +3,11 @@
*/
import { withSelect } from '@wordpress/data';
-export function MediaUploadCheck( { hasUploadPermissions, fallback = null, children } ) {
+export function MediaUploadCheck( {
+ hasUploadPermissions,
+ fallback = null,
+ children,
+} ) {
return hasUploadPermissions ? children : fallback;
}
diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js
index 72a337cc921bd..2a57846847ebe 100644
--- a/packages/block-editor/src/components/media-upload/index.native.js
+++ b/packages/block-editor/src/components/media-upload/index.native.js
@@ -52,7 +52,12 @@ const siteLibrarySource = {
icon: 'wordpress-alt',
};
-const internalSources = [ deviceLibrarySource, cameraImageSource, cameraVideoSource, siteLibrarySource ];
+const internalSources = [
+ deviceLibrarySource,
+ cameraImageSource,
+ cameraVideoSource,
+ siteLibrarySource,
+];
export class MediaUpload extends React.Component {
constructor( props ) {
@@ -69,13 +74,15 @@ export class MediaUpload extends React.Component {
componentDidMount() {
const { allowedTypes = [] } = this.props;
getOtherMediaOptions( allowedTypes, ( otherMediaOptions ) => {
- const otherMediaOptionsWithIcons = otherMediaOptions.map( ( option ) => {
- return {
- ...option,
- types: allowedTypes,
- id: option.value,
- };
- } );
+ const otherMediaOptionsWithIcons = otherMediaOptions.map(
+ ( option ) => {
+ return {
+ ...option,
+ types: allowedTypes,
+ id: option.value,
+ };
+ }
+ );
this.setState( { otherMediaOptions: otherMediaOptionsWithIcons } );
} );
@@ -96,14 +103,20 @@ export class MediaUpload extends React.Component {
}
}
- return this.getAllSources().filter( ( source ) => {
- return allowedTypes.filter( ( allowedType ) => source.types.includes( allowedType ) ).length > 0;
- } ).map( ( source ) => {
- return {
- ...source,
- icon: source.icon || this.getChooseFromDeviceIcon(),
- };
- } );
+ return this.getAllSources()
+ .filter( ( source ) => {
+ return (
+ allowedTypes.filter( ( allowedType ) =>
+ source.types.includes( allowedType )
+ ).length > 0
+ );
+ } )
+ .map( ( source ) => {
+ return {
+ ...source,
+ icon: source.icon || this.getChooseFromDeviceIcon(),
+ };
+ } );
}
getChooseFromDeviceIcon() {
@@ -128,8 +141,12 @@ export class MediaUpload extends React.Component {
onPickerSelect( value ) {
const { allowedTypes = [], onSelect, multiple = false } = this.props;
- const mediaSource = this.getAllSources().filter( ( source ) => source.value === value ).shift();
- const types = allowedTypes.filter( ( type ) => mediaSource.types.includes( type ) );
+ const mediaSource = this.getAllSources()
+ .filter( ( source ) => source.value === value )
+ .shift();
+ const types = allowedTypes.filter( ( type ) =>
+ mediaSource.types.includes( type )
+ );
requestMediaPicker( mediaSource.id, types, multiple, ( media ) => {
if ( ( multiple && media ) || ( media && media.id ) ) {
onSelect( media );
@@ -141,13 +158,16 @@ export class MediaUpload extends React.Component {
const getMediaOptions = () => (
this.picker = instance }
+ ref={ ( instance ) => ( this.picker = instance ) }
options={ this.getMediaOptionsItems() }
onChange={ this.onPickerSelect }
/>
);
- return this.props.render( { open: this.onPickerPresent, getMediaOptions } );
+ return this.props.render( {
+ open: this.onPickerPresent,
+ getMediaOptions,
+ } );
}
}
diff --git a/packages/block-editor/src/components/media-upload/test/index.native.js b/packages/block-editor/src/components/media-upload/test/index.native.js
index 337b038cab949..539f9f4361c5d 100644
--- a/packages/block-editor/src/components/media-upload/test/index.native.js
+++ b/packages/block-editor/src/components/media-upload/test/index.native.js
@@ -32,13 +32,16 @@ describe( 'MediaUpload component', () => {
it( 'opens media options picker', () => {
const wrapper = shallow(
- {
- return (
-
- { getMediaOptions() }
-
- );
- } } />
+ {
+ return (
+
+ { getMediaOptions() }
+
+ );
+ } }
+ />
);
expect( wrapper.find( 'Picker' ) ).toHaveLength( 1 );
} );
@@ -54,23 +57,35 @@ describe( 'MediaUpload component', () => {
{ getMediaOptions() }
);
- } } />
+ } }
+ />
);
- expect( wrapper.find( 'Picker' ).props().options.filter( ( item ) => item.label === expectedOption ) ).toHaveLength( 1 );
+ expect(
+ wrapper
+ .find( 'Picker' )
+ .props()
+ .options.filter( ( item ) => item.label === expectedOption )
+ ).toHaveLength( 1 );
};
expectOptionForMediaType( MEDIA_TYPE_IMAGE, OPTION_TAKE_PHOTO );
expectOptionForMediaType( MEDIA_TYPE_VIDEO, OPTION_TAKE_VIDEO );
} );
- const expectMediaPickerForOption = ( option, allowMultiple, requestFunction ) => {
- requestFunction.mockImplementation( ( source, mediaTypes, multiple, callback ) => {
- expect( mediaTypes[ 0 ] ).toEqual( MEDIA_TYPE_VIDEO );
- if ( multiple ) {
- callback( [ { id: MEDIA_ID, url: MEDIA_URL } ] );
- } else {
- callback( { id: MEDIA_ID, url: MEDIA_URL } );
+ const expectMediaPickerForOption = (
+ option,
+ allowMultiple,
+ requestFunction
+ ) => {
+ requestFunction.mockImplementation(
+ ( source, mediaTypes, multiple, callback ) => {
+ expect( mediaTypes[ 0 ] ).toEqual( MEDIA_TYPE_VIDEO );
+ if ( multiple ) {
+ callback( [ { id: MEDIA_ID, url: MEDIA_URL } ] );
+ } else {
+ callback( { id: MEDIA_ID, url: MEDIA_URL } );
+ }
}
- } );
+ );
const onSelect = jest.fn();
@@ -85,7 +100,8 @@ describe( 'MediaUpload component', () => {
{ getMediaOptions() }
);
- } } />
+ } }
+ />
);
wrapper.find( 'Picker' ).simulate( 'change', option );
const media = { id: MEDIA_ID, url: MEDIA_URL };
@@ -93,26 +109,48 @@ describe( 'MediaUpload component', () => {
expect( requestFunction ).toHaveBeenCalledTimes( 1 );
expect( onSelect ).toHaveBeenCalledTimes( 1 );
- expect( onSelect ).toHaveBeenCalledWith( allowMultiple ? [ media ] : media );
+ expect( onSelect ).toHaveBeenCalledWith(
+ allowMultiple ? [ media ] : media
+ );
};
it( 'can select media from device library', () => {
- expectMediaPickerForOption( mediaSources.deviceLibrary, false, requestMediaPicker );
+ expectMediaPickerForOption(
+ mediaSources.deviceLibrary,
+ false,
+ requestMediaPicker
+ );
} );
it( 'can select media from WP media library', () => {
- expectMediaPickerForOption( mediaSources.siteMediaLibrary, false, requestMediaPicker );
+ expectMediaPickerForOption(
+ mediaSources.siteMediaLibrary,
+ false,
+ requestMediaPicker
+ );
} );
it( 'can select media by capturig', () => {
- expectMediaPickerForOption( mediaSources.deviceCamera, false, requestMediaPicker );
+ expectMediaPickerForOption(
+ mediaSources.deviceCamera,
+ false,
+ requestMediaPicker
+ );
} );
it( 'can select multiple media from device library', () => {
- expectMediaPickerForOption( mediaSources.deviceLibrary, true, requestMediaPicker );
+ expectMediaPickerForOption(
+ mediaSources.deviceLibrary,
+ true,
+ requestMediaPicker
+ );
} );
it( 'can select multiple media from WP media library', () => {
- expectMediaPickerForOption( mediaSources.siteMediaLibrary, true, requestMediaPicker );
+ expectMediaPickerForOption(
+ mediaSources.siteMediaLibrary,
+ true,
+ requestMediaPicker
+ );
} );
} );
diff --git a/packages/block-editor/src/components/multi-select-scroll-into-view/index.js b/packages/block-editor/src/components/multi-select-scroll-into-view/index.js
index 23a917ca676e2..3443ee44d2956 100644
--- a/packages/block-editor/src/components/multi-select-scroll-into-view/index.js
+++ b/packages/block-editor/src/components/multi-select-scroll-into-view/index.js
@@ -21,10 +21,9 @@ import { getBlockDOMNode } from '../../utils/dom';
*/
export default function MultiSelectScrollIntoView() {
const selector = ( select ) => {
- const {
- getBlockSelectionEnd,
- isMultiSelecting,
- } = select( 'core/block-editor' );
+ const { getBlockSelectionEnd, isMultiSelecting } = select(
+ 'core/block-editor'
+ );
return {
selectionEnd: getBlockSelectionEnd(),
diff --git a/packages/block-editor/src/components/multi-selection-inspector/index.js b/packages/block-editor/src/components/multi-selection-inspector/index.js
index 15a1c8302e58f..d501e1247d71a 100644
--- a/packages/block-editor/src/components/multi-selection-inspector/index.js
+++ b/packages/block-editor/src/components/multi-selection-inspector/index.js
@@ -5,10 +5,7 @@ import { sprintf, _n } from '@wordpress/i18n';
import { withSelect } from '@wordpress/data';
import { serialize } from '@wordpress/blocks';
import { count as wordCount } from '@wordpress/wordcount';
-import {
- Path,
- SVG,
-} from '@wordpress/components';
+import { Path, SVG } from '@wordpress/components';
/**
* Internal dependencies
@@ -20,21 +17,25 @@ function MultiSelectionInspector( { blocks } ) {
return (
-
+
- {
- /* translators: %d: number of blocks */
- sprintf( _n( '%d block', '%d blocks', blocks.length ), blocks.length )
- }
+ { /* translators: %d: number of blocks */
+ sprintf(
+ _n( '%d block', '%d blocks', blocks.length ),
+ blocks.length
+ ) }
- {
- /* translators: %d: number of words */
- sprintf( _n( '%d word', '%d words', words ), words )
- }
+ { /* translators: %d: number of words */
+ sprintf( _n( '%d word', '%d words', words ), words ) }
- { children }
-
- );
- /* eslint-enable jsx-a11y/no-static-element-interactions */
- }
+ // Disable reason: This component is responsible for capturing bubbled
+ // keyboard events which are interpreted as typing intent.
+
+ /* eslint-disable jsx-a11y/no-static-element-interactions */
+ return (
+
+ { children }
+
+ );
+ /* eslint-enable jsx-a11y/no-static-element-interactions */
}
/**
* @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/observe-typing/README.md
*/
-export default compose( [
- withSelect( ( select ) => {
- const { isTyping } = select( 'core/block-editor' );
-
- return {
- isTyping: isTyping(),
- };
- } ),
- withDispatch( ( dispatch ) => {
- const { startTyping, stopTyping } = dispatch( 'core/block-editor' );
-
- return {
- onStartTyping: startTyping,
- onStopTyping: stopTyping,
- };
- } ),
- withSafeTimeout,
-] )( ObserveTyping );
+export default withSafeTimeout( ObserveTyping );
diff --git a/packages/block-editor/src/components/page-template-picker/button.js b/packages/block-editor/src/components/page-template-picker/button.js
index 6677fb87af5bc..a45722101c839 100644
--- a/packages/block-editor/src/components/page-template-picker/button.js
+++ b/packages/block-editor/src/components/page-template-picker/button.js
@@ -4,14 +4,11 @@
import { Button } from '@wordpress/components';
const PickerButton = ( props ) => {
- const {
- label,
- onPress,
- } = props;
+ const { icon, label, onPress } = props;
return (
- { label }
+ { icon } { label }
);
};
diff --git a/packages/block-editor/src/components/page-template-picker/button.native.js b/packages/block-editor/src/components/page-template-picker/button.native.js
index 36f9a97eb6c43..9c03d10379f65 100644
--- a/packages/block-editor/src/components/page-template-picker/button.native.js
+++ b/packages/block-editor/src/components/page-template-picker/button.native.js
@@ -1,20 +1,41 @@
/**
* External dependencies
*/
-import { Button } from 'react-native';
+import { TouchableOpacity, Text } from 'react-native';
-const PickerButton = ( props ) => {
- const {
- label,
- onPress,
- } = props;
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { withPreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const PickerButton = ( { icon, label, onPress, getStylesFromColorScheme } ) => {
+ const butonStyles = getStylesFromColorScheme(
+ styles.button,
+ styles.buttonDark
+ );
+ const butonTextStyles = getStylesFromColorScheme(
+ styles.buttonText,
+ styles.buttonTextDark
+ );
return (
- { icon }
+ { label }
+
);
};
-export default PickerButton;
+export default withPreferredColorScheme( PickerButton );
diff --git a/packages/block-editor/src/components/page-template-picker/container.js b/packages/block-editor/src/components/page-template-picker/container.js
index de666e9bfb9ae..26b4aca637234 100644
--- a/packages/block-editor/src/components/page-template-picker/container.js
+++ b/packages/block-editor/src/components/page-template-picker/container.js
@@ -1,8 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import __experimentalBlockListFooter from '../block-list-footer';
+
const Container = ( { children } ) => {
return (
- <>
+ <__experimentalBlockListFooter>
{ children }
-
+
);
};
diff --git a/packages/block-editor/src/components/page-template-picker/container.native.js b/packages/block-editor/src/components/page-template-picker/container.native.js
index d987d01c2638b..d5f49b27aabc1 100644
--- a/packages/block-editor/src/components/page-template-picker/container.native.js
+++ b/packages/block-editor/src/components/page-template-picker/container.native.js
@@ -1,6 +1,26 @@
/**
* External dependencies
*/
-import { View } from 'react-native';
+import { ScrollView } from 'react-native';
-export default View;
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const Container = ( { style, children } ) => {
+ return (
+
+ { children }
+
+ );
+};
+
+export default Container;
diff --git a/packages/block-editor/src/components/page-template-picker/default-templates.js b/packages/block-editor/src/components/page-template-picker/default-templates.js
index e37c051b4f15f..60baaf031f7a3 100644
--- a/packages/block-editor/src/components/page-template-picker/default-templates.js
+++ b/packages/block-editor/src/components/page-template-picker/default-templates.js
@@ -1,6 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+
+/**
+ * External dependencies
+ */
+import memoize from 'memize';
+
const defaultTemplates = [
- { name: 'About', content: 'Visitors will want to know who is on the other side of the page. Use this space to write about yourself, your site, your business, or anything you want. Use the testimonials below to quote others, talking about the same thing โ in their own words.
' },
- { name: 'Contact', content: 'Let\'s talk ๐ Don\'t hesitate to reach out with the contact information below, or send a message using the form.
' },
+ {
+ name: 'About',
+ icon: '๐',
+ content: `
+
+ Visitors will want to know who is on the other side of the page. Use this space to write about yourself, your site, your business, or anything you want. Use the testimonials below to quote others, talking about the same thing โ in their own words.
+
+
+
+ This is sample content, included with the template to illustrate its features. Remove or replace it with your own words and media.
+
+
+
+ What People Say
+
+
+
+ The way to get started is to quit talking and begin doing.
Walt Disney It is our choices, Harry, that show what we truly are, far more than our abilities.
J. K. Rowling Don't cry because it's over, smile because it happened.
Dr. Seuss Letโs build something together.
+
+
+
+ Get in touch!
+
+
+
+ Let's talk ๐ Don't hesitate to reach out with the contact information below, or send a message using the form.
+
+
+
+ Get in Touch
+
+
+
+ 10 Street Road
+
+
+
+ City, 10100
+
+
+
+ USA
+
+
+
+ mail@example.com
+
+
+
+ (555) 555 1234
+
+ `,
+ },
];
-export default defaultTemplates;
+const parsedTemplates = memoize( () =>
+ defaultTemplates.map( ( template ) => ( {
+ ...template,
+ blocks: parse( template.content ),
+ } ) )
+);
+
+export default parsedTemplates;
diff --git a/packages/block-editor/src/components/page-template-picker/picker.js b/packages/block-editor/src/components/page-template-picker/picker.js
index 886c6492e64d0..e708cbf1dec79 100644
--- a/packages/block-editor/src/components/page-template-picker/picker.js
+++ b/packages/block-editor/src/components/page-template-picker/picker.js
@@ -1,42 +1,51 @@
/**
* WordPress dependencies
*/
+import { useState } from '@wordpress/element';
import { parse } from '@wordpress/blocks';
-import { withDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
-import __experimentalBlockListFooter from '../block-list-footer';
import Button from './button';
import Container from './container';
-import defaultTemplates from './default-templates';
+import getDefaultTemplates from './default-templates';
+import Preview from './preview';
+
+const __experimentalPageTemplatePicker = ( {
+ templates = getDefaultTemplates(),
+} ) => {
+ const { editPost } = useDispatch( 'core/editor' );
+ const [ templatePreview, setTemplatePreview ] = useState();
+
+ const onApply = () => {
+ editPost( {
+ title: templatePreview.name,
+ blocks: parse( templatePreview.content ),
+ } );
+ setTemplatePreview( undefined );
+ };
-const __experimentalPageTemplatePicker = ( { templates = defaultTemplates, resetContent } ) => {
return (
- <__experimentalBlockListFooter>
-
- { templates.map( ( { name, content } ) => (
+ <>
+
+ { templates.map( ( template ) => (
resetContent( content ) }
- label={ name }
+ key={ template.name }
+ icon={ template.icon }
+ label={ template.name }
+ onPress={ () => setTemplatePreview( template ) }
/>
) ) }
-
+ setTemplatePreview( undefined ) }
+ onApply={ onApply }
+ />
+
);
};
-export default withDispatch( ( dispatch ) => {
- const {
- resetEditorBlocks,
- } = dispatch( 'core/editor' );
-
- return {
- resetContent: ( html ) => {
- const blocks = parse( html );
- return resetEditorBlocks( blocks );
- },
- };
-} )( __experimentalPageTemplatePicker );
+export default __experimentalPageTemplatePicker;
diff --git a/packages/block-editor/src/components/page-template-picker/preview.js b/packages/block-editor/src/components/page-template-picker/preview.js
new file mode 100644
index 0000000000000..03b1caca9ee26
--- /dev/null
+++ b/packages/block-editor/src/components/page-template-picker/preview.js
@@ -0,0 +1,4 @@
+// Placeholder, only native variant implemented yet
+const Preview = () => null;
+
+export default Preview;
diff --git a/packages/block-editor/src/components/page-template-picker/preview.native.js b/packages/block-editor/src/components/page-template-picker/preview.native.js
new file mode 100644
index 0000000000000..65b19d93ba926
--- /dev/null
+++ b/packages/block-editor/src/components/page-template-picker/preview.native.js
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockEditorProvider, BlockList } from '@wordpress/block-editor';
+import { ModalHeaderBar } from '@wordpress/components';
+import { usePreferredColorScheme } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import { Modal, View, SafeAreaView } from 'react-native';
+
+// We are replicating this here because the one in @wordpress/block-editor always
+// tries to scale the preview and we would need a lot of cross platform code to handle
+// sizes, when we actually want to show the preview at full width.
+//
+// We can make it work here first, then figure out the right way to consolidate
+// both implementations
+const BlockPreview = ( { blocks } ) => {
+ const currentSettings = useSelect( ( select ) => {
+ return select( 'core/block-editor' ).getSettings();
+ } );
+ const settings = {
+ ...currentSettings,
+ readOnly: true,
+ };
+
+ return (
+
+
+
+
+ );
+};
+BlockPreview.displayName = 'BlockPreview';
+
+const Preview = ( props ) => {
+ const { template, onDismiss, onApply } = props;
+ const preferredColorScheme = usePreferredColorScheme();
+ const containerBackgroundColor =
+ preferredColorScheme === 'dark' ? 'black' : 'white';
+
+ if ( template === undefined ) {
+ return null;
+ }
+
+ const leftButton =
+
+
+
+ );
+};
+Preview.displayName = 'TemplatePreview';
+
+export default Preview;
diff --git a/packages/block-editor/src/components/page-template-picker/styles.native.scss b/packages/block-editor/src/components/page-template-picker/styles.native.scss
new file mode 100644
index 0000000000000..8c6a5663f1972
--- /dev/null
+++ b/packages/block-editor/src/components/page-template-picker/styles.native.scss
@@ -0,0 +1,36 @@
+.container {
+ margin: 10px 0;
+}
+
+.content {
+ padding: 0 12px;
+}
+
+.button {
+ background-color: rgba($black, 0.04);
+ border-radius: 20px;
+ flex-direction: row;
+ margin-right: 8px;
+ padding: 9px 18px 9px 14px;
+ align-items: center;
+}
+
+.buttonDark {
+ background-color: rgba($white, 0.08);
+}
+
+.buttonIcon {
+ margin-right: 6px;
+ font-size: 18px;
+}
+
+.buttonText {
+ color: $dark-opacity-800;
+ font-size: 14px;
+ font-weight: 600;
+ letter-spacing: 0.25px;
+}
+
+.buttonTextDark {
+ color: $light-opacity-700;
+}
diff --git a/packages/block-editor/src/components/page-template-picker/use-page-template-picker-visible.js b/packages/block-editor/src/components/page-template-picker/use-page-template-picker-visible.js
index ed764f2221f1f..fba563260e86e 100644
--- a/packages/block-editor/src/components/page-template-picker/use-page-template-picker-visible.js
+++ b/packages/block-editor/src/components/page-template-picker/use-page-template-picker-visible.js
@@ -6,22 +6,20 @@ import { useSelect } from '@wordpress/data';
const __experimentalUsePageTemplatePickerVisible = () => {
return useSelect( ( select ) => {
- const {
- getCurrentPostType,
- } = select( 'core/editor' );
+ const { getCurrentPostType } = select( 'core/editor' );
- const {
- getBlockOrder,
- getBlock,
- getSettings,
- } = select( 'core/block-editor' );
+ const { getBlockOrder, getBlock, getSettings } = select(
+ 'core/block-editor'
+ );
- const isPageTemplatesEnabled = getSettings().__experimentalEnablePageTemplates;
+ const isPageTemplatesEnabled = getSettings()
+ .__experimentalEnablePageTemplates;
const blocks = getBlockOrder();
const isEmptyBlockList = blocks.length === 0;
const firstBlock = ! isEmptyBlockList && getBlock( blocks[ 0 ] );
- const isOnlyUnmodifiedDefault = blocks.length === 1 && isUnmodifiedDefaultBlock( firstBlock );
+ const isOnlyUnmodifiedDefault =
+ blocks.length === 1 && isUnmodifiedDefaultBlock( firstBlock );
const isEmptyContent = isEmptyBlockList || isOnlyUnmodifiedDefault;
const isPage = getCurrentPostType() === 'page';
diff --git a/packages/block-editor/src/components/panel-color-settings/index.js b/packages/block-editor/src/components/panel-color-settings/index.js
index 18e7e48858841..f346684024fb2 100644
--- a/packages/block-editor/src/components/panel-color-settings/index.js
+++ b/packages/block-editor/src/components/panel-color-settings/index.js
@@ -3,10 +3,7 @@
*/
import PanelColorGradientSettings from '../colors-gradients/panel-color-gradient-settings';
-const PanelColorSettings = ( {
- colorSettings,
- ...props
-} ) => {
+const PanelColorSettings = ( { colorSettings, ...props } ) => {
const settings = colorSettings.map(
( { value, onChange, ...otherSettings } ) => ( {
...otherSettings,
diff --git a/packages/block-editor/src/components/panel-color-settings/test/index.js b/packages/block-editor/src/components/panel-color-settings/test/index.js
index de5818c2bc141..4a6c6e5baa3e2 100644
--- a/packages/block-editor/src/components/panel-color-settings/test/index.js
+++ b/packages/block-editor/src/components/panel-color-settings/test/index.js
@@ -14,23 +14,25 @@ describe( 'PanelColorSettings', () => {
let root;
await act( async () => {
- root = create( this._input = x }
+ ref={ ( x ) => ( this._input = x ) }
onChange={ ( event ) => {
this.props.onChange( event.nativeEvent.text );
} }
onFocus={ this.props.onFocus } // always assign onFocus as a props
onBlur={ this.props.onBlur } // always assign onBlur as a props
- fontFamily={ ( this.props.style && this.props.style.fontFamily ) || ( styles[ 'block-editor-plain-text' ].fontFamily ) }
- style={ this.props.style || styles[ 'block-editor-plain-text' ] }
+ fontFamily={
+ ( this.props.style && this.props.style.fontFamily ) ||
+ styles[ 'block-editor-plain-text' ].fontFamily
+ }
+ style={
+ this.props.style || styles[ 'block-editor-plain-text' ]
+ }
/>
);
}
diff --git a/packages/block-editor/src/components/provider/index.js b/packages/block-editor/src/components/provider/index.js
index a9dfbf11430c6..57413c693f1fa 100644
--- a/packages/block-editor/src/components/provider/index.js
+++ b/packages/block-editor/src/components/provider/index.js
@@ -105,19 +105,15 @@ class BlockEditorProvider extends Component {
let isPersistent = isLastBlockChangePersistent();
this.unsubscribe = registry.subscribe( () => {
- const {
- onChange = noop,
- onInput = noop,
- } = this.props;
+ const { onChange = noop, onInput = noop } = this.props;
const newBlocks = getBlocks();
const newIsPersistent = isLastBlockChangePersistent();
if (
- newBlocks !== blocks && (
- this.isSyncingIncomingValue ||
- __unstableIsLastBlockChangeIgnored()
- )
+ newBlocks !== blocks &&
+ ( this.isSyncingIncomingValue ||
+ __unstableIsLastBlockChangeIgnored() )
) {
this.isSyncingIncomingValue = null;
blocks = newBlocks;
@@ -161,11 +157,9 @@ class BlockEditorProvider extends Component {
export default compose( [
withRegistryProvider,
withDispatch( ( dispatch ) => {
- const {
- updateSettings,
- resetBlocks,
- resetSelection,
- } = dispatch( 'core/block-editor' );
+ const { updateSettings, resetBlocks, resetSelection } = dispatch(
+ 'core/block-editor'
+ );
return {
updateSettings,
diff --git a/packages/block-editor/src/components/provider/index.native.js b/packages/block-editor/src/components/provider/index.native.js
index 1d3d46467288c..57413c693f1fa 100644
--- a/packages/block-editor/src/components/provider/index.native.js
+++ b/packages/block-editor/src/components/provider/index.native.js
@@ -1,40 +1,28 @@
+/**
+ * External dependencies
+ */
+import { last, noop } from 'lodash';
+
/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
-import { SlotFillProvider } from '@wordpress/components';
-import { withDispatch, RegistryConsumer } from '@wordpress/data';
-import { createHigherOrderComponent, compose } from '@wordpress/compose';
-
-/** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
+import { withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
/**
- * Higher-order component which renders the original component with the current
- * registry context passed as its `registry` prop.
- *
- * @param {WPComponent} OriginalComponent Original component.
- *
- * @return {WPComponent} Enhanced component.
+ * Internal dependencies
*/
-const withRegistry = createHigherOrderComponent(
- ( OriginalComponent ) => ( props ) => (
-
- { ( registry ) => (
-
- ),
- 'withRegistry'
-);
+import withRegistryProvider from './with-registry-provider';
+
+/** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
class BlockEditorProvider extends Component {
componentDidMount() {
this.props.updateSettings( this.props.settings );
this.props.resetBlocks( this.props.value );
this.attachChangeObserver( this.props.registry );
+ this.isSyncingOutcomingValue = [];
}
componentDidUpdate( prevProps ) {
@@ -43,6 +31,9 @@ class BlockEditorProvider extends Component {
updateSettings,
value,
resetBlocks,
+ selectionStart,
+ selectionEnd,
+ resetSelection,
registry,
} = this.props;
@@ -54,11 +45,28 @@ class BlockEditorProvider extends Component {
this.attachChangeObserver( registry );
}
- if ( this.isSyncingOutcomingValue ) {
- this.isSyncingOutcomingValue = false;
+ if ( this.isSyncingOutcomingValue.includes( value ) ) {
+ // Skip block reset if the value matches expected outbound sync
+ // triggered by this component by a preceding change detection.
+ // Only skip if the value matches expectation, since a reset should
+ // still occur if the value is modified (not equal by reference),
+ // to allow that the consumer may apply modifications to reflect
+ // back on the editor.
+ if ( last( this.isSyncingOutcomingValue ) === value ) {
+ this.isSyncingOutcomingValue = [];
+ }
} else if ( value !== prevProps.value ) {
- this.isSyncingIncomingValue = true;
+ // Reset changing value in all other cases than the sync described
+ // above. Since this can be reached in an update following an out-
+ // bound sync, unset the outbound value to avoid considering it in
+ // subsequent renders.
+ this.isSyncingOutcomingValue = [];
+ this.isSyncingIncomingValue = value;
resetBlocks( value );
+
+ if ( selectionStart && selectionEnd ) {
+ resetSelection( selectionStart, selectionEnd );
+ }
}
}
@@ -87,21 +95,27 @@ class BlockEditorProvider extends Component {
const {
getBlocks,
+ getSelectionStart,
+ getSelectionEnd,
isLastBlockChangePersistent,
+ __unstableIsLastBlockChangeIgnored,
} = registry.select( 'core/block-editor' );
let blocks = getBlocks();
let isPersistent = isLastBlockChangePersistent();
this.unsubscribe = registry.subscribe( () => {
- const {
- onChange,
- onInput,
- } = this.props;
+ const { onChange = noop, onInput = noop } = this.props;
+
const newBlocks = getBlocks();
const newIsPersistent = isLastBlockChangePersistent();
- if ( newBlocks !== blocks && this.isSyncingIncomingValue ) {
- this.isSyncingIncomingValue = false;
+
+ if (
+ newBlocks !== blocks &&
+ ( this.isSyncingIncomingValue ||
+ __unstableIsLastBlockChangeIgnored() )
+ ) {
+ this.isSyncingIncomingValue = null;
blocks = newBlocks;
isPersistent = newIsPersistent;
return;
@@ -112,14 +126,22 @@ class BlockEditorProvider extends Component {
// This happens when a previous input is explicitely marked as persistent.
( newIsPersistent && ! isPersistent )
) {
+ // When knowing the blocks value is changing, assign instance
+ // value to skip reset in subsequent `componentDidUpdate`.
+ if ( newBlocks !== blocks ) {
+ this.isSyncingOutcomingValue.push( newBlocks );
+ }
+
blocks = newBlocks;
isPersistent = newIsPersistent;
- this.isSyncingOutcomingValue = true;
+ const selectionStart = getSelectionStart();
+ const selectionEnd = getSelectionEnd();
+
if ( isPersistent ) {
- onChange( blocks );
+ onChange( blocks, { selectionStart, selectionEnd } );
} else {
- onInput( blocks );
+ onInput( blocks, { selectionStart, selectionEnd } );
}
}
} );
@@ -128,25 +150,21 @@ class BlockEditorProvider extends Component {
render() {
const { children } = this.props;
- return (
-
- { children }
-
- );
+ return children;
}
}
export default compose( [
+ withRegistryProvider,
withDispatch( ( dispatch ) => {
- const {
- updateSettings,
- resetBlocks,
- } = dispatch( 'core/block-editor' );
+ const { updateSettings, resetBlocks, resetSelection } = dispatch(
+ 'core/block-editor'
+ );
return {
updateSettings,
resetBlocks,
+ resetSelection,
};
} ),
- withRegistry,
] )( BlockEditorProvider );
diff --git a/packages/block-editor/src/components/provider/with-registry-provider.js b/packages/block-editor/src/components/provider/with-registry-provider.js
index cdb3b7fe7b2de..60109fea59f3c 100644
--- a/packages/block-editor/src/components/provider/with-registry-provider.js
+++ b/packages/block-editor/src/components/provider/with-registry-provider.js
@@ -2,7 +2,11 @@
* WordPress dependencies
*/
import { useState, useEffect } from '@wordpress/element';
-import { withRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
+import {
+ withRegistry,
+ createRegistry,
+ RegistryProvider,
+} from '@wordpress/data';
import { createHigherOrderComponent } from '@wordpress/compose';
/**
@@ -11,31 +15,44 @@ import { createHigherOrderComponent } from '@wordpress/compose';
import { storeConfig } from '../../store';
import applyMiddlewares from '../../store/middlewares';
-const withRegistryProvider = createHigherOrderComponent( ( WrappedComponent ) => {
- return withRegistry( ( { useSubRegistry = true, registry, ...props } ) => {
- if ( ! useSubRegistry ) {
- return
-
+ return (
+
+
+ );
+ }
);
- } );
-}, 'withRegistryProvider' );
+ },
+ 'withRegistryProvider'
+);
export default withRegistryProvider;
diff --git a/packages/block-editor/src/components/responsive-block-control/index.js b/packages/block-editor/src/components/responsive-block-control/index.js
index c4f47d1169128..07b6a6e5fa874 100644
--- a/packages/block-editor/src/components/responsive-block-control/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/index.js
@@ -5,9 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
-import {
- ToggleControl,
-} from '@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
/**
* Internal dependencies
@@ -25,7 +23,9 @@ function ResponsiveBlockControl( props ) {
isResponsive = false,
defaultLabel = {
id: 'all',
- label: __( 'All' ), /* translators: 'Label. Used to signify a layout property (eg: margin, padding) will apply uniformly to all screensizes.' */
+ label: __(
+ 'All'
+ ) /* translators: 'Label. Used to signify a layout property (eg: margin, padding) will apply uniformly to all screensizes.' */,
},
viewports = [
{
@@ -48,25 +48,42 @@ function ResponsiveBlockControl( props ) {
}
/* translators: 'Toggle control label. Should the property be the same across all screen sizes or unique per screen size.'. %s property value for the control (eg: margin, padding...etc) */
- const toggleControlLabel = toggleLabel || sprintf( __( 'Use the same %s on all screensizes.', ), property );
+ const toggleControlLabel =
+ toggleLabel ||
+ sprintf( __( 'Use the same %s on all screensizes.' ), property );
/* translators: 'Help text for the responsive mode toggle control.' */
- const toggleHelpText = __( 'Toggle between using the same value for all screen sizes or using a unique value per screen size.' );
+ const toggleHelpText = __(
+ 'Toggle between using the same value for all screen sizes or using a unique value per screen size.'
+ );
- const defaultControl = renderDefaultControl(
- { renderDefaultControl(
) );
};
return (
-
- { title }
+
+ { title }
+
{ ! isResponsive && (
-
+
{ defaultControl }
) }
{ isResponsive && (
-
- { ( renderResponsiveControls ? renderResponsiveControls( viewports ) : defaultResponsiveControls() ) }
+
+ { renderResponsiveControls
+ ? renderResponsiveControls( viewports )
+ : defaultResponsiveControls() }
) }
-
);
diff --git a/packages/block-editor/src/components/responsive-block-control/label.js b/packages/block-editor/src/components/responsive-block-control/label.js
index 4637e8a12d2c7..dba8fe9e310c7 100644
--- a/packages/block-editor/src/components/responsive-block-control/label.js
+++ b/packages/block-editor/src/components/responsive-block-control/label.js
@@ -5,15 +5,33 @@ import { useInstanceId } from '@wordpress/compose';
import { _x, sprintf } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
-export default function ResponsiveBlockControlLabel( { property, viewport, desc } ) {
+export default function ResponsiveBlockControlLabel( {
+ property,
+ viewport,
+ desc,
+} ) {
const instanceId = useInstanceId( ResponsiveBlockControlLabel );
- const accessibleLabel = desc || sprintf( _x( 'Controls the %1$s property for %2$s viewports.', 'Text labelling a interface as controlling a given layout property (eg: margin) for a given screen size.' ), property, viewport.label );
+ const accessibleLabel =
+ desc ||
+ sprintf(
+ _x(
+ 'Controls the %1$s property for %2$s viewports.',
+ 'Text labelling a interface as controlling a given layout property (eg: margin) for a given screen size.'
+ ),
+ property,
+ viewport.label
+ );
return (
{ viewport.label }
- { accessibleLabel }
+
+ { accessibleLabel }
+
);
}
diff --git a/packages/block-editor/src/components/responsive-block-control/test/index.js b/packages/block-editor/src/components/responsive-block-control/test/index.js
index 877bddb0dfb91..56045c7341d42 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/test/index.js
@@ -10,9 +10,7 @@ import { uniqueId } from 'lodash';
*/
import { Fragment, useState } from '@wordpress/element';
-import {
- SelectControl,
-} from '@wordpress/components';
+import { SelectControl } from '@wordpress/components';
/**
* Internal dependencies
@@ -57,13 +55,10 @@ const sizeOptions = [
const renderTestDefaultControlComponent = ( labelComponent, device ) => {
return (
-
- { device.label } is used here for testing purposes to ensure we have access
- to details about the device.
+ { device.label } is used here for testing purposes to ensure we
+ have access to details about the device.
);
@@ -77,23 +72,41 @@ describe( 'Basic rendering', () => {
title="Padding"
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
- />, container
+ />,
+ container
);
} );
- const activePropertyLabel = Array.from( container.querySelectorAll( 'legend' ) ).find( ( legend ) => legend.innerHTML === 'Padding' );
+ const activePropertyLabel = Array.from(
+ container.querySelectorAll( 'legend' )
+ ).find( ( legend ) => legend.innerHTML === 'Padding' );
- const activeViewportLabel = Array.from( container.querySelectorAll( 'label' ) ).find( ( label ) => label.innerHTML.includes( 'All' ) );
+ const activeViewportLabel = Array.from(
+ container.querySelectorAll( 'label' )
+ ).find( ( label ) => label.innerHTML.includes( 'All' ) );
- const defaultControl = container.querySelector( `#${ activeViewportLabel.getAttribute( 'for' ) }` );
+ const defaultControl = container.querySelector(
+ `#${ activeViewportLabel.getAttribute( 'for' ) }`
+ );
- const toggleLabel = Array.from( container.querySelectorAll( 'label' ) ).filter( ( label ) => label.innerHTML.includes( 'Use the same padding on all screensizes' ) );
+ const toggleLabel = Array.from(
+ container.querySelectorAll( 'label' )
+ ).filter( ( label ) =>
+ label.innerHTML.includes(
+ 'Use the same padding on all screensizes'
+ )
+ );
- const toggleState = container.querySelector( 'input[type="checkbox"]' ).checked;
+ const toggleState = container.querySelector( 'input[type="checkbox"]' )
+ .checked;
- const defaultControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--default' );
+ const defaultControlGroup = container.querySelector(
+ '.block-editor-responsive-block-control__group--default'
+ );
- const responsiveControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--responsive' );
+ const responsiveControlGroup = container.querySelector(
+ '.block-editor-responsive-block-control__group--responsive'
+ );
expect( container.innerHTML ).not.toBe( '' );
@@ -114,7 +127,8 @@ describe( 'Basic rendering', () => {
, container
+ />,
+ container
);
} );
@@ -127,7 +141,8 @@ describe( 'Basic rendering', () => {
, container
+ />,
+ container
);
} );
@@ -137,10 +152,8 @@ describe( 'Basic rendering', () => {
it( 'should not render without valid default control render prop', () => {
act( () => {
render(
-
, container
+
,
+ container
);
} );
@@ -148,7 +161,8 @@ describe( 'Basic rendering', () => {
} );
it( 'should render with custom label for toggle control when provided', () => {
- const customToggleLabel = 'Utilise a matching padding value on all viewports';
+ const customToggleLabel =
+ 'Utilise a matching padding value on all viewports';
act( () => {
render(
{
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
toggleLabel={ customToggleLabel }
- />, container
+ />,
+ container
);
} );
- const actualToggleLabel = container.querySelector( 'label.components-toggle-control__label' ).innerHTML;
+ const actualToggleLabel = container.querySelector(
+ 'label.components-toggle-control__label'
+ ).innerHTML;
expect( actualToggleLabel ).toEqual( customToggleLabel );
} );
@@ -175,11 +192,14 @@ describe( 'Basic rendering', () => {
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
defaultLabel={ customDefaultControlGroupLabel }
- />, container
+ />,
+ container
);
} );
- const defaultControlLabel = Array.from( container.querySelectorAll( 'label' ) ).find( ( label ) => label.innerHTML.includes( 'Everything' ) );
+ const defaultControlLabel = Array.from(
+ container.querySelectorAll( 'label' )
+ ).find( ( label ) => label.innerHTML.includes( 'Everything' ) );
expect( defaultControlLabel ).not.toBeNull();
} );
@@ -194,12 +214,17 @@ describe( 'Default and Responsive modes', () => {
property="padding"
isResponsive={ true }
renderDefaultControl={ renderTestDefaultControlComponent }
- />, container
+ />,
+ container
);
} );
- const defaultControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--default' );
- const responsiveControlGroup = container.querySelector( '.block-editor-responsive-block-control__group--responsive' );
+ const defaultControlGroup = container.querySelector(
+ '.block-editor-responsive-block-control__group--default'
+ );
+ const responsiveControlGroup = container.querySelector(
+ '.block-editor-responsive-block-control__group--responsive'
+ );
expect( defaultControlGroup ).toBeNull();
expect( responsiveControlGroup ).not.toBeNull();
@@ -225,7 +250,9 @@ describe( 'Default and Responsive modes', () => {
},
];
- const mockRenderDefaultControl = jest.fn( renderTestDefaultControlComponent );
+ const mockRenderDefaultControl = jest.fn(
+ renderTestDefaultControlComponent
+ );
act( () => {
render(
@@ -235,21 +262,30 @@ describe( 'Default and Responsive modes', () => {
isResponsive={ true }
renderDefaultControl={ mockRenderDefaultControl }
viewports={ customViewportSet }
- />, container
+ />,
+ container
);
} );
const defaultRenderControlCall = 1;
// Get array of labels which match those in the custom viewports provided
- const responsiveViewportsLabels = Array.from( container.querySelectorAll( 'label' ) ).filter( ( label ) => {
+ const responsiveViewportsLabels = Array.from(
+ container.querySelectorAll( 'label' )
+ ).filter( ( label ) => {
const labelText = label.innerHTML;
// Is the label one of those in the custom device set?
- return !! customViewportSet.find( ( deviceName ) => labelText.includes( deviceName.label ) );
+ return !! customViewportSet.find( ( deviceName ) =>
+ labelText.includes( deviceName.label )
+ );
} );
- expect( responsiveViewportsLabels ).toHaveLength( customViewportSet.length );
- expect( mockRenderDefaultControl ).toHaveBeenCalledTimes( customViewportSet.length + defaultRenderControlCall );
+ expect( responsiveViewportsLabels ).toHaveLength(
+ customViewportSet.length
+ );
+ expect( mockRenderDefaultControl ).toHaveBeenCalledTimes(
+ customViewportSet.length + defaultRenderControlCall
+ );
} );
it( 'should switch between default and responsive modes when interacting with toggle control', () => {
@@ -270,17 +306,27 @@ describe( 'Default and Responsive modes', () => {
};
act( () => {
- render(
-
- Custom Viewport { label }
+
+ Custom Viewport { label }
+
- { [ 'bold', 'italic', 'link' ].map( ( format ) =>
-
- { ( fills ) => fills.length !== 0 &&
- props ), 'title' ) }
- popoverProps={ POPOVER_PROPS }
- />
+ { ( fills ) =>
+ fills.length !== 0 && (
+ props ),
+ 'title'
+ ) }
+ popoverProps={ POPOVER_PROPS }
+ />
+ )
}
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js
index d39f9b4668eb4..e7be93d4b4310 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js
@@ -7,9 +7,12 @@ import { Toolbar, Slot } from '@wordpress/components';
const FormatToolbar = () => {
return (
- { [ 'bold', 'italic', 'link' ].map( ( format ) =>
-
);
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 8372055b7fc35..6cfbbcc51ac99 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -7,10 +7,22 @@ import { omit } from 'lodash';
/**
* WordPress dependencies
*/
-import { RawHTML, Component, createRef, Platform } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { pasteHandler, children as childrenSource, getBlockTransforms, findTransform, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { withInstanceId, compose } from '@wordpress/compose';
+import {
+ RawHTML,
+ Platform,
+ useRef,
+ useCallback,
+ forwardRef,
+} from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+ pasteHandler,
+ children as childrenSource,
+ getBlockTransforms,
+ findTransform,
+ isUnmodifiedDefaultBlock,
+} from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
import {
__experimentalRichText as RichText,
__unstableCreateElement,
@@ -32,7 +44,7 @@ import { isURL } from '@wordpress/url';
* Internal dependencies
*/
import Autocomplete from '../autocomplete';
-import { withBlockEditContext } from '../block-edit/context';
+import { useBlockEditContext } from '../block-edit';
import { RemoveBrowserShortcuts } from './remove-browser-shortcuts';
import { filePasteHandler } from './file-paste-handler';
import FormatToolbarContainer from './format-toolbar-container';
@@ -55,152 +67,186 @@ function getMultilineTag( multiline ) {
return multiline === true ? 'p' : multiline;
}
-class RichTextWrapper extends Component {
- constructor() {
- super( ...arguments );
- this.ref = createRef();
- this.onEnter = this.onEnter.bind( this );
- this.onSplit = this.onSplit.bind( this );
- this.onPaste = this.onPaste.bind( this );
- this.onDelete = this.onDelete.bind( this );
- this.inputRule = this.inputRule.bind( this );
+function getAllowedFormats( { allowedFormats, formattingControls } ) {
+ if ( ! allowedFormats && ! formattingControls ) {
+ return;
}
- onEnter( { value, onChange, shiftKey } ) {
- const {
- onReplace,
- onSplit,
- multiline,
- markAutomaticChange,
- } = this.props;
- const canSplit = onReplace && onSplit;
-
- if ( onReplace ) {
- const transforms = getBlockTransforms( 'from' )
- .filter( ( { type } ) => type === 'enter' );
- const transformation = findTransform( transforms, ( item ) => {
- return item.regExp.test( value.text );
- } );
-
- if ( transformation ) {
- onReplace( [
- transformation.transform( { content: value.text } ),
- ] );
- markAutomaticChange();
- }
- }
-
- if ( multiline ) {
- if ( shiftKey ) {
- onChange( insert( value, '\n' ) );
- } else if ( canSplit && isEmptyLine( value ) ) {
- this.onSplit( value );
- } else {
- onChange( insertLineSeparator( value ) );
- }
- } else if ( shiftKey || ! canSplit ) {
- onChange( insert( value, '\n' ) );
- } else {
- this.onSplit( value );
- }
+ if ( allowedFormats ) {
+ return allowedFormats;
}
- onDelete( { value, isReverse } ) {
- const { onMerge, onRemove } = this.props;
+ deprecated( 'wp.blockEditor.RichText formattingControls prop', {
+ alternative: 'allowedFormats',
+ } );
- if ( onMerge ) {
- onMerge( ! isReverse );
- }
-
- // Only handle remove on Backspace. This serves dual-purpose of being
- // an intentional user interaction distinguishing between Backspace and
- // Delete to remove the empty field, but also to avoid merge & remove
- // causing destruction of two fields (merge, then removed merged).
- if ( onRemove && isEmpty( value ) && isReverse ) {
- onRemove( ! isReverse );
- }
- }
+ return formattingControls.map( ( name ) => `core/${ name }` );
+}
- onPaste( { value, onChange, html, plainText, files, activeFormats } ) {
+function RichTextWrapper(
+ {
+ children,
+ tagName,
+ value: originalValue,
+ onChange: originalOnChange,
+ isSelected: originalIsSelected,
+ multiline,
+ inlineToolbar,
+ wrapperClassName,
+ className,
+ autocompleters,
+ onReplace,
+ placeholder,
+ keepPlaceholderOnFocus,
+ allowedFormats,
+ formattingControls,
+ withoutInteractiveFormatting,
+ onRemove,
+ onMerge,
+ onSplit,
+ __unstableOnSplitMiddle: onSplitMiddle,
+ identifier,
+ // To do: find a better way to implicitly inherit props.
+ start: startAttr,
+ reversed,
+ style,
+ preserveWhiteSpace,
+ __unstableEmbedURLOnPaste,
+ ...props
+ },
+ forwardedRef
+) {
+ const instanceId = useInstanceId( RichTextWrapper );
+
+ identifier = identifier || instanceId;
+
+ const fallbackRef = useRef();
+ const ref = forwardedRef || fallbackRef;
+ const {
+ clientId,
+ onCaretVerticalPositionChange,
+ isSelected: blockIsSelected,
+ } = useBlockEditContext();
+ const selector = ( select ) => {
const {
- onReplace,
- onSplit,
- tagName,
- canUserUseUnfilteredHTML,
- multiline,
- __unstableEmbedURLOnPaste,
- } = this.props;
-
- // Only process file if no HTML is present.
- // Note: a pasted file may have the URL as plain text.
- if ( files && files.length && ! html ) {
- const content = pasteHandler( {
- HTML: filePasteHandler( files ),
- mode: 'BLOCKS',
- tagName,
- } );
+ isCaretWithinFormattedText,
+ getSelectionStart,
+ getSelectionEnd,
+ getSettings,
+ didAutomaticChange,
+ __unstableGetBlockWithoutInnerBlocks,
+ isMultiSelecting,
+ hasMultiSelection,
+ } = select( 'core/block-editor' );
- // Allows us to ask for this information when we get a report.
- // eslint-disable-next-line no-console
- window.console.log( 'Received items:\n\n', files );
+ const selectionStart = getSelectionStart();
+ const selectionEnd = getSelectionEnd();
+ const {
+ __experimentalCanUserUseUnfilteredHTML,
+ __experimentalUndo: undo,
+ } = getSettings();
- if ( onReplace && isEmpty( value ) ) {
- onReplace( content );
- } else {
- this.onSplit( value, content );
- }
+ let isSelected;
- return;
+ if ( originalIsSelected === undefined ) {
+ isSelected =
+ selectionStart.clientId === clientId &&
+ selectionStart.attributeKey === identifier;
+ } else if ( originalIsSelected ) {
+ isSelected = selectionStart.clientId === clientId;
}
- let mode = onReplace && onSplit ? 'AUTO' : 'INLINE';
-
- if (
- __unstableEmbedURLOnPaste &&
- isEmpty( value ) &&
- isURL( plainText.trim() )
- ) {
- mode = 'BLOCKS';
+ let extraProps = {};
+ if ( Platform.OS === 'native' ) {
+ // If the block of this RichText is unmodified then it's a candidate for replacing when adding a new block.
+ // In order to fix https://github.com/wordpress-mobile/gutenberg-mobile/issues/1126, let's blur on unmount in that case.
+ // This apparently assumes functionality the BlockHlder actually
+ const block =
+ clientId && __unstableGetBlockWithoutInnerBlocks( clientId );
+ const shouldBlurOnUnmount =
+ block && isSelected && isUnmodifiedDefaultBlock( block );
+ extraProps = {
+ shouldBlurOnUnmount,
+ };
}
- const content = pasteHandler( {
- HTML: html,
- plainText,
- mode,
- tagName,
- canUserUseUnfilteredHTML,
- } );
-
- if ( typeof content === 'string' ) {
- let valueToInsert = create( { html: content } );
-
- // If there are active formats, merge them with the pasted formats.
- if ( activeFormats.length ) {
- let index = valueToInsert.formats.length;
-
- while ( index-- ) {
- valueToInsert.formats[ index ] = [
- ...activeFormats,
- ...( valueToInsert.formats[ index ] || [] ),
- ];
- }
- }
+ return {
+ canUserUseUnfilteredHTML: __experimentalCanUserUseUnfilteredHTML,
+ isCaretWithinFormattedText: isCaretWithinFormattedText(),
+ selectionStart: isSelected ? selectionStart.offset : undefined,
+ selectionEnd: isSelected ? selectionEnd.offset : undefined,
+ isSelected,
+ didAutomaticChange: didAutomaticChange(),
+ disabled: isMultiSelecting() || hasMultiSelection(),
+ undo,
+ ...extraProps,
+ };
+ };
+ // This selector must run on every render so the right selection state is
+ // retreived from the store on merge.
+ // To do: fix this somehow.
+ const {
+ canUserUseUnfilteredHTML,
+ isCaretWithinFormattedText,
+ selectionStart,
+ selectionEnd,
+ isSelected,
+ didAutomaticChange,
+ disabled,
+ undo,
+ shouldBlurOnUnmount,
+ } = useSelect( selector );
+ const {
+ __unstableMarkLastChangeAsPersistent,
+ enterFormattedText,
+ exitFormattedText,
+ selectionChange,
+ __unstableMarkAutomaticChange,
+ } = useDispatch( 'core/block-editor' );
+ const multilineTag = getMultilineTag( multiline );
+ const adjustedAllowedFormats = getAllowedFormats( {
+ allowedFormats,
+ formattingControls,
+ } );
+ const hasFormats =
+ ! adjustedAllowedFormats || adjustedAllowedFormats.length > 0;
+ let adjustedValue = originalValue;
+ let adjustedOnChange = originalOnChange;
+
+ // Handle deprecated format.
+ if ( Array.isArray( originalValue ) ) {
+ adjustedValue = childrenSource.toHTML( originalValue );
+ adjustedOnChange = ( newValue ) =>
+ originalOnChange(
+ childrenSource.fromDOM(
+ __unstableCreateElement( document, newValue ).childNodes
+ )
+ );
+ }
- // If the content should be multiline, we should process text
- // separated by a line break as separate lines.
- if ( multiline ) {
- valueToInsert = replace( valueToInsert, /\n+/g, LINE_SEPARATOR );
+ const onSelectionChange = useCallback(
+ ( start, end ) => {
+ selectionChange( clientId, identifier, start, end );
+ },
+ [ clientId, identifier ]
+ );
+
+ const onDelete = useCallback(
+ ( { value, isReverse } ) => {
+ if ( onMerge ) {
+ onMerge( ! isReverse );
}
- onChange( insert( value, valueToInsert ) );
- } else if ( content.length > 0 ) {
- if ( onReplace && isEmpty( value ) ) {
- onReplace( content );
- } else {
- this.onSplit( value, content );
+ // Only handle remove on Backspace. This serves dual-purpose of being
+ // an intentional user interaction distinguishing between Backspace and
+ // Delete to remove the empty field, but also to avoid merge & remove
+ // causing destruction of two fields (merge, then removed merged).
+ if ( onRemove && isEmpty( value ) && isReverse ) {
+ onRemove( ! isReverse );
}
- }
- }
+ },
+ [ onMerge, onRemove ]
+ );
/**
* Signals to the RichText owner that the block can be replaced with two
@@ -211,342 +257,338 @@ class RichTextWrapper extends Component {
* @param {Object} record The rich text value to split.
* @param {Array} pastedBlocks The pasted blocks to insert, if any.
*/
- onSplit( record, pastedBlocks = [] ) {
- const {
- onReplace,
- onSplit,
- __unstableOnSplitMiddle: onSplitMiddle,
- multiline,
- } = this.props;
-
- if ( ! onReplace || ! onSplit ) {
- return;
- }
-
- const blocks = [];
- const [ before, after ] = split( record );
- const hasPastedBlocks = pastedBlocks.length > 0;
- const multilineTag = getMultilineTag( multiline );
-
- // Create a block with the content before the caret if there's no pasted
- // blocks, or if there are pasted blocks and the value is not empty.
- // We do not want a leading empty block on paste, but we do if split
- // with e.g. the enter key.
- if ( ! hasPastedBlocks || ! isEmpty( before ) ) {
- blocks.push( onSplit( toHTMLString( {
- value: before,
- multilineTag,
- } ) ) );
- }
-
- if ( hasPastedBlocks ) {
- blocks.push( ...pastedBlocks );
- } else if ( onSplitMiddle ) {
- blocks.push( onSplitMiddle() );
- }
-
- // If there's pasted blocks, append a block with the content after the
- // caret. Otherwise, do append and empty block if there is no
- // `onSplitMiddle` prop, but if there is and the content is empty, the
- // middle block is enough to set focus in.
- if ( hasPastedBlocks || ! onSplitMiddle || ! isEmpty( after ) ) {
- blocks.push( onSplit( toHTMLString( {
- value: after,
- multilineTag,
- } ) ) );
- }
-
- // If there are pasted blocks, set the selection to the last one.
- // Otherwise, set the selection to the second block.
- const indexToSelect = hasPastedBlocks ? blocks.length - 1 : 1;
-
- onReplace( blocks, indexToSelect );
- }
+ const splitValue = useCallback(
+ ( record, pastedBlocks = [] ) => {
+ if ( ! onReplace || ! onSplit ) {
+ return;
+ }
- inputRule( value, valueToFormat ) {
- const { onReplace, markAutomaticChange } = this.props;
+ const blocks = [];
+ const [ before, after ] = split( record );
+ const hasPastedBlocks = pastedBlocks.length > 0;
+
+ // Create a block with the content before the caret if there's no pasted
+ // blocks, or if there are pasted blocks and the value is not empty.
+ // We do not want a leading empty block on paste, but we do if split
+ // with e.g. the enter key.
+ if ( ! hasPastedBlocks || ! isEmpty( before ) ) {
+ blocks.push(
+ onSplit(
+ toHTMLString( {
+ value: before,
+ multilineTag,
+ } )
+ )
+ );
+ }
- if ( ! onReplace ) {
- return;
- }
+ if ( hasPastedBlocks ) {
+ blocks.push( ...pastedBlocks );
+ } else if ( onSplitMiddle ) {
+ blocks.push( onSplitMiddle() );
+ }
- const { start, text } = value;
- const characterBefore = text.slice( start - 1, start );
+ // If there's pasted blocks, append a block with the content after the
+ // caret. Otherwise, do append and empty block if there is no
+ // `onSplitMiddle` prop, but if there is and the content is empty, the
+ // middle block is enough to set focus in.
+ if ( hasPastedBlocks || ! onSplitMiddle || ! isEmpty( after ) ) {
+ blocks.push(
+ onSplit(
+ toHTMLString( {
+ value: after,
+ multilineTag,
+ } )
+ )
+ );
+ }
- // The character right before the caret must be a plain space.
- if ( characterBefore !== ' ' ) {
- return;
- }
+ // If there are pasted blocks, set the selection to the last one.
+ // Otherwise, set the selection to the second block.
+ const indexToSelect = hasPastedBlocks ? blocks.length - 1 : 1;
+
+ onReplace( blocks, indexToSelect );
+ },
+ [ onReplace, onSplit, multilineTag, onSplitMiddle ]
+ );
+
+ const onEnter = useCallback(
+ ( { value, onChange, shiftKey } ) => {
+ const canSplit = onReplace && onSplit;
+
+ if ( onReplace ) {
+ const transforms = getBlockTransforms( 'from' ).filter(
+ ( { type } ) => type === 'enter'
+ );
+ const transformation = findTransform( transforms, ( item ) => {
+ return item.regExp.test( value.text );
+ } );
+
+ if ( transformation ) {
+ onReplace( [
+ transformation.transform( { content: value.text } ),
+ ] );
+ __unstableMarkAutomaticChange();
+ }
+ }
- const trimmedTextBefore = text.slice( 0, start ).trim();
- const prefixTransforms = getBlockTransforms( 'from' )
- .filter( ( { type } ) => type === 'prefix' );
- const transformation = findTransform( prefixTransforms, ( { prefix } ) => {
- return trimmedTextBefore === prefix;
- } );
+ if ( multiline ) {
+ if ( shiftKey ) {
+ onChange( insert( value, '\n' ) );
+ } else if ( canSplit && isEmptyLine( value ) ) {
+ splitValue( value );
+ } else {
+ onChange( insertLineSeparator( value ) );
+ }
+ } else if ( shiftKey || ! canSplit ) {
+ onChange( insert( value, '\n' ) );
+ } else {
+ splitValue( value );
+ }
+ },
+ [
+ onReplace,
+ onSplit,
+ __unstableMarkAutomaticChange,
+ multiline,
+ splitValue,
+ ]
+ );
+
+ const onPaste = useCallback(
+ ( { value, onChange, html, plainText, files, activeFormats } ) => {
+ // Only process file if no HTML is present.
+ // Note: a pasted file may have the URL as plain text.
+ if ( files && files.length && ! html ) {
+ const content = pasteHandler( {
+ HTML: filePasteHandler( files ),
+ mode: 'BLOCKS',
+ tagName,
+ } );
+
+ // Allows us to ask for this information when we get a report.
+ // eslint-disable-next-line no-console
+ window.console.log( 'Received items:\n\n', files );
+
+ if ( onReplace && isEmpty( value ) ) {
+ onReplace( content );
+ } else {
+ splitValue( value, content );
+ }
- if ( ! transformation ) {
- return;
- }
+ return;
+ }
- const content = valueToFormat( slice( value, start, text.length ) );
- const block = transformation.transform( content );
+ let mode = onReplace && onSplit ? 'AUTO' : 'INLINE';
- onReplace( [ block ] );
- markAutomaticChange();
- }
+ if (
+ __unstableEmbedURLOnPaste &&
+ isEmpty( value ) &&
+ isURL( plainText.trim() )
+ ) {
+ mode = 'BLOCKS';
+ }
- getAllowedFormats() {
- const { allowedFormats, formattingControls } = this.props;
+ const content = pasteHandler( {
+ HTML: html,
+ plainText,
+ mode,
+ tagName,
+ canUserUseUnfilteredHTML,
+ } );
- if ( ! allowedFormats && ! formattingControls ) {
- return;
- }
+ if ( typeof content === 'string' ) {
+ let valueToInsert = create( { html: content } );
- if ( allowedFormats ) {
- return allowedFormats;
- }
+ // If there are active formats, merge them with the pasted formats.
+ if ( activeFormats.length ) {
+ let index = valueToInsert.formats.length;
- deprecated( 'wp.blockEditor.RichText formattingControls prop', {
- alternative: 'allowedFormats',
- } );
+ while ( index-- ) {
+ valueToInsert.formats[ index ] = [
+ ...activeFormats,
+ ...( valueToInsert.formats[ index ] || [] ),
+ ];
+ }
+ }
- return formattingControls.map( ( name ) => `core/${ name }` );
- }
+ // If the content should be multiline, we should process text
+ // separated by a line break as separate lines.
+ if ( multiline ) {
+ valueToInsert = replace(
+ valueToInsert,
+ /\n+/g,
+ LINE_SEPARATOR
+ );
+ }
- render() {
- const {
- children,
+ onChange( insert( value, valueToInsert ) );
+ } else if ( content.length > 0 ) {
+ if ( onReplace && isEmpty( value ) ) {
+ onReplace( content );
+ } else {
+ splitValue( value, content );
+ }
+ }
+ },
+ [
tagName,
- value: originalValue,
- onChange: originalOnChange,
- selectionStart,
- selectionEnd,
- onSelectionChange,
- multiline,
- inlineToolbar,
- wrapperClassName,
- className,
- autocompleters,
onReplace,
- isCaretWithinFormattedText,
- onEnterFormattedText,
- onExitFormattedText,
- isSelected: originalIsSelected,
- onCreateUndoLevel,
- markAutomaticChange,
- didAutomaticChange,
- undo,
- placeholder,
- keepPlaceholderOnFocus,
- // eslint-disable-next-line no-unused-vars
- allowedFormats,
- withoutInteractiveFormatting,
- // eslint-disable-next-line no-unused-vars
- onRemove,
- // eslint-disable-next-line no-unused-vars
- onMerge,
- // eslint-disable-next-line no-unused-vars
onSplit,
- // eslint-disable-next-line no-unused-vars
+ splitValue,
+ __unstableEmbedURLOnPaste,
canUserUseUnfilteredHTML,
- // eslint-disable-next-line no-unused-vars
- instanceId,
- // To do: find a better way to implicitly inherit props.
- start,
- reversed,
- style,
- preserveWhiteSpace,
- disabled,
- ...props
- } = this.props;
- const multilineTag = getMultilineTag( multiline );
-
- const adjustedAllowedFormats = this.getAllowedFormats();
- const hasFormats = ! adjustedAllowedFormats || adjustedAllowedFormats.length > 0;
- let adjustedValue = originalValue;
- let adjustedOnChange = originalOnChange;
-
- // Handle deprecated format.
- if ( Array.isArray( originalValue ) ) {
- adjustedValue = childrenSource.toHTML( originalValue );
- adjustedOnChange = ( newValue ) => originalOnChange( childrenSource.fromDOM(
- __unstableCreateElement( document, newValue ).childNodes
- ) );
- }
+ multiline,
+ ]
+ );
- const content = (
-
- { ( { isSelected, value, onChange, Editable } ) =>
- <>
- { children && children( { value, onChange } ) }
- { isSelected && hasFormats && (
- { ( { listBoxId, activeId, onKeyDown } ) =>
-
-
- }
-
- );
+ const inputRule = useCallback(
+ ( value, valueToFormat ) => {
+ if ( ! onReplace ) {
+ return;
+ }
- if ( ! wrapperClassName ) {
- return content;
- }
+ const { start, text } = value;
+ const characterBefore = text.slice( start - 1, start );
- deprecated( 'wp.blockEditor.RichText wrapperClassName prop', {
- alternative: 'className prop or create your own wrapper div',
- } );
+ // The character right before the caret must be a plain space.
+ if ( characterBefore !== ' ' ) {
+ return;
+ }
- return (
-
- { content }
-
- );
- }
-}
+ const trimmedTextBefore = text.slice( 0, start ).trim();
+ const prefixTransforms = getBlockTransforms( 'from' ).filter(
+ ( { type } ) => type === 'prefix'
+ );
+ const transformation = findTransform(
+ prefixTransforms,
+ ( { prefix } ) => {
+ return trimmedTextBefore === prefix;
+ }
+ );
-const RichTextContainer = compose( [
- withInstanceId,
- withBlockEditContext( ( { clientId, onCaretVerticalPositionChange, isSelected }, ownProps ) => {
- if ( Platform.OS === 'web' ) {
- return { clientId };
- }
- return {
- clientId,
- blockIsSelected: ownProps.isSelected !== undefined ? ownProps.isSelected : isSelected,
- onCaretVerticalPositionChange,
- };
- } ),
- withSelect( ( select, {
- clientId,
- instanceId,
- identifier = instanceId,
- isSelected,
- } ) => {
- const {
- isCaretWithinFormattedText,
- getSelectionStart,
- getSelectionEnd,
- getSettings,
- didAutomaticChange,
- __unstableGetBlockWithoutInnerBlocks,
- isMultiSelecting,
- hasMultiSelection,
- } = select( 'core/block-editor' );
+ if ( ! transformation ) {
+ return;
+ }
- const selectionStart = getSelectionStart();
- const selectionEnd = getSelectionEnd();
- const { __experimentalCanUserUseUnfilteredHTML } = getSettings();
- if ( isSelected === undefined ) {
- isSelected = (
- selectionStart.clientId === clientId &&
- selectionStart.attributeKey === identifier
- );
- } else if ( isSelected ) {
- isSelected = selectionStart.clientId === clientId;
- }
+ const content = valueToFormat( slice( value, start, text.length ) );
+ const block = transformation.transform( content );
+
+ onReplace( [ block ] );
+ __unstableMarkAutomaticChange();
+ },
+ [ onReplace, __unstableMarkAutomaticChange ]
+ );
+
+ const content = (
+
+ { ( {
+ isSelected: nestedIsSelected,
+ value,
+ onChange,
+ onFocus,
+ Editable,
+ } ) => (
+ <>
+ { children && children( { value, onChange, onFocus } ) }
+ { nestedIsSelected && hasFormats && (
+
+ { ( { listBoxId, activeId, onKeyDown } ) => (
+
+
+ ) }
+
+ );
+
+ if ( ! wrapperClassName ) {
+ return content;
+ }
- let extraProps = {};
- if ( Platform.OS === 'native' ) {
- // If the block of this RichText is unmodified then it's a candidate for replacing when adding a new block.
- // In order to fix https://github.com/wordpress-mobile/gutenberg-mobile/issues/1126, let's blur on unmount in that case.
- // This apparently assumes functionality the BlockHlder actually
- const block = clientId && __unstableGetBlockWithoutInnerBlocks( clientId );
- const shouldBlurOnUnmount = block && isSelected && isUnmodifiedDefaultBlock( block );
- extraProps = {
- shouldBlurOnUnmount,
- };
- }
+ deprecated( 'wp.blockEditor.RichText wrapperClassName prop', {
+ alternative: 'className prop or create your own wrapper div',
+ } );
- return {
- canUserUseUnfilteredHTML: __experimentalCanUserUseUnfilteredHTML,
- isCaretWithinFormattedText: isCaretWithinFormattedText(),
- selectionStart: isSelected ? selectionStart.offset : undefined,
- selectionEnd: isSelected ? selectionEnd.offset : undefined,
- isSelected,
- didAutomaticChange: didAutomaticChange(),
- disabled: isMultiSelecting() || hasMultiSelection(),
- ...extraProps,
- };
- } ),
- withDispatch( ( dispatch, {
- clientId,
- instanceId,
- identifier = instanceId,
- } ) => {
- const {
- __unstableMarkLastChangeAsPersistent,
- enterFormattedText,
- exitFormattedText,
- selectionChange,
- __unstableMarkAutomaticChange,
- } = dispatch( 'core/block-editor' );
- const { undo } = dispatch( 'core/editor' );
+ return (
+
+ { content }
+
+ );
+}
- return {
- onCreateUndoLevel: __unstableMarkLastChangeAsPersistent,
- onEnterFormattedText: enterFormattedText,
- onExitFormattedText: exitFormattedText,
- onSelectionChange( start, end ) {
- selectionChange( clientId, identifier, start, end );
- },
- markAutomaticChange: __unstableMarkAutomaticChange,
- undo,
- };
- } ),
-] )( RichTextWrapper );
+const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
-RichTextContainer.Content = ( { value, tagName: Tag, multiline, ...props } ) => {
+ForwardedRichTextContainer.Content = ( {
+ value,
+ tagName: Tag,
+ multiline,
+ ...props
+} ) => {
// Handle deprecated `children` and `node` sources.
if ( Array.isArray( value ) ) {
value = childrenSource.toHTML( value );
@@ -567,11 +609,11 @@ RichTextContainer.Content = ( { value, tagName: Tag, multiline, ...props } ) =>
return content;
};
-RichTextContainer.isEmpty = ( value ) => {
+ForwardedRichTextContainer.isEmpty = ( value ) => {
return ! value || value.length === 0;
};
-RichTextContainer.Content.defaultProps = {
+ForwardedRichTextContainer.Content.defaultProps = {
format: 'string',
value: '',
};
@@ -579,7 +621,7 @@ RichTextContainer.Content.defaultProps = {
/**
* @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/rich-text/README.md
*/
-export default RichTextContainer;
+export default ForwardedRichTextContainer;
export { RichTextShortcut } from './shortcut';
export { RichTextToolbarButton } from './toolbar-button';
export { __unstableRichTextInputEvent } from './input-event';
diff --git a/packages/block-editor/src/components/rich-text/remove-browser-shortcuts.js b/packages/block-editor/src/components/rich-text/remove-browser-shortcuts.js
index 9eee7b641a0e6..d6c061283624d 100644
--- a/packages/block-editor/src/components/rich-text/remove-browser-shortcuts.js
+++ b/packages/block-editor/src/components/rich-text/remove-browser-shortcuts.js
@@ -30,9 +30,11 @@ const HANDLED_SHORTCUTS = [
const SHORTCUTS_ELEMENT = (
{
- return [ shortcut, ( event ) => event.preventDefault() ];
- } ) ) }
+ shortcuts={ fromPairs(
+ HANDLED_SHORTCUTS.map( ( shortcut ) => {
+ return [ shortcut, ( event ) => event.preventDefault() ];
+ } )
+ ) }
/>
);
diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss
index 5d0971d4847c0..bfcf0c0e02e24 100644
--- a/packages/block-editor/src/components/rich-text/style.scss
+++ b/packages/block-editor/src/components/rich-text/style.scss
@@ -16,15 +16,6 @@
font-size: inherit; // This is necessary to override upstream CSS.
}
- &:focus {
- // Removes outline added by the browser.
- outline: none;
-
- *[data-rich-text-format-boundary] {
- border-radius: 2px;
- }
- }
-
[data-rich-text-placeholder] {
pointer-events: none;
}
@@ -36,9 +27,17 @@
opacity: 0.62;
}
- // Could be unset for individual rich text instances.
- &.is-selected:not(.keep-placeholder-on-focus) [data-rich-text-placeholder]::after {
- display: none;
+ &:focus {
+ // Removes outline added by the browser.
+ outline: none;
+
+ [data-rich-text-format-boundary] {
+ border-radius: 2px;
+ }
+
+ &:not(.keep-placeholder-on-focus) [data-rich-text-placeholder]::after {
+ display: none;
+ }
}
}
diff --git a/packages/block-editor/src/components/rich-text/toolbar-button.js b/packages/block-editor/src/components/rich-text/toolbar-button.js
index 2febd82e717c5..e7ff63189fd92 100644
--- a/packages/block-editor/src/components/rich-text/toolbar-button.js
+++ b/packages/block-editor/src/components/rich-text/toolbar-button.js
@@ -4,7 +4,12 @@
import { Fill, ToolbarButton } from '@wordpress/components';
import { displayShortcut } from '@wordpress/keycodes';
-export function RichTextToolbarButton( { name, shortcutType, shortcutCharacter, ...props } ) {
+export function RichTextToolbarButton( {
+ name,
+ shortcutType,
+ shortcutCharacter,
+ ...props
+} ) {
let shortcut;
let fillName = 'RichText.ToolbarControls';
@@ -18,10 +23,7 @@ export function RichTextToolbarButton( { name, shortcutType, shortcutCharacter,
return (
-
);
}
diff --git a/packages/block-editor/src/components/skip-to-selected-block/index.js b/packages/block-editor/src/components/skip-to-selected-block/index.js
index 01087080cc171..581f84c4035e2 100644
--- a/packages/block-editor/src/components/skip-to-selected-block/index.js
+++ b/packages/block-editor/src/components/skip-to-selected-block/index.js
@@ -8,24 +8,31 @@ import { Button } from '@wordpress/components';
/**
* Internal dependencies
*/
-import { getBlockFocusableWrapper } from '../../utils/dom';
+import { getBlockDOMNode } from '../../utils/dom';
const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
const onClick = () => {
- const selectedBlockElement = getBlockFocusableWrapper( selectedBlockClientId );
+ const selectedBlockElement = getBlockDOMNode( selectedBlockClientId );
selectedBlockElement.focus();
};
return (
- selectedBlockClientId &&
-
- { __( 'Skip to the selected block' ) }
-
+ selectedBlockClientId && (
+
+ { __( 'Skip to the selected block' ) }
+
+ )
);
};
export default withSelect( ( select ) => {
return {
- selectedBlockClientId: select( 'core/block-editor' ).getBlockSelectionStart(),
+ selectedBlockClientId: select(
+ 'core/block-editor'
+ ).getBlockSelectionStart(),
};
} )( SkipToSelectedBlock );
diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js
index e032f33c3c576..1b9b7e0e5a0b2 100644
--- a/packages/block-editor/src/components/tool-selector/index.js
+++ b/packages/block-editor/src/components/tool-selector/index.js
@@ -13,11 +13,33 @@ import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { useViewportMatch } from '@wordpress/compose';
-const editIcon =
+
+);
+const selectIcon = (
+
+
+);
function ToolSelector() {
- const isNavigationTool = useSelect( ( select ) => select( 'core/block-editor' ).isNavigationMode(), [] );
+ const isNavigationTool = useSelect(
+ ( select ) => select( 'core/block-editor' ).isNavigationMode(),
+ []
+ );
const { setNavigationMode } = useDispatch( 'core/block-editor' );
const isMediumViewport = useViewportMatch( 'medium' );
if ( ! isMediumViewport ) {
@@ -40,10 +62,7 @@ function ToolSelector() {
) }
renderContent={ () => (
<>
-
+
- { __( 'Tools offer different interactions for block selection & editing. To select, press Escape, to go back to editing, press Enter.' ) }
+ { __(
+ 'Tools offer different interactions for block selection & editing. To select, press Escape, to go back to editing, press Enter.'
+ ) }
) }
diff --git a/packages/block-editor/src/components/typewriter/index.js b/packages/block-editor/src/components/typewriter/index.js
index 99487f7a31cf2..b9b2e18ea6104 100644
--- a/packages/block-editor/src/components/typewriter/index.js
+++ b/packages/block-editor/src/components/typewriter/index.js
@@ -18,12 +18,18 @@ class Typewriter extends Component {
this.ref = createRef();
this.onKeyDown = this.onKeyDown.bind( this );
- this.addSelectionChangeListener = this.addSelectionChangeListener.bind( this );
- this.computeCaretRectOnSelectionChange = this.computeCaretRectOnSelectionChange.bind( this );
+ this.addSelectionChangeListener = this.addSelectionChangeListener.bind(
+ this
+ );
+ this.computeCaretRectOnSelectionChange = this.computeCaretRectOnSelectionChange.bind(
+ this
+ );
this.maintainCaretPosition = this.maintainCaretPosition.bind( this );
this.computeCaretRect = this.computeCaretRect.bind( this );
this.onScrollResize = this.onScrollResize.bind( this );
- this.isSelectionEligibleForScroll = this.isSelectionEligibleForScroll.bind( this );
+ this.isSelectionEligibleForScroll = this.isSelectionEligibleForScroll.bind(
+ this
+ );
}
componentDidMount() {
@@ -36,7 +42,10 @@ class Typewriter extends Component {
componentWillUnmount() {
window.removeEventListener( 'scroll', this.onScrollResize, true );
window.removeEventListener( 'resize', this.onScrollResize, true );
- document.removeEventListener( 'selectionchange', this.computeCaretRectOnSelectionChange );
+ document.removeEventListener(
+ 'selectionchange',
+ this.computeCaretRectOnSelectionChange
+ );
if ( this.onScrollResize.rafId ) {
window.cancelAnimationFrame( this.onScrollResize.rafId );
@@ -61,7 +70,10 @@ class Typewriter extends Component {
* event. Also removes the listener, so it acts as a one-time listener.
*/
computeCaretRectOnSelectionChange() {
- document.removeEventListener( 'selectionchange', this.computeCaretRectOnSelectionChange );
+ document.removeEventListener(
+ 'selectionchange',
+ this.computeCaretRectOnSelectionChange
+ );
this.computeCaretRect();
}
@@ -145,16 +157,16 @@ class Typewriter extends Component {
}
const windowScroll = scrollContainer === document.body;
- const scrollY = windowScroll ?
- window.scrollY :
- scrollContainer.scrollTop;
- const scrollContainerY = windowScroll ?
- 0 :
- scrollContainer.getBoundingClientRect().top;
- const relativeScrollPosition = windowScroll ?
- this.caretRect.top / window.innerHeight :
- ( this.caretRect.top - scrollContainerY ) /
- ( window.innerHeight - scrollContainerY );
+ const scrollY = windowScroll
+ ? window.scrollY
+ : scrollContainer.scrollTop;
+ const scrollContainerY = windowScroll
+ ? 0
+ : scrollContainer.getBoundingClientRect().top;
+ const relativeScrollPosition = windowScroll
+ ? this.caretRect.top / window.innerHeight
+ : ( this.caretRect.top - scrollContainerY ) /
+ ( window.innerHeight - scrollContainerY );
// If the scroll position is at the start, the active editable element
// is the last one, and the caret is positioned within the initial
@@ -172,9 +184,9 @@ class Typewriter extends Component {
return;
}
- const scrollContainerHeight = windowScroll ?
- window.innerHeight :
- scrollContainer.clientHeight;
+ const scrollContainerHeight = windowScroll
+ ? window.innerHeight
+ : scrollContainer.clientHeight;
// Abort if the target scroll position would scroll the caret out of
// view.
@@ -202,7 +214,10 @@ class Typewriter extends Component {
* maintained.
*/
addSelectionChangeListener() {
- document.addEventListener( 'selectionchange', this.computeCaretRectOnSelectionChange );
+ document.addEventListener(
+ 'selectionchange',
+ this.computeCaretRectOnSelectionChange
+ );
}
onKeyDown( event ) {
diff --git a/packages/block-editor/src/components/ungroup-button/icon.js b/packages/block-editor/src/components/ungroup-button/icon.js
index 4ef9e2694bd6e..d71219e469666 100644
--- a/packages/block-editor/src/components/ungroup-button/icon.js
+++ b/packages/block-editor/src/components/ungroup-button/icon.js
@@ -3,6 +3,24 @@
*/
import { SVG, Path } from '@wordpress/components';
-const UngroupSVG =
+
+);
export default UngroupSVG;
diff --git a/packages/block-editor/src/components/ungroup-button/index.native.js b/packages/block-editor/src/components/ungroup-button/index.native.js
index df006897210f9..e3056a5104e9e 100644
--- a/packages/block-editor/src/components/ungroup-button/index.native.js
+++ b/packages/block-editor/src/components/ungroup-button/index.native.js
@@ -6,10 +6,7 @@ import { noop } from 'lodash';
/**
* WordPress dependencies
*/
-import {
- Toolbar,
- ToolbarButton,
-} from '@wordpress/components';
+import { Toolbar, ToolbarButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
@@ -19,10 +16,7 @@ import { compose } from '@wordpress/compose';
*/
import UngroupIcon from './icon';
-export function UngroupButton( {
- onConvertFromGroup,
- isUngroupable = false,
-} ) {
+export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
if ( ! isUngroupable ) {
return null;
}
@@ -39,21 +33,22 @@ export function UngroupButton( {
export default compose( [
withSelect( ( select ) => {
- const {
- getSelectedBlockClientId,
- getBlock,
- } = select( 'core/block-editor' );
+ const { getSelectedBlockClientId, getBlock } = select(
+ 'core/block-editor'
+ );
- const {
- getGroupingBlockName,
- } = select( 'core/blocks' );
+ const { getGroupingBlockName } = select( 'core/blocks' );
const selectedId = getSelectedBlockClientId();
const selectedBlock = getBlock( selectedId );
const groupingBlockName = getGroupingBlockName();
- const isUngroupable = selectedBlock && selectedBlock.innerBlocks && !! selectedBlock.innerBlocks.length && selectedBlock.name === groupingBlockName;
+ const isUngroupable =
+ selectedBlock &&
+ selectedBlock.innerBlocks &&
+ !! selectedBlock.innerBlocks.length &&
+ selectedBlock.name === groupingBlockName;
const innerBlocks = isUngroupable ? selectedBlock.innerBlocks : [];
return {
@@ -63,9 +58,7 @@ export default compose( [
};
} ),
withDispatch( ( dispatch, { clientId, innerBlocks, onToggle = noop } ) => {
- const {
- replaceBlocks,
- } = dispatch( 'core/block-editor' );
+ const { replaceBlocks } = dispatch( 'core/block-editor' );
return {
onConvertFromGroup() {
@@ -73,10 +66,7 @@ export default compose( [
return;
}
- replaceBlocks(
- clientId,
- innerBlocks
- );
+ replaceBlocks( clientId, innerBlocks );
onToggle();
},
diff --git a/packages/block-editor/src/components/url-input/README.md b/packages/block-editor/src/components/url-input/README.md
index 1adbd5b97084f..f2fc0f9d7fb43 100644
--- a/packages/block-editor/src/components/url-input/README.md
+++ b/packages/block-editor/src/components/url-input/README.md
@@ -65,8 +65,8 @@ wp.blocks.registerBlockType( /* ... */, {
```
{% ESNext %}
```js
-const { registerBlockType } = wp.blocks;
-const { URLInputButton } = wp.editor;
+import { registerBlockType } from '@wordpress/blocks';
+import { URLInputButton } from @wordpress/editor';
registerBlockType( /* ... */, {
// ...
@@ -183,8 +183,8 @@ wp.blocks.registerBlockType( /* ... */, {
```
{% ESNext %}
```js
-const { registerBlockType } = wp.blocks;
-const { URLInput } = wp.editor;
+import { registerBlockType } from '@wordpress/blocks';
+import { URLInput } from '@wordpress/editor';
registerBlockType( /* ... */, {
// ...
diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js
index fbaf3eedacb13..e262dce201b3e 100644
--- a/packages/block-editor/src/components/url-input/button.js
+++ b/packages/block-editor/src/components/url-input/button.js
@@ -43,7 +43,7 @@ class URLInputButton extends Component {
className="components-toolbar__control"
isPressed={ !! url }
/>
- { expanded &&
+ { expanded && (
-
- }
+ ) }
);
}
diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
index 9f2e6fd1a7dc8..2ef7b911877c7 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -11,7 +11,13 @@ import scrollIntoView from 'dom-scroll-into-view';
import { __, sprintf, _n } from '@wordpress/i18n';
import { Component, createRef } from '@wordpress/element';
import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
-import { BaseControl, Button, Spinner, withSpokenMessages, Popover } from '@wordpress/components';
+import {
+ BaseControl,
+ Button,
+ Spinner,
+ withSpokenMessages,
+ Popover,
+} from '@wordpress/components';
import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
import { isURL } from '@wordpress/url';
@@ -32,10 +38,15 @@ class URLInput extends Component {
this.bindSuggestionNode = this.bindSuggestionNode.bind( this );
this.autocompleteRef = props.autocompleteRef || createRef();
this.inputRef = createRef();
- this.updateSuggestions = throttle( this.updateSuggestions.bind( this ), 200 );
+ this.updateSuggestions = throttle(
+ this.updateSuggestions.bind( this ),
+ 200
+ );
this.suggestionNodes = [];
+ this.isUpdatingSuggestions = false;
+
this.state = {
suggestions: [],
showSuggestions: false,
@@ -45,19 +56,38 @@ class URLInput extends Component {
componentDidUpdate() {
const { showSuggestions, selectedSuggestion } = this.state;
+
// only have to worry about scrolling selected suggestion into view
// when already expanded
- if ( showSuggestions && selectedSuggestion !== null && ! this.scrollingIntoView ) {
+ if (
+ showSuggestions &&
+ selectedSuggestion !== null &&
+ ! this.scrollingIntoView
+ ) {
this.scrollingIntoView = true;
- scrollIntoView( this.suggestionNodes[ selectedSuggestion ], this.autocompleteRef.current, {
- onlyScrollIfNeeded: true,
- } );
+ scrollIntoView(
+ this.suggestionNodes[ selectedSuggestion ],
+ this.autocompleteRef.current,
+ {
+ onlyScrollIfNeeded: true,
+ }
+ );
this.props.setTimeout( () => {
this.scrollingIntoView = false;
}, 100 );
}
+
+ if ( this.shouldShowInitialSuggestions() ) {
+ this.updateSuggestions();
+ }
+ }
+
+ componentDidMount() {
+ if ( this.shouldShowInitialSuggestions() ) {
+ this.updateSuggestions();
+ }
}
componentWillUnmount() {
@@ -70,18 +100,40 @@ class URLInput extends Component {
};
}
- updateSuggestions( value ) {
+ shouldShowInitialSuggestions() {
+ const { suggestions } = this.state;
+ const {
+ __experimentalShowInitialSuggestions = false,
+ value,
+ } = this.props;
+ return (
+ ! this.isUpdatingSuggestions &&
+ __experimentalShowInitialSuggestions &&
+ ! ( value && value.length ) &&
+ ! ( suggestions && suggestions.length )
+ );
+ }
+
+ updateSuggestions( value = '' ) {
const {
__experimentalFetchLinkSuggestions: fetchLinkSuggestions,
__experimentalHandleURLSuggestions: handleURLSuggestions,
} = this.props;
+
if ( ! fetchLinkSuggestions ) {
return;
}
- // Show the suggestions after typing at least 2 characters
- // and also for URLs
- if ( value.length < 2 || ( ! handleURLSuggestions && isURL( value ) ) ) {
+ const isInitialSuggestions = ! ( value && value.length );
+
+ // Allow a suggestions request if:
+ // - there are at least 2 characters in the search input (except manual searches where
+ // search input length is not required to trigger a fetch)
+ // - this is a direct entry (eg: a URL)
+ if (
+ ! isInitialSuggestions &&
+ ( value.length < 2 || ( ! handleURLSuggestions && isURL( value ) ) )
+ ) {
this.setState( {
showSuggestions: false,
selectedSuggestion: null,
@@ -91,49 +143,69 @@ class URLInput extends Component {
return;
}
+ this.isUpdatingSuggestions = true;
+
this.setState( {
showSuggestions: true,
selectedSuggestion: null,
loading: true,
} );
- const request = fetchLinkSuggestions( value );
-
- request.then( ( suggestions ) => {
- // A fetch Promise doesn't have an abort option. It's mimicked by
- // comparing the request reference in on the instance, which is
- // reset or deleted on subsequent requests or unmounting.
- if ( this.suggestionsRequest !== request ) {
- return;
- }
+ const request = fetchLinkSuggestions( value, {
+ isInitialSuggestions,
+ } );
- this.setState( {
- suggestions,
- loading: false,
- } );
+ request
+ .then( ( suggestions ) => {
+ // A fetch Promise doesn't have an abort option. It's mimicked by
+ // comparing the request reference in on the instance, which is
+ // reset or deleted on subsequent requests or unmounting.
+ if ( this.suggestionsRequest !== request ) {
+ return;
+ }
- if ( !! suggestions.length ) {
- this.props.debouncedSpeak( sprintf( _n(
- '%d result found, use up and down arrow keys to navigate.',
- '%d results found, use up and down arrow keys to navigate.',
- suggestions.length
- ), suggestions.length ), 'assertive' );
- } else {
- this.props.debouncedSpeak( __( 'No results.' ), 'assertive' );
- }
- } ).catch( () => {
- if ( this.suggestionsRequest === request ) {
this.setState( {
+ suggestions,
loading: false,
} );
- }
- } );
+ if ( !! suggestions.length ) {
+ this.props.debouncedSpeak(
+ sprintf(
+ _n(
+ '%d result found, use up and down arrow keys to navigate.',
+ '%d results found, use up and down arrow keys to navigate.',
+ suggestions.length
+ ),
+ suggestions.length
+ ),
+ 'assertive'
+ );
+ } else {
+ this.props.debouncedSpeak(
+ __( 'No results.' ),
+ 'assertive'
+ );
+ }
+ this.isUpdatingSuggestions = false;
+ } )
+ .catch( () => {
+ if ( this.suggestionsRequest === request ) {
+ this.setState( {
+ loading: false,
+ } );
+ this.isUpdatingSuggestions = false;
+ }
+ } );
+
+ // Note that this assignment is handled *before* the async search request
+ // as a Promise always resolves on the next tick of the event loop.
this.suggestionsRequest = request;
}
onChange( event ) {
const inputValue = event.target.value;
+
this.props.onChange( inputValue );
if ( ! this.props.disableSuggestions ) {
this.updateSuggestions( inputValue );
@@ -141,14 +213,16 @@ class URLInput extends Component {
}
onKeyDown( event ) {
- const { showSuggestions, selectedSuggestion, suggestions, loading } = this.state;
+ const {
+ showSuggestions,
+ selectedSuggestion,
+ suggestions,
+ loading,
+ } = this.state;
// If the suggestions are not shown or loading, we shouldn't handle the arrow keys
// We shouldn't preventDefault to allow block arrow keys navigation
- if (
- ( ! showSuggestions || ! suggestions.length || loading ) &&
- this.props.value
- ) {
+ if ( ! showSuggestions || ! suggestions.length || loading ) {
// In the Windows version of Firefox the up and down arrows don't move the caret
// within an input field like they do for Mac Firefox/Chrome/Safari. This causes
// a form of focus trapping that is disruptive to the user experience. This disruption
@@ -170,12 +244,17 @@ class URLInput extends Component {
// When DOWN is pressed, if the caret is not at the end of the text, move it to the
// last position.
case DOWN: {
- if ( this.props.value.length !== event.target.selectionStart ) {
+ if (
+ this.props.value.length !== event.target.selectionStart
+ ) {
event.stopPropagation();
event.preventDefault();
// Set the input caret to the last position
- event.target.setSelectionRange( this.props.value.length, this.props.value.length );
+ event.target.setSelectionRange(
+ this.props.value.length,
+ this.props.value.length
+ );
}
break;
}
@@ -184,13 +263,17 @@ class URLInput extends Component {
return;
}
- const suggestion = this.state.suggestions[ this.state.selectedSuggestion ];
+ const suggestion = this.state.suggestions[
+ this.state.selectedSuggestion
+ ];
switch ( event.keyCode ) {
case UP: {
event.stopPropagation();
event.preventDefault();
- const previousIndex = ! selectedSuggestion ? suggestions.length - 1 : selectedSuggestion - 1;
+ const previousIndex = ! selectedSuggestion
+ ? suggestions.length - 1
+ : selectedSuggestion - 1;
this.setState( {
selectedSuggestion: previousIndex,
} );
@@ -199,7 +282,11 @@ class URLInput extends Component {
case DOWN: {
event.stopPropagation();
event.preventDefault();
- const nextIndex = selectedSuggestion === null || ( selectedSuggestion === suggestions.length - 1 ) ? 0 : selectedSuggestion + 1;
+ const nextIndex =
+ selectedSuggestion === null ||
+ selectedSuggestion === suggestions.length - 1
+ ? 0
+ : selectedSuggestion + 1;
this.setState( {
selectedSuggestion: nextIndex,
} );
@@ -237,12 +324,19 @@ class URLInput extends Component {
this.inputRef.current.focus();
}
- static getDerivedStateFromProps( { value, disableSuggestions }, { showSuggestions, selectedSuggestion } ) {
+ static getDerivedStateFromProps(
+ {
+ value,
+ disableSuggestions,
+ __experimentalShowInitialSuggestions = false,
+ },
+ { showSuggestions }
+ ) {
let shouldShowSuggestions = showSuggestions;
const hasValue = value && value.length;
- if ( ! hasValue ) {
+ if ( ! __experimentalShowInitialSuggestions && ! hasValue ) {
shouldShowSuggestions = false;
}
@@ -251,7 +345,6 @@ class URLInput extends Component {
}
return {
- selectedSuggestion: hasValue ? selectedSuggestion : null,
showSuggestions: shouldShowSuggestions,
};
}
@@ -267,6 +360,7 @@ class URLInput extends Component {
placeholder = __( 'Paste URL or type to search' ),
value = '',
autoFocus = true,
+ __experimentalShowInitialSuggestions = false,
} = this.props;
const {
@@ -275,6 +369,7 @@ class URLInput extends Component {
selectedSuggestion,
loading,
} = this.state;
+
const id = `url-input-control-${ instanceId }`;
const suggestionsListboxId = `block-editor-url-input-suggestions-${ instanceId }`;
@@ -320,49 +415,71 @@ class URLInput extends Component {
aria-expanded={ showSuggestions }
aria-autocomplete="list"
aria-owns={ suggestionsListboxId }
- aria-activedescendant={ selectedSuggestion !== null ? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }` : undefined }
+ aria-activedescendant={
+ selectedSuggestion !== null
+ ? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`
+ : undefined
+ }
ref={ this.inputRef }
/>
- { ( loading ) &&
}
-
- { isFunction( renderSuggestions ) && showSuggestions && !! suggestions.length && renderSuggestions( {
- suggestions,
- selectedSuggestion,
- suggestionsListProps,
- buildSuggestionItemProps,
- isLoading: loading,
- handleSuggestionClick: this.handleOnClick,
- } ) }
-
- { ! isFunction( renderSuggestions ) && showSuggestions && !! suggestions.length &&
-
-
}
+
+ { isFunction( renderSuggestions ) &&
+ showSuggestions &&
+ !! suggestions.length &&
+ renderSuggestions( {
+ suggestions,
+ selectedSuggestion,
+ suggestionsListProps,
+ buildSuggestionItemProps,
+ isLoading: loading,
+ handleSuggestionClick: this.handleOnClick,
+ isInitialSuggestions:
+ __experimentalShowInitialSuggestions &&
+ ! ( value && value.length ),
+ } ) }
+
+ { ! isFunction( renderSuggestions ) &&
+ showSuggestions &&
+ !! suggestions.length && (
+
- { suggestions.map( ( suggestion, index ) => (
- this.handleOnClick( suggestion ) }
- >
- { suggestion.title }
-
- ) ) }
-
-
- }
+
+ { suggestions.map( ( suggestion, index ) => (
+
+ this.handleOnClick( suggestion )
+ }
+ >
+ { suggestion.title }
+
+ ) ) }
+
+
+ ) }
);
/* eslint-enable jsx-a11y/no-autofocus */
@@ -384,7 +501,8 @@ export default compose(
}
const { getSettings } = select( 'core/block-editor' );
return {
- __experimentalFetchLinkSuggestions: getSettings().__experimentalFetchLinkSuggestions,
+ __experimentalFetchLinkSuggestions: getSettings()
+ .__experimentalFetchLinkSuggestions,
};
} )
)( URLInput );
diff --git a/packages/block-editor/src/components/url-input/test/button.js b/packages/block-editor/src/components/url-input/test/button.js
index f9898fd41ea6a..04601dfea51c4 100644
--- a/packages/block-editor/src/components/url-input/test/button.js
+++ b/packages/block-editor/src/components/url-input/test/button.js
@@ -14,19 +14,28 @@ import URLInputButton from '../button';
import '../../../store';
describe( 'URLInputButton', () => {
- const clickEditLink = ( wrapper ) => wrapper.find( 'ForwardRef(Button).components-toolbar__control' ).simulate( 'click' );
+ const clickEditLink = ( wrapper ) =>
+ wrapper
+ .find( 'ForwardRef(Button).components-toolbar__control' )
+ .simulate( 'click' );
it( 'should have a valid class name in the wrapper tag', () => {
const wrapper = shallow(
+
+);
const ImageURLInputUI = ( {
linkDestination,
@@ -65,14 +64,19 @@ const ImageURLInputUI = ( {
};
const stopPropagationRelevantKeys = ( event ) => {
- if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) {
+ if (
+ [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf(
+ event.keyCode
+ ) > -1
+ ) {
// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
event.stopPropagation();
}
};
const startEditLink = useCallback( () => {
- if ( linkDestination === LINK_DESTINATION_MEDIA ||
+ if (
+ linkDestination === LINK_DESTINATION_MEDIA ||
linkDestination === LINK_DESTINATION_ATTACHMENT
) {
setUrlInput( '' );
@@ -137,7 +141,10 @@ const ImageURLInputUI = ( {
// LinkContainer. Detect clicks on autocomplete suggestions using a ref here, and
// return to avoid the popover being closed.
const autocompleteElement = autocompleteRef.current;
- if ( autocompleteElement && autocompleteElement.contains( event.target ) ) {
+ if (
+ autocompleteElement &&
+ autocompleteElement.contains( event.target )
+ ) {
return;
}
setIsOpen( false );
@@ -176,7 +183,12 @@ const ImageURLInputUI = ( {
linkDestination: LINK_DESTINATION_ATTACHMENT,
title: __( 'Attachment Page' ),
url: mediaType === 'image' ? mediaLink : undefined,
- icon:
+
+ ),
},
];
};
@@ -190,8 +202,7 @@ const ImageURLInputUI = ( {
linkDestinationInput = (
find( linkDestinations, ( destination ) => {
return destination.url === value;
- } ) ||
- { linkDestination: LINK_DESTINATION_CUSTOM }
+ } ) || { linkDestination: LINK_DESTINATION_CUSTOM }
).linkDestination;
}
onChangeUrl( {
@@ -218,7 +229,8 @@ const ImageURLInputUI = ( {
@@ -254,10 +269,10 @@ const ImageURLInputUI = ( {
onFocusOutside={ onFocusOutside() }
onClose={ closeLinkUI }
renderSettings={ () => advancedOptions }
- additionalControls={ ! linkEditorValue && (
-
- {
- map( getLinkDestinations(), ( link ) => (
+ additionalControls={
+ ! linkEditorValue && (
+
+ { map( getLinkDestinations(), ( link ) => (
{ link.title }
- ) )
- }
-
- ) }
+ ) ) }
+
+ )
+ }
>
{ ( ! url || isEditingLink ) && (
{ additionalControls && ! showSettings && (
-
+
{ additionalControls }
) }
diff --git a/packages/block-editor/src/components/url-popover/link-viewer.js b/packages/block-editor/src/components/url-popover/link-viewer.js
index bdf657ae42439..570c773124e50 100644
--- a/packages/block-editor/src/components/url-popover/link-viewer.js
+++ b/packages/block-editor/src/components/url-popover/link-viewer.js
@@ -7,10 +7,7 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import {
- ExternalLink,
- Button,
-} from '@wordpress/components';
+import { ExternalLink, Button } from '@wordpress/components';
import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
function LinkViewerUrl( { url, urlLabel, className } ) {
@@ -24,10 +21,7 @@ function LinkViewerUrl( { url, urlLabel, className } ) {
}
return (
-
+
{ urlLabel || filterURLForDisplay( safeDecodeURI( url ) ) }
);
@@ -49,8 +43,18 @@ export default function LinkViewer( {
) }
{ ...props }
>
- (
- Settings
- ) }
- >
+ Settings
}>
Editor
);
@@ -25,16 +21,14 @@ describe( 'URLPopover', () => {
it( 'matches the snapshot when the settings are toggled open', () => {
const wrapper = shallow(
- (
- Settings
- ) }
- >
+ Settings
}>
Editor
);
- const toggleButton = wrapper.find( '.block-editor-url-popover__settings-toggle' );
+ const toggleButton = wrapper.find(
+ '.block-editor-url-popover__settings-toggle'
+ );
expect( toggleButton ).toHaveLength( 1 );
toggleButton.simulate( 'click' );
diff --git a/packages/block-editor/src/components/video-player/gridicon-play.native.js b/packages/block-editor/src/components/video-player/gridicon-play.native.js
index 6f14d04f16a29..037cdfd36272c 100644
--- a/packages/block-editor/src/components/video-player/gridicon-play.native.js
+++ b/packages/block-editor/src/components/video-player/gridicon-play.native.js
@@ -3,5 +3,11 @@
*/
import { Path, SVG } from '@wordpress/components';
-export default
+
+);
diff --git a/packages/block-editor/src/components/video-player/index.native.js b/packages/block-editor/src/components/video-player/index.native.js
index 73c2038a0b457..a409c1d4ad99f 100644
--- a/packages/block-editor/src/components/video-player/index.native.js
+++ b/packages/block-editor/src/components/video-player/index.native.js
@@ -54,17 +54,33 @@ class Video extends Component {
// Tries opening the URL outside of the app
openURL( url ) {
- Linking.canOpenURL( url ).then( ( supported ) => {
- if ( ! supported ) {
- Alert.alert( __( 'Problem opening the video' ), __( 'No application can handle this request. Please install a Web browser.' ) );
- window.console.warn( 'No application found that can open the video with URL: ' + url );
- } else {
- return Linking.openURL( url );
- }
- } ).catch( ( err ) => {
- Alert.alert( __( 'Problem opening the video' ), __( 'An unknown error occurred. Please try again.' ) );
- window.console.error( 'An error occurred while opening the video URL: ' + url, err );
- } );
+ Linking.canOpenURL( url )
+ .then( ( supported ) => {
+ if ( ! supported ) {
+ Alert.alert(
+ __( 'Problem opening the video' ),
+ __(
+ 'No application can handle this request. Please install a Web browser.'
+ )
+ );
+ window.console.warn(
+ 'No application found that can open the video with URL: ' +
+ url
+ );
+ } else {
+ return Linking.openURL( url );
+ }
+ } )
+ .catch( ( err ) => {
+ Alert.alert(
+ __( 'Problem opening the video' ),
+ __( 'An unknown error occurred. Please try again.' )
+ );
+ window.console.error(
+ 'An error occurred while opening the video URL: ' + url,
+ err
+ );
+ } );
}
render() {
@@ -93,14 +109,22 @@ class Video extends Component {
this.setState( { isFullScreen: false } );
} }
/>
- { showPlayButton &&
- // If we add the play icon as a subview to VideoPlayer then react-native-video decides to show control buttons
- // even if we set controls={ false }, so we are adding our play button as a sibling overlay view.
-
-
- }
+ { showPlayButton && (
+ // If we add the play icon as a subview to VideoPlayer then react-native-video decides to show control buttons
+ // even if we set controls={ false }, so we are adding our play button as a sibling overlay view.
+
+
+ ) }
);
}
diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js
index 1806501fff4e7..9c5765ff9cf5e 100644
--- a/packages/block-editor/src/components/warning/index.js
+++ b/packages/block-editor/src/components/warning/index.js
@@ -19,7 +19,10 @@ function Warning( { className, actions, children, secondaryActions } ) {
{ Children.count( actions ) > 0 && (
{ Children.map( actions, ( action, i ) => (
-
+
{ action }
) ) }
@@ -41,11 +44,11 @@ function Warning( { className, actions, children, secondaryActions } ) {
) }
renderContent={ () => (
- { secondaryActions.map( ( item, pos ) =>
+ { secondaryActions.map( ( item, pos ) => (
{ item.title }
- ) }
+ ) ) }
) }
/>
diff --git a/packages/block-editor/src/components/warning/index.native.js b/packages/block-editor/src/components/warning/index.native.js
index dc7e83d16509a..cda7f13a68405 100644
--- a/packages/block-editor/src/components/warning/index.native.js
+++ b/packages/block-editor/src/components/warning/index.native.js
@@ -15,15 +15,32 @@ import { normalizeIconObject } from '@wordpress/blocks';
*/
import styles from './style.scss';
-function Warning( { title, message, icon, iconClass, preferredColorScheme, getStylesFromColorScheme, ...viewProps } ) {
+function Warning( {
+ title,
+ message,
+ icon,
+ iconClass,
+ preferredColorScheme,
+ getStylesFromColorScheme,
+ ...viewProps
+} ) {
icon = icon && normalizeIconObject( icon );
const internalIconClass = 'warning-icon' + '-' + preferredColorScheme;
- const titleStyle = getStylesFromColorScheme( styles.title, styles.titleDark );
- const messageStyle = getStylesFromColorScheme( styles.message, styles.messageDark );
+ const titleStyle = getStylesFromColorScheme(
+ styles.title,
+ styles.titleDark
+ );
+ const messageStyle = getStylesFromColorScheme(
+ styles.message,
+ styles.messageDark
+ );
return (
{ icon && (
@@ -34,12 +51,8 @@ function Warning( { title, message, icon, iconClass, preferredColorScheme, getSt
/>
) }
- { title && (
- { title }
- ) }
- { message && (
- { message }
- ) }
+ { title && { title } }
+ { message && { message } }
);
}
diff --git a/packages/block-editor/src/components/warning/test/index.js b/packages/block-editor/src/components/warning/test/index.js
index f1a10c4e6fbc3..b8fcdbee4e490 100644
--- a/packages/block-editor/src/components/warning/test/index.js
+++ b/packages/block-editor/src/components/warning/test/index.js
@@ -19,23 +19,35 @@ describe( 'Warning', () => {
const wrapper = shallow( Message );
+ const wrapper = shallow(
+
+ Message
+
+ );
const actions = wrapper.find( '.block-editor-warning__secondary' );
diff --git a/packages/block-editor/src/components/writing-flow/focus-capture.js b/packages/block-editor/src/components/writing-flow/focus-capture.js
index 20e4237e63a00..8440a3097e042 100644
--- a/packages/block-editor/src/components/writing-flow/focus-capture.js
+++ b/packages/block-editor/src/components/writing-flow/focus-capture.js
@@ -13,7 +13,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
-import { getBlockFocusableWrapper } from '../../utils/dom';
+import { getBlockDOMNode } from '../../utils/dom';
/**
* Renders focus capturing areas to redirect focus to the selected block if not
@@ -30,66 +30,79 @@ import { getBlockFocusableWrapper } from '../../utils/dom';
*
* @return {WPElement} The focus capture element.
*/
-const FocusCapture = forwardRef( ( {
- selectedClientId,
- isReverse,
- containerRef,
- noCapture,
-}, ref ) => {
- const isNavigationMode = useSelect( ( select ) =>
- select( 'core/block-editor' ).isNavigationMode()
- );
- const { setNavigationMode } = useDispatch( 'core/block-editor' );
+const FocusCapture = forwardRef(
+ (
+ {
+ selectedClientId,
+ isReverse,
+ containerRef,
+ noCapture,
+ hasMultiSelection,
+ multiSelectionContainer,
+ },
+ ref
+ ) => {
+ const isNavigationMode = useSelect( ( select ) =>
+ select( 'core/block-editor' ).isNavigationMode()
+ );
+ const { setNavigationMode } = useDispatch( 'core/block-editor' );
- function onFocus() {
- // Do not capture incoming focus if set by us in WritingFlow.
- if ( noCapture.current ) {
- delete noCapture.current;
- return;
- }
+ function onFocus() {
+ // Do not capture incoming focus if set by us in WritingFlow.
+ if ( noCapture.current ) {
+ noCapture.current = null;
+ return;
+ }
- // When focus coming in from out of the block list, and no block is
- // selected, enable Navigation mode and select the first or last block
- // depending on the direction.
- if ( ! selectedClientId ) {
- setNavigationMode( true );
+ // When focus coming in from out of the block list, and no block is
+ // selected, enable Navigation mode and select the first or last block
+ // depending on the direction.
+ if ( ! selectedClientId ) {
+ if ( hasMultiSelection ) {
+ multiSelectionContainer.current.focus();
+ return;
+ }
- const tabbables = focus.tabbable.find( containerRef.current );
+ setNavigationMode( true );
- if ( tabbables.length ) {
- if ( isReverse ) {
- last( tabbables ).focus();
- } else {
- first( tabbables ).focus();
+ const tabbables = focus.tabbable.find( containerRef.current );
+
+ if ( tabbables.length ) {
+ if ( isReverse ) {
+ last( tabbables ).focus();
+ } else {
+ first( tabbables ).focus();
+ }
}
- }
- return;
- }
+ return;
+ }
- // If there is a selected block, move focus to the first or last
- // tabbable element depending on the direction.
- const wrapper = getBlockFocusableWrapper( selectedClientId );
+ // If there is a selected block, move focus to the first or last
+ // tabbable element depending on the direction.
+ const wrapper = getBlockDOMNode( selectedClientId );
- if ( isReverse ) {
- const tabbables = focus.tabbable.find( wrapper );
- last( tabbables ).focus();
- } else {
- wrapper.focus();
+ if ( isReverse ) {
+ const tabbables = focus.tabbable.find( wrapper );
+ const lastTabbable = last( tabbables ) || wrapper;
+ lastTabbable.focus();
+ } else {
+ wrapper.focus();
+ }
}
- }
- return (
-
- );
-} );
+ return (
+
+ );
+ }
+);
export default FocusCapture;
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index 0a1c5ffcf3cef..91b0dcfe274ec 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -2,11 +2,12 @@
* External dependencies
*/
import { overEvery, find, findLast, reverse, first, last } from 'lodash';
+import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { useRef } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
import {
computeCaretRect,
focus,
@@ -17,8 +18,17 @@ import {
placeCaretAtVerticalEdge,
isEntirelySelected,
} from '@wordpress/dom';
-import { UP, DOWN, LEFT, RIGHT, TAB, isKeyboardEvent } from '@wordpress/keycodes';
+import {
+ UP,
+ DOWN,
+ LEFT,
+ RIGHT,
+ TAB,
+ isKeyboardEvent,
+ ESCAPE,
+} from '@wordpress/keycodes';
import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
@@ -27,7 +37,9 @@ import {
isBlockFocusStop,
isInSameBlock,
hasInnerBlocksContext,
- getBlockFocusableWrapper,
+ isInsideRootBlock,
+ getBlockDOMNode,
+ getBlockClientId,
} from '../../utils/dom';
import FocusCapture from './focus-capture';
@@ -61,7 +73,7 @@ const isTabbableTextField = overEvery( [
* @return {boolean} Whether element should consider edge navigation.
*/
export function isNavigationCandidate( element, keyCode, hasModifier ) {
- const isVertical = ( keyCode === UP || keyCode === DOWN );
+ const isVertical = keyCode === UP || keyCode === DOWN;
// Currently, all elements support unmodified vertical navigation.
if ( isVertical && ! hasModifier ) {
@@ -84,7 +96,7 @@ export function isNavigationCandidate( element, keyCode, hasModifier ) {
*
* @return {?Element} Optimal tab target, if one exists.
*/
-function getClosestTabbable( target, isReverse, containerElement ) {
+export function getClosestTabbable( target, isReverse, containerElement ) {
// Since the current focus target is not guaranteed to be a text field,
// find all focusables. Tabbability is considered later.
let focusableNodes = focus.focusable.find( containerElement );
@@ -96,7 +108,9 @@ function getClosestTabbable( target, isReverse, containerElement ) {
// Consider as candidates those focusables after the current target.
// It's assumed this can only be reached if the target is focusable
// (on its keydown event), so no need to verify it exists in the set.
- focusableNodes = focusableNodes.slice( focusableNodes.indexOf( target ) + 1 );
+ focusableNodes = focusableNodes.slice(
+ focusableNodes.indexOf( target ) + 1
+ );
function isTabCandidate( node, i, array ) {
// Not a candidate if the node is not tabbable.
@@ -128,7 +142,11 @@ function getClosestTabbable( target, isReverse, containerElement ) {
// In case of block focus stop, check to see if there's a better
// text field candidate within.
- for ( let offset = 1, nextNode; ( nextNode = array[ i + offset ] ); offset++ ) {
+ for (
+ let offset = 1, nextNode;
+ ( nextNode = array[ i + offset ] );
+ offset++
+ ) {
// Abort if no longer testing descendents of focus stop.
if ( ! node.contains( nextNode ) ) {
break;
@@ -160,6 +178,9 @@ function selector( select ) {
hasMultiSelection,
getBlockOrder,
isNavigationMode,
+ isSelectionEnabled,
+ getBlockSelectionStart,
+ isMultiSelecting,
} = select( 'core/block-editor' );
const selectedBlockClientId = getSelectedBlockClientId();
@@ -169,20 +190,32 @@ function selector( select ) {
return {
selectedBlockClientId,
selectionStartClientId,
- selectionBeforeEndClientId: getPreviousBlockClientId( selectionEndClientId || selectedBlockClientId ),
- selectionAfterEndClientId: getNextBlockClientId( selectionEndClientId || selectedBlockClientId ),
+ selectionBeforeEndClientId: getPreviousBlockClientId(
+ selectionEndClientId || selectedBlockClientId
+ ),
+ selectionAfterEndClientId: getNextBlockClientId(
+ selectionEndClientId || selectedBlockClientId
+ ),
selectedFirstClientId: getFirstMultiSelectedBlockClientId(),
selectedLastClientId: getLastMultiSelectedBlockClientId(),
hasMultiSelection: hasMultiSelection(),
blocks: getBlockOrder(),
isNavigationMode: isNavigationMode(),
+ isSelectionEnabled: isSelectionEnabled(),
+ blockSelectionStart: getBlockSelectionStart(),
+ isMultiSelecting: isMultiSelecting(),
};
}
+/**
+ * Handles selection and navigation across blocks. This component should be
+ * wrapped around BlockList.
+ */
export default function WritingFlow( { children } ) {
const container = useRef();
const focusCaptureBeforeRef = useRef();
const focusCaptureAfterRef = useRef();
+ const multiSelectionContainer = useRef();
const entirelySelected = useRef();
@@ -195,10 +228,6 @@ export default function WritingFlow( { children } ) {
// browser behaviour across blocks.
const verticalRect = useRef();
- function onMouseDown() {
- verticalRect.current = null;
- }
-
const {
selectedBlockClientId,
selectionStartClientId,
@@ -209,17 +238,63 @@ export default function WritingFlow( { children } ) {
hasMultiSelection,
blocks,
isNavigationMode,
- } = useSelect( selector );
+ isSelectionEnabled,
+ blockSelectionStart,
+ isMultiSelecting,
+ } = useSelect( selector, [] );
const {
multiSelect,
selectBlock,
clearSelectedBlock,
+ setNavigationMode,
} = useDispatch( 'core/block-editor' );
+ function onMouseDown( event ) {
+ verticalRect.current = null;
+
+ // Clicking inside a selected block should exit navigation mode.
+ if (
+ isNavigationMode &&
+ selectedBlockClientId &&
+ isInsideRootBlock(
+ getBlockDOMNode( selectedBlockClientId ),
+ event.target
+ )
+ ) {
+ setNavigationMode( false );
+ }
+
+ // Multi-select blocks when Shift+clicking.
+ if (
+ isSelectionEnabled &&
+ // The main button.
+ // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+ event.button === 0
+ ) {
+ const clientId = getBlockClientId( event.target );
+
+ if ( clientId ) {
+ if ( event.shiftKey ) {
+ if ( blockSelectionStart !== clientId ) {
+ multiSelect( blockSelectionStart, clientId );
+ event.preventDefault();
+ }
+ // Allow user to escape out of a multi-selection to a singular
+ // selection of a block via click. This is handled here since
+ // focus handling excludes blocks when there is multiselection,
+ // as focus can be incurred by starting a multiselection (focus
+ // moved to first block's multi-controls).
+ } else if ( hasMultiSelection ) {
+ selectBlock( clientId );
+ }
+ }
+ }
+ }
+
function expandSelection( isReverse ) {
- const nextSelectionEndClientId = isReverse ?
- selectionBeforeEndClientId :
- selectionAfterEndClientId;
+ const nextSelectionEndClientId = isReverse
+ ? selectionBeforeEndClientId
+ : selectionAfterEndClientId;
if ( nextSelectionEndClientId ) {
multiSelect(
@@ -230,7 +305,9 @@ export default function WritingFlow( { children } ) {
}
function moveSelection( isReverse ) {
- const focusedBlockClientId = isReverse ? selectedFirstClientId : selectedLastClientId;
+ const focusedBlockClientId = isReverse
+ ? selectedFirstClientId
+ : selectedLastClientId;
if ( focusedBlockClientId ) {
selectBlock( focusedBlockClientId );
@@ -249,7 +326,11 @@ export default function WritingFlow( { children } ) {
* @return {boolean} Whether field is at edge for tab transition.
*/
function isTabbableEdge( target, isReverse ) {
- const closestTabbable = getClosestTabbable( target, isReverse, container.current );
+ const closestTabbable = getClosestTabbable(
+ target,
+ isReverse,
+ container.current
+ );
return ! closestTabbable || ! isInSameBlock( target, closestTabbable );
}
@@ -260,26 +341,30 @@ export default function WritingFlow( { children } ) {
const isLeft = keyCode === LEFT;
const isRight = keyCode === RIGHT;
const isTab = keyCode === TAB;
+ const isEscape = keyCode === ESCAPE;
const isReverse = isUp || isLeft;
const isHorizontal = isLeft || isRight;
const isVertical = isUp || isDown;
const isNav = isHorizontal || isVertical;
const isShift = event.shiftKey;
- const hasModifier = isShift || event.ctrlKey || event.altKey || event.metaKey;
+ const hasModifier =
+ isShift || event.ctrlKey || event.altKey || event.metaKey;
const isNavEdge = isVertical ? isVerticalEdge : isHorizontalEdge;
// In navigation mode, tab and arrows navigate from block to block.
if ( isNavigationMode ) {
const navigateUp = ( isTab && isShift ) || isUp;
const navigateDown = ( isTab && ! isShift ) || isDown;
- const focusedBlockUid = navigateUp ? selectionBeforeEndClientId : selectionAfterEndClientId;
+ const focusedBlockUid = navigateUp
+ ? selectionBeforeEndClientId
+ : selectionAfterEndClientId;
if ( navigateDown || navigateUp ) {
if ( focusedBlockUid ) {
event.preventDefault();
selectBlock( focusedBlockUid );
} else if ( isTab && selectedBlockClientId ) {
- const wrapper = getBlockFocusableWrapper( selectedBlockClientId );
+ const wrapper = getBlockDOMNode( selectedBlockClientId );
let nextTabbable;
if ( navigateDown ) {
@@ -299,36 +384,54 @@ export default function WritingFlow( { children } ) {
return;
}
- const clientId = selectedBlockClientId || selectionStartClientId;
-
// In Edit mode, Tab should focus the first tabbable element after the
// content, which is normally the sidebar (with block controls) and
// Shift+Tab should focus the first tabbable element before the content,
// which is normally the block toolbar.
// Arrow keys can be used, and Tab and arrow keys can be used in
// Navigation mode (press Esc), to navigate through blocks.
- if ( isTab && clientId ) {
- const wrapper = getBlockFocusableWrapper( clientId );
+ if ( selectedBlockClientId ) {
+ if ( isTab ) {
+ const wrapper = getBlockDOMNode( selectedBlockClientId );
+
+ if ( isShift ) {
+ if ( target === wrapper ) {
+ // Disable focus capturing on the focus capture element, so
+ // it doesn't refocus this block and so it allows default
+ // behaviour (moving focus to the next tabbable element).
+ noCapture.current = true;
+ focusCaptureBeforeRef.current.focus();
+ return;
+ }
+ } else {
+ const tabbables = focus.tabbable.find( wrapper );
+ const lastTabbable = last( tabbables ) || wrapper;
+
+ if ( target === lastTabbable ) {
+ // See comment above.
+ noCapture.current = true;
+ focusCaptureAfterRef.current.focus();
+ return;
+ }
+ }
+ } else if ( isEscape ) {
+ setNavigationMode( true );
+ }
+ } else if (
+ hasMultiSelection &&
+ isTab &&
+ target === multiSelectionContainer.current
+ ) {
+ // See comment above.
+ noCapture.current = true;
if ( isShift ) {
- if ( target === wrapper ) {
- // Disable focus capturing on the focus capture element, so
- // it doesn't refocus this block and so it allows default
- // behaviour (moving focus to the next tabbable element).
- noCapture.current = true;
- focusCaptureBeforeRef.current.focus();
- return;
- }
+ focusCaptureBeforeRef.current.focus();
} else {
- const tabbables = focus.tabbable.find( wrapper );
-
- if ( target === last( tabbables ) ) {
- // See comment above.
- noCapture.current = true;
- focusCaptureAfterRef.current.focus();
- return;
- }
+ focusCaptureAfterRef.current.focus();
}
+
+ return;
}
// When presing any key other than up or down, the initial vertical
@@ -358,7 +461,11 @@ export default function WritingFlow( { children } ) {
// have been set by the browser earlier in this call stack. We
// need check the previous result, otherwise all blocks will be
// selected right away.
- if ( target.isContentEditable ? entirelySelected.current : isEntirelySelected( target ) ) {
+ if (
+ target.isContentEditable
+ ? entirelySelected.current
+ : isEntirelySelected( target )
+ ) {
multiSelect( first( blocks ), last( blocks ) );
event.preventDefault();
}
@@ -386,20 +493,16 @@ export default function WritingFlow( { children } ) {
// In the case of RTL scripts, right means previous and left means next,
// which is the exact reverse of LTR.
const { direction } = getComputedStyle( target );
- const isReverseDir = direction === 'rtl' ? ( ! isReverse ) : isReverse;
+ const isReverseDir = direction === 'rtl' ? ! isReverse : isReverse;
if ( isShift ) {
if (
- (
- // Ensure that there is a target block.
- ( isReverse && selectionBeforeEndClientId ) ||
- ( ! isReverse && selectionAfterEndClientId )
- ) && (
- hasMultiSelection || (
- isTabbableEdge( target, isReverse ) &&
- isNavEdge( target, isReverse )
- )
- )
+ // Ensure that there is a target block.
+ ( ( isReverse && selectionBeforeEndClientId ) ||
+ ( ! isReverse && selectionAfterEndClientId ) ) &&
+ ( hasMultiSelection ||
+ ( isTabbableEdge( target, isReverse ) &&
+ isNavEdge( target, isReverse ) ) )
) {
// Shift key is down, and there is multi selection or we're at
// the end of the current block.
@@ -411,14 +514,30 @@ export default function WritingFlow( { children } ) {
moveSelection( isReverse );
event.preventDefault();
} else if ( isVertical && isVerticalEdge( target, isReverse ) ) {
- const closestTabbable = getClosestTabbable( target, isReverse, container.current );
+ const closestTabbable = getClosestTabbable(
+ target,
+ isReverse,
+ container.current
+ );
if ( closestTabbable ) {
- placeCaretAtVerticalEdge( closestTabbable, isReverse, verticalRect.current );
+ placeCaretAtVerticalEdge(
+ closestTabbable,
+ isReverse,
+ verticalRect.current
+ );
event.preventDefault();
}
- } else if ( isHorizontal && getSelection().isCollapsed && isHorizontalEdge( target, isReverseDir ) ) {
- const closestTabbable = getClosestTabbable( target, isReverseDir, container.current );
+ } else if (
+ isHorizontal &&
+ getSelection().isCollapsed &&
+ isHorizontalEdge( target, isReverseDir )
+ ) {
+ const closestTabbable = getClosestTabbable(
+ target,
+ isReverseDir,
+ container.current
+ );
placeCaretAtHorizontalEdge( closestTabbable, isReverseDir );
event.preventDefault();
}
@@ -432,31 +551,55 @@ export default function WritingFlow( { children } ) {
}
}
- const selectedClientId = selectedBlockClientId || selectionStartClientId;
+ useEffect( () => {
+ if ( hasMultiSelection && ! isMultiSelecting ) {
+ multiSelectionContainer.current.focus();
+ }
+ }, [ hasMultiSelection, isMultiSelecting ] );
+
+ const className = classnames( 'block-editor-writing-flow', {
+ 'is-navigate-mode': isNavigationMode,
+ } );
// Disable reason: Wrapper itself is non-interactive, but must capture
// bubbling events from children to determine focus transition intents.
/* eslint-disable jsx-a11y/no-static-element-interactions */
return (
-
+
{
it( 'should return true if vertically navigating input without modifier', () => {
[ UP, DOWN ].forEach( ( keyCode ) => {
- const result = isNavigationCandidate( elements.input, keyCode, false );
+ const result = isNavigationCandidate(
+ elements.input,
+ keyCode,
+ false
+ );
expect( result ).toBe( true );
} );
@@ -27,7 +31,11 @@ describe( 'isNavigationCandidate', () => {
it( 'should return false if vertically navigating input with modifier', () => {
[ UP, DOWN ].forEach( ( keyCode ) => {
- const result = isNavigationCandidate( elements.input, keyCode, true );
+ const result = isNavigationCandidate(
+ elements.input,
+ keyCode,
+ true
+ );
expect( result ).toBe( false );
} );
@@ -35,7 +43,11 @@ describe( 'isNavigationCandidate', () => {
it( 'should return false if horizontally navigating input', () => {
[ LEFT, RIGHT ].forEach( ( keyCode ) => {
- const result = isNavigationCandidate( elements.input, keyCode, false );
+ const result = isNavigationCandidate(
+ elements.input,
+ keyCode,
+ false
+ );
expect( result ).toBe( false );
} );
@@ -43,7 +55,11 @@ describe( 'isNavigationCandidate', () => {
it( 'should return true if horizontally navigating non-input', () => {
[ LEFT, RIGHT ].forEach( ( keyCode ) => {
- const result = isNavigationCandidate( elements.contentEditable, keyCode, false );
+ const result = isNavigationCandidate(
+ elements.contentEditable,
+ keyCode,
+ false
+ );
expect( result ).toBe( true );
} );
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index bd04ecd554a36..cfded941725ec 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/packages/block-editor/src/hooks/align.js
@@ -9,7 +9,11 @@ import { assign, get, has, includes, without } from 'lodash';
*/
import { createHigherOrderComponent } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
-import { getBlockSupport, getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import {
+ getBlockSupport,
+ getBlockType,
+ hasBlockSupport,
+} from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
/**
@@ -47,7 +51,11 @@ const WIDE_ALIGNMENTS = [ 'wide', 'full' ];
*
* @return {string[]} Valid alignments.
*/
-export function getValidAlignments( blockAlign, hasWideBlockSupport = true, hasWideEnabled = true ) {
+export function getValidAlignments(
+ blockAlign,
+ hasWideBlockSupport = true,
+ hasWideEnabled = true
+) {
let validAlignments;
if ( Array.isArray( blockAlign ) ) {
validAlignments = blockAlign;
@@ -99,42 +107,44 @@ export function addAttribute( settings ) {
* @return {Function} Wrapped component
*/
export const withToolbarControls = createHigherOrderComponent(
- ( BlockEdit ) => (
- ( props ) => {
- const { name: blockName } = props;
- // Compute valid alignments without taking into account,
- // if the theme supports wide alignments or not.
- // BlockAlignmentToolbar takes into account the theme support.
- const validAlignments = getValidAlignments(
- getBlockSupport( blockName, 'align' ),
- hasBlockSupport( blockName, 'alignWide', true ),
- );
-
- const updateAlignment = ( nextAlign ) => {
- if ( ! nextAlign ) {
- const blockType = getBlockType( props.name );
- const blockDefaultAlign = get( blockType, [ 'attributes', 'align', 'default' ] );
- if ( blockDefaultAlign ) {
- nextAlign = '';
- }
+ ( BlockEdit ) => ( props ) => {
+ const { name: blockName } = props;
+ // Compute valid alignments without taking into account,
+ // if the theme supports wide alignments or not.
+ // BlockAlignmentToolbar takes into account the theme support.
+ const validAlignments = getValidAlignments(
+ getBlockSupport( blockName, 'align' ),
+ hasBlockSupport( blockName, 'alignWide', true )
+ );
+
+ const updateAlignment = ( nextAlign ) => {
+ if ( ! nextAlign ) {
+ const blockType = getBlockType( props.name );
+ const blockDefaultAlign = get( blockType, [
+ 'attributes',
+ 'align',
+ 'default',
+ ] );
+ if ( blockDefaultAlign ) {
+ nextAlign = '';
}
- props.setAttributes( { align: nextAlign } );
- };
-
- return [
- validAlignments.length > 0 && props.isSelected && (
-
-
- ),
-
,
- ];
- }
- ),
+ }
+ props.setAttributes( { align: nextAlign } );
+ };
+
+ return [
+ validAlignments.length > 0 && props.isSelected && (
+
+
+ ),
+
,
+ ];
+ },
'withToolbarControls'
);
@@ -144,33 +154,36 @@ export const withToolbarControls = createHigherOrderComponent(
* @param {Function} BlockListBlock Original component
* @return {Function} Wrapped component
*/
-export const withDataAlign = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => {
- const { name, attributes } = props;
- const { align } = attributes;
- const hasWideEnabled = useSelect(
- ( select ) => !! select( 'core/block-editor' ).getSettings().alignWide,
- []
- );
+export const withDataAlign = createHigherOrderComponent(
+ ( BlockListBlock ) => ( props ) => {
+ const { name, attributes } = props;
+ const { align } = attributes;
+ const hasWideEnabled = useSelect(
+ ( select ) =>
+ !! select( 'core/block-editor' ).getSettings().alignWide,
+ []
+ );
+
+ // If an alignment is not assigned, there's no need to go through the
+ // effort to validate or assign its value.
+ if ( align === undefined ) {
+ return
;
+ }
- // If an alignment is not assigned, there's no need to go through the
- // effort to validate or assign its value.
- if ( align === undefined ) {
- return
;
- }
+ const validAlignments = getValidAlignments(
+ getBlockSupport( name, 'align' ),
+ hasBlockSupport( name, 'alignWide', true ),
+ hasWideEnabled
+ );
- const validAlignments = getValidAlignments(
- getBlockSupport( name, 'align' ),
- hasBlockSupport( name, 'alignWide', true ),
- hasWideEnabled
- );
+ let wrapperProps = props.wrapperProps;
+ if ( includes( validAlignments, align ) ) {
+ wrapperProps = { ...wrapperProps, 'data-align': align };
+ }
- let wrapperProps = props.wrapperProps;
- if ( includes( validAlignments, align ) ) {
- wrapperProps = { ...wrapperProps, 'data-align': align };
+ return
;
}
-
- return
;
-} );
+);
/**
* Override props assigned to save component to inject alignment class name if
@@ -199,8 +212,23 @@ export function addAssignedAlign( props, blockType, attributes ) {
return props;
}
-addFilter( 'blocks.registerBlockType', 'core/align/addAttribute', addAttribute );
-addFilter( 'editor.BlockListBlock', 'core/editor/align/with-data-align', withDataAlign );
-addFilter( 'editor.BlockEdit', 'core/editor/align/with-toolbar-controls', withToolbarControls );
-addFilter( 'blocks.getSaveContent.extraProps', 'core/align/addAssignedAlign', addAssignedAlign );
-
+addFilter(
+ 'blocks.registerBlockType',
+ 'core/align/addAttribute',
+ addAttribute
+);
+addFilter(
+ 'editor.BlockListBlock',
+ 'core/editor/align/with-data-align',
+ withDataAlign
+);
+addFilter(
+ 'editor.BlockEdit',
+ 'core/editor/align/with-toolbar-controls',
+ withToolbarControls
+);
+addFilter(
+ 'blocks.getSaveContent.extraProps',
+ 'core/align/addAssignedAlign',
+ addAssignedAlign
+);
diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js
index 5f8f1ca25879f..f9aeab08ab95e 100644
--- a/packages/block-editor/src/hooks/anchor.js
+++ b/packages/block-editor/src/hooks/anchor.js
@@ -60,42 +60,55 @@ export function addAttribute( settings ) {
*
* @return {WPComponent} Wrapped component.
*/
-export const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
- return ( props ) => {
- const hasAnchor = hasBlockSupport( props.name, 'anchor' );
+export const withInspectorControl = createHigherOrderComponent(
+ ( BlockEdit ) => {
+ return ( props ) => {
+ const hasAnchor = hasBlockSupport( props.name, 'anchor' );
- if ( hasAnchor && props.isSelected ) {
- return (
- <>
-
-
-
- { __( 'Enter a word or two โย without spaces โย to make a unique web address just for this heading, called an โanchor.โ Then, youโll be able to link directly to this section of your page.' ) }
+ if ( hasAnchor && props.isSelected ) {
+ return (
+ <>
+
+
+ { __(
+ 'Enter a word or two โย without spaces โย to make a unique web address just for this heading, called an โanchor.โ Then, youโll be able to link directly to this section of your page.'
+ ) }
-
- { __( 'Learn more about anchors' ) }
-
-
- ) }
- value={ props.attributes.anchor || '' }
- onChange={ ( nextValue ) => {
- nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
- props.setAttributes( {
- anchor: nextValue,
- } );
- } } />
-
-
- );
- }
+
+ { __( 'Learn more about anchors' ) }
+
+
+ }
+ value={ props.attributes.anchor || '' }
+ onChange={ ( nextValue ) => {
+ nextValue = nextValue.replace(
+ ANCHOR_REGEX,
+ '-'
+ );
+ props.setAttributes( {
+ anchor: nextValue,
+ } );
+ } }
+ />
+
+
+ );
+ }
- return
;
- };
-}, 'withInspectorControl' );
+ return
;
+ };
+ },
+ 'withInspectorControl'
+);
/**
* Override props assigned to save component to inject anchor ID, if block
@@ -117,5 +130,13 @@ export function addSaveProps( extraProps, blockType, attributes ) {
}
addFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );
-addFilter( 'editor.BlockEdit', 'core/editor/anchor/with-inspector-control', withInspectorControl );
-addFilter( 'blocks.getSaveContent.extraProps', 'core/anchor/save-props', addSaveProps );
+addFilter(
+ 'editor.BlockEdit',
+ 'core/editor/anchor/with-inspector-control',
+ withInspectorControl
+);
+addFilter(
+ 'blocks.getSaveContent.extraProps',
+ 'core/anchor/save-props',
+ addSaveProps
+);
diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js
index dfbceb627389c..df461c178072d 100644
--- a/packages/block-editor/src/hooks/custom-class-name.js
+++ b/packages/block-editor/src/hooks/custom-class-name.js
@@ -51,32 +51,44 @@ export function addAttribute( settings ) {
*
* @return {WPComponent} Wrapped component.
*/
-export const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
- return ( props ) => {
- const hasCustomClassName = hasBlockSupport( props.name, 'customClassName', true );
- if ( hasCustomClassName && props.isSelected ) {
- return (
- <>
-
-
- {
- props.setAttributes( {
- className: nextValue !== '' ? nextValue : undefined,
- } );
- } }
- help={ __( 'Separate multiple classes with spaces.' ) }
- />
-
-
+export const withInspectorControl = createHigherOrderComponent(
+ ( BlockEdit ) => {
+ return ( props ) => {
+ const hasCustomClassName = hasBlockSupport(
+ props.name,
+ 'customClassName',
+ true
);
- }
+ if ( hasCustomClassName && props.isSelected ) {
+ return (
+ <>
+
+
+ {
+ props.setAttributes( {
+ className:
+ nextValue !== ''
+ ? nextValue
+ : undefined,
+ } );
+ } }
+ help={ __(
+ 'Separate multiple classes with spaces.'
+ ) }
+ />
+
+
+ );
+ }
- return
;
- };
-}, 'withInspectorControl' );
+ return
;
+ };
+ },
+ 'withInspectorControl'
+);
/**
* Override props assigned to save component to inject anchor ID, if block
@@ -90,8 +102,14 @@ export const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) =>
* @return {Object} Filtered props applied to save element.
*/
export function addSaveProps( extraProps, blockType, attributes ) {
- if ( hasBlockSupport( blockType, 'customClassName', true ) && attributes.className ) {
- extraProps.className = classnames( extraProps.className, attributes.className );
+ if (
+ hasBlockSupport( blockType, 'customClassName', true ) &&
+ attributes.className
+ ) {
+ extraProps.className = classnames(
+ extraProps.className,
+ attributes.className
+ );
}
return extraProps;
@@ -136,7 +154,9 @@ export function addParsedDifference( blockAttributes, blockType, innerHTML ) {
// attributes, with the exception of `className`. This will determine
// the default set of classes. From there, any difference in innerHTML
// can be considered as custom classes.
- const attributesSansClassName = omit( blockAttributes, [ 'className' ] );
+ const attributesSansClassName = omit( blockAttributes, [
+ 'className',
+ ] );
const serialized = getSaveContent( blockType, attributesSansClassName );
const defaultClasses = getHTMLRootElementClasses( serialized );
const actualClasses = getHTMLRootElementClasses( innerHTML );
@@ -152,7 +172,23 @@ export function addParsedDifference( blockAttributes, blockType, innerHTML ) {
return blockAttributes;
}
-addFilter( 'blocks.registerBlockType', 'core/custom-class-name/attribute', addAttribute );
-addFilter( 'editor.BlockEdit', 'core/editor/custom-class-name/with-inspector-control', withInspectorControl );
-addFilter( 'blocks.getSaveContent.extraProps', 'core/custom-class-name/save-props', addSaveProps );
-addFilter( 'blocks.getBlockAttributes', 'core/custom-class-name/addParsedDifference', addParsedDifference );
+addFilter(
+ 'blocks.registerBlockType',
+ 'core/custom-class-name/attribute',
+ addAttribute
+);
+addFilter(
+ 'editor.BlockEdit',
+ 'core/editor/custom-class-name/with-inspector-control',
+ withInspectorControl
+);
+addFilter(
+ 'blocks.getSaveContent.extraProps',
+ 'core/custom-class-name/save-props',
+ addSaveProps
+);
+addFilter(
+ 'blocks.getBlockAttributes',
+ 'core/custom-class-name/addParsedDifference',
+ addParsedDifference
+);
diff --git a/packages/block-editor/src/hooks/custom-class-name.native.js b/packages/block-editor/src/hooks/custom-class-name.native.js
index c59d604b90305..4edfd96db65c2 100644
--- a/packages/block-editor/src/hooks/custom-class-name.native.js
+++ b/packages/block-editor/src/hooks/custom-class-name.native.js
@@ -47,8 +47,14 @@ export function addAttribute( settings ) {
* @return {Object} Filtered props applied to save element.
*/
export function addSaveProps( extraProps, blockType, attributes ) {
- if ( hasBlockSupport( blockType, 'customClassName', true ) && attributes.className ) {
- extraProps.className = classnames( extraProps.className, attributes.className );
+ if (
+ hasBlockSupport( blockType, 'customClassName', true ) &&
+ attributes.className
+ ) {
+ extraProps.className = classnames(
+ extraProps.className,
+ attributes.className
+ );
}
return extraProps;
@@ -112,6 +118,18 @@ export function addParsedDifference( blockAttributes, blockType, innerHTML ) {
return blockAttributes;
}
-addFilter( 'blocks.registerBlockType', 'core/custom-class-name/attribute', addAttribute );
-addFilter( 'blocks.getSaveContent.extraProps', 'core/custom-class-name/save-props', addSaveProps );
-addFilter( 'blocks.getBlockAttributes', 'core/custom-class-name/addParsedDifference', addParsedDifference );
+addFilter(
+ 'blocks.registerBlockType',
+ 'core/custom-class-name/attribute',
+ addAttribute
+);
+addFilter(
+ 'blocks.getSaveContent.extraProps',
+ 'core/custom-class-name/save-props',
+ addSaveProps
+);
+addFilter(
+ 'blocks.getBlockAttributes',
+ 'core/custom-class-name/addParsedDifference',
+ addParsedDifference
+);
diff --git a/packages/block-editor/src/hooks/generated-class-name.js b/packages/block-editor/src/hooks/generated-class-name.js
index c5f7d1b49502c..8a10c9b9e891d 100644
--- a/packages/block-editor/src/hooks/generated-class-name.js
+++ b/packages/block-editor/src/hooks/generated-class-name.js
@@ -29,7 +29,9 @@ export function addGeneratedClassName( extraProps, blockType ) {
extraProps.className = uniq( [
getBlockDefaultClassName( blockType.name ),
...extraProps.className.split( ' ' ),
- ] ).join( ' ' ).trim();
+ ] )
+ .join( ' ' )
+ .trim();
} else {
// There is no string in the className variable,
// so we just dump the default name in there
@@ -39,4 +41,8 @@ export function addGeneratedClassName( extraProps, blockType ) {
return extraProps;
}
-addFilter( 'blocks.getSaveContent.extraProps', 'core/generated-class-name/save-props', addGeneratedClassName );
+addFilter(
+ 'blocks.getSaveContent.extraProps',
+ 'core/generated-class-name/save-props',
+ addGeneratedClassName
+);
diff --git a/packages/block-editor/src/hooks/test/align.js b/packages/block-editor/src/hooks/test/align.js
index 1e348229ad675..9242cff172eab 100644
--- a/packages/block-editor/src/hooks/test/align.js
+++ b/packages/block-editor/src/hooks/test/align.js
@@ -39,7 +39,10 @@ describe( 'align', () => {
} );
describe( 'addAttribute()', () => {
- const filterRegisterBlockType = applyFilters.bind( null, 'blocks.registerBlockType' );
+ const filterRegisterBlockType = applyFilters.bind(
+ null,
+ 'blocks.registerBlockType'
+ );
it( 'should do nothing if the block settings does not define align support', () => {
const settings = filterRegisterBlockType( blockSettings );
@@ -65,54 +68,75 @@ describe( 'align', () => {
} );
it( 'should return all custom aligns set', () => {
- expect(
- getValidAlignments( [ 'left', 'right' ] )
- ).toEqual(
- [ 'left', 'right' ]
- );
+ expect( getValidAlignments( [ 'left', 'right' ] ) ).toEqual( [
+ 'left',
+ 'right',
+ ] );
} );
it( 'should return all aligns if block defines align support as true', () => {
- expect(
- getValidAlignments( true )
- ).toEqual(
- [ 'left', 'center', 'right', 'wide', 'full' ]
- );
+ expect( getValidAlignments( true ) ).toEqual( [
+ 'left',
+ 'center',
+ 'right',
+ 'wide',
+ 'full',
+ ] );
} );
it( 'should return all aligns except wide if wide align explicitly false on the block', () => {
- expect(
- getValidAlignments( true, false, true )
- ).toEqual( [ 'left', 'center', 'right' ] );
-
- expect(
- getValidAlignments( true, false, false )
- ).toEqual( [ 'left', 'center', 'right' ] );
+ expect( getValidAlignments( true, false, true ) ).toEqual( [
+ 'left',
+ 'center',
+ 'right',
+ ] );
+
+ expect( getValidAlignments( true, false, false ) ).toEqual( [
+ 'left',
+ 'center',
+ 'right',
+ ] );
} );
it( 'should return all aligns except wide if wide align is not supported by the theme', () => {
- expect(
- getValidAlignments( true, true, false )
- ).toEqual( [ 'left', 'center', 'right' ] );
-
- expect(
- getValidAlignments( true, false, false )
- ).toEqual( [ 'left', 'center', 'right' ] );
+ expect( getValidAlignments( true, true, false ) ).toEqual( [
+ 'left',
+ 'center',
+ 'right',
+ ] );
+
+ expect( getValidAlignments( true, false, false ) ).toEqual( [
+ 'left',
+ 'center',
+ 'right',
+ ] );
} );
it( 'should not remove wide aligns if they are not supported by the block and were set using an array in supports align', () => {
expect(
- getValidAlignments( [ 'left', 'right', 'wide', 'full' ], false, true )
+ getValidAlignments(
+ [ 'left', 'right', 'wide', 'full' ],
+ false,
+ true
+ )
).toEqual( [ 'left', 'right', 'wide', 'full' ] );
} );
it( 'should remove wide aligns if they are not supported by the theme and were set using an array in supports align', () => {
expect(
- getValidAlignments( [ 'left', 'right', 'wide', 'full' ], true, false )
+ getValidAlignments(
+ [ 'left', 'right', 'wide', 'full' ],
+ true,
+ false
+ )
).toEqual( [ 'left', 'right' ] );
expect(
- getValidAlignments( [ 'left', 'right', 'wide', 'full' ], false, false )
+ getValidAlignments(
+ [ 'left', 'right', 'wide', 'full' ],
+ false,
+ false
+ )
).toEqual( [ 'left', 'right' ] );
} );
} );
@@ -121,9 +145,9 @@ describe( 'align', () => {
it( 'should do nothing if no valid alignments', () => {
registerBlockType( 'core/foo', blockSettings );
- const EnhancedComponent = withToolbarControls( ( { wrapperProps } ) => (
-
- ) );
+ const EnhancedComponent = withToolbarControls(
+ ( { wrapperProps } ) =>
+ );
const wrapper = renderer.create(
{
},
} );
- const EnhancedComponent = withToolbarControls( ( { wrapperProps } ) => (
-
- ) );
+ const EnhancedComponent = withToolbarControls(
+ ( { wrapperProps } ) =>
+ );
const wrapper = renderer.create(
{
let wrapper;
act( () => {
wrapper = renderer.create(
-
+
{
let wrapper;
act( () => {
wrapper = renderer.create(
-
+
{
let wrapper;
act( () => {
wrapper = renderer.create(
-
+
{
it( 'should do nothing if block does not support align', () => {
registerBlockType( 'core/foo', blockSettings );
- const props = addAssignedAlign( {
- className: 'foo',
- }, 'core/foo', {
- align: 'wide',
- } );
+ const props = addAssignedAlign(
+ {
+ className: 'foo',
+ },
+ 'core/foo',
+ {
+ align: 'wide',
+ }
+ );
expect( props ).toEqual( {
className: 'foo',
@@ -274,11 +311,15 @@ describe( 'align', () => {
},
} );
- const props = addAssignedAlign( {
- className: 'foo',
- }, 'core/foo', {
- align: 'wide',
- } );
+ const props = addAssignedAlign(
+ {
+ className: 'foo',
+ },
+ 'core/foo',
+ {
+ align: 'wide',
+ }
+ );
expect( props ).toEqual( {
className: 'alignwide foo',
diff --git a/packages/block-editor/src/hooks/test/anchor.js b/packages/block-editor/src/hooks/test/anchor.js
index d55a54fff332e..bb4d496ff477b 100644
--- a/packages/block-editor/src/hooks/test/anchor.js
+++ b/packages/block-editor/src/hooks/test/anchor.js
@@ -21,7 +21,10 @@ describe( 'anchor', () => {
};
describe( 'addAttribute()', () => {
- const registerBlockType = applyFilters.bind( null, 'blocks.registerBlockType' );
+ const registerBlockType = applyFilters.bind(
+ null,
+ 'blocks.registerBlockType'
+ );
it( 'should do nothing if the block settings do not define anchor support', () => {
const settings = registerBlockType( blockSettings );
@@ -54,40 +57,58 @@ describe( 'anchor', () => {
},
} );
- expect( settings.attributes.anchor ).toEqual( { type: 'string', default: 'testAnchor' } );
+ expect( settings.attributes.anchor ).toEqual( {
+ type: 'string',
+ default: 'testAnchor',
+ } );
} );
} );
describe( 'addSaveProps', () => {
- const getSaveContentExtraProps = applyFilters.bind( null, 'blocks.getSaveContent.extraProps' );
+ const getSaveContentExtraProps = applyFilters.bind(
+ null,
+ 'blocks.getSaveContent.extraProps'
+ );
it( 'should do nothing if the block settings do not define anchor support', () => {
const attributes = { anchor: 'foo' };
- const extraProps = getSaveContentExtraProps( {}, blockSettings, attributes );
+ const extraProps = getSaveContentExtraProps(
+ {},
+ blockSettings,
+ attributes
+ );
expect( extraProps ).not.toHaveProperty( 'id' );
} );
it( 'should inject anchor attribute ID', () => {
const attributes = { anchor: 'foo' };
- const extraProps = getSaveContentExtraProps( {}, {
- ...blockSettings,
- supports: {
- anchor: true,
+ const extraProps = getSaveContentExtraProps(
+ {},
+ {
+ ...blockSettings,
+ supports: {
+ anchor: true,
+ },
},
- }, attributes );
+ attributes
+ );
expect( extraProps.id ).toBe( 'foo' );
} );
it( 'should remove an anchor attribute ID when feild is cleared', () => {
const attributes = { anchor: '' };
- const extraProps = getSaveContentExtraProps( {}, {
- ...blockSettings,
- supports: {
- anchor: true,
+ const extraProps = getSaveContentExtraProps(
+ {},
+ {
+ ...blockSettings,
+ supports: {
+ anchor: true,
+ },
},
- }, attributes );
+ attributes
+ );
expect( extraProps.id ).toBe( null );
} );
diff --git a/packages/block-editor/src/hooks/test/custom-class-name.js b/packages/block-editor/src/hooks/test/custom-class-name.js
index 6b2c84b886139..8429a657859bd 100644
--- a/packages/block-editor/src/hooks/test/custom-class-name.js
+++ b/packages/block-editor/src/hooks/test/custom-class-name.js
@@ -22,7 +22,10 @@ describe( 'custom className', () => {
};
describe( 'addAttribute()', () => {
- const addAttribute = applyFilters.bind( null, 'blocks.registerBlockType' );
+ const addAttribute = applyFilters.bind(
+ null,
+ 'blocks.registerBlockType'
+ );
it( 'should do nothing if the block settings disable custom className support', () => {
const settings = addAttribute( {
@@ -43,23 +46,34 @@ describe( 'custom className', () => {
} );
describe( 'addSaveProps', () => {
- const addSaveProps = applyFilters.bind( null, 'blocks.getSaveContent.extraProps' );
+ const addSaveProps = applyFilters.bind(
+ null,
+ 'blocks.getSaveContent.extraProps'
+ );
it( 'should do nothing if the block settings do not define custom className support', () => {
const attributes = { className: 'foo' };
- const extraProps = addSaveProps( {}, {
- ...blockSettings,
- supports: {
- customClassName: false,
+ const extraProps = addSaveProps(
+ {},
+ {
+ ...blockSettings,
+ supports: {
+ customClassName: false,
+ },
},
- }, attributes );
+ attributes
+ );
expect( extraProps ).not.toHaveProperty( 'className' );
} );
it( 'should inject the custom className', () => {
const attributes = { className: 'bar' };
- const extraProps = addSaveProps( { className: 'foo' }, blockSettings, attributes );
+ const extraProps = addSaveProps(
+ { className: 'foo' },
+ blockSettings,
+ attributes
+ );
expect( extraProps.className ).toBe( 'foo bar' );
} );
@@ -73,14 +87,19 @@ describe( 'custom className', () => {
} );
it( 'return an array of parsed classes from inner HTML', () => {
- const classes = getHTMLRootElementClasses( '
' );
+ const classes = getHTMLRootElementClasses(
+ '
'
+ );
expect( classes ).toEqual( [ 'foo', 'bar' ] );
} );
} );
describe( 'addParsedDifference', () => {
- const addParsedDifference = applyFilters.bind( null, 'blocks.getBlockAttributes' );
+ const addParsedDifference = applyFilters.bind(
+ null,
+ 'blocks.getBlockAttributes'
+ );
it( 'should do nothing if the block settings do not define custom className support', () => {
const attributes = addParsedDifference(
@@ -161,7 +180,7 @@ describe( 'custom className', () => {
const attributes = addParsedDifference(
{ className: 'custom1' },
dynamicBlockSettings,
- null,
+ null
);
expect( attributes.className ).toBe( 'custom1' );
diff --git a/packages/block-editor/src/hooks/test/generated-class-name.js b/packages/block-editor/src/hooks/test/generated-class-name.js
index 397ec9ab333ce..1bf447c48ce12 100644
--- a/packages/block-editor/src/hooks/test/generated-class-name.js
+++ b/packages/block-editor/src/hooks/test/generated-class-name.js
@@ -22,30 +22,45 @@ describe( 'generated className', () => {
};
describe( 'addSaveProps', () => {
- const addSaveProps = applyFilters.bind( null, 'blocks.getSaveContent.extraProps' );
+ const addSaveProps = applyFilters.bind(
+ null,
+ 'blocks.getSaveContent.extraProps'
+ );
it( 'should do nothing if the block settings do not define generated className support', () => {
const attributes = { className: 'foo' };
- const extraProps = addSaveProps( {}, {
- ...blockSettings,
- supports: {
- className: false,
+ const extraProps = addSaveProps(
+ {},
+ {
+ ...blockSettings,
+ supports: {
+ className: false,
+ },
},
- }, attributes );
+ attributes
+ );
expect( extraProps ).not.toHaveProperty( 'className' );
} );
it( 'should inject the generated className', () => {
const attributes = { className: 'bar' };
- const extraProps = addSaveProps( { className: 'foo' }, blockSettings, attributes );
+ const extraProps = addSaveProps(
+ { className: 'foo' },
+ blockSettings,
+ attributes
+ );
expect( extraProps.className ).toBe( 'wp-block-chicken-ribs foo' );
} );
it( 'should not inject duplicates into className', () => {
const attributes = { className: 'bar' };
- const extraProps = addSaveProps( { className: 'foo wp-block-chicken-ribs' }, blockSettings, attributes );
+ const extraProps = addSaveProps(
+ { className: 'foo wp-block-chicken-ribs' },
+ blockSettings,
+ attributes
+ );
expect( extraProps.className ).toBe( 'wp-block-chicken-ribs foo' );
} );
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index 4ab68705d2845..a9162f4b6d772 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -6,7 +6,12 @@ import { castArray, first, get, includes, last, some } from 'lodash';
/**
* WordPress dependencies
*/
-import { getDefaultBlockName, createBlock, hasBlockSupport, cloneBlock } from '@wordpress/blocks';
+import {
+ getDefaultBlockName,
+ createBlock,
+ hasBlockSupport,
+ cloneBlock,
+} from '@wordpress/blocks';
import { speak } from '@wordpress/a11y';
import { __ } from '@wordpress/i18n';
@@ -22,10 +27,7 @@ import { select } from './controls';
* replacement, etc).
*/
function* ensureDefaultBlock() {
- const count = yield select(
- 'core/block-editor',
- 'getBlockCount',
- );
+ const count = yield select( 'core/block-editor', 'getBlockCount' );
// To avoid a focus loss when removing the last block, assure there is
// always a default block if the last of the blocks have been removed.
@@ -269,7 +271,8 @@ function getBlocksWithDefaultStylesApplied( blocks, blockEditorSettings ) {
...block,
attributes: {
...attributes,
- className: `${ ( className || '' ) } is-style-${ blockStyle }`.trim(),
+ className: `${ className ||
+ '' } is-style-${ blockStyle }`.trim(),
},
};
} );
@@ -290,10 +293,7 @@ export function* replaceBlocks( clientIds, blocks, indexToSelect ) {
clientIds = castArray( clientIds );
blocks = getBlocksWithDefaultStylesApplied(
castArray( blocks ),
- yield select(
- 'core/block-editor',
- 'getSettings',
- )
+ yield select( 'core/block-editor', 'getSettings' )
);
const rootClientId = yield select(
'core/block-editor',
@@ -368,7 +368,12 @@ export const moveBlocksUp = createOnMove( 'MOVE_BLOCKS_UP' );
*
* @yield {Object} Action object.
*/
-export function* moveBlockToPosition( clientId, fromRootClientId = '', toRootClientId = '', index ) {
+export function* moveBlockToPosition(
+ clientId,
+ fromRootClientId = '',
+ toRootClientId = '',
+ index
+) {
const templateLock = yield select(
'core/block-editor',
'getTemplateLock',
@@ -434,14 +439,9 @@ export function insertBlock(
block,
index,
rootClientId,
- updateSelection = true,
+ updateSelection = true
) {
- return insertBlocks(
- [ block ],
- index,
- rootClientId,
- updateSelection
- );
+ return insertBlocks( [ block ], index, rootClientId, updateSelection );
}
/**
@@ -463,10 +463,7 @@ export function* insertBlocks(
) {
blocks = getBlocksWithDefaultStylesApplied(
castArray( blocks ),
- yield select(
- 'core/block-editor',
- 'getSettings',
- )
+ yield select( 'core/block-editor', 'getSettings' )
);
const allowedBlocks = [];
for ( const block of blocks ) {
@@ -575,8 +572,16 @@ export function* removeBlocks( clientIds, selectPrevious = true ) {
}
clientIds = castArray( clientIds );
- const rootClientId = yield select( 'core/block-editor', 'getBlockRootClientId', clientIds[ 0 ] );
- const isLocked = yield select( 'core/block-editor', 'getTemplateLock', rootClientId );
+ const rootClientId = yield select(
+ 'core/block-editor',
+ 'getBlockRootClientId',
+ clientIds[ 0 ]
+ );
+ const isLocked = yield select(
+ 'core/block-editor',
+ 'getTemplateLock',
+ rootClientId
+ );
if ( isLocked ) {
return;
}
@@ -619,7 +624,11 @@ export function removeBlock( clientId, selectPrevious ) {
*
* @return {Object} Action object.
*/
-export function replaceInnerBlocks( rootClientId, blocks, updateSelection = true ) {
+export function replaceInnerBlocks(
+ rootClientId,
+ blocks,
+ updateSelection = true
+) {
return {
type: 'REPLACE_INNER_BLOCKS',
rootClientId,
@@ -721,7 +730,12 @@ export function exitFormattedText() {
*
* @return {Object} Action object.
*/
-export function selectionChange( clientId, attributeKey, startOffset, endOffset ) {
+export function selectionChange(
+ clientId,
+ attributeKey,
+ startOffset,
+ endOffset
+) {
return {
type: 'SELECTION_CHANGE',
clientId,
@@ -811,6 +825,15 @@ export function __unstableMarkLastChangeAsPersistent() {
return { type: 'MARK_LAST_CHANGE_AS_PERSISTENT' };
}
+/**
+ * Returns an action object used in signalling that the next block change should be marked explicitly as not persistent.
+ *
+ * @return {Object} Action object.
+ */
+export function __unstableMarkNextChangeAsNotPersistent() {
+ return { type: 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT' };
+}
+
/**
* Returns an action object used in signalling that the last block change is
* an automatic change, meaning it was not performed by the user, and can be
@@ -830,16 +853,24 @@ export function __unstableMarkAutomaticChange() {
*
* @param {string} isNavigationMode Enable/Disable navigation mode.
*/
-export function * setNavigationMode( isNavigationMode = true ) {
+export function* setNavigationMode( isNavigationMode = true ) {
yield {
type: 'SET_NAVIGATION_MODE',
isNavigationMode,
};
if ( isNavigationMode ) {
- speak( __( 'You are currently in navigation mode. Navigate blocks using the Tab key. To exit navigation mode and edit the selected block, press Enter.' ) );
+ speak(
+ __(
+ 'You are currently in navigation mode. Navigate blocks using the Tab key. To exit navigation mode and edit the selected block, press Enter.'
+ )
+ );
} else {
- speak( __( 'You are currently in edit mode. To return to the navigation mode, press Escape.' ) );
+ speak(
+ __(
+ 'You are currently in edit mode. To return to the navigation mode, press Escape.'
+ )
+ );
}
}
@@ -848,19 +879,32 @@ export function * setNavigationMode( isNavigationMode = true ) {
*
* @param {string[]} clientIds
*/
-export function * duplicateBlocks( clientIds ) {
+export function* duplicateBlocks( clientIds ) {
if ( ! clientIds && ! clientIds.length ) {
return;
}
- const blocks = yield select( 'core/block-editor', 'getBlocksByClientId', clientIds );
- const rootClientId = yield select( 'core/block-editor', 'getBlockRootClientId', clientIds[ 0 ] );
+ const blocks = yield select(
+ 'core/block-editor',
+ 'getBlocksByClientId',
+ clientIds
+ );
+ const rootClientId = yield select(
+ 'core/block-editor',
+ 'getBlockRootClientId',
+ clientIds[ 0 ]
+ );
// Return early if blocks don't exist.
if ( some( blocks, ( block ) => ! block ) ) {
return;
}
const blockNames = blocks.map( ( block ) => block.name );
// Return early if blocks don't support multipe usage.
- if ( some( blockNames, ( blockName ) => ! hasBlockSupport( blockName, 'multiple', true ) ) ) {
+ if (
+ some(
+ blockNames,
+ ( blockName ) => ! hasBlockSupport( blockName, 'multiple', true )
+ )
+ ) {
return;
}
@@ -871,11 +915,7 @@ export function * duplicateBlocks( clientIds ) {
rootClientId
);
const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
- yield insertBlocks(
- clonedBlocks,
- lastSelectedIndex + 1,
- rootClientId
- );
+ yield insertBlocks( clonedBlocks, lastSelectedIndex + 1, rootClientId );
if ( clonedBlocks.length > 1 ) {
yield multiSelect(
first( clonedBlocks ).clientId,
@@ -889,17 +929,30 @@ export function * duplicateBlocks( clientIds ) {
*
* @param {string} clientId
*/
-export function * insertBeforeBlock( clientId ) {
+export function* insertBeforeBlock( clientId ) {
if ( ! clientId ) {
return;
}
- const rootClientId = yield select( 'core/block-editor', 'getBlockRootClientId', clientId );
- const isLocked = yield select( 'core/block-editor', 'getTemplateLock', rootClientId );
+ const rootClientId = yield select(
+ 'core/block-editor',
+ 'getBlockRootClientId',
+ clientId
+ );
+ const isLocked = yield select(
+ 'core/block-editor',
+ 'getTemplateLock',
+ rootClientId
+ );
if ( isLocked ) {
return;
}
- const firstSelectedIndex = yield select( 'core/block-editor', 'getBlockIndex', clientId, rootClientId );
+ const firstSelectedIndex = yield select(
+ 'core/block-editor',
+ 'getBlockIndex',
+ clientId,
+ rootClientId
+ );
yield insertDefaultBlock( {}, rootClientId, firstSelectedIndex );
}
@@ -908,16 +961,29 @@ export function * insertBeforeBlock( clientId ) {
*
* @param {string} clientId
*/
-export function * insertAfterBlock( clientId ) {
+export function* insertAfterBlock( clientId ) {
if ( ! clientId ) {
return;
}
- const rootClientId = yield select( 'core/block-editor', 'getBlockRootClientId', clientId );
- const isLocked = yield select( 'core/block-editor', 'getTemplateLock', rootClientId );
+ const rootClientId = yield select(
+ 'core/block-editor',
+ 'getBlockRootClientId',
+ clientId
+ );
+ const isLocked = yield select(
+ 'core/block-editor',
+ 'getTemplateLock',
+ rootClientId
+ );
if ( isLocked ) {
return;
}
- const firstSelectedIndex = yield select( 'core/block-editor', 'getBlockIndex', clientId, rootClientId );
+ const firstSelectedIndex = yield select(
+ 'core/block-editor',
+ 'getBlockIndex',
+ clientId,
+ rootClientId
+ );
yield insertDefaultBlock( {}, rootClientId, firstSelectedIndex + 1 );
}
diff --git a/packages/block-editor/src/store/array.js b/packages/block-editor/src/store/array.js
index 176d8936450af..3a2977eb152ae 100644
--- a/packages/block-editor/src/store/array.js
+++ b/packages/block-editor/src/store/array.js
@@ -36,6 +36,6 @@ export function moveTo( array, from, to, count = 1 ) {
return insertAt(
withoutMovedElements,
array.slice( from, from + count ),
- to,
+ to
);
}
diff --git a/packages/block-editor/src/store/controls.js b/packages/block-editor/src/store/controls.js
index 5012ab244c21c..3a64e045f6966 100644
--- a/packages/block-editor/src/store/controls.js
+++ b/packages/block-editor/src/store/controls.js
@@ -22,9 +22,11 @@ export function select( storeName, selectorName, ...args ) {
}
const controls = {
- SELECT: createRegistryControl( ( registry ) => ( { storeName, selectorName, args } ) => {
- return registry.select( storeName )[ selectorName ]( ...args );
- } ),
+ SELECT: createRegistryControl(
+ ( registry ) => ( { storeName, selectorName, args } ) => {
+ return registry.select( storeName )[ selectorName ]( ...args );
+ }
+ ),
};
export default controls;
diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
index dca689127ad93..a0ab78569c508 100644
--- a/packages/block-editor/src/store/defaults.js
+++ b/packages/block-editor/src/store/defaults.js
@@ -44,10 +44,7 @@ export const SETTINGS_DEFAULTS = {
slug: 'pale-pink',
color: '#f78da7',
},
- { name: __( 'Vivid red' ),
- slug: 'vivid-red',
- color: '#cf2e2e',
- },
+ { name: __( 'Vivid red' ), slug: 'vivid-red', color: '#cf2e2e' },
{
name: __( 'Luminous vivid orange' ),
slug: 'luminous-vivid-orange',
@@ -160,62 +157,74 @@ export const SETTINGS_DEFAULTS = {
gradients: [
{
name: __( 'Vivid cyan blue to vivid purple' ),
- gradient: 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+ gradient:
+ 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
slug: 'vivid-cyan-blue-to-vivid-purple',
},
{
name: __( 'Light green cyan to vivid green cyan' ),
- gradient: 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+ gradient:
+ 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
slug: 'light-green-cyan-to-vivid-green-cyan',
},
{
name: __( 'Luminous vivid amber to luminous vivid orange' ),
- gradient: 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
+ gradient:
+ 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
slug: 'luminous-vivid-amber-to-luminous-vivid-orange',
},
{
name: __( 'Luminous vivid orange to vivid red' ),
- gradient: 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
+ gradient:
+ 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
slug: 'luminous-vivid-orange-to-vivid-red',
},
{
name: __( 'Very light gray to cyan bluish gray' ),
- gradient: 'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
+ gradient:
+ 'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
slug: 'very-light-gray-to-cyan-bluish-gray',
},
{
name: __( 'Cool to warm spectrum' ),
- gradient: 'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
+ gradient:
+ 'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
slug: 'cool-to-warm-spectrum',
},
{
name: __( 'Blush light purple' ),
- gradient: 'linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)',
+ gradient:
+ 'linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)',
slug: 'blush-light-purple',
},
{
name: __( 'Blush bordeaux' ),
- gradient: 'linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)',
+ gradient:
+ 'linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)',
slug: 'blush-bordeaux',
},
{
name: __( 'Luminous dusk' ),
- gradient: 'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)',
+ gradient:
+ 'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)',
slug: 'luminous-dusk',
},
{
name: __( 'Pale ocean' ),
- gradient: 'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+ gradient:
+ 'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
slug: 'pale-ocean',
},
{
name: __( 'Electric grass' ),
- gradient: 'linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)',
+ gradient:
+ 'linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)',
slug: 'electric-grass',
},
{
name: __( 'Midnight' ),
- gradient: 'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
+ gradient:
+ 'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
slug: 'midnight',
},
],
diff --git a/packages/block-editor/src/store/effects.js b/packages/block-editor/src/store/effects.js
index fbfaee23cc715..b01e37b1e76dd 100644
--- a/packages/block-editor/src/store/effects.js
+++ b/packages/block-editor/src/store/effects.js
@@ -55,11 +55,10 @@ export function validateBlocksToTemplate( action, store ) {
// Unlocked templates are considered always valid because they act
// as default values only.
- const isBlocksValidToTemplate = (
+ const isBlocksValidToTemplate =
! template ||
templateLock !== 'all' ||
- doBlocksMatchTemplate( action.blocks, template )
- );
+ doBlocksMatchTemplate( action.blocks, template );
// Update if validity has changed.
if ( isBlocksValidToTemplate !== isValidTemplate( state ) ) {
@@ -84,9 +83,11 @@ export default {
const blockB = getBlock( state, clientIdB );
const blockBType = getBlockType( blockB.name );
const { clientId, attributeKey, offset } = getSelectionStart( state );
- const selectedBlockType = clientId === clientIdA ? blockAType : blockBType;
- const attributeDefinition = selectedBlockType.attributes[ attributeKey ];
- const canRestoreTextSelection = (
+ const selectedBlockType =
+ clientId === clientIdA ? blockAType : blockBType;
+ const attributeDefinition =
+ selectedBlockType.attributes[ attributeKey ];
+ const canRestoreTextSelection =
( clientId === clientIdA || clientId === clientIdB ) &&
attributeKey !== undefined &&
offset !== undefined &&
@@ -94,8 +95,7 @@ export default {
// is not a defined block attribute key. This can be the case if the
// fallback intance ID is used to store selection (and no RichText
// identifier is set), or when the identifier is wrong.
- !! attributeDefinition
- );
+ !! attributeDefinition;
if ( ! attributeDefinition ) {
if ( typeof attributeKey === 'number' ) {
@@ -125,12 +125,17 @@ export default {
__unstableMultilineWrapperTags: multilineWrapperTags,
__unstablePreserveWhiteSpace: preserveWhiteSpace,
} = attributeDefinition;
- const value = insert( create( {
- html,
- multilineTag,
- multilineWrapperTags,
- preserveWhiteSpace,
- } ), START_OF_SELECTED_AREA, offset, offset );
+ const value = insert(
+ create( {
+ html,
+ multilineTag,
+ multilineWrapperTags,
+ preserveWhiteSpace,
+ } ),
+ START_OF_SELECTED_AREA,
+ offset,
+ offset
+ );
selectedBlock.attributes[ attributeKey ] = toHTMLString( {
value,
@@ -141,9 +146,10 @@ export default {
// We can only merge blocks with similar types
// thus, we transform the block to merge first
- const blocksWithTheSameType = blockA.name === blockB.name ?
- [ cloneB ] :
- switchToBlockType( cloneB, blockA.name );
+ const blocksWithTheSameType =
+ blockA.name === blockB.name
+ ? [ cloneB ]
+ : switchToBlockType( cloneB, blockA.name );
// If the block types can not match, do nothing
if ( ! blocksWithTheSameType || ! blocksWithTheSameType.length ) {
@@ -157,8 +163,11 @@ export default {
);
if ( canRestoreTextSelection ) {
- const newAttributeKey = findKey( updatedAttributes, ( v ) =>
- typeof v === 'string' && v.indexOf( START_OF_SELECTED_AREA ) !== -1
+ const newAttributeKey = findKey(
+ updatedAttributes,
+ ( v ) =>
+ typeof v === 'string' &&
+ v.indexOf( START_OF_SELECTED_AREA ) !== -1
);
const convertedHtml = updatedAttributes[ newAttributeKey ];
const {
@@ -172,7 +181,9 @@ export default {
multilineWrapperTags,
preserveWhiteSpace,
} );
- const newOffset = convertedValue.text.indexOf( START_OF_SELECTED_AREA );
+ const newOffset = convertedValue.text.indexOf(
+ START_OF_SELECTED_AREA
+ );
const newValue = remove( convertedValue, newOffset, newOffset + 1 );
const newHtml = toHTMLString( {
value: newValue,
@@ -182,42 +193,53 @@ export default {
updatedAttributes[ newAttributeKey ] = newHtml;
- dispatch( selectionChange(
- blockA.clientId,
- newAttributeKey,
- newOffset,
- newOffset
- ) );
+ dispatch(
+ selectionChange(
+ blockA.clientId,
+ newAttributeKey,
+ newOffset,
+ newOffset
+ )
+ );
}
- dispatch( replaceBlocks(
- [ blockA.clientId, blockB.clientId ],
- [
- {
- ...blockA,
- attributes: {
- ...blockA.attributes,
- ...updatedAttributes,
+ dispatch(
+ replaceBlocks(
+ [ blockA.clientId, blockB.clientId ],
+ [
+ {
+ ...blockA,
+ attributes: {
+ ...blockA.attributes,
+ ...updatedAttributes,
+ },
},
- },
- ...blocksWithTheSameType.slice( 1 ),
- ]
- ) );
+ ...blocksWithTheSameType.slice( 1 ),
+ ]
+ )
+ );
},
- RESET_BLOCKS: [
- validateBlocksToTemplate,
- ],
+ RESET_BLOCKS: [ validateBlocksToTemplate ],
MULTI_SELECT: ( action, { getState } ) => {
const blockCount = getSelectedBlockCount( getState() );
/* translators: %s: number of selected blocks */
- speak( sprintf( _n( '%s block selected.', '%s blocks selected.', blockCount ), blockCount ), 'assertive' );
+ speak(
+ sprintf(
+ _n( '%s block selected.', '%s blocks selected.', blockCount ),
+ blockCount
+ ),
+ 'assertive'
+ );
},
SYNCHRONIZE_TEMPLATE( action, { getState } ) {
const state = getState();
const blocks = getBlocks( state );
const template = getTemplate( state );
- const updatedBlockList = synchronizeBlocksWithTemplate( blocks, template );
+ const updatedBlockList = synchronizeBlocksWithTemplate(
+ blocks,
+ template
+ );
return resetBlocks( updatedBlockList );
},
diff --git a/packages/block-editor/src/store/middlewares.js b/packages/block-editor/src/store/middlewares.js
index 6381132bb81e0..0f4c5aef8df70 100644
--- a/packages/block-editor/src/store/middlewares.js
+++ b/packages/block-editor/src/store/middlewares.js
@@ -18,15 +18,12 @@ import effects from './effects';
* @return {Object} Update Store Object.
*/
function applyMiddlewares( store ) {
- const middlewares = [
- refx( effects ),
- multi,
- ];
+ const middlewares = [ refx( effects ), multi ];
let enhancedDispatch = () => {
throw new Error(
'Dispatching while constructing your middleware is not allowed. ' +
- 'Other middleware would not be applied to this dispatch.'
+ 'Other middleware would not be applied to this dispatch.'
);
};
let chain = [];
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 9b770d6c4d0db..45a5dc63cea04 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -27,10 +27,7 @@ import { isReusableBlock } from '@wordpress/blocks';
/**
* Internal dependencies
*/
-import {
- PREFERENCES_DEFAULTS,
- SETTINGS_DEFAULTS,
-} from './defaults';
+import { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS } from './defaults';
import { insertAt, moveTo } from './array';
/**
@@ -67,11 +64,15 @@ function mapBlockOrder( blocks, rootClientId = '' ) {
* @return {Object} Block order map object.
*/
function mapBlockParents( blocks, rootClientId = '' ) {
- return blocks.reduce( ( result, block ) => Object.assign(
- result,
- { [ block.clientId ]: rootClientId },
- mapBlockParents( block.innerBlocks, block.clientId )
- ), {} );
+ return blocks.reduce(
+ ( result, block ) =>
+ Object.assign(
+ result,
+ { [ block.clientId ]: rootClientId },
+ mapBlockParents( block.innerBlocks, block.clientId )
+ ),
+ {}
+ );
}
/**
@@ -138,11 +139,15 @@ function getFlattenedBlockAttributes( blocks ) {
* @return {Array} List of descendant client IDs.
*/
function getNestedBlockClientIds( blocksOrder, rootClientId = '' ) {
- return reduce( blocksOrder[ rootClientId ], ( result, clientId ) => [
- ...result,
- clientId,
- ...getNestedBlockClientIds( blocksOrder, clientId ),
- ], [] );
+ return reduce(
+ blocksOrder[ rootClientId ],
+ ( result, clientId ) => [
+ ...result,
+ clientId,
+ ...getNestedBlockClientIds( blocksOrder, clientId ),
+ ],
+ []
+ );
}
/**
@@ -249,7 +254,10 @@ const withBlockCache = ( reducer ) => ( state = {}, action ) => {
switch ( action.type ) {
case 'RESET_BLOCKS':
- newState.cache = mapValues( flattenBlocks( action.blocks ), () => ( {} ) );
+ newState.cache = mapValues(
+ flattenBlocks( action.blocks ),
+ () => ( {} )
+ );
break;
case 'RECEIVE_BLOCKS':
case 'INSERT_BLOCKS': {
@@ -260,7 +268,7 @@ const withBlockCache = ( reducer ) => ( state = {}, action ) => {
newState.cache = {
...newState.cache,
...fillKeysWithEmptyObject(
- getBlocksWithParentsClientIds( updatedBlockUids ),
+ getBlocksWithParentsClientIds( updatedBlockUids )
),
};
break;
@@ -270,24 +278,31 @@ const withBlockCache = ( reducer ) => ( state = {}, action ) => {
newState.cache = {
...newState.cache,
...fillKeysWithEmptyObject(
- getBlocksWithParentsClientIds( [ action.clientId ] ),
+ getBlocksWithParentsClientIds( [ action.clientId ] )
),
};
break;
case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN':
- const parentClientIds = fillKeysWithEmptyObject( getBlocksWithParentsClientIds( action.replacedClientIds ) );
+ const parentClientIds = fillKeysWithEmptyObject(
+ getBlocksWithParentsClientIds( action.replacedClientIds )
+ );
newState.cache = {
...omit( newState.cache, action.replacedClientIds ),
...omit( parentClientIds, action.replacedClientIds ),
- ...fillKeysWithEmptyObject( keys( flattenBlocks( action.blocks ) ) ),
+ ...fillKeysWithEmptyObject(
+ keys( flattenBlocks( action.blocks ) )
+ ),
};
break;
case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
newState.cache = {
...omit( newState.cache, action.removedClientIds ),
...fillKeysWithEmptyObject(
- difference( getBlocksWithParentsClientIds( action.clientIds ), action.clientIds ),
+ difference(
+ getBlocksWithParentsClientIds( action.clientIds ),
+ action.clientIds
+ )
),
};
break;
@@ -322,9 +337,14 @@ const withBlockCache = ( reducer ) => ( state = {}, action ) => {
break;
}
case 'SAVE_REUSABLE_BLOCK_SUCCESS': {
- const updatedBlockUids = keys( omitBy( newState.attributes, ( attributes, clientId ) => {
- return newState.byClientId[ clientId ].name !== 'core/block' || attributes.ref !== action.updatedId;
- } ) );
+ const updatedBlockUids = keys(
+ omitBy( newState.attributes, ( attributes, clientId ) => {
+ return (
+ newState.byClientId[ clientId ].name !== 'core/block' ||
+ attributes.ref !== action.updatedId
+ );
+ } )
+ );
newState.cache = {
...newState.cache,
@@ -350,16 +370,26 @@ const withBlockCache = ( reducer ) => ( state = {}, action ) => {
*/
function withPersistentBlockChange( reducer ) {
let lastAction;
+ let markNextChangeAsNotPersistent = false;
return ( state, action ) => {
let nextState = reducer( state, action );
- const isExplicitPersistentChange = action.type === 'MARK_LAST_CHANGE_AS_PERSISTENT';
+ const isExplicitPersistentChange =
+ action.type === 'MARK_LAST_CHANGE_AS_PERSISTENT' ||
+ markNextChangeAsNotPersistent;
// Defer to previous state value (or default) unless changing or
// explicitly marking as persistent.
if ( state === nextState && ! isExplicitPersistentChange ) {
- const nextIsPersistentChange = get( state, [ 'isPersistentChange' ], true );
+ markNextChangeAsNotPersistent =
+ action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT';
+
+ const nextIsPersistentChange = get(
+ state,
+ [ 'isPersistentChange' ],
+ true
+ );
if ( state.isPersistentChange === nextIsPersistentChange ) {
return state;
}
@@ -372,16 +402,17 @@ function withPersistentBlockChange( reducer ) {
nextState = {
...nextState,
- isPersistentChange: (
- isExplicitPersistentChange ||
- ! isUpdatingSameBlockAttribute( action, lastAction )
- ),
+ isPersistentChange: isExplicitPersistentChange
+ ? ! markNextChangeAsNotPersistent
+ : ! isUpdatingSameBlockAttribute( action, lastAction ),
};
// In comparing against the previous action, consider only those which
// would have qualified as one which would have been ignored or not
// have resulted in a changed state.
lastAction = action;
+ markNextChangeAsNotPersistent =
+ action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT';
return nextState;
};
@@ -403,9 +434,7 @@ function withIgnoredBlockChange( reducer ) {
*
* @type {Set}
*/
- const IGNORED_ACTION_TYPES = new Set( [
- 'RECEIVE_BLOCKS',
- ] );
+ const IGNORED_ACTION_TYPES = new Set( [ 'RECEIVE_BLOCKS' ] );
return ( state, action ) => {
const nextState = reducer( state, action );
@@ -559,17 +588,20 @@ const withSaveReusableBlock = ( reducer ) => ( state, action ) => {
state = { ...state };
- state.attributes = mapValues( state.attributes, ( attributes, clientId ) => {
- const { name } = state.byClientId[ clientId ];
- if ( name === 'core/block' && attributes.ref === id ) {
- return {
- ...attributes,
- ref: updatedId,
- };
- }
+ state.attributes = mapValues(
+ state.attributes,
+ ( attributes, clientId ) => {
+ const { name } = state.byClientId[ clientId ];
+ if ( name === 'core/block' && attributes.ref === id ) {
+ return {
+ ...attributes,
+ ref: updatedId,
+ };
+ }
- return attributes;
- } );
+ return attributes;
+ }
+ );
}
return reducer( state, action );
@@ -591,7 +623,7 @@ export const blocks = flow(
withReplaceInnerBlocks, // needs to be after withInnerBlocksRemoveCascade
withBlockReset,
withPersistentBlockChange,
- withIgnoredBlockChange,
+ withIgnoredBlockChange
)( {
byClientId( state = {}, action ) {
switch ( action.type ) {
@@ -656,7 +688,10 @@ export const blocks = flow(
case 'UPDATE_BLOCK':
// Ignore updates if block isn't known or there are no attribute changes.
- if ( ! state[ action.clientId ] || ! action.updates.attributes ) {
+ if (
+ ! state[ action.clientId ] ||
+ ! action.updates.attributes
+ ) {
return state;
}
@@ -675,14 +710,21 @@ export const blocks = flow(
}
// Consider as updates only changed values
- const nextAttributes = reduce( action.attributes, ( result, value, key ) => {
- if ( value !== result[ key ] ) {
- result = getMutateSafeObject( state[ action.clientId ], result );
- result[ key ] = value;
- }
-
- return result;
- }, state[ action.clientId ] );
+ const nextAttributes = reduce(
+ action.attributes,
+ ( result, value, key ) => {
+ if ( value !== result[ key ] ) {
+ result = getMutateSafeObject(
+ state[ action.clientId ],
+ result
+ );
+ result[ key ] = value;
+ }
+
+ return result;
+ },
+ state[ action.clientId ]
+ );
// Skip update if nothing has been changed. The reference will
// match the original block if `reduce` had no changed values.
@@ -727,18 +769,29 @@ export const blocks = flow(
case 'INSERT_BLOCKS': {
const { rootClientId = '' } = action;
const subState = state[ rootClientId ] || [];
- const mappedBlocks = mapBlockOrder( action.blocks, rootClientId );
+ const mappedBlocks = mapBlockOrder(
+ action.blocks,
+ rootClientId
+ );
const { index = subState.length } = action;
return {
...state,
...mappedBlocks,
- [ rootClientId ]: insertAt( subState, mappedBlocks[ rootClientId ], index ),
+ [ rootClientId ]: insertAt(
+ subState,
+ mappedBlocks[ rootClientId ],
+ index
+ ),
};
}
case 'MOVE_BLOCK_TO_POSITION': {
- const { fromRootClientId = '', toRootClientId = '', clientId } = action;
+ const {
+ fromRootClientId = '',
+ toRootClientId = '',
+ clientId,
+ } = action;
const { index = state[ toRootClientId ].length } = action;
// Moving inside the same parent block
@@ -747,15 +800,26 @@ export const blocks = flow(
const fromIndex = subState.indexOf( clientId );
return {
...state,
- [ toRootClientId ]: moveTo( state[ toRootClientId ], fromIndex, index ),
+ [ toRootClientId ]: moveTo(
+ state[ toRootClientId ],
+ fromIndex,
+ index
+ ),
};
}
// Moving from a parent block to another
return {
...state,
- [ fromRootClientId ]: without( state[ fromRootClientId ], clientId ),
- [ toRootClientId ]: insertAt( state[ toRootClientId ], clientId, index ),
+ [ fromRootClientId ]: without(
+ state[ fromRootClientId ],
+ clientId
+ ),
+ [ toRootClientId ]: insertAt(
+ state[ toRootClientId ],
+ clientId,
+ index
+ ),
};
}
@@ -764,7 +828,10 @@ export const blocks = flow(
const firstClientId = first( clientIds );
const subState = state[ rootClientId ];
- if ( ! subState.length || firstClientId === first( subState ) ) {
+ if (
+ ! subState.length ||
+ firstClientId === first( subState )
+ ) {
return state;
}
@@ -772,7 +839,12 @@ export const blocks = flow(
return {
...state,
- [ rootClientId ]: moveTo( subState, firstIndex, firstIndex - 1, clientIds.length ),
+ [ rootClientId ]: moveTo(
+ subState,
+ firstIndex,
+ firstIndex - 1,
+ clientIds.length
+ ),
};
}
@@ -790,7 +862,12 @@ export const blocks = flow(
return {
...state,
- [ rootClientId ]: moveTo( subState, firstIndex, firstIndex + 1, clientIds.length ),
+ [ rootClientId ]: moveTo(
+ subState,
+ firstIndex,
+ firstIndex + 1,
+ clientIds.length
+ ),
};
}
@@ -803,27 +880,35 @@ export const blocks = flow(
const mappedBlocks = mapBlockOrder( action.blocks );
return flow( [
- ( nextState ) => omit( nextState, action.replacedClientIds ),
+ ( nextState ) =>
+ omit( nextState, action.replacedClientIds ),
( nextState ) => ( {
...nextState,
...omit( mappedBlocks, '' ),
} ),
- ( nextState ) => mapValues( nextState, ( subState ) => (
- reduce( subState, ( result, clientId ) => {
- if ( clientId === clientIds[ 0 ] ) {
- return [
- ...result,
- ...mappedBlocks[ '' ],
- ];
- }
-
- if ( clientIds.indexOf( clientId ) === -1 ) {
- result.push( clientId );
- }
-
- return result;
- }, [] )
- ) ),
+ ( nextState ) =>
+ mapValues( nextState, ( subState ) =>
+ reduce(
+ subState,
+ ( result, clientId ) => {
+ if ( clientId === clientIds[ 0 ] ) {
+ return [
+ ...result,
+ ...mappedBlocks[ '' ],
+ ];
+ }
+
+ if (
+ clientIds.indexOf( clientId ) === -1
+ ) {
+ result.push( clientId );
+ }
+
+ return result;
+ },
+ []
+ )
+ ),
] )( state );
}
@@ -833,9 +918,10 @@ export const blocks = flow(
( nextState ) => omit( nextState, action.removedClientIds ),
// Remove deleted blocks from other blocks' orderings
- ( nextState ) => mapValues( nextState, ( subState ) => (
- without( subState, ...action.removedClientIds )
- ) ),
+ ( nextState ) =>
+ mapValues( nextState, ( subState ) =>
+ without( subState, ...action.removedClientIds )
+ ),
] )( state );
}
@@ -858,7 +944,10 @@ export const blocks = flow(
case 'INSERT_BLOCKS':
return {
...state,
- ...mapBlockParents( action.blocks, action.rootClientId || '' ),
+ ...mapBlockParents(
+ action.blocks,
+ action.rootClientId || ''
+ ),
};
case 'MOVE_BLOCK_TO_POSITION': {
@@ -871,7 +960,10 @@ export const blocks = flow(
case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN':
return {
...omit( state, action.replacedClientIds ),
- ...mapBlockParents( action.blocks, state[ action.clientIds[ 0 ] ] ),
+ ...mapBlockParents(
+ action.blocks,
+ state[ action.clientIds[ 0 ] ]
+ ),
};
case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
@@ -989,7 +1081,8 @@ function selection( state = {}, action ) {
return state;
}
- const indexToSelect = action.indexToSelect || action.blocks.length - 1;
+ const indexToSelect =
+ action.indexToSelect || action.blocks.length - 1;
const blockToSelect = action.blocks[ indexToSelect ];
if ( ! blockToSelect ) {
@@ -1121,7 +1214,10 @@ export function blocksMode( state = {}, action ) {
const { clientId } = action;
return {
...state,
- [ clientId ]: state[ clientId ] && state[ clientId ] === 'html' ? 'visual' : 'html',
+ [ clientId ]:
+ state[ clientId ] && state[ clientId ] === 'html'
+ ? 'visual'
+ : 'html',
};
}
@@ -1217,7 +1313,9 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) {
...prevState.insertUsage,
[ id ]: {
time: action.time,
- count: prevState.insertUsage[ id ] ? prevState.insertUsage[ id ].count + 1 : 1,
+ count: prevState.insertUsage[ id ]
+ ? prevState.insertUsage[ id ].count + 1
+ : 1,
insert,
},
},
@@ -1241,7 +1339,7 @@ export const blockListSettings = ( state = {}, action ) => {
switch ( action.type ) {
// Even if the replaced blocks have the same client ID, our logic
// should correct the state.
- case 'REPLACE_BLOCKS' :
+ case 'REPLACE_BLOCKS':
case 'REMOVE_BLOCKS': {
return omit( state, action.clientIds );
}
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 8c4d6c6395e7d..f6c1f3052530a 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -66,7 +66,14 @@ export const INSERTER_UTILITY_NONE = 0;
const MILLISECONDS_PER_HOUR = 3600 * 1000;
const MILLISECONDS_PER_DAY = 24 * 3600 * 1000;
const MILLISECONDS_PER_WEEK = 7 * 24 * 3600 * 1000;
-const templateIcon =
+
+
+
+);
/**
* Shared reference to an empty array for cases where it is important to avoid
@@ -190,9 +197,8 @@ export const __unstableGetBlockWithoutInnerBlocks = createSelector(
*/
export const getBlocks = createSelector(
( state, rootClientId ) => {
- return map(
- getBlockOrder( state, rootClientId ),
- ( clientId ) => getBlock( state, clientId )
+ return map( getBlockOrder( state, rootClientId ), ( clientId ) =>
+ getBlock( state, clientId )
);
},
( state ) => [
@@ -211,10 +217,14 @@ export const getBlocks = createSelector(
*
* @return {Array} ids of descendants.
*/
-export const getClientIdsOfDescendants = ( state, clientIds ) => flatMap( clientIds, ( clientId ) => {
- const descendants = getBlockOrder( state, clientId );
- return [ ...descendants, ...getClientIdsOfDescendants( state, descendants ) ];
-} );
+export const getClientIdsOfDescendants = ( state, clientIds ) =>
+ flatMap( clientIds, ( clientId ) => {
+ const descendants = getBlockOrder( state, clientId );
+ return [
+ ...descendants,
+ ...getClientIdsOfDescendants( state, descendants ),
+ ];
+ } );
/**
* Returns an array containing the clientIds of the top-level blocks
@@ -227,11 +237,12 @@ export const getClientIdsOfDescendants = ( state, clientIds ) => flatMap( client
export const getClientIdsWithDescendants = createSelector(
( state ) => {
const topLevelIds = getBlockOrder( state );
- return [ ...topLevelIds, ...getClientIdsOfDescendants( state, topLevelIds ) ];
+ return [
+ ...topLevelIds,
+ ...getClientIdsOfDescendants( state, topLevelIds ),
+ ];
},
- ( state ) => [
- state.blocks.order,
- ]
+ ( state ) => [ state.blocks.order ]
);
/**
@@ -249,15 +260,16 @@ export const getGlobalBlockCount = createSelector(
if ( ! blockName ) {
return clientIds.length;
}
- return reduce( clientIds, ( accumulator, clientId ) => {
- const block = state.blocks.byClientId[ clientId ];
- return block.name === blockName ? accumulator + 1 : accumulator;
- }, 0 );
+ return reduce(
+ clientIds,
+ ( accumulator, clientId ) => {
+ const block = state.blocks.byClientId[ clientId ];
+ return block.name === blockName ? accumulator + 1 : accumulator;
+ },
+ 0
+ );
},
- ( state ) => [
- state.blocks.order,
- state.blocks.byClientId,
- ]
+ ( state ) => [ state.blocks.order, state.blocks.byClientId ]
);
/**
@@ -270,10 +282,10 @@ export const getGlobalBlockCount = createSelector(
* @return {WPBlock[]} Block objects.
*/
export const getBlocksByClientId = createSelector(
- ( state, clientIds ) => map(
- castArray( clientIds ),
- ( clientId ) => getBlock( state, clientId )
- ),
+ ( state, clientIds ) =>
+ map( castArray( clientIds ), ( clientId ) =>
+ getBlock( state, clientId )
+ ),
( state ) => [
state.blocks.byClientId,
state.blocks.order,
@@ -351,7 +363,8 @@ export function getBlockSelectionEnd( state ) {
* @return {number} Number of blocks selected in the post.
*/
export function getSelectedBlockCount( state ) {
- const multiSelectedBlockCount = getMultiSelectedBlockClientIds( state ).length;
+ const multiSelectedBlockCount = getMultiSelectedBlockClientIds( state )
+ .length;
if ( multiSelectedBlockCount ) {
return multiSelectedBlockCount;
@@ -417,9 +430,9 @@ export function getSelectedBlock( state ) {
* @return {?string} Root client ID, if exists
*/
export function getBlockRootClientId( state, clientId ) {
- return state.blocks.parents[ clientId ] !== undefined ?
- state.blocks.parents[ clientId ] :
- null;
+ return state.blocks.parents[ clientId ] !== undefined
+ ? state.blocks.parents[ clientId ]
+ : null;
}
/**
@@ -442,9 +455,7 @@ export const getBlockParents = createSelector(
return ascending ? parents : parents.reverse();
},
- ( state ) => [
- state.blocks.parents,
- ]
+ ( state ) => [ state.blocks.parents ]
);
/**
@@ -476,7 +487,10 @@ export function getBlockHierarchyRootClientId( state, clientId ) {
export function getLowestCommonAncestorWithSelectedBlock( state, clientId ) {
const selectedId = getSelectedBlockClientId( state );
const clientParents = [ ...getBlockParents( state, clientId ), clientId ];
- const selectedParents = [ ...getBlockParents( state, selectedId ), selectedId ];
+ const selectedParents = [
+ ...getBlockParents( state, selectedId ),
+ selectedId,
+ ];
let lowestCommonAncestor;
@@ -536,7 +550,7 @@ export function getAdjacentBlockClientId( state, startClientId, modifier = 1 ) {
const { order } = state.blocks;
const orderSet = order[ rootClientId ];
const index = orderSet.indexOf( startClientId );
- const nextIndex = ( index + ( 1 * modifier ) );
+ const nextIndex = index + 1 * modifier;
// Block was first in set and we're attempting to get previous.
if ( nextIndex < 0 ) {
@@ -619,7 +633,10 @@ export const getSelectedBlockClientIds = createSelector(
// Retrieve root client ID to aid in retrieving relevant nested block
// order, being careful to allow the falsey empty string top-level root
// by explicitly testing against null.
- const rootClientId = getBlockRootClientId( state, selectionStart.clientId );
+ const rootClientId = getBlockRootClientId(
+ state,
+ selectionStart.clientId
+ );
if ( rootClientId === null ) {
return EMPTY_ARRAY;
}
@@ -638,7 +655,7 @@ export const getSelectedBlockClientIds = createSelector(
state.blocks.order,
state.selectionStart.clientId,
state.selectionEnd.clientId,
- ],
+ ]
);
/**
@@ -669,12 +686,16 @@ export function getMultiSelectedBlockClientIds( state ) {
*/
export const getMultiSelectedBlocks = createSelector(
( state ) => {
- const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds( state );
+ const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(
+ state
+ );
if ( ! multiSelectedBlockClientIds.length ) {
return EMPTY_ARRAY;
}
- return multiSelectedBlockClientIds.map( ( clientId ) => getBlock( state, clientId ) );
+ return multiSelectedBlockClientIds.map( ( clientId ) =>
+ getBlock( state, clientId )
+ );
},
( state ) => [
...getSelectedBlockClientIds.getDependants( state ),
@@ -759,7 +780,7 @@ export const isAncestorMultiSelected = createSelector(
state.blocks.order,
state.selectionStart.clientId,
state.selectionEnd.clientId,
- ],
+ ]
);
/**
* Returns the client ID of the block which begins the multi-selection set, or
@@ -864,11 +885,10 @@ export function isBlockSelected( state, clientId ) {
export function hasSelectedInnerBlock( state, clientId, deep = false ) {
return some(
getBlockOrder( state, clientId ),
- ( innerClientId ) => (
+ ( innerClientId ) =>
isBlockSelected( state, innerClientId ) ||
isBlockMultiSelected( state, innerClientId ) ||
( deep && hasSelectedInnerBlock( state, innerClientId, deep ) )
- )
);
}
@@ -1070,7 +1090,11 @@ export function getTemplateLock( state, rootClientId ) {
*
* @return {boolean} Whether the given block type is allowed to be inserted.
*/
-const canInsertBlockTypeUnmemoized = ( state, blockName, rootClientId = null ) => {
+const canInsertBlockTypeUnmemoized = (
+ state,
+ blockName,
+ rootClientId = null
+) => {
const checkAllowList = ( list, item, defaultResult = null ) => {
if ( isBoolean( list ) ) {
return list;
@@ -1094,7 +1118,11 @@ const canInsertBlockTypeUnmemoized = ( state, blockName, rootClientId = null ) =
const { allowedBlockTypes } = getSettings( state );
- const isBlockAllowedInEditor = checkAllowList( allowedBlockTypes, blockName, true );
+ const isBlockAllowedInEditor = checkAllowList(
+ allowedBlockTypes,
+ blockName,
+ true
+ );
if ( ! isBlockAllowedInEditor ) {
return false;
}
@@ -1105,12 +1133,20 @@ const canInsertBlockTypeUnmemoized = ( state, blockName, rootClientId = null ) =
}
const parentBlockListSettings = getBlockListSettings( state, rootClientId );
- const parentAllowedBlocks = get( parentBlockListSettings, [ 'allowedBlocks' ] );
- const hasParentAllowedBlock = checkAllowList( parentAllowedBlocks, blockName );
+ const parentAllowedBlocks = get( parentBlockListSettings, [
+ 'allowedBlocks',
+ ] );
+ const hasParentAllowedBlock = checkAllowList(
+ parentAllowedBlocks,
+ blockName
+ );
const blockAllowedParentBlocks = blockType.parent;
const parentName = getBlockName( state, rootClientId );
- const hasBlockAllowedParent = checkAllowList( blockAllowedParentBlocks, parentName );
+ const hasBlockAllowedParent = checkAllowList(
+ blockAllowedParentBlocks,
+ parentName
+ );
if ( hasParentAllowedBlock !== null && hasBlockAllowedParent !== null ) {
return hasParentAllowedBlock || hasBlockAllowedParent;
@@ -1139,7 +1175,7 @@ export const canInsertBlockType = createSelector(
state.blocks.byClientId[ rootClientId ],
state.settings.allowedBlockTypes,
state.settings.templateLock,
- ],
+ ]
);
/**
@@ -1250,22 +1286,40 @@ export const getInserterItems = createSelector(
let isDisabled = false;
if ( ! hasBlockSupport( blockType.name, 'multiple', true ) ) {
- isDisabled = some( getBlocksByClientId( state, getClientIdsWithDescendants( state ) ), { name: blockType.name } );
+ isDisabled = some(
+ getBlocksByClientId(
+ state,
+ getClientIdsWithDescendants( state )
+ ),
+ {
+ name: blockType.name,
+ }
+ );
}
const isContextual = isArray( blockType.parent );
const { time, count = 0 } = getInsertUsage( state, id ) || {};
+ const inserterVariations = blockType.variations.filter(
+ ( { scope } ) => ! scope || scope.includes( 'inserter' )
+ );
return {
id,
name: blockType.name,
initialAttributes: {},
title: blockType.title,
+ description: blockType.description,
icon: blockType.icon,
category: blockType.category,
keywords: blockType.keywords,
+ variations: inserterVariations,
+ example: blockType.example,
isDisabled,
- utility: calculateUtility( blockType.category, count, isContextual ),
+ utility: calculateUtility(
+ blockType.category,
+ count,
+ isContextual
+ ),
frecency: calculateFrecency( time, count ),
};
};
@@ -1273,10 +1327,15 @@ export const getInserterItems = createSelector(
const buildReusableBlockInserterItem = ( reusableBlock ) => {
const id = `core/block/${ reusableBlock.id }`;
- const referencedBlocks = __experimentalGetParsedReusableBlock( state, reusableBlock.id );
+ const referencedBlocks = __experimentalGetParsedReusableBlock(
+ state,
+ reusableBlock.id
+ );
let referencedBlockType;
if ( referencedBlocks.length === 1 ) {
- referencedBlockType = getBlockType( referencedBlocks[ 0 ].name );
+ referencedBlockType = getBlockType(
+ referencedBlocks[ 0 ].name
+ );
}
const { time, count = 0 } = getInsertUsage( state, id ) || {};
@@ -1288,7 +1347,9 @@ export const getInserterItems = createSelector(
name: 'core/block',
initialAttributes: { ref: reusableBlock.id },
title: reusableBlock.title,
- icon: referencedBlockType ? referencedBlockType.icon : templateIcon,
+ icon: referencedBlockType
+ ? referencedBlockType.icon
+ : templateIcon,
category: 'reusable',
keywords: [],
isDisabled: false,
@@ -1298,12 +1359,18 @@ export const getInserterItems = createSelector(
};
const blockTypeInserterItems = getBlockTypes()
- .filter( ( blockType ) => canIncludeBlockTypeInInserter( state, blockType, rootClientId ) )
+ .filter( ( blockType ) =>
+ canIncludeBlockTypeInInserter( state, blockType, rootClientId )
+ )
.map( buildBlockTypeInserterItem );
- const reusableBlockInserterItems = canInsertBlockTypeUnmemoized( state, 'core/block', rootClientId ) ?
- getReusableBlocks( state ).map( buildReusableBlockInserterItem ) :
- [];
+ const reusableBlockInserterItems = canInsertBlockTypeUnmemoized(
+ state,
+ 'core/block',
+ rootClientId
+ )
+ ? getReusableBlocks( state ).map( buildReusableBlockInserterItem )
+ : [];
return orderBy(
[ ...blockTypeInserterItems, ...reusableBlockInserterItems ],
@@ -1320,7 +1387,7 @@ export const getInserterItems = createSelector(
state.settings.templateLock,
getReusableBlocks( state ),
getBlockTypes(),
- ],
+ ]
);
/**
@@ -1333,17 +1400,15 @@ export const getInserterItems = createSelector(
*/
export const hasInserterItems = createSelector(
( state, rootClientId = null ) => {
- const hasBlockType = some(
- getBlockTypes(),
- ( blockType ) => canIncludeBlockTypeInInserter( state, blockType, rootClientId )
+ const hasBlockType = some( getBlockTypes(), ( blockType ) =>
+ canIncludeBlockTypeInInserter( state, blockType, rootClientId )
);
if ( hasBlockType ) {
return true;
}
- const hasReusableBlock = (
+ const hasReusableBlock =
canInsertBlockTypeUnmemoized( state, 'core/block', rootClientId ) &&
- getReusableBlocks( state ).length > 0
- );
+ getReusableBlocks( state ).length > 0;
return hasReusableBlock;
},
@@ -1354,7 +1419,7 @@ export const hasInserterItems = createSelector(
state.settings.templateLock,
getReusableBlocks( state ),
getBlockTypes(),
- ],
+ ]
);
/**
@@ -1371,9 +1436,8 @@ export const __experimentalGetAllowedBlocks = createSelector(
return;
}
- return filter(
- getBlockTypes(),
- ( blockType ) => canIncludeBlockTypeInInserter( state, blockType, rootClientId )
+ return filter( getBlockTypes(), ( blockType ) =>
+ canIncludeBlockTypeInInserter( state, blockType, rootClientId )
);
},
( state, rootClientId ) => [
@@ -1431,11 +1495,11 @@ export function isLastBlockChangePersistent( state ) {
*/
export const __experimentalGetBlockListSettingsForBlocks = createSelector(
( state, clientIds ) => {
- return filter( state.blockListSettings, ( value, key ) => clientIds.includes( key ) );
+ return filter( state.blockListSettings, ( value, key ) =>
+ clientIds.includes( key )
+ );
},
- ( state ) => [
- state.blockListSettings,
- ],
+ ( state ) => [ state.blockListSettings ]
);
/**
@@ -1458,9 +1522,7 @@ export const __experimentalGetParsedReusableBlock = createSelector(
return parse( reusableBlock.content );
},
- ( state ) => [
- getReusableBlocks( state ),
- ],
+ ( state ) => [ getReusableBlocks( state ) ]
);
/**
@@ -1502,7 +1564,11 @@ export function __experimentalGetLastBlockAttributeChanges( state ) {
* @return {Array} Reusable blocks
*/
function getReusableBlocks( state ) {
- return get( state, [ 'settings', '__experimentalReusableBlocks' ], EMPTY_ARRAY );
+ return get(
+ state,
+ [ 'settings', '__experimentalReusableBlocks' ],
+ EMPTY_ARRAY
+ );
}
/**
diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js
index d6e99912904df..3cad986cd639b 100644
--- a/packages/block-editor/src/store/test/actions.js
+++ b/packages/block-editor/src/store/test/actions.js
@@ -129,45 +129,35 @@ describe( 'actions', () => {
// Skip getSettings select.
replaceBlockGenerator.next();
- expect(
- replaceBlockGenerator.next().value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next().value ).toEqual( {
args: [ 'chicken' ],
selectorName: 'getBlockRootClientId',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- replaceBlockGenerator.next().value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next().value ).toEqual( {
args: [ 'core/test-block', undefined ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- replaceBlockGenerator.next( true ).value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next( true ).value ).toEqual( {
type: 'REPLACE_BLOCKS',
clientIds: [ 'chicken' ],
blocks: [ block ],
time: expect.any( Number ),
} );
- expect(
- replaceBlockGenerator.next().value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next().value ).toEqual( {
args: [],
selectorName: 'getBlockCount',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- replaceBlockGenerator.next( 1 ),
- ).toEqual( {
+ expect( replaceBlockGenerator.next( 1 ) ).toEqual( {
value: undefined,
done: true,
} );
@@ -176,122 +166,112 @@ describe( 'actions', () => {
describe( 'replaceBlocks', () => {
it( 'should not yield the REPLACE_BLOCKS action if the replacement is not possible', () => {
- const blocks = [ {
- clientId: 'ribs',
- name: 'core/test-ribs',
- }, {
- clientId: 'chicken',
- name: 'core/test-chicken',
- } ];
+ const blocks = [
+ {
+ clientId: 'ribs',
+ name: 'core/test-ribs',
+ },
+ {
+ clientId: 'chicken',
+ name: 'core/test-chicken',
+ },
+ ];
- const replaceBlockGenerator = replaceBlocks( [ 'chicken' ], blocks );
+ const replaceBlockGenerator = replaceBlocks(
+ [ 'chicken' ],
+ blocks
+ );
- expect(
- replaceBlockGenerator.next().value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next().value ).toEqual( {
args: [],
selectorName: 'getSettings',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- replaceBlockGenerator.next().value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next().value ).toEqual( {
args: [ 'chicken' ],
selectorName: 'getBlockRootClientId',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- replaceBlockGenerator.next().value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next().value ).toEqual( {
args: [ 'core/test-ribs', undefined ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- replaceBlockGenerator.next( true ).value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next( true ).value ).toEqual( {
args: [ 'core/test-chicken', undefined ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- replaceBlockGenerator.next( false ),
- ).toEqual( {
+ expect( replaceBlockGenerator.next( false ) ).toEqual( {
value: undefined,
done: true,
} );
} );
it( 'should yield the REPLACE_BLOCKS action if the all the replacement blocks can be inserted in the parent block', () => {
- const blocks = [ {
- clientId: 'ribs',
- name: 'core/test-ribs',
- }, {
- clientId: 'chicken',
- name: 'core/test-chicken',
- } ];
+ const blocks = [
+ {
+ clientId: 'ribs',
+ name: 'core/test-ribs',
+ },
+ {
+ clientId: 'chicken',
+ name: 'core/test-chicken',
+ },
+ ];
- const replaceBlockGenerator = replaceBlocks( [ 'chicken' ], blocks );
+ const replaceBlockGenerator = replaceBlocks(
+ [ 'chicken' ],
+ blocks
+ );
// Skip getSettings select.
replaceBlockGenerator.next();
- expect(
- replaceBlockGenerator.next().value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next().value ).toEqual( {
args: [ 'chicken' ],
selectorName: 'getBlockRootClientId',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- replaceBlockGenerator.next().value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next().value ).toEqual( {
args: [ 'core/test-ribs', undefined ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- replaceBlockGenerator.next( true ).value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next( true ).value ).toEqual( {
args: [ 'core/test-chicken', undefined ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- replaceBlockGenerator.next( true ).value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next( true ).value ).toEqual( {
type: 'REPLACE_BLOCKS',
clientIds: [ 'chicken' ],
blocks,
time: expect.any( Number ),
} );
- expect(
- replaceBlockGenerator.next().value,
- ).toEqual( {
+ expect( replaceBlockGenerator.next().value ).toEqual( {
args: [],
selectorName: 'getBlockCount',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- replaceBlockGenerator.next( 1 ),
- ).toEqual( {
+ expect( replaceBlockGenerator.next( 1 ) ).toEqual( {
value: undefined,
done: true,
} );
@@ -306,23 +286,24 @@ describe( 'actions', () => {
};
const index = 5;
- const insertBlockGenerator = insertBlock( block, index, 'testclientid', true );
+ const insertBlockGenerator = insertBlock(
+ block,
+ index,
+ 'testclientid',
+ true
+ );
// Skip getSettings select.
insertBlockGenerator.next();
- expect(
- insertBlockGenerator.next().value
- ).toEqual( {
+ expect( insertBlockGenerator.next().value ).toEqual( {
args: [ 'core/test-block', 'testclientid' ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- insertBlockGenerator.next( true ),
- ).toEqual( {
+ expect( insertBlockGenerator.next( true ) ).toEqual( {
done: true,
value: {
type: 'INSERT_BLOCKS',
@@ -350,17 +331,16 @@ describe( 'actions', () => {
clientId: 'chicken-ribs',
name: 'core/test-chicken-ribs',
};
- const blocks = [
- ribsBlock,
- chickenBlock,
- chickenRibsBlock,
- ];
+ const blocks = [ ribsBlock, chickenBlock, chickenRibsBlock ];
- const insertBlocksGenerator = insertBlocks( blocks, 5, 'testrootid', false );
+ const insertBlocksGenerator = insertBlocks(
+ blocks,
+ 5,
+ 'testrootid',
+ false
+ );
- expect(
- insertBlocksGenerator.next().value,
- ).toEqual( {
+ expect( insertBlocksGenerator.next().value ).toEqual( {
args: [],
selectorName: 'getSettings',
storeName: 'core/block-editor',
@@ -375,7 +355,7 @@ describe( 'actions', () => {
'core/test-chicken-ribs': 'colorful',
},
},
- } ).value,
+ } ).value
).toEqual( {
args: [ 'core/test-ribs', 'testrootid' ],
selectorName: 'canInsertBlockType',
@@ -383,34 +363,34 @@ describe( 'actions', () => {
type: 'SELECT',
} );
- expect(
- insertBlocksGenerator.next( true ).value
- ).toEqual( {
+ expect( insertBlocksGenerator.next( true ).value ).toEqual( {
args: [ 'core/test-chicken', 'testrootid' ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- insertBlocksGenerator.next( true ).value,
- ).toEqual( {
+ expect( insertBlocksGenerator.next( true ).value ).toEqual( {
args: [ 'core/test-chicken-ribs', 'testrootid' ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- insertBlocksGenerator.next( true ),
- ).toEqual( {
+ expect( insertBlocksGenerator.next( true ) ).toEqual( {
done: true,
value: {
type: 'INSERT_BLOCKS',
blocks: [
- { ...ribsBlock, attributes: { className: 'is-style-squared' } },
+ {
+ ...ribsBlock,
+ attributes: { className: 'is-style-squared' },
+ },
chickenBlock,
- { ...chickenRibsBlock, attributes: { className: 'is-style-colorful' } },
+ {
+ ...chickenRibsBlock,
+ attributes: { className: 'is-style-colorful' },
+ },
],
index: 5,
rootClientId: 'testrootid',
@@ -428,15 +408,16 @@ describe( 'actions', () => {
className: 'is-style-colorful',
},
};
- const blocks = [
- ribsWithStyleBlock,
- ];
+ const blocks = [ ribsWithStyleBlock ];
- const insertBlocksGenerator = insertBlocks( blocks, 5, 'testrootid', false );
+ const insertBlocksGenerator = insertBlocks(
+ blocks,
+ 5,
+ 'testrootid',
+ false
+ );
- expect(
- insertBlocksGenerator.next().value,
- ).toEqual( {
+ expect( insertBlocksGenerator.next().value ).toEqual( {
args: [],
selectorName: 'getSettings',
storeName: 'core/block-editor',
@@ -450,7 +431,7 @@ describe( 'actions', () => {
'core/test-ribs': 'squared',
},
},
- } ).value,
+ } ).value
).toEqual( {
args: [ 'core/test-ribs', 'testrootid' ],
selectorName: 'canInsertBlockType',
@@ -458,14 +439,15 @@ describe( 'actions', () => {
type: 'SELECT',
} );
- expect(
- insertBlocksGenerator.next( true ),
- ).toEqual( {
+ expect( insertBlocksGenerator.next( true ) ).toEqual( {
done: true,
value: {
type: 'INSERT_BLOCKS',
blocks: [
- { ...ribsWithStyleBlock, attributes: { className: 'is-style-colorful' } },
+ {
+ ...ribsWithStyleBlock,
+ attributes: { className: 'is-style-colorful' },
+ },
],
index: 5,
rootClientId: 'testrootid',
@@ -487,47 +469,40 @@ describe( 'actions', () => {
clientId: 'chicken-ribs',
name: 'core/test-chicken-ribs',
};
- const blocks = [
- ribsBlock,
- chickenBlock,
- chickenRibsBlock,
- ];
+ const blocks = [ ribsBlock, chickenBlock, chickenRibsBlock ];
- const insertBlocksGenerator = insertBlocks( blocks, 5, 'testrootid', false );
+ const insertBlocksGenerator = insertBlocks(
+ blocks,
+ 5,
+ 'testrootid',
+ false
+ );
// Skip getSettings select.
insertBlocksGenerator.next();
- expect(
- insertBlocksGenerator.next().value
- ).toEqual( {
+ expect( insertBlocksGenerator.next().value ).toEqual( {
args: [ 'core/test-ribs', 'testrootid' ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- insertBlocksGenerator.next( true ).value
- ).toEqual( {
+ expect( insertBlocksGenerator.next( true ).value ).toEqual( {
args: [ 'core/test-chicken', 'testrootid' ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- insertBlocksGenerator.next( false ).value,
- ).toEqual( {
+ expect( insertBlocksGenerator.next( false ).value ).toEqual( {
args: [ 'core/test-chicken-ribs', 'testrootid' ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- insertBlocksGenerator.next( true ),
- ).toEqual( {
+ expect( insertBlocksGenerator.next( true ) ).toEqual( {
done: true,
value: {
type: 'INSERT_BLOCKS',
@@ -549,37 +524,33 @@ describe( 'actions', () => {
clientId: 'chicken',
name: 'core/test-chicken',
};
- const blocks = [
- ribsBlock,
- chickenBlock,
- ];
+ const blocks = [ ribsBlock, chickenBlock ];
- const insertBlocksGenerator = insertBlocks( blocks, 5, 'testrootid', false );
+ const insertBlocksGenerator = insertBlocks(
+ blocks,
+ 5,
+ 'testrootid',
+ false
+ );
// Skip getSettings select.
insertBlocksGenerator.next();
- expect(
- insertBlocksGenerator.next().value
- ).toEqual( {
+ expect( insertBlocksGenerator.next().value ).toEqual( {
args: [ 'core/test-ribs', 'testrootid' ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- insertBlocksGenerator.next( false ).value,
- ).toEqual( {
+ expect( insertBlocksGenerator.next( false ).value ).toEqual( {
args: [ 'core/test-chicken', 'testrootid' ],
selectorName: 'canInsertBlockType',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- insertBlocksGenerator.next( false ),
- ).toEqual( {
+ expect( insertBlocksGenerator.next( false ) ).toEqual( {
done: true,
value: undefined,
} );
@@ -606,7 +577,9 @@ describe( 'actions', () => {
it( 'should return MERGE_BLOCKS action', () => {
const firstBlockClientId = 'blockA';
const secondBlockClientId = 'blockB';
- expect( mergeBlocks( firstBlockClientId, secondBlockClientId ) ).toEqual( {
+ expect(
+ mergeBlocks( firstBlockClientId, secondBlockClientId )
+ ).toEqual( {
type: 'MERGE_BLOCKS',
blocks: [ firstBlockClientId, secondBlockClientId ],
} );
@@ -628,10 +601,7 @@ describe( 'actions', () => {
type: 'REMOVE_BLOCKS',
clientIds,
},
- select(
- 'core/block-editor',
- 'getBlockCount',
- ),
+ select( 'core/block-editor', 'getBlockCount' ),
] );
} );
} );
@@ -645,9 +615,7 @@ describe( 'actions', () => {
5
);
- expect(
- moveBlockToPositionGenerator.next().value
- ).toEqual( {
+ expect( moveBlockToPositionGenerator.next().value ).toEqual( {
args: [ 'ribs' ],
selectorName: 'getTemplateLock',
storeName: 'core/block-editor',
@@ -664,9 +632,7 @@ describe( 'actions', () => {
index: 5,
} );
- expect(
- moveBlockToPositionGenerator.next().done
- ).toBe( true );
+ expect( moveBlockToPositionGenerator.next().done ).toBe( true );
} );
it( 'should not yield MOVE_BLOCK_TO_POSITION action if locking is all', () => {
@@ -677,18 +643,14 @@ describe( 'actions', () => {
5
);
- expect(
- moveBlockToPositionGenerator.next().value
- ).toEqual( {
+ expect( moveBlockToPositionGenerator.next().value ).toEqual( {
args: [ 'ribs' ],
selectorName: 'getTemplateLock',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- moveBlockToPositionGenerator.next( 'all' )
- ).toEqual( {
+ expect( moveBlockToPositionGenerator.next( 'all' ) ).toEqual( {
done: true,
value: undefined,
} );
@@ -702,42 +664,35 @@ describe( 'actions', () => {
5
);
- expect(
- moveBlockToPositionGenerator.next().value
- ).toEqual( {
+ expect( moveBlockToPositionGenerator.next().value ).toEqual( {
args: [ 'ribs' ],
selectorName: 'getTemplateLock',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- moveBlockToPositionGenerator.next( 'insert' )
- ).toEqual( {
+ expect( moveBlockToPositionGenerator.next( 'insert' ) ).toEqual( {
done: true,
value: undefined,
} );
} );
it( 'should yield MOVE_BLOCK_TO_POSITION action if there is not locking in the original root block and block can be inserted in the destination', () => {
- const moveBlockToPositionGenerator = moveBlockToPosition( 'chicken',
+ const moveBlockToPositionGenerator = moveBlockToPosition(
+ 'chicken',
'ribs',
'chicken-ribs',
5
);
- expect(
- moveBlockToPositionGenerator.next().value
- ).toEqual( {
+ expect( moveBlockToPositionGenerator.next().value ).toEqual( {
args: [ 'ribs' ],
selectorName: 'getTemplateLock',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- moveBlockToPositionGenerator.next().value
- ).toEqual( {
+ expect( moveBlockToPositionGenerator.next().value ).toEqual( {
args: [ 'chicken' ],
selectorName: 'getBlockName',
storeName: 'core/block-editor',
@@ -745,7 +700,8 @@ describe( 'actions', () => {
} );
expect(
- moveBlockToPositionGenerator.next( 'myblock/chicken-block' ).value
+ moveBlockToPositionGenerator.next( 'myblock/chicken-block' )
+ .value
).toEqual( {
args: [ 'myblock/chicken-block', 'chicken-ribs' ],
selectorName: 'canInsertBlockType',
@@ -753,9 +709,7 @@ describe( 'actions', () => {
type: 'SELECT',
} );
- expect(
- moveBlockToPositionGenerator.next( true ).value
- ).toEqual( {
+ expect( moveBlockToPositionGenerator.next( true ).value ).toEqual( {
type: 'MOVE_BLOCK_TO_POSITION',
fromRootClientId: 'ribs',
toRootClientId: 'chicken-ribs',
@@ -763,33 +717,28 @@ describe( 'actions', () => {
index: 5,
} );
- expect(
- moveBlockToPositionGenerator.next()
- ).toEqual( {
+ expect( moveBlockToPositionGenerator.next() ).toEqual( {
done: true,
value: undefined,
} );
} );
it( 'should not yield MOVE_BLOCK_TO_POSITION action if there is not locking in the original root block and block can be inserted in the destination', () => {
- const moveBlockToPositionGenerator = moveBlockToPosition( 'chicken',
+ const moveBlockToPositionGenerator = moveBlockToPosition(
+ 'chicken',
'ribs',
'chicken-ribs',
5
);
- expect(
- moveBlockToPositionGenerator.next().value
- ).toEqual( {
+ expect( moveBlockToPositionGenerator.next().value ).toEqual( {
args: [ 'ribs' ],
selectorName: 'getTemplateLock',
storeName: 'core/block-editor',
type: 'SELECT',
} );
- expect(
- moveBlockToPositionGenerator.next().value
- ).toEqual( {
+ expect( moveBlockToPositionGenerator.next().value ).toEqual( {
args: [ 'chicken' ],
selectorName: 'getBlockName',
storeName: 'core/block-editor',
@@ -797,7 +746,8 @@ describe( 'actions', () => {
} );
expect(
- moveBlockToPositionGenerator.next( 'myblock/chicken-block' ).value
+ moveBlockToPositionGenerator.next( 'myblock/chicken-block' )
+ .value
).toEqual( {
args: [ 'myblock/chicken-block', 'chicken-ribs' ],
selectorName: 'canInsertBlockType',
@@ -805,9 +755,7 @@ describe( 'actions', () => {
type: 'SELECT',
} );
- expect(
- moveBlockToPositionGenerator.next( false )
- ).toEqual( {
+ expect( moveBlockToPositionGenerator.next( false ) ).toEqual( {
done: true,
value: undefined,
} );
@@ -828,10 +776,7 @@ describe( 'actions', () => {
type: 'REMOVE_BLOCKS',
clientIds: [ clientId ],
},
- select(
- 'core/block-editor',
- 'getBlockCount',
- ),
+ select( 'core/block-editor', 'getBlockCount' ),
] );
} );
@@ -847,10 +792,7 @@ describe( 'actions', () => {
type: 'REMOVE_BLOCKS',
clientIds: [ clientId ],
},
- select(
- 'core/block-editor',
- 'getBlockCount',
- ),
+ select( 'core/block-editor', 'getBlockCount' ),
] );
} );
} );
@@ -930,7 +872,9 @@ describe( 'actions', () => {
} );
it( 'should return the UPDATE_BLOCK_LIST_SETTINGS action with the passed settings', () => {
- expect( updateBlockListSettings( 'chicken', { chicken: 'ribs' } ) ).toEqual( {
+ expect(
+ updateBlockListSettings( 'chicken', { chicken: 'ribs' } )
+ ).toEqual( {
type: 'UPDATE_BLOCK_LIST_SETTINGS',
clientId: 'chicken',
settings: { chicken: 'ribs' },
diff --git a/packages/block-editor/src/store/test/array.js b/packages/block-editor/src/store/test/array.js
index 5edcad46ad80f..f88b6f858725d 100644
--- a/packages/block-editor/src/store/test/array.js
+++ b/packages/block-editor/src/store/test/array.js
@@ -7,39 +7,46 @@ describe( 'array', () => {
describe( 'insertAt', () => {
it( 'should insert a unique item at a given position', () => {
const array = [ 'a', 'b', 'd' ];
- expect( insertAt( array, 'c', 2 ) ).toEqual(
- [ 'a', 'b', 'c', 'd' ]
- );
+ expect( insertAt( array, 'c', 2 ) ).toEqual( [
+ 'a',
+ 'b',
+ 'c',
+ 'd',
+ ] );
} );
it( 'should insert multiple items at a given position', () => {
const array = [ 'a', 'b', 'e' ];
- expect( insertAt( array, [ 'c', 'd' ], 2 ) ).toEqual(
- [ 'a', 'b', 'c', 'd', 'e' ]
- );
+ expect( insertAt( array, [ 'c', 'd' ], 2 ) ).toEqual( [
+ 'a',
+ 'b',
+ 'c',
+ 'd',
+ 'e',
+ ] );
} );
} );
describe( 'moveTo', () => {
it( 'should move an item to a given position', () => {
const array = [ 'a', 'b', 'd', 'c' ];
- expect( moveTo( array, 3, 2 ) ).toEqual(
- [ 'a', 'b', 'c', 'd' ]
- );
+ expect( moveTo( array, 3, 2 ) ).toEqual( [ 'a', 'b', 'c', 'd' ] );
} );
it( 'should move an item upwards to a given position', () => {
const array = [ 'b', 'a', 'c', 'd' ];
- expect( moveTo( array, 0, 1 ) ).toEqual(
- [ 'a', 'b', 'c', 'd' ]
- );
+ expect( moveTo( array, 0, 1 ) ).toEqual( [ 'a', 'b', 'c', 'd' ] );
} );
it( 'should move multiple items to a given position', () => {
const array = [ 'a', 'c', 'd', 'b', 'e' ];
- expect( moveTo( array, 1, 2, 2 ) ).toEqual(
- [ 'a', 'b', 'c', 'd', 'e' ]
- );
+ expect( moveTo( array, 1, 2, 2 ) ).toEqual( [
+ 'a',
+ 'b',
+ 'c',
+ 'd',
+ 'e',
+ ] );
} );
} );
} );
diff --git a/packages/block-editor/src/store/test/effects.js b/packages/block-editor/src/store/test/effects.js
index fbb93ddfd7f13..9b8702bb3342c 100644
--- a/packages/block-editor/src/store/test/effects.js
+++ b/packages/block-editor/src/store/test/effects.js
@@ -70,7 +70,10 @@ describe( 'effects', () => {
const dispatch = jest.fn();
const getState = () => ( {} );
- handler( mergeBlocks( blockA.clientId, blockB.clientId ), { dispatch, getState } );
+ handler( mergeBlocks( blockA.clientId, blockB.clientId ), {
+ dispatch,
+ getState,
+ } );
expect( dispatch ).toHaveBeenCalledTimes( 1 );
expect( dispatch ).toHaveBeenCalledWith( selectBlock( 'chicken' ) );
@@ -83,7 +86,10 @@ describe( 'effects', () => {
},
merge( attributes, attributesToMerge ) {
return {
- content: attributes.content + ' ' + attributesToMerge.content,
+ content:
+ attributes.content +
+ ' ' +
+ attributesToMerge.content,
};
},
save: noop,
@@ -113,26 +119,34 @@ describe( 'effects', () => {
offset: 0,
},
} );
- handler( mergeBlocks( blockA.clientId, blockB.clientId ), { dispatch, getState } );
+ handler( mergeBlocks( blockA.clientId, blockB.clientId ), {
+ dispatch,
+ getState,
+ } );
expect( dispatch ).toHaveBeenCalledTimes( 2 );
- expect( dispatch ).toHaveBeenCalledWith( selectionChange(
- blockA.clientId,
- 'content',
- 'chicken'.length + 1,
- 'chicken'.length + 1,
- ) );
+ expect( dispatch ).toHaveBeenCalledWith(
+ selectionChange(
+ blockA.clientId,
+ 'content',
+ 'chicken'.length + 1,
+ 'chicken'.length + 1
+ )
+ );
const lastCall = dispatch.mock.calls[ 1 ];
expect( lastCall ).toHaveLength( 1 );
const [ lastCallArgument ] = lastCall;
- const expectedGenerator = replaceBlocks( [ 'chicken', 'ribs' ], [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: { content: 'chicken ribs' },
- } ] );
- expect(
- Array.from( lastCallArgument )
- ).toEqual(
+ const expectedGenerator = replaceBlocks(
+ [ 'chicken', 'ribs' ],
+ [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: { content: 'chicken ribs' },
+ },
+ ]
+ );
+ expect( Array.from( lastCallArgument ) ).toEqual(
Array.from( expectedGenerator )
);
} );
@@ -144,7 +158,10 @@ describe( 'effects', () => {
},
merge( attributes, attributesToMerge ) {
return {
- content: attributes.content + ' ' + attributesToMerge.content,
+ content:
+ attributes.content +
+ ' ' +
+ attributesToMerge.content,
};
},
save: noop,
@@ -175,7 +192,10 @@ describe( 'effects', () => {
offset: 0,
},
} );
- handler( mergeBlocks( blockA.clientId, blockB.clientId ), { dispatch, getState } );
+ handler( mergeBlocks( blockA.clientId, blockB.clientId ), {
+ dispatch,
+ getState,
+ } );
expect( dispatch ).not.toHaveBeenCalled();
} );
@@ -189,7 +209,10 @@ describe( 'effects', () => {
},
merge( attributes, attributesToMerge ) {
return {
- content: attributes.content + ' ' + attributesToMerge.content,
+ content:
+ attributes.content +
+ ' ' +
+ attributesToMerge.content,
};
},
save: noop,
@@ -203,15 +226,17 @@ describe( 'effects', () => {
},
},
transforms: {
- to: [ {
- type: 'block',
- blocks: [ 'core/test-block' ],
- transform: ( { content2 } ) => {
- return createBlock( 'core/test-block', {
- content: content2,
- } );
+ to: [
+ {
+ type: 'block',
+ blocks: [ 'core/test-block' ],
+ transform: ( { content2 } ) => {
+ return createBlock( 'core/test-block', {
+ content: content2,
+ } );
+ },
},
- } ],
+ ],
},
save: noop,
category: 'common',
@@ -240,26 +265,34 @@ describe( 'effects', () => {
offset: 0,
},
} );
- handler( mergeBlocks( blockA.clientId, blockB.clientId ), { dispatch, getState } );
+ handler( mergeBlocks( blockA.clientId, blockB.clientId ), {
+ dispatch,
+ getState,
+ } );
expect( dispatch ).toHaveBeenCalledTimes( 2 );
- expect( dispatch ).toHaveBeenCalledWith( selectionChange(
- blockA.clientId,
- 'content',
- 'chicken'.length + 1,
- 'chicken'.length + 1,
- ) );
- const expectedGenerator = replaceBlocks( [ 'chicken', 'ribs' ], [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: { content: 'chicken ribs' },
- } ] );
+ expect( dispatch ).toHaveBeenCalledWith(
+ selectionChange(
+ blockA.clientId,
+ 'content',
+ 'chicken'.length + 1,
+ 'chicken'.length + 1
+ )
+ );
+ const expectedGenerator = replaceBlocks(
+ [ 'chicken', 'ribs' ],
+ [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: { content: 'chicken ribs' },
+ },
+ ]
+ );
const lastCall = dispatch.mock.calls[ 1 ];
expect( lastCall ).toHaveLength( 1 );
const [ lastCallArgument ] = lastCall;
- expect(
- Array.from( lastCallArgument )
- ).toEqual(
+ expect( Array.from( lastCallArgument ) ).toEqual(
Array.from( expectedGenerator )
);
} );
@@ -285,53 +318,57 @@ describe( 'effects', () => {
} );
it( 'should return undefined if no template assigned', () => {
- const result = validateBlocksToTemplate( resetBlocks( [
- createBlock( 'core/test-block' ),
- ] ), store );
+ const result = validateBlocksToTemplate(
+ resetBlocks( [ createBlock( 'core/test-block' ) ] ),
+ store
+ );
expect( result ).toBe( undefined );
} );
it( 'should return undefined if invalid but unlocked', () => {
- store.dispatch( updateSettings( {
- template: [
- [ 'core/foo', {} ],
- ],
- } ) );
+ store.dispatch(
+ updateSettings( {
+ template: [ [ 'core/foo', {} ] ],
+ } )
+ );
- const result = validateBlocksToTemplate( resetBlocks( [
- createBlock( 'core/test-block' ),
- ] ), store );
+ const result = validateBlocksToTemplate(
+ resetBlocks( [ createBlock( 'core/test-block' ) ] ),
+ store
+ );
expect( result ).toBe( undefined );
} );
it( 'should return undefined if locked and valid', () => {
- store.dispatch( updateSettings( {
- template: [
- [ 'core/test-block' ],
- ],
- templateLock: 'all',
- } ) );
+ store.dispatch(
+ updateSettings( {
+ template: [ [ 'core/test-block' ] ],
+ templateLock: 'all',
+ } )
+ );
- const result = validateBlocksToTemplate( resetBlocks( [
- createBlock( 'core/test-block' ),
- ] ), store );
+ const result = validateBlocksToTemplate(
+ resetBlocks( [ createBlock( 'core/test-block' ) ] ),
+ store
+ );
expect( result ).toBe( undefined );
} );
it( 'should return validity set action if invalid on default state', () => {
- store.dispatch( updateSettings( {
- template: [
- [ 'core/foo' ],
- ],
- templateLock: 'all',
- } ) );
+ store.dispatch(
+ updateSettings( {
+ template: [ [ 'core/foo' ] ],
+ templateLock: 'all',
+ } )
+ );
- const result = validateBlocksToTemplate( resetBlocks( [
- createBlock( 'core/test-block' ),
- ] ), store );
+ const result = validateBlocksToTemplate(
+ resetBlocks( [ createBlock( 'core/test-block' ) ] ),
+ store
+ );
expect( result ).toEqual( setTemplateValidity( false ) );
} );
diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js
index 606b54510e9bd..8610a1b8a3f31 100644
--- a/packages/block-editor/src/store/test/reducer.js
+++ b/packages/block-editor/src/store/test/reducer.js
@@ -62,7 +62,9 @@ describe( 'state', () => {
clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189',
};
- expect( isUpdatingSameBlockAttribute( action, previousAction ) ).toBe( false );
+ expect(
+ isUpdatingSameBlockAttribute( action, previousAction )
+ ).toBe( false );
} );
it( 'should return false if last action was not updating block attributes', () => {
@@ -78,7 +80,9 @@ describe( 'state', () => {
clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189',
};
- expect( isUpdatingSameBlockAttribute( action, previousAction ) ).toBe( false );
+ expect(
+ isUpdatingSameBlockAttribute( action, previousAction )
+ ).toBe( false );
} );
it( 'should return false if not updating the same block', () => {
@@ -97,7 +101,9 @@ describe( 'state', () => {
},
};
- expect( isUpdatingSameBlockAttribute( action, previousAction ) ).toBe( false );
+ expect(
+ isUpdatingSameBlockAttribute( action, previousAction )
+ ).toBe( false );
} );
it( 'should return false if not updating the same block attributes', () => {
@@ -116,7 +122,9 @@ describe( 'state', () => {
},
};
- expect( isUpdatingSameBlockAttribute( action, previousAction ) ).toBe( false );
+ expect(
+ isUpdatingSameBlockAttribute( action, previousAction )
+ ).toBe( false );
} );
it( 'should return false if no previous action', () => {
@@ -129,7 +137,9 @@ describe( 'state', () => {
};
const previousAction = undefined;
- expect( isUpdatingSameBlockAttribute( action, previousAction ) ).toBe( false );
+ expect(
+ isUpdatingSameBlockAttribute( action, previousAction )
+ ).toBe( false );
} );
it( 'should return true if updating the same block attributes', () => {
@@ -148,7 +158,9 @@ describe( 'state', () => {
},
};
- expect( isUpdatingSameBlockAttribute( action, previousAction ) ).toBe( true );
+ expect(
+ isUpdatingSameBlockAttribute( action, previousAction )
+ ).toBe( true );
} );
} );
@@ -280,7 +292,9 @@ describe( 'state', () => {
[ newChildBlockId ]: {},
},
} );
- expect( state.cache.chicken ).not.toBe( existingState.cache.chicken );
+ expect( state.cache.chicken ).not.toBe(
+ existingState.cache.chicken
+ );
} );
it( 'can insert a child block', () => {
@@ -358,7 +372,9 @@ describe( 'state', () => {
[ newChildBlockId ]: {},
},
} );
- expect( state.cache.chicken ).not.toBe( existingState.cache.chicken );
+ expect( state.cache.chicken ).not.toBe(
+ existingState.cache.chicken
+ );
} );
it( 'can replace multiple child blocks', () => {
@@ -474,7 +490,11 @@ describe( 'state', () => {
},
order: {
'': [ 'chicken' ],
- chicken: [ newChildBlockId1, newChildBlockId2, newChildBlockId3 ],
+ chicken: [
+ newChildBlockId1,
+ newChildBlockId2,
+ newChildBlockId3,
+ ],
[ newChildBlockId1 ]: [],
[ newChildBlockId2 ]: [],
[ newChildBlockId3 ]: [],
@@ -583,7 +603,9 @@ describe( 'state', () => {
} );
// the cache key of the parent should be updated
- expect( existingState.cache.chicken ).not.toBe( state.cache.chicken );
+ expect( existingState.cache.chicken ).not.toBe(
+ state.cache.chicken
+ );
} );
} );
@@ -602,17 +624,16 @@ describe( 'state', () => {
} );
it( 'should key by reset blocks clientId', () => {
- [
- undefined,
- blocks( undefined, {} ),
- ].forEach( ( original ) => {
+ [ undefined, blocks( undefined, {} ) ].forEach( ( original ) => {
const state = blocks( original, {
type: 'RESET_BLOCKS',
blocks: [ { clientId: 'bananas', innerBlocks: [] } ],
} );
expect( Object.keys( state.byClientId ) ).toHaveLength( 1 );
- expect( values( state.byClientId )[ 0 ].clientId ).toBe( 'bananas' );
+ expect( values( state.byClientId )[ 0 ].clientId ).toBe(
+ 'bananas'
+ );
expect( state.order ).toEqual( {
'': [ 'bananas' ],
bananas: [],
@@ -627,10 +648,14 @@ describe( 'state', () => {
const original = blocks( undefined, {} );
const state = blocks( original, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'bananas',
- innerBlocks: [ { clientId: 'apples', innerBlocks: [] } ],
- } ],
+ blocks: [
+ {
+ clientId: 'bananas',
+ innerBlocks: [
+ { clientId: 'apples', innerBlocks: [] },
+ ],
+ },
+ ],
} );
expect( Object.keys( state.byClientId ) ).toHaveLength( 2 );
@@ -648,20 +673,24 @@ describe( 'state', () => {
it( 'should insert block', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'INSERT_BLOCKS',
- blocks: [ {
- clientId: 'ribs',
- name: 'core/freeform',
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'ribs',
+ name: 'core/freeform',
+ innerBlocks: [],
+ },
+ ],
} );
expect( Object.keys( state.byClientId ) ).toHaveLength( 2 );
@@ -682,25 +711,31 @@ describe( 'state', () => {
it( 'should replace the block', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'REPLACE_BLOCKS',
clientIds: [ 'chicken' ],
- blocks: [ {
- clientId: 'wings',
- name: 'core/freeform',
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'wings',
+ name: 'core/freeform',
+ innerBlocks: [],
+ },
+ ],
} );
expect( Object.keys( state.byClientId ) ).toHaveLength( 1 );
- expect( values( state.byClientId )[ 0 ].name ).toBe( 'core/freeform' );
+ expect( values( state.byClientId )[ 0 ].name ).toBe(
+ 'core/freeform'
+ );
expect( values( state.byClientId )[ 0 ].clientId ).toBe( 'wings' );
expect( state.order ).toEqual( {
'': [ 'wings' ],
@@ -716,28 +751,32 @@ describe( 'state', () => {
it( 'should replace the block and remove references to its inner blocks', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [
- {
- clientId: 'child',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- },
- ],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [
+ {
+ clientId: 'child',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
+ },
+ ],
} );
const state = blocks( original, {
type: 'REPLACE_BLOCKS',
clientIds: [ 'chicken' ],
- blocks: [ {
- clientId: 'wings',
- name: 'core/freeform',
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'wings',
+ name: 'core/freeform',
+ innerBlocks: [],
+ },
+ ],
} );
expect( Object.keys( state.byClientId ) ).toHaveLength( 1 );
@@ -755,14 +794,17 @@ describe( 'state', () => {
it( 'should replace the nested block', () => {
const nestedBlock = createBlock( 'core/test-block' );
- const wrapperBlock = createBlock( 'core/test-block', {}, [ nestedBlock ] );
+ const wrapperBlock = createBlock( 'core/test-block', {}, [
+ nestedBlock,
+ ] );
const replacementBlock = createBlock( 'core/test-block' );
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
blocks: [ wrapperBlock ],
} );
- const originalWrapperBlockCacheKey = original.cache[ wrapperBlock.clientId ];
+ const originalWrapperBlockCacheKey =
+ original.cache[ wrapperBlock.clientId ];
const state = blocks( original, {
type: 'REPLACE_BLOCKS',
@@ -770,9 +812,12 @@ describe( 'state', () => {
blocks: [ replacementBlock ],
} );
- const newWrapperBlockCacheKey = state.cache[ wrapperBlock.clientId ];
+ const newWrapperBlockCacheKey =
+ state.cache[ wrapperBlock.clientId ];
- expect( newWrapperBlockCacheKey ).not.toBe( originalWrapperBlockCacheKey );
+ expect( newWrapperBlockCacheKey ).not.toBe(
+ originalWrapperBlockCacheKey
+ );
expect( state.order ).toEqual( {
'': [ wrapperBlock.clientId ],
@@ -794,27 +839,37 @@ describe( 'state', () => {
it( 'should replace the block even if the new block clientId is the same', () => {
const originalState = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const replacedState = blocks( originalState, {
type: 'REPLACE_BLOCKS',
clientIds: [ 'chicken' ],
- blocks: [ {
- clientId: 'chicken',
- name: 'core/freeform',
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/freeform',
+ innerBlocks: [],
+ },
+ ],
} );
expect( Object.keys( replacedState.byClientId ) ).toHaveLength( 1 );
- expect( values( originalState.byClientId )[ 0 ].name ).toBe( 'core/test-block' );
- expect( values( replacedState.byClientId )[ 0 ].name ).toBe( 'core/freeform' );
- expect( values( replacedState.byClientId )[ 0 ].clientId ).toBe( 'chicken' );
+ expect( values( originalState.byClientId )[ 0 ].name ).toBe(
+ 'core/test-block'
+ );
+ expect( values( replacedState.byClientId )[ 0 ].name ).toBe(
+ 'core/freeform'
+ );
+ expect( values( replacedState.byClientId )[ 0 ].clientId ).toBe(
+ 'chicken'
+ );
expect( replacedState.order ).toEqual( {
'': [ 'chicken' ],
chicken: [],
@@ -822,7 +877,9 @@ describe( 'state', () => {
expect( replacedState.cache ).toEqual( {
chicken: {},
} );
- expect( originalState.cache.chicken ).not.toBe( replacedState.cache.chicken );
+ expect( originalState.cache.chicken ).not.toBe(
+ replacedState.cache.chicken
+ );
const nestedBlock = {
clientId: 'chicken',
@@ -830,7 +887,9 @@ describe( 'state', () => {
attributes: {},
innerBlocks: [],
};
- const wrapperBlock = createBlock( 'core/test-block', {}, [ nestedBlock ] );
+ const wrapperBlock = createBlock( 'core/test-block', {}, [
+ nestedBlock,
+ ] );
const replacementNestedBlock = {
clientId: 'chicken',
name: 'core/freeform',
@@ -855,20 +914,26 @@ describe( 'state', () => {
[ replacementNestedBlock.clientId ]: [],
} );
- expect( originalNestedState.byClientId.chicken.name ).toBe( 'core/test-block' );
- expect( replacedNestedState.byClientId.chicken.name ).toBe( 'core/freeform' );
+ expect( originalNestedState.byClientId.chicken.name ).toBe(
+ 'core/test-block'
+ );
+ expect( replacedNestedState.byClientId.chicken.name ).toBe(
+ 'core/freeform'
+ );
} );
it( 'should update the block', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- isValid: false,
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ isValid: false,
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( deepFreeze( original ), {
type: 'UPDATE_BLOCK',
@@ -898,15 +963,17 @@ describe( 'state', () => {
it( 'should update the reusable block reference if the temporary id is swapped', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/block',
- attributes: {
- ref: 'random-clientId',
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/block',
+ attributes: {
+ ref: 'random-clientId',
+ },
+ isValid: false,
+ innerBlocks: [],
},
- isValid: false,
- innerBlocks: [],
- } ],
+ ],
} );
const state = blocks( deepFreeze( original ), {
@@ -933,17 +1000,20 @@ describe( 'state', () => {
it( 'should move the block up', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'ribs',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'ribs',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'MOVE_BLOCKS_UP',
@@ -958,7 +1028,10 @@ describe( 'state', () => {
it( 'should move the nested block up', () => {
const movedBlock = createBlock( 'core/test-block' );
const siblingBlock = createBlock( 'core/test-block' );
- const wrapperBlock = createBlock( 'core/test-block', {}, [ siblingBlock, movedBlock ] );
+ const wrapperBlock = createBlock( 'core/test-block', {}, [
+ siblingBlock,
+ movedBlock,
+ ] );
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
blocks: [ wrapperBlock ],
@@ -971,48 +1044,69 @@ describe( 'state', () => {
expect( state.order ).toEqual( {
'': [ wrapperBlock.clientId ],
- [ wrapperBlock.clientId ]: [ movedBlock.clientId, siblingBlock.clientId ],
+ [ wrapperBlock.clientId ]: [
+ movedBlock.clientId,
+ siblingBlock.clientId,
+ ],
[ movedBlock.clientId ]: [],
[ siblingBlock.clientId ]: [],
} );
- expect( state.cache[ wrapperBlock.clientId ] ).not.toBe( original.cache[ wrapperBlock.clientId ] );
- expect( state.cache[ movedBlock.clientId ] ).toBe( original.cache[ movedBlock.clientId ] );
- expect( state.cache[ siblingBlock.clientId ] ).toBe( original.cache[ siblingBlock.clientId ] );
+ expect( state.cache[ wrapperBlock.clientId ] ).not.toBe(
+ original.cache[ wrapperBlock.clientId ]
+ );
+ expect( state.cache[ movedBlock.clientId ] ).toBe(
+ original.cache[ movedBlock.clientId ]
+ );
+ expect( state.cache[ siblingBlock.clientId ] ).toBe(
+ original.cache[ siblingBlock.clientId ]
+ );
} );
it( 'should move multiple blocks up', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'ribs',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'veggies',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'ribs',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'veggies',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'MOVE_BLOCKS_UP',
clientIds: [ 'ribs', 'veggies' ],
} );
- expect( state.order[ '' ] ).toEqual( [ 'ribs', 'veggies', 'chicken' ] );
+ expect( state.order[ '' ] ).toEqual( [
+ 'ribs',
+ 'veggies',
+ 'chicken',
+ ] );
} );
it( 'should move multiple nested blocks up', () => {
const movedBlockA = createBlock( 'core/test-block' );
const movedBlockB = createBlock( 'core/test-block' );
const siblingBlock = createBlock( 'core/test-block' );
- const wrapperBlock = createBlock( 'core/test-block', {}, [ siblingBlock, movedBlockA, movedBlockB ] );
+ const wrapperBlock = createBlock( 'core/test-block', {}, [
+ siblingBlock,
+ movedBlockA,
+ movedBlockB,
+ ] );
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
blocks: [ wrapperBlock ],
@@ -1025,7 +1119,11 @@ describe( 'state', () => {
expect( state.order ).toEqual( {
'': [ wrapperBlock.clientId ],
- [ wrapperBlock.clientId ]: [ movedBlockA.clientId, movedBlockB.clientId, siblingBlock.clientId ],
+ [ wrapperBlock.clientId ]: [
+ movedBlockA.clientId,
+ movedBlockB.clientId,
+ siblingBlock.clientId,
+ ],
[ movedBlockA.clientId ]: [],
[ movedBlockB.clientId ]: [],
[ siblingBlock.clientId ]: [],
@@ -1035,17 +1133,20 @@ describe( 'state', () => {
it( 'should not move the first block up', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'ribs',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'ribs',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'MOVE_BLOCKS_UP',
@@ -1058,17 +1159,20 @@ describe( 'state', () => {
it( 'should move the block down', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'ribs',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'ribs',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'MOVE_BLOCKS_DOWN',
@@ -1081,7 +1185,10 @@ describe( 'state', () => {
it( 'should move the nested block down', () => {
const movedBlock = createBlock( 'core/test-block' );
const siblingBlock = createBlock( 'core/test-block' );
- const wrapperBlock = createBlock( 'core/test-block', {}, [ movedBlock, siblingBlock ] );
+ const wrapperBlock = createBlock( 'core/test-block', {}, [
+ movedBlock,
+ siblingBlock,
+ ] );
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
blocks: [ wrapperBlock ],
@@ -1094,7 +1201,10 @@ describe( 'state', () => {
expect( state.order ).toEqual( {
'': [ wrapperBlock.clientId ],
- [ wrapperBlock.clientId ]: [ siblingBlock.clientId, movedBlock.clientId ],
+ [ wrapperBlock.clientId ]: [
+ siblingBlock.clientId,
+ movedBlock.clientId,
+ ],
[ movedBlock.clientId ]: [],
[ siblingBlock.clientId ]: [],
} );
@@ -1103,36 +1213,48 @@ describe( 'state', () => {
it( 'should move multiple blocks down', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'ribs',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'veggies',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'ribs',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'veggies',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'MOVE_BLOCKS_DOWN',
clientIds: [ 'chicken', 'ribs' ],
} );
- expect( state.order[ '' ] ).toEqual( [ 'veggies', 'chicken', 'ribs' ] );
+ expect( state.order[ '' ] ).toEqual( [
+ 'veggies',
+ 'chicken',
+ 'ribs',
+ ] );
} );
it( 'should move multiple nested blocks down', () => {
const movedBlockA = createBlock( 'core/test-block' );
const movedBlockB = createBlock( 'core/test-block' );
const siblingBlock = createBlock( 'core/test-block' );
- const wrapperBlock = createBlock( 'core/test-block', {}, [ movedBlockA, movedBlockB, siblingBlock ] );
+ const wrapperBlock = createBlock( 'core/test-block', {}, [
+ movedBlockA,
+ movedBlockB,
+ siblingBlock,
+ ] );
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
blocks: [ wrapperBlock ],
@@ -1145,7 +1267,11 @@ describe( 'state', () => {
expect( state.order ).toEqual( {
'': [ wrapperBlock.clientId ],
- [ wrapperBlock.clientId ]: [ siblingBlock.clientId, movedBlockA.clientId, movedBlockB.clientId ],
+ [ wrapperBlock.clientId ]: [
+ siblingBlock.clientId,
+ movedBlockA.clientId,
+ movedBlockB.clientId,
+ ],
[ movedBlockA.clientId ]: [],
[ movedBlockB.clientId ]: [],
[ siblingBlock.clientId ]: [],
@@ -1155,17 +1281,20 @@ describe( 'state', () => {
it( 'should not move the last block down', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'ribs',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'ribs',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'MOVE_BLOCKS_DOWN',
@@ -1178,17 +1307,20 @@ describe( 'state', () => {
it( 'should remove the block', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'ribs',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'ribs',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'REMOVE_BLOCKS',
@@ -1217,22 +1349,26 @@ describe( 'state', () => {
it( 'should remove multiple blocks', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'ribs',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'veggies',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'ribs',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'veggies',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'REMOVE_BLOCKS',
@@ -1283,52 +1419,65 @@ describe( 'state', () => {
it( 'should insert at the specified index', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'kumquat',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'loquat',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'kumquat',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'loquat',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'INSERT_BLOCKS',
index: 1,
- blocks: [ {
- clientId: 'persimmon',
- name: 'core/freeform',
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'persimmon',
+ name: 'core/freeform',
+ innerBlocks: [],
+ },
+ ],
} );
expect( Object.keys( state.byClientId ) ).toHaveLength( 3 );
- expect( state.order[ '' ] ).toEqual( [ 'kumquat', 'persimmon', 'loquat' ] );
+ expect( state.order[ '' ] ).toEqual( [
+ 'kumquat',
+ 'persimmon',
+ 'loquat',
+ ] );
} );
it( 'should move block to lower index', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'ribs',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'veggies',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'ribs',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'veggies',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'MOVE_BLOCK_TO_POSITION',
@@ -1336,28 +1485,36 @@ describe( 'state', () => {
index: 0,
} );
- expect( state.order[ '' ] ).toEqual( [ 'ribs', 'chicken', 'veggies' ] );
+ expect( state.order[ '' ] ).toEqual( [
+ 'ribs',
+ 'chicken',
+ 'veggies',
+ ] );
} );
it( 'should move block to higher index', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'ribs',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'veggies',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'ribs',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'veggies',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'MOVE_BLOCK_TO_POSITION',
@@ -1365,28 +1522,36 @@ describe( 'state', () => {
index: 2,
} );
- expect( state.order[ '' ] ).toEqual( [ 'chicken', 'veggies', 'ribs' ] );
+ expect( state.order[ '' ] ).toEqual( [
+ 'chicken',
+ 'veggies',
+ 'ribs',
+ ] );
} );
it( 'should not move block if passed same index', () => {
const original = blocks( undefined, {
type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'chicken',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'ribs',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- }, {
- clientId: 'veggies',
- name: 'core/test-block',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'chicken',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'ribs',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 'veggies',
+ name: 'core/test-block',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
const state = blocks( original, {
type: 'MOVE_BLOCK_TO_POSITION',
@@ -1394,7 +1559,11 @@ describe( 'state', () => {
index: 1,
} );
- expect( state.order[ '' ] ).toEqual( [ 'chicken', 'ribs', 'veggies' ] );
+ expect( state.order[ '' ] ).toEqual( [
+ 'chicken',
+ 'ribs',
+ 'veggies',
+ ] );
} );
describe( 'blocks', () => {
@@ -1425,7 +1594,9 @@ describe( 'state', () => {
],
},
];
- const original = deepFreeze( actions.reduce( blocks, undefined ) );
+ const original = deepFreeze(
+ actions.reduce( blocks, undefined )
+ );
const state = blocks( original, {
type: 'RESET_BLOCKS',
@@ -1452,10 +1623,12 @@ describe( 'state', () => {
describe( 'byClientId', () => {
it( 'should ignore updates to non-existent block', () => {
- const original = deepFreeze( blocks( undefined, {
- type: 'RESET_BLOCKS',
- blocks: [],
- } ) );
+ const original = deepFreeze(
+ blocks( undefined, {
+ type: 'RESET_BLOCKS',
+ blocks: [],
+ } )
+ );
const state = blocks( original, {
type: 'UPDATE_BLOCK_ATTRIBUTES',
clientId: 'kumquat',
@@ -1468,16 +1641,20 @@ describe( 'state', () => {
} );
it( 'should return with same reference if no changes in updates', () => {
- const original = deepFreeze( blocks( undefined, {
- type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'kumquat',
- attributes: {
- updated: true,
- },
- innerBlocks: [],
- } ],
- } ) );
+ const original = deepFreeze(
+ blocks( undefined, {
+ type: 'RESET_BLOCKS',
+ blocks: [
+ {
+ clientId: 'kumquat',
+ attributes: {
+ updated: true,
+ },
+ innerBlocks: [],
+ },
+ ],
+ } )
+ );
const state = blocks( original, {
type: 'UPDATE_BLOCK_ATTRIBUTES',
clientId: 'kumquat',
@@ -1492,14 +1669,18 @@ describe( 'state', () => {
describe( 'attributes', () => {
it( 'should return with attribute block updates', () => {
- const original = deepFreeze( blocks( undefined, {
- type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'kumquat',
- attributes: {},
- innerBlocks: [],
- } ],
- } ) );
+ const original = deepFreeze(
+ blocks( undefined, {
+ type: 'RESET_BLOCKS',
+ blocks: [
+ {
+ clientId: 'kumquat',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
+ } )
+ );
const state = blocks( original, {
type: 'UPDATE_BLOCK_ATTRIBUTES',
clientId: 'kumquat',
@@ -1512,16 +1693,20 @@ describe( 'state', () => {
} );
it( 'should accumulate attribute block updates', () => {
- const original = deepFreeze( blocks( undefined, {
- type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'kumquat',
- attributes: {
- updated: true,
- },
- innerBlocks: [],
- } ],
- } ) );
+ const original = deepFreeze(
+ blocks( undefined, {
+ type: 'RESET_BLOCKS',
+ blocks: [
+ {
+ clientId: 'kumquat',
+ attributes: {
+ updated: true,
+ },
+ innerBlocks: [],
+ },
+ ],
+ } )
+ );
const state = blocks( original, {
type: 'UPDATE_BLOCK_ATTRIBUTES',
clientId: 'kumquat',
@@ -1537,10 +1722,12 @@ describe( 'state', () => {
} );
it( 'should ignore updates to non-existent block', () => {
- const original = deepFreeze( blocks( undefined, {
- type: 'RESET_BLOCKS',
- blocks: [],
- } ) );
+ const original = deepFreeze(
+ blocks( undefined, {
+ type: 'RESET_BLOCKS',
+ blocks: [],
+ } )
+ );
const state = blocks( original, {
type: 'UPDATE_BLOCK_ATTRIBUTES',
clientId: 'kumquat',
@@ -1553,16 +1740,20 @@ describe( 'state', () => {
} );
it( 'should return with same reference if no changes in updates', () => {
- const original = deepFreeze( blocks( undefined, {
- type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'kumquat',
- attributes: {
- updated: true,
- },
- innerBlocks: [],
- } ],
- } ) );
+ const original = deepFreeze(
+ blocks( undefined, {
+ type: 'RESET_BLOCKS',
+ blocks: [
+ {
+ clientId: 'kumquat',
+ attributes: {
+ updated: true,
+ },
+ innerBlocks: [],
+ },
+ ],
+ } )
+ );
const state = blocks( original, {
type: 'UPDATE_BLOCK_ATTRIBUTES',
clientId: 'kumquat',
@@ -1583,10 +1774,12 @@ describe( 'state', () => {
} );
it( 'should consider any non-exempt block change as persistent', () => {
- const original = deepFreeze( blocks( undefined, {
- type: 'RESET_BLOCKS',
- blocks: [],
- } ) );
+ const original = deepFreeze(
+ blocks( undefined, {
+ type: 'RESET_BLOCKS',
+ blocks: [],
+ } )
+ );
const state = blocks( original, {
type: 'UPDATE_BLOCK_ATTRIBUTES',
@@ -1600,14 +1793,18 @@ describe( 'state', () => {
} );
it( 'should consider any non-exempt block change as persistent across unchanging actions', () => {
- let original = deepFreeze( blocks( undefined, {
- type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'kumquat',
- attributes: {},
- innerBlocks: [],
- } ],
- } ) );
+ let original = deepFreeze(
+ blocks( undefined, {
+ type: 'RESET_BLOCKS',
+ blocks: [
+ {
+ clientId: 'kumquat',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
+ } )
+ );
original = blocks( original, {
type: 'NOOP',
} );
@@ -1630,14 +1827,18 @@ describe( 'state', () => {
} );
it( 'should consider same block attribute update as exempt', () => {
- let original = deepFreeze( blocks( undefined, {
- type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'kumquat',
- attributes: {},
- innerBlocks: [],
- } ],
- } ) );
+ let original = deepFreeze(
+ blocks( undefined, {
+ type: 'RESET_BLOCKS',
+ blocks: [
+ {
+ clientId: 'kumquat',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
+ } )
+ );
original = blocks( original, {
type: 'UPDATE_BLOCK_ATTRIBUTES',
clientId: 'kumquat',
@@ -1658,14 +1859,18 @@ describe( 'state', () => {
} );
it( 'should flag an explicitly marked persistent change', () => {
- let original = deepFreeze( blocks( undefined, {
- type: 'RESET_BLOCKS',
- blocks: [ {
- clientId: 'kumquat',
- attributes: {},
- innerBlocks: [],
- } ],
- } ) );
+ let original = deepFreeze(
+ blocks( undefined, {
+ type: 'RESET_BLOCKS',
+ blocks: [
+ {
+ clientId: 'kumquat',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
+ } )
+ );
original = blocks( original, {
type: 'UPDATE_BLOCK_ATTRIBUTES',
clientId: 'kumquat',
@@ -1689,10 +1894,12 @@ describe( 'state', () => {
} );
it( 'should retain reference for same state, same persistence', () => {
- const original = deepFreeze( blocks( undefined, {
- type: 'RESET_BLOCKS',
- blocks: [],
- } ) );
+ const original = deepFreeze(
+ blocks( undefined, {
+ type: 'RESET_BLOCKS',
+ blocks: [],
+ } )
+ );
const state = blocks( original, {
type: '__INERT__',
@@ -1704,14 +1911,18 @@ describe( 'state', () => {
describe( 'isIgnoredChange', () => {
it( 'should consider received blocks as ignored change', () => {
- const resetState = blocks( undefined, { type: 'random action' } );
+ const resetState = blocks( undefined, {
+ type: 'random action',
+ } );
const state = blocks( resetState, {
type: 'RECEIVE_BLOCKS',
- blocks: [ {
- clientId: 'kumquat',
- attributes: {},
- innerBlocks: [],
- } ],
+ blocks: [
+ {
+ clientId: 'kumquat',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
expect( state.isIgnoredChange ).toBe( true );
@@ -1984,10 +2195,7 @@ describe( 'state', () => {
const action = {
type: 'REPLACE_BLOCKS',
clientIds: [ 'wings' ],
- blocks: [
- { clientId: 'chicken' },
- { clientId: 'wings' },
- ],
+ blocks: [ { clientId: 'chicken' }, { clientId: 'wings' } ],
};
const state1 = selectionStart( original, action );
const state2 = selectionEnd( original, action );
@@ -2001,10 +2209,7 @@ describe( 'state', () => {
const action = {
type: 'REPLACE_BLOCKS',
clientIds: [ 'chicken' ],
- blocks: [
- { clientId: 'chicken' },
- { clientId: 'wings' },
- ],
+ blocks: [ { clientId: 'chicken' }, { clientId: 'wings' } ],
};
const state1 = selectionStart( original, action );
const state2 = selectionEnd( original, action );
@@ -2114,10 +2319,12 @@ describe( 'state', () => {
it( 'should record recently used blocks', () => {
const state = preferences( deepFreeze( { insertUsage: {} } ), {
type: 'INSERT_BLOCKS',
- blocks: [ {
- clientId: 'bacon',
- name: 'core-embed/twitter',
- } ],
+ blocks: [
+ {
+ clientId: 'bacon',
+ name: 'core-embed/twitter',
+ },
+ ],
time: 123456,
} );
@@ -2131,26 +2338,32 @@ describe( 'state', () => {
},
} );
- const twoRecentBlocks = preferences( deepFreeze( {
- insertUsage: {
- 'core-embed/twitter': {
- time: 123456,
- count: 1,
- insert: { name: 'core-embed/twitter' },
+ const twoRecentBlocks = preferences(
+ deepFreeze( {
+ insertUsage: {
+ 'core-embed/twitter': {
+ time: 123456,
+ count: 1,
+ insert: { name: 'core-embed/twitter' },
+ },
},
- },
- } ), {
- type: 'INSERT_BLOCKS',
- blocks: [ {
- clientId: 'eggs',
- name: 'core-embed/twitter',
- }, {
- clientId: 'bacon',
- name: 'core/block',
- attributes: { ref: 123 },
- } ],
- time: 123457,
- } );
+ } ),
+ {
+ type: 'INSERT_BLOCKS',
+ blocks: [
+ {
+ clientId: 'eggs',
+ name: 'core-embed/twitter',
+ },
+ {
+ clientId: 'bacon',
+ name: 'core/block',
+ attributes: { ref: 123 },
+ },
+ ],
+ time: 123457,
+ }
+ );
expect( twoRecentBlocks ).toEqual( {
insertUsage: {
@@ -2185,7 +2398,10 @@ describe( 'state', () => {
type: 'TOGGLE_BLOCK_MODE',
clientId: 'chicken',
};
- const value = blocksMode( deepFreeze( { chicken: 'html' } ), action );
+ const value = blocksMode(
+ deepFreeze( { chicken: 'html' } ),
+ action
+ );
expect( value ).toEqual( { chicken: 'visual' } );
} );
diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
index d3a59a8b00768..d6f4cfaac20e1 100644
--- a/packages/block-editor/src/store/test/selectors.js
+++ b/packages/block-editor/src/store/test/selectors.js
@@ -159,7 +159,10 @@ describe( 'selectors', () => {
},
};
- const name = getBlockName( state, 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' );
+ const name = getBlockName(
+ state,
+ 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1'
+ );
expect( name ).toBe( null );
} );
@@ -186,7 +189,10 @@ describe( 'selectors', () => {
},
};
- const name = getBlockName( state, 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' );
+ const name = getBlockName(
+ state,
+ 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1'
+ );
expect( name ).toBe( 'core/paragraph' );
} );
@@ -268,12 +274,14 @@ describe( 'selectors', () => {
clientId: 123,
name: 'core/paragraph',
attributes: {},
- innerBlocks: [ {
- clientId: 456,
- name: 'core/paragraph',
- attributes: {},
- innerBlocks: [],
- } ],
+ innerBlocks: [
+ {
+ clientId: 456,
+ name: 'core/paragraph',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
} );
} );
} );
@@ -305,8 +313,18 @@ describe( 'selectors', () => {
};
expect( getBlocks( state ) ).toEqual( [
- { clientId: 123, name: 'core/paragraph', attributes: {}, innerBlocks: [] },
- { clientId: 23, name: 'core/heading', attributes: {}, innerBlocks: [] },
+ {
+ clientId: 123,
+ name: 'core/paragraph',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ clientId: 23,
+ name: 'core/heading',
+ attributes: {},
+ innerBlocks: [],
+ },
] );
} );
} );
@@ -317,20 +335,38 @@ describe( 'selectors', () => {
blocks: {
byClientId: {
'uuid-2': { clientId: 'uuid-2', name: 'core/image' },
- 'uuid-4': { clientId: 'uuid-4', name: 'core/paragraph' },
- 'uuid-6': { clientId: 'uuid-6', name: 'core/paragraph' },
+ 'uuid-4': {
+ clientId: 'uuid-4',
+ name: 'core/paragraph',
+ },
+ 'uuid-6': {
+ clientId: 'uuid-6',
+ name: 'core/paragraph',
+ },
'uuid-8': { clientId: 'uuid-8', name: 'core/block' },
- 'uuid-10': { clientId: 'uuid-10', name: 'core/columns' },
+ 'uuid-10': {
+ clientId: 'uuid-10',
+ name: 'core/columns',
+ },
'uuid-12': { clientId: 'uuid-12', name: 'core/column' },
'uuid-14': { clientId: 'uuid-14', name: 'core/column' },
'uuid-16': { clientId: 'uuid-16', name: 'core/quote' },
'uuid-18': { clientId: 'uuid-18', name: 'core/block' },
- 'uuid-20': { clientId: 'uuid-20', name: 'core/gallery' },
+ 'uuid-20': {
+ clientId: 'uuid-20',
+ name: 'core/gallery',
+ },
'uuid-22': { clientId: 'uuid-22', name: 'core/block' },
- 'uuid-24': { clientId: 'uuid-24', name: 'core/columns' },
+ 'uuid-24': {
+ clientId: 'uuid-24',
+ name: 'core/columns',
+ },
'uuid-26': { clientId: 'uuid-26', name: 'core/column' },
'uuid-28': { clientId: 'uuid-28', name: 'core/column' },
- 'uuid-30': { clientId: 'uuid-30', name: 'core/paragraph' },
+ 'uuid-30': {
+ clientId: 'uuid-30',
+ name: 'core/paragraph',
+ },
},
attributes: {
'uuid-2': {},
@@ -351,19 +387,19 @@ describe( 'selectors', () => {
},
order: {
'': [ 'uuid-6', 'uuid-8', 'uuid-10', 'uuid-22' ],
- 'uuid-2': [ ],
- 'uuid-4': [ ],
- 'uuid-6': [ ],
- 'uuid-8': [ ],
+ 'uuid-2': [],
+ 'uuid-4': [],
+ 'uuid-6': [],
+ 'uuid-8': [],
'uuid-10': [ 'uuid-12', 'uuid-14' ],
'uuid-12': [ 'uuid-16' ],
'uuid-14': [ 'uuid-18' ],
- 'uuid-16': [ ],
+ 'uuid-16': [],
'uuid-18': [ 'uuid-24' ],
- 'uuid-20': [ ],
- 'uuid-22': [ ],
+ 'uuid-20': [],
+ 'uuid-22': [],
'uuid-24': [ 'uuid-26', 'uuid-28' ],
- 'uuid-26': [ ],
+ 'uuid-26': [],
'uuid-28': [ 'uuid-30' ],
},
parents: {
@@ -382,7 +418,9 @@ describe( 'selectors', () => {
},
},
};
- expect( getClientIdsOfDescendants( state, [ 'uuid-10' ] ) ).toEqual( [
+ expect(
+ getClientIdsOfDescendants( state, [ 'uuid-10' ] )
+ ).toEqual( [
'uuid-12',
'uuid-14',
'uuid-16',
@@ -401,20 +439,38 @@ describe( 'selectors', () => {
blocks: {
byClientId: {
'uuid-2': { clientId: 'uuid-2', name: 'core/image' },
- 'uuid-4': { clientId: 'uuid-4', name: 'core/paragraph' },
- 'uuid-6': { clientId: 'uuid-6', name: 'core/paragraph' },
+ 'uuid-4': {
+ clientId: 'uuid-4',
+ name: 'core/paragraph',
+ },
+ 'uuid-6': {
+ clientId: 'uuid-6',
+ name: 'core/paragraph',
+ },
'uuid-8': { clientId: 'uuid-8', name: 'core/block' },
- 'uuid-10': { clientId: 'uuid-10', name: 'core/columns' },
+ 'uuid-10': {
+ clientId: 'uuid-10',
+ name: 'core/columns',
+ },
'uuid-12': { clientId: 'uuid-12', name: 'core/column' },
'uuid-14': { clientId: 'uuid-14', name: 'core/column' },
'uuid-16': { clientId: 'uuid-16', name: 'core/quote' },
'uuid-18': { clientId: 'uuid-18', name: 'core/block' },
- 'uuid-20': { clientId: 'uuid-20', name: 'core/gallery' },
+ 'uuid-20': {
+ clientId: 'uuid-20',
+ name: 'core/gallery',
+ },
'uuid-22': { clientId: 'uuid-22', name: 'core/block' },
- 'uuid-24': { clientId: 'uuid-24', name: 'core/columns' },
+ 'uuid-24': {
+ clientId: 'uuid-24',
+ name: 'core/columns',
+ },
'uuid-26': { clientId: 'uuid-26', name: 'core/column' },
'uuid-28': { clientId: 'uuid-28', name: 'core/column' },
- 'uuid-30': { clientId: 'uuid-30', name: 'core/paragraph' },
+ 'uuid-30': {
+ clientId: 'uuid-30',
+ name: 'core/paragraph',
+ },
},
attributes: {
'uuid-2': {},
@@ -435,19 +491,19 @@ describe( 'selectors', () => {
},
order: {
'': [ 'uuid-6', 'uuid-8', 'uuid-10', 'uuid-22' ],
- 'uuid-2': [ ],
- 'uuid-4': [ ],
- 'uuid-6': [ ],
- 'uuid-8': [ ],
+ 'uuid-2': [],
+ 'uuid-4': [],
+ 'uuid-6': [],
+ 'uuid-8': [],
'uuid-10': [ 'uuid-12', 'uuid-14' ],
'uuid-12': [ 'uuid-16' ],
'uuid-14': [ 'uuid-18' ],
- 'uuid-16': [ ],
+ 'uuid-16': [],
'uuid-18': [ 'uuid-24' ],
- 'uuid-20': [ ],
- 'uuid-22': [ ],
+ 'uuid-20': [],
+ 'uuid-22': [],
'uuid-24': [ 'uuid-26', 'uuid-28' ],
- 'uuid-26': [ ],
+ 'uuid-26': [],
'uuid-28': [ 'uuid-30' ],
},
parents: {
@@ -545,8 +601,12 @@ describe( 'selectors', () => {
it( 'should return false if multi-selection', () => {
const state = {
- selectionStart: { clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' },
- selectionEnd: { clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189' },
+ selectionStart: {
+ clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1',
+ },
+ selectionEnd: {
+ clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189',
+ },
};
expect( hasSelectedBlock( state ) ).toBe( false );
@@ -554,8 +614,12 @@ describe( 'selectors', () => {
it( 'should return true if singular selection', () => {
const state = {
- selectionStart: { clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' },
- selectionEnd: { clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' },
+ selectionStart: {
+ clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1',
+ },
+ selectionEnd: {
+ clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1',
+ },
};
expect( hasSelectedBlock( state ) ).toBe( true );
@@ -603,7 +667,9 @@ describe( 'selectors', () => {
},
};
expect( getGlobalBlockCount( emptyState ) ).toBe( 0 );
- expect( getGlobalBlockCount( emptyState, 'core/heading' ) ).toBe( 0 );
+ expect( getGlobalBlockCount( emptyState, 'core/heading' ) ).toBe(
+ 0
+ );
} );
} );
@@ -947,7 +1013,11 @@ describe( 'selectors', () => {
selectionEnd: { clientId: 4 },
};
- expect( getMultiSelectedBlockClientIds( state ) ).toEqual( [ 4, 3, 2 ] );
+ expect( getMultiSelectedBlockClientIds( state ) ).toEqual( [
+ 4,
+ 3,
+ 2,
+ ] );
} );
it( 'should return selected block clientIds if there is multi selection (nested context)', () => {
@@ -973,7 +1043,11 @@ describe( 'selectors', () => {
selectionEnd: { clientId: 9 },
};
- expect( getMultiSelectedBlockClientIds( state ) ).toEqual( [ 9, 8, 7 ] );
+ expect( getMultiSelectedBlockClientIds( state ) ).toEqual( [
+ 9,
+ 8,
+ 7,
+ ] );
} );
} );
@@ -990,9 +1064,9 @@ describe( 'selectors', () => {
selectionEnd: {},
};
- expect(
+ expect( getMultiSelectedBlocks( state ) ).toBe(
getMultiSelectedBlocks( state )
- ).toBe( getMultiSelectedBlocks( state ) );
+ );
} );
} );
@@ -1142,7 +1216,9 @@ describe( 'selectors', () => {
},
};
- expect( getPreviousBlockClientId( state, 56, '123' ) ).toEqual( 456 );
+ expect( getPreviousBlockClientId( state, 56, '123' ) ).toEqual(
+ 456
+ );
} );
it( 'should return null for the first block', () => {
@@ -1460,8 +1536,12 @@ describe( 'selectors', () => {
it( 'should return false if singular selection', () => {
const state = {
- selectionStart: { clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' },
- selectionEnd: { clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' },
+ selectionStart: {
+ clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1',
+ },
+ selectionEnd: {
+ clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1',
+ },
};
expect( hasMultiSelection( state ) ).toBe( false );
@@ -1469,8 +1549,12 @@ describe( 'selectors', () => {
it( 'should return true if multi-selection', () => {
const state = {
- selectionStart: { clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' },
- selectionEnd: { clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189' },
+ selectionStart: {
+ clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1',
+ },
+ selectionEnd: {
+ clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189',
+ },
};
expect( hasMultiSelection( state ) ).toBe( true );
@@ -1811,7 +1895,9 @@ describe( 'selectors', () => {
allowedBlockTypes: [],
},
};
- expect( canInsertBlockType( state, 'core/test-block-a' ) ).toBe( false );
+ expect( canInsertBlockType( state, 'core/test-block-a' ) ).toBe(
+ false
+ );
} );
it( 'should allow blocks that are allowed by the editor', () => {
@@ -1825,7 +1911,9 @@ describe( 'selectors', () => {
allowedBlockTypes: [ 'core/test-block-a' ],
},
};
- expect( canInsertBlockType( state, 'core/test-block-a' ) ).toBe( true );
+ expect( canInsertBlockType( state, 'core/test-block-a' ) ).toBe(
+ true
+ );
} );
it( 'should deny blocks when the editor has a template lock', () => {
@@ -1839,7 +1927,9 @@ describe( 'selectors', () => {
templateLock: 'all',
},
};
- expect( canInsertBlockType( state, 'core/test-block-a' ) ).toBe( false );
+ expect( canInsertBlockType( state, 'core/test-block-a' ) ).toBe(
+ false
+ );
} );
it( 'should deny blocks that restrict parent from being inserted into the root', () => {
@@ -1851,7 +1941,9 @@ describe( 'selectors', () => {
blockListSettings: {},
settings: {},
};
- expect( canInsertBlockType( state, 'core/test-block-c' ) ).toBe( false );
+ expect( canInsertBlockType( state, 'core/test-block-c' ) ).toBe(
+ false
+ );
} );
it( 'should deny blocks that restrict parent from being inserted into a restricted parent', () => {
@@ -1867,7 +1959,9 @@ describe( 'selectors', () => {
blockListSettings: {},
settings: {},
};
- expect( canInsertBlockType( state, 'core/test-block-c', 'block1' ) ).toBe( false );
+ expect(
+ canInsertBlockType( state, 'core/test-block-c', 'block1' )
+ ).toBe( false );
} );
it( 'should allow blocks that restrict parent to be inserted into an allowed parent', () => {
@@ -1883,7 +1977,9 @@ describe( 'selectors', () => {
blockListSettings: {},
settings: {},
};
- expect( canInsertBlockType( state, 'core/test-block-c', 'block1' ) ).toBe( true );
+ expect(
+ canInsertBlockType( state, 'core/test-block-c', 'block1' )
+ ).toBe( true );
} );
it( 'should deny restricted blocks from being inserted into a block that restricts allowedBlocks', () => {
@@ -1903,7 +1999,9 @@ describe( 'selectors', () => {
},
settings: {},
};
- expect( canInsertBlockType( state, 'core/test-block-b', 'block1' ) ).toBe( false );
+ expect(
+ canInsertBlockType( state, 'core/test-block-b', 'block1' )
+ ).toBe( false );
} );
it( 'should allow allowed blocks to be inserted into a block that restricts allowedBlocks', () => {
@@ -1923,7 +2021,9 @@ describe( 'selectors', () => {
},
settings: {},
};
- expect( canInsertBlockType( state, 'core/test-block-b', 'block1' ) ).toBe( true );
+ expect(
+ canInsertBlockType( state, 'core/test-block-b', 'block1' )
+ ).toBe( true );
} );
it( 'should prioritise parent over allowedBlocks', () => {
@@ -1943,7 +2043,9 @@ describe( 'selectors', () => {
},
settings: {},
};
- expect( canInsertBlockType( state, 'core/test-block-c', 'block1' ) ).toBe( true );
+ expect(
+ canInsertBlockType( state, 'core/test-block-c', 'block1' )
+ ).toBe( true );
} );
it( 'should deny blocks that restrict parent to core/post-content when not in editor root', () => {
@@ -1959,7 +2061,9 @@ describe( 'selectors', () => {
blockListSettings: {},
settings: {},
};
- expect( canInsertBlockType( state, 'core/post-content-child', 'block1' ) ).toBe( false );
+ expect(
+ canInsertBlockType( state, 'core/post-content-child', 'block1' )
+ ).toBe( false );
} );
it( 'should allow blocks that restrict parent to core/post-content when in editor root', () => {
@@ -1971,7 +2075,9 @@ describe( 'selectors', () => {
blockListSettings: {},
settings: {},
};
- expect( canInsertBlockType( state, 'core/post-content-child' ) ).toBe( true );
+ expect(
+ canInsertBlockType( state, 'core/post-content-child' )
+ ).toBe( true );
} );
} );
@@ -2004,7 +2110,9 @@ describe( 'selectors', () => {
blockListSettings: {},
};
const items = getInserterItems( state );
- const testBlockAItem = items.find( ( item ) => item.id === 'core/test-block-a' );
+ const testBlockAItem = items.find(
+ ( item ) => item.id === 'core/test-block-a'
+ );
expect( testBlockAItem ).toEqual( {
id: 'core/test-block-a',
name: 'core/test-block-a',
@@ -2015,11 +2123,14 @@ describe( 'selectors', () => {
},
category: 'formatting',
keywords: [ 'testing' ],
+ variations: [],
isDisabled: false,
utility: 0,
frecency: 0,
} );
- const reusableBlockItem = items.find( ( item ) => item.id === 'core/block/1' );
+ const reusableBlockItem = items.find(
+ ( item ) => item.id === 'core/block/1'
+ );
expect( reusableBlockItem ).toEqual( {
id: 'core/block/1',
name: 'core/block',
@@ -2071,7 +2182,9 @@ describe( 'selectors', () => {
},
blockListSettings: {},
};
- const itemIDs = getInserterItems( state ).map( ( item ) => item.id );
+ const itemIDs = getInserterItems( state ).map(
+ ( item ) => item.id
+ );
expect( itemIDs ).toEqual( [
'core/post-content-child',
'core/block/2',
@@ -2139,7 +2252,10 @@ describe( 'selectors', () => {
};
const firstBlockFirstCall = getInserterItems( state, 'block3' );
- const firstBlockSecondCall = getInserterItems( stateSecondBlockRestricted, 'block3' );
+ const firstBlockSecondCall = getInserterItems(
+ stateSecondBlockRestricted,
+ 'block3'
+ );
expect( firstBlockFirstCall ).toBe( firstBlockSecondCall );
expect( firstBlockFirstCall.map( ( item ) => item.id ) ).toEqual( [
'core/test-block-b',
@@ -2150,7 +2266,10 @@ describe( 'selectors', () => {
] );
const secondBlockFirstCall = getInserterItems( state, 'block4' );
- const secondBlockSecondCall = getInserterItems( stateSecondBlockRestricted, 'block4' );
+ const secondBlockSecondCall = getInserterItems(
+ stateSecondBlockRestricted,
+ 'block4'
+ );
expect( secondBlockFirstCall.map( ( item ) => item.id ) ).toEqual( [
'core/test-block-b',
'core/test-freeform',
@@ -2158,16 +2277,19 @@ describe( 'selectors', () => {
'core/block/1',
'core/block/2',
] );
- expect( secondBlockSecondCall.map( ( item ) => item.id ) ).toEqual( [
- 'core/test-block-b',
- ] );
+ expect(
+ secondBlockSecondCall.map( ( item ) => item.id )
+ ).toEqual( [ 'core/test-block-b' ] );
} );
it( 'should set isDisabled when a block with `multiple: false` has been used', () => {
const state = {
blocks: {
byClientId: {
- block1: { clientId: 'block1', name: 'core/test-block-b' },
+ block1: {
+ clientId: 'block1',
+ name: 'core/test-block-b',
+ },
},
attributes: {
block1: { attribute: {} },
@@ -2186,7 +2308,9 @@ describe( 'selectors', () => {
settings: {},
};
const items = getInserterItems( state );
- const testBlockBItem = items.find( ( item ) => item.id === 'core/test-block-b' );
+ const testBlockBItem = items.find(
+ ( item ) => item.id === 'core/test-block-b'
+ );
expect( testBlockBItem.isDisabled ).toBe( true );
} );
@@ -2206,7 +2330,9 @@ describe( 'selectors', () => {
settings: {},
};
const items = getInserterItems( state );
- const testBlockBItem = items.find( ( item ) => item.id === 'core/test-block-b' );
+ const testBlockBItem = items.find(
+ ( item ) => item.id === 'core/test-block-b'
+ );
expect( testBlockBItem.utility ).toBe( INSERTER_UTILITY_LOW );
} );
@@ -2228,8 +2354,12 @@ describe( 'selectors', () => {
settings: {},
};
const items = getInserterItems( state );
- const reusableBlock2Item = items.find( ( item ) => item.id === 'core/test-block-b' );
- expect( reusableBlock2Item.utility ).toBe( INSERTER_UTILITY_MEDIUM );
+ const reusableBlock2Item = items.find(
+ ( item ) => item.id === 'core/test-block-b'
+ );
+ expect( reusableBlock2Item.utility ).toBe(
+ INSERTER_UTILITY_MEDIUM
+ );
expect( reusableBlock2Item.frecency ).toBe( 2.5 );
} );
@@ -2259,7 +2389,9 @@ describe( 'selectors', () => {
settings: {},
};
const items = getInserterItems( state, 'block1' );
- const testBlockCItem = items.find( ( item ) => item.id === 'core/test-block-c' );
+ const testBlockCItem = items.find(
+ ( item ) => item.id === 'core/test-block-c'
+ );
expect( testBlockCItem.utility ).toBe( INSERTER_UTILITY_HIGH );
} );
} );
@@ -2365,7 +2497,9 @@ describe( 'selectors', () => {
blockListSettings: {},
};
- expect( getBlockListSettings( state, 'chicken' ) ).toBe( undefined );
+ expect( getBlockListSettings( state, 'chicken' ) ).toBe(
+ undefined
+ );
} );
} );
@@ -2390,9 +2524,17 @@ describe( 'selectors', () => {
},
};
- const targetBlocksClientIds = [ 'test-1-dummy-clientId', 'test-3-dummy-clientId' ];
+ const targetBlocksClientIds = [
+ 'test-1-dummy-clientId',
+ 'test-3-dummy-clientId',
+ ];
- expect( __experimentalGetBlockListSettingsForBlocks( state, targetBlocksClientIds ) ).toEqual( [
+ expect(
+ __experimentalGetBlockListSettingsForBlocks(
+ state,
+ targetBlocksClientIds
+ )
+ ).toEqual( [
{
setting1: false,
},
@@ -2417,9 +2559,17 @@ describe( 'selectors', () => {
},
};
- const targetBlocksClientIds = [ 'test-1-dummy-clientId', 'test-3-dummy-clientId' ];
+ const targetBlocksClientIds = [
+ 'test-1-dummy-clientId',
+ 'test-3-dummy-clientId',
+ ];
- expect( __experimentalGetBlockListSettingsForBlocks( state, targetBlocksClientIds ) ).toEqual( [] );
+ expect(
+ __experimentalGetBlockListSettingsForBlocks(
+ state,
+ targetBlocksClientIds
+ )
+ ).toEqual( [] );
} );
} );
@@ -2464,7 +2614,9 @@ describe( 'selectors', () => {
selectionEnd: {},
};
- expect( getLowestCommonAncestorWithSelectedBlock( state, 'd' ) ).not.toBeDefined();
+ expect(
+ getLowestCommonAncestorWithSelectedBlock( state, 'd' )
+ ).not.toBeDefined();
} );
it( 'should not be defined if selected block has no parent', () => {
@@ -2474,7 +2626,9 @@ describe( 'selectors', () => {
selectionEnd: { clientId: 'b' },
};
- expect( getLowestCommonAncestorWithSelectedBlock( state, 'b' ) ).toBe( 'b' );
+ expect(
+ getLowestCommonAncestorWithSelectedBlock( state, 'b' )
+ ).toBe( 'b' );
} );
it( 'should not be defined if selected block has no common parent with given block', () => {
@@ -2484,7 +2638,9 @@ describe( 'selectors', () => {
selectionEnd: { clientId: 'd' },
};
- expect( getLowestCommonAncestorWithSelectedBlock( state, 'f' ) ).not.toBeDefined();
+ expect(
+ getLowestCommonAncestorWithSelectedBlock( state, 'f' )
+ ).not.toBeDefined();
} );
it( 'should return block id if selected block is ancestor of given block', () => {
@@ -2494,7 +2650,9 @@ describe( 'selectors', () => {
selectionEnd: { clientId: 'c' },
};
- expect( getLowestCommonAncestorWithSelectedBlock( state, 'a' ) ).toBe( 'a' );
+ expect(
+ getLowestCommonAncestorWithSelectedBlock( state, 'a' )
+ ).toBe( 'a' );
} );
it( 'should return block id if selected block is nested child of given block', () => {
@@ -2504,7 +2662,9 @@ describe( 'selectors', () => {
selectionEnd: { clientId: 'e' },
};
- expect( getLowestCommonAncestorWithSelectedBlock( state, 'a' ) ).toBe( 'a' );
+ expect(
+ getLowestCommonAncestorWithSelectedBlock( state, 'a' )
+ ).toBe( 'a' );
} );
it( 'should return block id if selected block has common parent with given block', () => {
@@ -2514,7 +2674,9 @@ describe( 'selectors', () => {
selectionEnd: { clientId: 'e' },
};
- expect( getLowestCommonAncestorWithSelectedBlock( state, 'c' ) ).toBe( 'a' );
+ expect(
+ getLowestCommonAncestorWithSelectedBlock( state, 'c' )
+ ).toBe( 'a' );
} );
} );
} );
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 079002c74a545..d170399ed8af6 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -1,4 +1,3 @@
-@import "./components/block-drop-zone/style.scss";
@import "./components/block-icon/style.scss";
@import "./components/block-inspector/style.scss";
@import "./components/block-list/style.scss";
@@ -9,18 +8,19 @@
@import "./components/block-mobile-toolbar/style.scss";
@import "./components/block-mover/style.scss";
@import "./components/block-navigation/style.scss";
-@import "./components/block-pattern-picker/style.scss";
@import "./components/block-preview/style.scss";
@import "./components/block-settings-menu/style.scss";
@import "./components/block-styles/style.scss";
@import "./components/block-switcher/style.scss";
@import "./components/block-toolbar/style.scss";
@import "./components/block-types-list/style.scss";
+@import "./components/block-variation-picker/style.scss";
@import "./components/button-block-appender/style.scss";
@import "./components/colors-gradients/style.scss";
@import "./components/contrast-checker/style.scss";
@import "./components/default-block-appender/style.scss";
@import "./components/link-control/style.scss";
+@import "./components/image-size-control/style.scss";
@import "./components/inner-blocks/style.scss";
@import "./components/inserter/style.scss";
@import "./components/inserter-list-item/style.scss";
diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js
index fd732b40c5318..3fb25425678ab 100644
--- a/packages/block-editor/src/utils/dom.js
+++ b/packages/block-editor/src/utils/dom.js
@@ -8,12 +8,12 @@
*
* @return {Element} Block DOM node.
*/
-export function getBlockDOMNode( clientId, scope = document ) {
- return scope.querySelector( '[data-block="' + clientId + '"]' );
+export function getBlockDOMNode( clientId ) {
+ return document.getElementById( 'block-' + clientId );
}
-export function getBlockPreviewContainerDOMNode( clientId, scope ) {
- const domNode = getBlockDOMNode( clientId, scope );
+export function getBlockPreviewContainerDOMNode( clientId ) {
+ const domNode = getBlockDOMNode( clientId );
if ( ! domNode ) {
return;
@@ -22,20 +22,6 @@ export function getBlockPreviewContainerDOMNode( clientId, scope ) {
return domNode.firstChild || domNode;
}
-/**
- * Given a block client ID, returns the corresponding DOM node for the block
- * focusable wrapper, if exists. As much as possible, this helper should be
- * avoided, and used only in cases where isolated behaviors need remote access
- * to a block node.
- *
- * @param {string} clientId Block client ID.
- *
- * @return {Element} Block DOM node.
- */
-export function getBlockFocusableWrapper( clientId ) {
- return getBlockDOMNode( clientId ).closest( '.block-editor-block-list__block' );
-}
-
/**
* Returns true if the given HTMLElement is a block focus stop. Blocks without
* their own text fields rely on the focus stop to be keyboard navigable.
@@ -57,7 +43,10 @@ export function isBlockFocusStop( element ) {
* @return {boolean} Whether elements are in the same block.
*/
export function isInSameBlock( a, b ) {
- return a.closest( '[data-block]' ) === b.closest( '[data-block]' );
+ return (
+ a.closest( '.block-editor-block-list__block' ) ===
+ b.closest( '.block-editor-block-list__block' )
+ );
}
/**
@@ -69,9 +58,12 @@ export function isInSameBlock( a, b ) {
* @return {boolean} Whether element is in the block Element but not its children.
*/
export function isInsideRootBlock( blockElement, element ) {
- const innerBlocksContainer = blockElement.querySelector( '.block-editor-block-list__layout' );
- return blockElement.contains( element ) && (
- ! innerBlocksContainer || ! innerBlocksContainer.contains( element )
+ const innerBlocksContainer = blockElement.querySelector(
+ '.block-editor-block-list__layout'
+ );
+ return (
+ blockElement.contains( element ) &&
+ ( ! innerBlocksContainer || ! innerBlocksContainer.contains( element ) )
);
}
@@ -86,3 +78,24 @@ export function isInsideRootBlock( blockElement, element ) {
export function hasInnerBlocksContext( element ) {
return !! element.querySelector( '.block-editor-block-list__layout' );
}
+
+/**
+ * Finds the block client ID given any DOM node inside the block.
+ *
+ * @param {Node} node DOM node.
+ *
+ * @return {string|undefined} Client ID or undefined if the node is not part of a block.
+ */
+export function getBlockClientId( node ) {
+ if ( node.nodeType !== node.ELEMENT_NODE ) {
+ node = node.parentElement;
+ }
+
+ const blockNode = node.closest( '.wp-block' );
+
+ if ( ! blockNode ) {
+ return;
+ }
+
+ return blockNode.id.slice( 'block-'.length );
+}
diff --git a/packages/block-editor/src/utils/get-paste-event-data.js b/packages/block-editor/src/utils/get-paste-event-data.js
index 20211ec336d60..7b798887c76b0 100644
--- a/packages/block-editor/src/utils/get-paste-event-data.js
+++ b/packages/block-editor/src/utils/get-paste-event-data.js
@@ -56,7 +56,9 @@ export function getPasteEventData( { clipboardData } ) {
}
} );
- files = files.filter( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) );
+ files = files.filter( ( { type } ) =>
+ /^image\/(?:jpe?g|png|gif)$/.test( type )
+ );
// Only process files if no HTML is present.
// A pasted file may have the URL as plain text.
diff --git a/packages/block-editor/src/utils/test/dom.js b/packages/block-editor/src/utils/test/dom.js
index 69e740f629f48..b755f74bcb899 100644
--- a/packages/block-editor/src/utils/test/dom.js
+++ b/packages/block-editor/src/utils/test/dom.js
@@ -6,13 +6,12 @@ import { hasInnerBlocksContext } from '../dom';
describe( 'hasInnerBlocksContext()', () => {
it( 'should return false for a block node which has no inner blocks', () => {
const wrapper = document.createElement( 'div' );
- wrapper.innerHTML = (
+ wrapper.innerHTML =
'' +
'
' +
'
This is a test.
' +
'
' +
- '
';
const blockNode = wrapper.firstChild;
expect( hasInnerBlocksContext( blockNode ) ).toBe( false );
@@ -20,7 +19,7 @@ describe( 'hasInnerBlocksContext()', () => {
it( 'should return true for a block node which contains inner blocks', () => {
const wrapper = document.createElement( 'div' );
- wrapper.innerHTML = (
+ wrapper.innerHTML =
'
' +
'
' +
'
' +
@@ -28,8 +27,7 @@ describe( 'hasInnerBlocksContext()', () => {
'
' +
'
' +
'
' +
- '
'
- );
+ '
';
const blockNode = wrapper.firstChild;
expect( hasInnerBlocksContext( blockNode ) ).toBe( true );
diff --git a/packages/block-editor/src/utils/transform-styles/ast/parse.js b/packages/block-editor/src/utils/transform-styles/ast/parse.js
index 11e8d22a37847..d3746488fc1fe 100644
--- a/packages/block-editor/src/utils/transform-styles/ast/parse.js
+++ b/packages/block-editor/src/utils/transform-styles/ast/parse.js
@@ -67,7 +67,9 @@ export default function( css, options ) {
const errorsList = [];
function error( msg ) {
- const err = new Error( options.source + ':' + lineno + ':' + column + ': ' + msg );
+ const err = new Error(
+ options.source + ':' + lineno + ':' + column + ': ' + msg
+ );
err.reason = msg;
err.filename = options.source;
err.line = lineno;
@@ -123,7 +125,11 @@ export default function( css, options ) {
const accumulator = [];
whitespace();
comments( accumulator );
- while ( css.length && css.charAt( 0 ) !== '}' && ( node = atrule() || rule() ) ) {
+ while (
+ css.length &&
+ css.charAt( 0 ) !== '}' &&
+ ( node = atrule() || rule() )
+ ) {
if ( node !== false ) {
accumulator.push( node );
comments( accumulator );
@@ -163,7 +169,7 @@ export default function( css, options ) {
let c;
accumulator = accumulator || [];
// eslint-disable-next-line no-cond-assign
- while ( c = comment() ) {
+ while ( ( c = comment() ) ) {
if ( c !== false ) {
accumulator.push( c );
}
@@ -182,7 +188,10 @@ export default function( css, options ) {
}
let i = 2;
- while ( '' !== css.charAt( i ) && ( '*' !== css.charAt( i ) || '/' !== css.charAt( i + 1 ) ) ) {
+ while (
+ '' !== css.charAt( i ) &&
+ ( '*' !== css.charAt( i ) || '/' !== css.charAt( i + 1 ) )
+ ) {
++i;
}
i += 2;
@@ -244,7 +253,9 @@ export default function( css, options ) {
}
// val
- const val = match( /^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/ );
+ const val = match(
+ /^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/
+ );
const ret = pos( {
type: 'declaration',
@@ -273,7 +284,7 @@ export default function( css, options ) {
// declarations
let decl;
// eslint-disable-next-line no-cond-assign
- while ( decl = declaration() ) {
+ while ( ( decl = declaration() ) ) {
if ( decl !== false ) {
decls.push( decl );
comments( decls );
@@ -296,7 +307,7 @@ export default function( css, options ) {
const pos = position();
// eslint-disable-next-line no-cond-assign
- while ( m = match( /^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/ ) ) {
+ while ( ( m = match( /^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/ ) ) ) {
vals.push( m[ 1 ] );
match( /^,\s*/ );
}
@@ -339,7 +350,7 @@ export default function( css, options ) {
let frame;
let frames = comments();
// eslint-disable-next-line no-cond-assign
- while ( frame = keyframe() ) {
+ while ( ( frame = keyframe() ) ) {
frames.push( frame );
frames = frames.concat( comments() );
}
@@ -483,7 +494,7 @@ export default function( css, options ) {
// declarations
let decl;
// eslint-disable-next-line no-cond-assign
- while ( decl = declaration() ) {
+ while ( ( decl = declaration() ) ) {
decls.push( decl );
decls = decls.concat( comments() );
}
@@ -550,7 +561,7 @@ export default function( css, options ) {
// declarations
let decl;
// eslint-disable-next-line no-cond-assign
- while ( decl = declaration() ) {
+ while ( ( decl = declaration() ) ) {
decls.push( decl );
decls = decls.concat( comments() );
}
@@ -610,17 +621,19 @@ export default function( css, options ) {
return;
}
- return atkeyframes() ||
- atmedia() ||
- atcustommedia() ||
- atsupports() ||
- atimport() ||
- atcharset() ||
- atnamespace() ||
- atdocument() ||
- atpage() ||
- athost() ||
- atfontface();
+ return (
+ atkeyframes() ||
+ atmedia() ||
+ atcustommedia() ||
+ atsupports() ||
+ atimport() ||
+ atcharset() ||
+ atnamespace() ||
+ atdocument() ||
+ atpage() ||
+ athost() ||
+ atfontface()
+ );
}
/**
diff --git a/packages/block-editor/src/utils/transform-styles/ast/stringify/compress.js b/packages/block-editor/src/utils/transform-styles/ast/stringify/compress.js
index 6b3f0468c5ad6..7c9cf56ce3863 100644
--- a/packages/block-editor/src/utils/transform-styles/ast/stringify/compress.js
+++ b/packages/block-editor/src/utils/transform-styles/ast/stringify/compress.js
@@ -36,9 +36,7 @@ inherits( Compiler, Base );
*/
Compiler.prototype.compile = function( node ) {
- return node.stylesheet
- .rules.map( this.visit, this )
- .join( '' );
+ return node.stylesheet.rules.map( this.visit, this ).join( '' );
};
/**
@@ -62,10 +60,12 @@ Compiler.prototype.import = function( node ) {
*/
Compiler.prototype.media = function( node ) {
- return this.emit( '@media ' + node.media, node.position ) +
- this.emit( '{' ) +
- this.mapVisit( node.rules ) +
- this.emit( '}' );
+ return (
+ this.emit( '@media ' + node.media, node.position ) +
+ this.emit( '{' ) +
+ this.mapVisit( node.rules ) +
+ this.emit( '}' )
+ );
};
/**
@@ -75,10 +75,12 @@ Compiler.prototype.media = function( node ) {
Compiler.prototype.document = function( node ) {
const doc = '@' + ( node.vendor || '' ) + 'document ' + node.document;
- return this.emit( doc, node.position ) +
- this.emit( '{' ) +
- this.mapVisit( node.rules ) +
- this.emit( '}' );
+ return (
+ this.emit( doc, node.position ) +
+ this.emit( '{' ) +
+ this.mapVisit( node.rules ) +
+ this.emit( '}' )
+ );
};
/**
@@ -102,10 +104,12 @@ Compiler.prototype.namespace = function( node ) {
*/
Compiler.prototype.supports = function( node ) {
- return this.emit( '@supports ' + node.supports, node.position ) +
- this.emit( '{' ) +
- this.mapVisit( node.rules ) +
- this.emit( '}' );
+ return (
+ this.emit( '@supports ' + node.supports, node.position ) +
+ this.emit( '{' ) +
+ this.mapVisit( node.rules ) +
+ this.emit( '}' )
+ );
};
/**
@@ -113,13 +117,15 @@ Compiler.prototype.supports = function( node ) {
*/
Compiler.prototype.keyframes = function( node ) {
- return this.emit( '@' +
- ( node.vendor || '' ) +
- 'keyframes ' +
- node.name, node.position ) +
- this.emit( '{' ) +
- this.mapVisit( node.keyframes ) +
- this.emit( '}' );
+ return (
+ this.emit(
+ '@' + ( node.vendor || '' ) + 'keyframes ' + node.name,
+ node.position
+ ) +
+ this.emit( '{' ) +
+ this.mapVisit( node.keyframes ) +
+ this.emit( '}' )
+ );
};
/**
@@ -129,10 +135,12 @@ Compiler.prototype.keyframes = function( node ) {
Compiler.prototype.keyframe = function( node ) {
const decls = node.declarations;
- return this.emit( node.values.join( ',' ), node.position ) +
- this.emit( '{' ) +
- this.mapVisit( decls ) +
- this.emit( '}' );
+ return (
+ this.emit( node.values.join( ',' ), node.position ) +
+ this.emit( '{' ) +
+ this.mapVisit( decls ) +
+ this.emit( '}' )
+ );
};
/**
@@ -140,14 +148,14 @@ Compiler.prototype.keyframe = function( node ) {
*/
Compiler.prototype.page = function( node ) {
- const sel = node.selectors.length ?
- node.selectors.join( ', ' ) :
- '';
+ const sel = node.selectors.length ? node.selectors.join( ', ' ) : '';
- return this.emit( '@page ' + sel, node.position ) +
- this.emit( '{' ) +
- this.mapVisit( node.declarations ) +
- this.emit( '}' );
+ return (
+ this.emit( '@page ' + sel, node.position ) +
+ this.emit( '{' ) +
+ this.mapVisit( node.declarations ) +
+ this.emit( '}' )
+ );
};
/**
@@ -155,10 +163,12 @@ Compiler.prototype.page = function( node ) {
*/
Compiler.prototype[ 'font-face' ] = function( node ) {
- return this.emit( '@font-face', node.position ) +
- this.emit( '{' ) +
- this.mapVisit( node.declarations ) +
- this.emit( '}' );
+ return (
+ this.emit( '@font-face', node.position ) +
+ this.emit( '{' ) +
+ this.mapVisit( node.declarations ) +
+ this.emit( '}' )
+ );
};
/**
@@ -166,10 +176,12 @@ Compiler.prototype[ 'font-face' ] = function( node ) {
*/
Compiler.prototype.host = function( node ) {
- return this.emit( '@host', node.position ) +
- this.emit( '{' ) +
- this.mapVisit( node.rules ) +
- this.emit( '}' );
+ return (
+ this.emit( '@host', node.position ) +
+ this.emit( '{' ) +
+ this.mapVisit( node.rules ) +
+ this.emit( '}' )
+ );
};
/**
@@ -177,7 +189,10 @@ Compiler.prototype.host = function( node ) {
*/
Compiler.prototype[ 'custom-media' ] = function( node ) {
- return this.emit( '@custom-media ' + node.name + ' ' + node.media + ';', node.position );
+ return this.emit(
+ '@custom-media ' + node.name + ' ' + node.media + ';',
+ node.position
+ );
};
/**
@@ -190,10 +205,12 @@ Compiler.prototype.rule = function( node ) {
return '';
}
- return this.emit( node.selectors.join( ',' ), node.position ) +
- this.emit( '{' ) +
- this.mapVisit( decls ) +
- this.emit( '}' );
+ return (
+ this.emit( node.selectors.join( ',' ), node.position ) +
+ this.emit( '{' ) +
+ this.mapVisit( decls ) +
+ this.emit( '}' )
+ );
};
/**
@@ -201,5 +218,8 @@ Compiler.prototype.rule = function( node ) {
*/
Compiler.prototype.declaration = function( node ) {
- return this.emit( node.property + ':' + node.value, node.position ) + this.emit( ';' );
+ return (
+ this.emit( node.property + ':' + node.value, node.position ) +
+ this.emit( ';' )
+ );
};
diff --git a/packages/block-editor/src/utils/transform-styles/ast/stringify/identity.js b/packages/block-editor/src/utils/transform-styles/ast/stringify/identity.js
index cc15526e14946..ceb711a8dbc71 100644
--- a/packages/block-editor/src/utils/transform-styles/ast/stringify/identity.js
+++ b/packages/block-editor/src/utils/transform-styles/ast/stringify/identity.js
@@ -56,7 +56,10 @@ Compiler.prototype.stylesheet = function( node ) {
*/
Compiler.prototype.comment = function( node ) {
- return this.emit( this.indent() + '/*' + node.comment + '*/', node.position );
+ return this.emit(
+ this.indent() + '/*' + node.comment + '*/',
+ node.position
+ );
};
/**
@@ -74,14 +77,9 @@ Compiler.prototype.import = function( node ) {
Compiler.prototype.media = function( node ) {
return (
this.emit( '@media ' + node.media, node.position ) +
- this.emit(
- ' {\n' + this.indent( 1 )
- ) +
+ this.emit( ' {\n' + this.indent( 1 ) ) +
this.mapVisit( node.rules, '\n\n' ) +
- this.emit(
- this.indent( -1 ) +
- '\n}'
- )
+ this.emit( this.indent( -1 ) + '\n}' )
);
};
@@ -94,16 +92,9 @@ Compiler.prototype.document = function( node ) {
return (
this.emit( doc, node.position ) +
- this.emit(
- ' ' +
- ' {\n' +
- this.indent( 1 )
- ) +
+ this.emit( ' ' + ' {\n' + this.indent( 1 ) ) +
this.mapVisit( node.rules, '\n\n' ) +
- this.emit(
- this.indent( -1 ) +
- '\n}'
- )
+ this.emit( this.indent( -1 ) + '\n}' )
);
};
@@ -130,15 +121,9 @@ Compiler.prototype.namespace = function( node ) {
Compiler.prototype.supports = function( node ) {
return (
this.emit( '@supports ' + node.supports, node.position ) +
- this.emit(
- ' {\n' +
- this.indent( 1 )
- ) +
+ this.emit( ' {\n' + this.indent( 1 ) ) +
this.mapVisit( node.rules, '\n\n' ) +
- this.emit(
- this.indent( -1 ) +
- '\n}'
- )
+ this.emit( this.indent( -1 ) + '\n}' )
);
};
@@ -148,16 +133,13 @@ Compiler.prototype.supports = function( node ) {
Compiler.prototype.keyframes = function( node ) {
return (
- this.emit( '@' + ( node.vendor || '' ) + 'keyframes ' + node.name, node.position ) +
this.emit(
- ' {\n' +
- this.indent( 1 )
+ '@' + ( node.vendor || '' ) + 'keyframes ' + node.name,
+ node.position
) +
+ this.emit( ' {\n' + this.indent( 1 ) ) +
this.mapVisit( node.keyframes, '\n' ) +
- this.emit(
- this.indent( -1 ) +
- '}'
- )
+ this.emit( this.indent( -1 ) + '}' )
);
};
@@ -171,16 +153,9 @@ Compiler.prototype.keyframe = function( node ) {
return (
this.emit( this.indent() ) +
this.emit( node.values.join( ', ' ), node.position ) +
- this.emit(
- ' {\n' +
- this.indent( 1 )
- ) +
+ this.emit( ' {\n' + this.indent( 1 ) ) +
this.mapVisit( decls, '\n' ) +
- this.emit(
- this.indent( -1 ) +
- '\n' +
- this.indent() + '}\n'
- )
+ this.emit( this.indent( -1 ) + '\n' + this.indent() + '}\n' )
);
};
@@ -189,16 +164,16 @@ Compiler.prototype.keyframe = function( node ) {
*/
Compiler.prototype.page = function( node ) {
- const sel = node.selectors.length ?
- node.selectors.join( ', ' ) + ' ' :
- '';
-
- return this.emit( '@page ' + sel, node.position ) +
- this.emit( '{\n' ) +
- this.emit( this.indent( 1 ) ) +
- this.mapVisit( node.declarations, '\n' ) +
- this.emit( this.indent( -1 ) ) +
- this.emit( '\n}' );
+ const sel = node.selectors.length ? node.selectors.join( ', ' ) + ' ' : '';
+
+ return (
+ this.emit( '@page ' + sel, node.position ) +
+ this.emit( '{\n' ) +
+ this.emit( this.indent( 1 ) ) +
+ this.mapVisit( node.declarations, '\n' ) +
+ this.emit( this.indent( -1 ) ) +
+ this.emit( '\n}' )
+ );
};
/**
@@ -206,12 +181,14 @@ Compiler.prototype.page = function( node ) {
*/
Compiler.prototype[ 'font-face' ] = function( node ) {
- return this.emit( '@font-face ', node.position ) +
- this.emit( '{\n' ) +
- this.emit( this.indent( 1 ) ) +
- this.mapVisit( node.declarations, '\n' ) +
- this.emit( this.indent( -1 ) ) +
- this.emit( '\n}' );
+ return (
+ this.emit( '@font-face ', node.position ) +
+ this.emit( '{\n' ) +
+ this.emit( this.indent( 1 ) ) +
+ this.mapVisit( node.declarations, '\n' ) +
+ this.emit( this.indent( -1 ) ) +
+ this.emit( '\n}' )
+ );
};
/**
@@ -221,15 +198,9 @@ Compiler.prototype[ 'font-face' ] = function( node ) {
Compiler.prototype.host = function( node ) {
return (
this.emit( '@host', node.position ) +
- this.emit(
- ' {\n' +
- this.indent( 1 )
- ) +
+ this.emit( ' {\n' + this.indent( 1 ) ) +
this.mapVisit( node.rules, '\n\n' ) +
- this.emit(
- this.indent( -1 ) +
- '\n}'
- )
+ this.emit( this.indent( -1 ) + '\n}' )
);
};
@@ -238,7 +209,10 @@ Compiler.prototype.host = function( node ) {
*/
Compiler.prototype[ 'custom-media' ] = function( node ) {
- return this.emit( '@custom-media ' + node.name + ' ' + node.media + ';', node.position );
+ return this.emit(
+ '@custom-media ' + node.name + ' ' + node.media + ';',
+ node.position
+ );
};
/**
@@ -252,14 +226,21 @@ Compiler.prototype.rule = function( node ) {
return '';
}
- return this.emit( node.selectors.map( function( s ) {
- return indent + s;
- } ).join( ',\n' ), node.position ) +
- this.emit( ' {\n' ) +
- this.emit( this.indent( 1 ) ) +
- this.mapVisit( decls, '\n' ) +
- this.emit( this.indent( -1 ) ) +
- this.emit( '\n' + this.indent() + '}' );
+ return (
+ this.emit(
+ node.selectors
+ .map( function( s ) {
+ return indent + s;
+ } )
+ .join( ',\n' ),
+ node.position
+ ) +
+ this.emit( ' {\n' ) +
+ this.emit( this.indent( 1 ) ) +
+ this.mapVisit( decls, '\n' ) +
+ this.emit( this.indent( -1 ) ) +
+ this.emit( '\n' + this.indent() + '}' )
+ );
};
/**
@@ -267,9 +248,11 @@ Compiler.prototype.rule = function( node ) {
*/
Compiler.prototype.declaration = function( node ) {
- return this.emit( this.indent() ) +
- this.emit( node.property + ': ' + node.value, node.position ) +
- this.emit( ';' );
+ return (
+ this.emit( this.indent() ) +
+ this.emit( node.property + ': ' + node.value, node.position ) +
+ this.emit( ';' )
+ );
};
/**
diff --git a/packages/block-editor/src/utils/transform-styles/ast/stringify/index.js b/packages/block-editor/src/utils/transform-styles/ast/stringify/index.js
index 2dcc4d4475f02..a326ce1e54b13 100644
--- a/packages/block-editor/src/utils/transform-styles/ast/stringify/index.js
+++ b/packages/block-editor/src/utils/transform-styles/ast/stringify/index.js
@@ -23,9 +23,9 @@ import Identity from './identity';
export default function( node, options ) {
options = options || {};
- const compiler = options.compress ?
- new Compressed( options ) :
- new Identity( options );
+ const compiler = options.compress
+ ? new Compressed( options )
+ : new Identity( options );
const code = compiler.compile( node );
return code;
diff --git a/packages/block-editor/src/utils/transform-styles/test/traverse.js b/packages/block-editor/src/utils/transform-styles/test/traverse.js
index 50d6d8da95bc3..bb1be2635fe53 100644
--- a/packages/block-editor/src/utils/transform-styles/test/traverse.js
+++ b/packages/block-editor/src/utils/transform-styles/test/traverse.js
@@ -10,7 +10,9 @@ describe( 'CSS traverse', () => {
if ( node.type === 'rule' ) {
return {
...node,
- selectors: node.selectors.map( ( selector ) => 'namespace ' + selector ),
+ selectors: node.selectors.map(
+ ( selector ) => 'namespace ' + selector
+ ),
};
}
diff --git a/packages/block-editor/src/utils/transform-styles/transforms/url-rewrite.js b/packages/block-editor/src/utils/transform-styles/transforms/url-rewrite.js
index 4516fffa2196d..4e0d07e4083d7 100644
--- a/packages/block-editor/src/utils/transform-styles/transforms/url-rewrite.js
+++ b/packages/block-editor/src/utils/transform-styles/transforms/url-rewrite.js
@@ -34,7 +34,10 @@ function isAbsolutePath( filePath ) {
*/
function isValidURL( meta ) {
// ignore hashes or data uris
- if ( meta.value.indexOf( 'data:' ) === 0 || meta.value.indexOf( '#' ) === 0 ) {
+ if (
+ meta.value.indexOf( 'data:' ) === 0 ||
+ meta.value.indexOf( '#' ) === 0
+ ) {
return false;
}
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 d7fe709138fa8..e9cfafac5740f 100644
--- a/packages/block-editor/src/utils/transform-styles/transforms/wrap.js
+++ b/packages/block-editor/src/utils/transform-styles/transforms/wrap.js
@@ -15,9 +15,11 @@ const wrap = ( namespace, ignore = [] ) => ( node ) => {
}
// Anything other than a root tag is always prefixed.
- {if ( ! selector.match( IS_ROOT_TAG ) ) {
- return namespace + ' ' + selector;
- }}
+ {
+ if ( ! selector.match( IS_ROOT_TAG ) ) {
+ return namespace + ' ' + selector;
+ }
+ }
// HTML and Body elements cannot be contained within our container so lets extract their styles.
return selector.replace( /^(body|html|:root)/, namespace );
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index 4bd0926814895..1a99a38df771f 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -24,7 +24,7 @@
"build-style/**"
],
"dependencies": {
- "@babel/runtime": "^7.4.4",
+ "@babel/runtime": "^7.8.3",
"@wordpress/a11y": "file:../a11y",
"@wordpress/api-fetch": "file:../api-fetch",
"@wordpress/autop": "file:../autop",
@@ -37,10 +37,12 @@
"@wordpress/data": "file:../data",
"@wordpress/date": "file:../date",
"@wordpress/deprecated": "file:../deprecated",
+ "@wordpress/dom": "file:../dom",
"@wordpress/editor": "file:../editor",
"@wordpress/element": "file:../element",
"@wordpress/escape-html": "file:../escape-html",
"@wordpress/i18n": "file:../i18n",
+ "@wordpress/icons": "file:../icons",
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
"@wordpress/keycodes": "file:../keycodes",
"@wordpress/rich-text": "file:../rich-text",
diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js
index 6909b70ccc427..8223111736c63 100644
--- a/packages/block-library/src/archives/edit.js
+++ b/packages/block-library/src/archives/edit.js
@@ -1,11 +1,7 @@
/**
* WordPress dependencies
*/
-import {
- PanelBody,
- ToggleControl,
- Disabled,
-} from '@wordpress/components';
+import { PanelBody, ToggleControl, Disabled } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
@@ -16,21 +12,32 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
return (
<>
-
+
setAttributes( { displayAsDropdown: ! displayAsDropdown } ) }
+ onChange={ () =>
+ setAttributes( {
+ displayAsDropdown: ! displayAsDropdown,
+ } )
+ }
/>
setAttributes( { showPostCounts: ! showPostCounts } ) }
+ onChange={ () =>
+ setAttributes( {
+ showPostCounts: ! showPostCounts,
+ } )
+ }
/>
-
);
diff --git a/packages/block-library/src/archives/icon.js b/packages/block-library/src/archives/icon.js
deleted file mode 100644
index 074a16c79458f..0000000000000
--- a/packages/block-library/src/archives/icon.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/components';
-
-export default (
-
-);
diff --git a/packages/block-library/src/archives/index.js b/packages/block-library/src/archives/index.js
index aa4c172ddedf6..ef8f1c484d15d 100644
--- a/packages/block-library/src/archives/index.js
+++ b/packages/block-library/src/archives/index.js
@@ -2,12 +2,12 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
+import { archive as icon } from '@wordpress/icons';
/**
* Internal dependencies
*/
import edit from './edit';
-import icon from './icon';
export const name = 'core/archives';
diff --git a/packages/block-library/src/audio/deprecated.js b/packages/block-library/src/audio/deprecated.js
index 733591bde0060..075a173db4452 100644
--- a/packages/block-library/src/audio/deprecated.js
+++ b/packages/block-library/src/audio/deprecated.js
@@ -47,8 +47,19 @@ export default [
return (
-
);
},
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index fbcafb34797d5..d9970ecd93dbf 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -5,11 +5,9 @@ import { getBlobByURL, isBlobURL } from '@wordpress/blob';
import { compose } from '@wordpress/compose';
import {
Disabled,
- Button,
PanelBody,
SelectControl,
ToggleControl,
- ToolbarGroup,
withNotices,
} from '@wordpress/components';
import {
@@ -17,16 +15,13 @@ import {
BlockIcon,
InspectorControls,
MediaPlaceholder,
+ MediaReplaceFlow,
RichText,
} from '@wordpress/block-editor';
import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { withSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import icon from './icon';
+import { audio as icon } from '@wordpress/icons';
/**
* Internal dependencies
@@ -38,12 +33,6 @@ const ALLOWED_MEDIA_TYPES = [ 'audio' ];
class AudioEdit extends Component {
constructor() {
super( ...arguments );
- // edit component has its own src in the state so it can be edited
- // without setting the actual value outside of the edit UI
- this.state = {
- editing: ! this.props.attributes.src,
- };
-
this.toggleAttribute = this.toggleAttribute.bind( this );
this.onSelectURL = this.onSelectURL.bind( this );
this.onUploadError = this.onUploadError.bind( this );
@@ -69,7 +58,6 @@ class AudioEdit extends Component {
},
onError: ( e ) => {
setAttributes( { src: undefined, id: undefined } );
- this.setState( { editing: true } );
noticeOperations.createErrorNotice( e );
},
allowedTypes: ALLOWED_MEDIA_TYPES,
@@ -92,17 +80,15 @@ class AudioEdit extends Component {
// the editing UI.
if ( newSrc !== src ) {
// Check if there's an embed block that handles this URL.
- const embedBlock = createUpgradedEmbedBlock(
- { attributes: { url: newSrc } }
- );
+ const embedBlock = createUpgradedEmbedBlock( {
+ attributes: { url: newSrc },
+ } );
if ( undefined !== embedBlock ) {
this.props.onReplace( embedBlock );
return;
}
setAttributes( { src: newSrc, id: undefined } );
}
-
- this.setState( { editing: false } );
}
onUploadError( message ) {
@@ -112,30 +98,28 @@ class AudioEdit extends Component {
}
getAutoplayHelp( checked ) {
- return checked ? __( 'Note: Autoplaying audio may cause usability issues for some visitors.' ) : null;
+ return checked
+ ? __(
+ 'Note: Autoplaying audio may cause usability issues for some visitors.'
+ )
+ : null;
}
render() {
const { autoplay, caption, loop, preload, src } = this.props.attributes;
const { setAttributes, isSelected, className, noticeUI } = this.props;
- const { editing } = this.state;
- const switchToEditing = () => {
- this.setState( { editing: true } );
- };
const onSelectAudio = ( media ) => {
if ( ! media || ! media.url ) {
// in this case there was an error and we should continue in the editing state
// previous attributes should be removed because they may be temporary blob urls
setAttributes( { src: undefined, id: undefined } );
- switchToEditing();
return;
}
// sets the block's attribute and updates the edit component from the
// selected media, then switches off the editing UI
setAttributes( { src: media.url, id: media.id } );
- this.setState( { src: media.url, editing: false } );
};
- if ( editing ) {
+ if ( ! src ) {
return (
}
@@ -154,17 +138,17 @@ class AudioEdit extends Component {
return (
<>
-
-
+
-
+
setAttributes( { preload: ( 'none' !== value ) ? value : undefined } ) }
+ onChange={ ( value ) =>
+ setAttributes( {
+ preload:
+ 'none' !== value ? value : undefined,
+ } )
+ }
options={ [
{ value: 'auto', label: __( 'Auto' ) },
{ value: 'metadata', label: __( 'Metadata' ) },
@@ -202,7 +191,9 @@ class AudioEdit extends Component {
tagName="figcaption"
placeholder={ __( 'Write captionโฆ' ) }
value={ caption }
- onChange={ ( value ) => setAttributes( { caption: value } ) }
+ onChange={ ( value ) =>
+ setAttributes( { caption: value } )
+ }
inlineToolbar
/>
) }
diff --git a/packages/block-library/src/audio/icon.js b/packages/block-library/src/audio/icon.js
deleted file mode 100644
index 4b871506bf478..0000000000000
--- a/packages/block-library/src/audio/icon.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/components';
-
-export default
-
+ return (
+ src && (
+
+
+ )
);
}
diff --git a/packages/block-library/src/audio/transforms.js b/packages/block-library/src/audio/transforms.js
index 01396eda20dff..3a61af6807cc5 100644
--- a/packages/block-library/src/audio/transforms.js
+++ b/packages/block-library/src/audio/transforms.js
@@ -9,7 +9,10 @@ const transforms = {
{
type: 'files',
isMatch( files ) {
- return files.length === 1 && files[ 0 ].type.indexOf( 'audio/' ) === 0;
+ return (
+ files.length === 1 &&
+ files[ 0 ].type.indexOf( 'audio/' ) === 0
+ );
},
transform( files ) {
const file = files[ 0 ];
diff --git a/packages/block-library/src/block/edit-panel/editor.scss b/packages/block-library/src/block/edit-panel/editor.scss
index 12c2bcfc1ef8f..2119531329192 100644
--- a/packages/block-library/src/block/edit-panel/editor.scss
+++ b/packages/block-library/src/block/edit-panel/editor.scss
@@ -75,7 +75,7 @@
}
}
-.is-selected.is-navigate-mode .reusable-block-edit-panel {
+.is-navigate-mode .is-selected .reusable-block-edit-panel {
border-color: $blue-medium-focus;
border-left-color: transparent;
diff --git a/packages/block-library/src/block/edit-panel/index.js b/packages/block-library/src/block/edit-panel/index.js
index ee2097a038b8a..4205167208ccc 100644
--- a/packages/block-library/src/block/edit-panel/index.js
+++ b/packages/block-library/src/block/edit-panel/index.js
@@ -31,7 +31,11 @@ class ReusableBlockEditPanel extends Component {
this.titleField.current.select();
}
// Move focus back to the Edit button after pressing the Escape key or Save.
- if ( ( prevProps.isEditing || prevProps.isSaving ) && ! this.props.isEditing && ! this.props.isSaving ) {
+ if (
+ ( prevProps.isEditing || prevProps.isSaving ) &&
+ ! this.props.isEditing &&
+ ! this.props.isSaving
+ ) {
this.editButton.current.focus();
}
}
@@ -53,11 +57,18 @@ class ReusableBlockEditPanel extends Component {
}
render() {
- const { isEditing, title, isSaving, isEditDisabled, onEdit, instanceId } = this.props;
+ const {
+ isEditing,
+ title,
+ isSaving,
+ isEditDisabled,
+ onEdit,
+ instanceId,
+ } = this.props;
return (
<>
- { ( ! isEditing && ! isSaving ) && (
+ { ! isEditing && ! isSaving && (
{ title }
@@ -74,7 +85,10 @@ class ReusableBlockEditPanel extends Component {
) }
{ ( isEditing || isSaving ) && (
-