= ` +
diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js
index 622b712a97f3f0..e7f2b6f058fbda 100644
--- a/bin/packages/build-worker.js
+++ b/bin/packages/build-worker.js
@@ -84,8 +84,14 @@ function getBuildPath( file, buildFolder ) {
*/
const BUILD_TASK_BY_EXTENSION = {
async '.scss'( file ) {
- const outputFile = getBuildPath( file.replace( '.scss', '.css' ), 'build-style' );
- const outputFileRTL = getBuildPath( file.replace( '.scss', '-rtl.css' ), 'build-style' );
+ const outputFile = getBuildPath(
+ file.replace( '.scss', '.css' ),
+ 'build-style'
+ );
+ const outputFileRTL = getBuildPath(
+ file.replace( '.scss', '-rtl.css' ),
+ 'build-style'
+ );
const [ , contents ] = await Promise.all( [
makeDir( path.dirname( outputFile ) ),
@@ -96,20 +102,33 @@ const BUILD_TASK_BY_EXTENSION = {
file,
includePaths: [ path.join( PACKAGES_DIR, 'base-styles' ) ],
data:
- [ 'colors', 'breakpoints', 'variables', 'mixins', 'animations', 'z-index' ]
+ [
+ 'colors',
+ 'breakpoints',
+ 'variables',
+ 'mixins',
+ 'animations',
+ 'z-index',
+ ]
.map( ( imported ) => `@import "${ imported }";` )
.join( ' ' ) + contents,
} );
- const result = await postcss( require( './post-css-config' ) ).process( builtSass.css, {
- from: 'src/app.css',
- to: 'dest/app.css',
- } );
-
- const resultRTL = await postcss( [ require( 'rtlcss' )() ] ).process( result.css, {
- from: 'src/app.css',
- to: 'dest/app.css',
- } );
+ const result = await postcss( require( './post-css-config' ) ).process(
+ builtSass.css,
+ {
+ from: 'src/app.css',
+ to: 'dest/app.css',
+ }
+ );
+
+ const resultRTL = await postcss( [ require( 'rtlcss' )() ] ).process(
+ result.css,
+ {
+ from: 'src/app.css',
+ to: 'dest/app.css',
+ }
+ );
await Promise.all( [
writeFile( outputFile, result.css ),
@@ -118,7 +137,9 @@ const BUILD_TASK_BY_EXTENSION = {
},
async '.js'( file ) {
- for ( const [ environment, buildDir ] of Object.entries( JS_ENVIRONMENTS ) ) {
+ for ( const [ environment, buildDir ] of Object.entries(
+ JS_ENVIRONMENTS
+ ) ) {
const destPath = getBuildPath( file, buildDir );
const babelOptions = getBabelConfig(
environment,
@@ -131,10 +152,16 @@ const BUILD_TASK_BY_EXTENSION = {
] );
await Promise.all( [
- writeFile( destPath + '.map', JSON.stringify( transformed.map ) ),
+ writeFile(
+ destPath + '.map',
+ JSON.stringify( transformed.map )
+ ),
writeFile(
destPath,
- transformed.code + '\n//# sourceMappingURL=' + path.basename( destPath ) + '.map'
+ transformed.code +
+ '\n//# sourceMappingURL=' +
+ path.basename( destPath ) +
+ '.map'
),
] );
}
diff --git a/bin/packages/build.js b/bin/packages/build.js
index 8eceb6c6dbbe59..8d1a0c9cc17875 100755
--- a/bin/packages/build.js
+++ b/bin/packages/build.js
@@ -57,7 +57,9 @@ function createStyleEntryTransform() {
}
packages.add( packageName );
- const entries = await glob( path.resolve( PACKAGES_DIR, packageName, 'src/*.scss' ) );
+ const entries = await glob(
+ path.resolve( PACKAGES_DIR, packageName, 'src/*.scss' )
+ );
entries.forEach( ( entry ) => this.push( entry ) );
callback();
},
@@ -78,7 +80,9 @@ function createBlockJsonEntryTransform() {
return new Transform( {
objectMode: true,
async transform( file, encoding, callback ) {
- const matches = /block-library[\/\\]src[\/\\](.*)[\/\\]block.json$/.exec( file );
+ const matches = /block-library[\/\\]src[\/\\](.*)[\/\\]block.json$/.exec(
+ file
+ );
const blockName = matches ? matches[ 1 ] : undefined;
// Only block.json files in the block-library folder are subject to this transform.
@@ -109,7 +113,9 @@ if ( files.length ) {
stream = new Readable( { encoding: 'utf8' } );
files.forEach( ( file ) => stream.push( file ) );
stream.push( null );
- stream = stream.pipe( createStyleEntryTransform() ).pipe( createBlockJsonEntryTransform() );
+ stream = stream
+ .pipe( createStyleEntryTransform() )
+ .pipe( createBlockJsonEntryTransform() );
} else {
const bar = new ProgressBar( 'Build Progress: [:bar] :percent', {
width: 30,
@@ -119,10 +125,17 @@ if ( files.length ) {
bar.tick( 0 );
- stream = glob.stream( [ `${ PACKAGES_DIR }/*/src/**/*.js`, `${ PACKAGES_DIR }/*/src/*.scss` ], {
- ignore: [ `**/benchmark/**`, `**/{__mocks__,__tests__,test}/**`, `**/{storybook,stories}/**` ],
- onlyFiles: true,
- } );
+ stream = glob.stream(
+ [ `${ PACKAGES_DIR }/*/src/**/*.js`, `${ PACKAGES_DIR }/*/src/*.scss` ],
+ {
+ ignore: [
+ `**/benchmark/**`,
+ `**/{__mocks__,__tests__,test}/**`,
+ `**/{storybook,stories}/**`,
+ ],
+ onlyFiles: true,
+ }
+ );
// Pause to avoid data flow which would begin on the `data` event binding,
// but should wait until worker processing below.
diff --git a/bin/packages/watch.js b/bin/packages/watch.js
index 8518e66f3a2a83..8d5e650f6bac3c 100644
--- a/bin/packages/watch.js
+++ b/bin/packages/watch.js
@@ -31,7 +31,8 @@ const isSourceFile = ( filename ) => {
! [
/\/(benchmark|__mocks__|__tests__|test|storybook|stories)\/.+.js$/,
/.\.(spec|test)\.js$/,
- ].some( ( regex ) => regex.test( filename ) ) && /.\.(js|json|scss)$/.test( filename )
+ ].some( ( regex ) => regex.test( filename ) ) &&
+ /.\.(js|json|scss)$/.test( filename )
);
};
@@ -41,29 +42,44 @@ getPackages().forEach( ( p ) => {
const srcDir = path.resolve( p, 'src' );
try {
fs.accessSync( srcDir, fs.F_OK );
- watch( path.resolve( p, 'src' ), { recursive: true }, ( event, filename ) => {
- if ( ! isSourceFile( filename ) ) {
- return;
- }
+ watch(
+ path.resolve( p, 'src' ),
+ { recursive: true },
+ ( event, filename ) => {
+ if ( ! isSourceFile( filename ) ) {
+ return;
+ }
- const filePath = path.resolve( srcDir, filename );
- if ( event === 'update' && exists( filePath ) ) {
- // eslint-disable-next-line no-console
- console.log( chalk.green( '->' ), `${ event }: ${ filename }` );
- rebuild( filePath );
- } else {
- const buildFile = path.resolve( srcDir, '..', 'build', filename );
- try {
- fs.unlinkSync( buildFile );
- process.stdout.write(
- chalk.red( ' \u2022 ' ) +
- path.relative( path.resolve( srcDir, '..', '..' ), buildFile ) +
- ' (deleted)' +
- '\n'
+ const filePath = path.resolve( srcDir, filename );
+ if ( event === 'update' && exists( filePath ) ) {
+ // eslint-disable-next-line no-console
+ console.log(
+ chalk.green( '->' ),
+ `${ event }: ${ filename }`
+ );
+ rebuild( filePath );
+ } else {
+ const buildFile = path.resolve(
+ srcDir,
+ '..',
+ 'build',
+ filename
);
- } catch ( e ) {}
+ try {
+ fs.unlinkSync( buildFile );
+ process.stdout.write(
+ chalk.red( ' \u2022 ' ) +
+ path.relative(
+ path.resolve( srcDir, '..', '..' ),
+ buildFile
+ ) +
+ ' (deleted)' +
+ '\n'
+ );
+ } catch ( e ) {}
+ }
}
- } );
+ );
} catch ( e ) {
// doesn't exist
}
diff --git a/docs/tool/are-data-files-unstaged.js b/docs/tool/are-data-files-unstaged.js
index 14e91df6038c03..38f659ec9bb0c7 100644
--- a/docs/tool/are-data-files-unstaged.js
+++ b/docs/tool/are-data-files-unstaged.js
@@ -17,9 +17,14 @@ const getUnstagedFiles = () =>
.filter( ( element ) => '' !== element );
const readmeFiles = getPackages().map(
( [ packageName ] ) =>
- `docs/designers-developers/developers/data/data-${ packageName.replace( '/', '-' ) }.md`
+ `docs/designers-developers/developers/data/data-${ packageName.replace(
+ '/',
+ '-'
+ ) }.md`
+);
+const unstagedReadmes = getUnstagedFiles().filter( ( element ) =>
+ readmeFiles.includes( element )
);
-const unstagedReadmes = getUnstagedFiles().filter( ( element ) => readmeFiles.includes( element ) );
if ( unstagedReadmes.length > 0 ) {
process.exitCode = 1;
diff --git a/docs/tool/manifest.js b/docs/tool/manifest.js
index adf9ff6488ff51..90c050388a0c50 100644
--- a/docs/tool/manifest.js
+++ b/docs/tool/manifest.js
@@ -85,9 +85,13 @@ function generateRootManifestFromTOCItems( items, parent = null ) {
parent,
} );
if ( Array.isArray( children ) && children.length ) {
- pageItems = pageItems.concat( generateRootManifestFromTOCItems( children, slug ) );
+ pageItems = pageItems.concat(
+ generateRootManifestFromTOCItems( children, slug )
+ );
} else if ( children === '{{components}}' ) {
- pageItems = pageItems.concat( getComponentManifest( componentPaths ) );
+ pageItems = pageItems.concat(
+ getComponentManifest( componentPaths )
+ );
} else if ( children === '{{packages}}' ) {
pageItems = pageItems.concat( getPackageManifest( packagePaths ) );
}
diff --git a/docs/tool/update-data.js b/docs/tool/update-data.js
index 63b66bbfe8fc76..89f0fc614f1c50 100644
--- a/docs/tool/update-data.js
+++ b/docs/tool/update-data.js
@@ -17,7 +17,14 @@ getPackages().forEach( ( entry ) => {
// until docgen provides a way to update many tokens at once, we need to make sure
// the output file is updated before starting the second pass for the next token.
const { status, stderr } = spawnSync(
- join( __dirname, '..', '..', 'node_modules', '.bin', 'docgen' ).replace( / /g, '\\ ' ),
+ join(
+ __dirname,
+ '..',
+ '..',
+ 'node_modules',
+ '.bin',
+ 'docgen'
+ ).replace( / /g, '\\ ' ),
[
target,
`--output docs/designers-developers/developers/data/data-${ packageName.replace(
diff --git a/packages/a11y/src/index.js b/packages/a11y/src/index.js
index cb79e767bb9c36..97d10c65920202 100644
--- a/packages/a11y/src/index.js
+++ b/packages/a11y/src/index.js
@@ -15,7 +15,9 @@ import filterMessage from './filterMessage';
*/
export const setup = function() {
const containerPolite = document.getElementById( 'a11y-speak-polite' );
- const containerAssertive = document.getElementById( 'a11y-speak-assertive' );
+ const containerAssertive = document.getElementById(
+ 'a11y-speak-assertive'
+ );
if ( containerPolite === null ) {
addContainer( 'polite' );
@@ -56,7 +58,9 @@ export const speak = function( message, ariaLive ) {
message = filterMessage( message );
const containerPolite = document.getElementById( 'a11y-speak-polite' );
- const containerAssertive = document.getElementById( 'a11y-speak-assertive' );
+ const containerAssertive = document.getElementById(
+ 'a11y-speak-assertive'
+ );
if ( containerAssertive && 'assertive' === ariaLive ) {
containerAssertive.textContent = message;
diff --git a/packages/a11y/src/test/addContainer.test.js b/packages/a11y/src/test/addContainer.test.js
index e6c722078f74f3..6ebf062237c9c0 100644
--- a/packages/a11y/src/test/addContainer.test.js
+++ b/packages/a11y/src/test/addContainer.test.js
@@ -13,7 +13,9 @@ describe( 'addContainer', () => {
expect( container.id ).toBe( 'a11y-speak-polite' );
expect( container.getAttribute( 'style' ) ).not.toBeNull();
expect( container.getAttribute( 'aria-live' ) ).toBe( 'polite' );
- expect( container.getAttribute( 'aria-relevant' ) ).toBe( 'additions text' );
+ expect( container.getAttribute( 'aria-relevant' ) ).toBe(
+ 'additions text'
+ );
expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' );
} );
} );
@@ -27,7 +29,9 @@ describe( 'addContainer', () => {
expect( container.id ).toBe( 'a11y-speak-assertive' );
expect( container.getAttribute( 'style' ) ).not.toBeNull();
expect( container.getAttribute( 'aria-live' ) ).toBe( 'assertive' );
- expect( container.getAttribute( 'aria-relevant' ) ).toBe( 'additions text' );
+ expect( container.getAttribute( 'aria-relevant' ) ).toBe(
+ 'additions text'
+ );
expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' );
} );
} );
@@ -41,7 +45,9 @@ describe( 'addContainer', () => {
expect( container.id ).toBe( 'a11y-speak-polite' );
expect( container.getAttribute( 'style' ) ).not.toBeNull();
expect( container.getAttribute( 'aria-live' ) ).toBe( 'polite' );
- expect( container.getAttribute( 'aria-relevant' ) ).toBe( 'additions text' );
+ expect( container.getAttribute( 'aria-relevant' ) ).toBe(
+ 'additions text'
+ );
expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' );
} );
} );
diff --git a/packages/a11y/src/test/index.test.js b/packages/a11y/src/test/index.test.js
index 08c9489bed2ae3..9888f9adb3a145 100644
--- a/packages/a11y/src/test/index.test.js
+++ b/packages/a11y/src/test/index.test.js
@@ -53,7 +53,9 @@ describe( 'speak', () => {
it( 'should set the textcontent of the assertive aria-live region', () => {
speak( 'assertive message', 'assertive' );
expect( containerPolite.textContent ).toBe( '' );
- expect( containerAssertive.textContent ).toBe( 'assertive message' );
+ expect( containerAssertive.textContent ).toBe(
+ 'assertive message'
+ );
} );
} );
@@ -72,13 +74,17 @@ describe( 'speak', () => {
afterEach( () => {
setup();
- containerAssertive = document.getElementById( 'a11y-speak-assertive' );
+ containerAssertive = document.getElementById(
+ 'a11y-speak-assertive'
+ );
} );
it( 'should set the textcontent of the polite aria-live region', () => {
speak( 'message', 'assertive' );
expect( containerPolite.textContent ).toBe( 'message' );
- expect( document.getElementById( 'a11y-speak-assertive' ) ).toBe( null );
+ expect( document.getElementById( 'a11y-speak-assertive' ) ).toBe(
+ null
+ );
} );
} );
@@ -91,20 +97,29 @@ describe( 'speak', () => {
afterEach( () => {
setup();
containerPolite = document.getElementById( 'a11y-speak-polite' );
- containerAssertive = document.getElementById( 'a11y-speak-assertive' );
+ containerAssertive = document.getElementById(
+ 'a11y-speak-assertive'
+ );
} );
it( 'should set the textcontent of the polite aria-live region', () => {
- expect( document.getElementById( 'a11y-speak-polite' ) ).toBe( null );
- expect( document.getElementById( 'a11y-speak-assertive' ) ).toBe( null );
+ expect( document.getElementById( 'a11y-speak-polite' ) ).toBe(
+ null
+ );
+ expect( document.getElementById( 'a11y-speak-assertive' ) ).toBe(
+ null
+ );
} );
} );
describe( 'setup when the elements already exist', () => {
it( 'should not create the aria live regions again', () => {
- const before = document.getElementsByClassName( 'a11y-speak-region' ).length;
+ const before = document.getElementsByClassName(
+ 'a11y-speak-region'
+ ).length;
setup();
- const after = document.getElementsByClassName( 'a11y-speak-region' ).length;
+ const after = document.getElementsByClassName( 'a11y-speak-region' )
+ .length;
expect( before ).toBe( after );
} );
diff --git a/packages/annotations/src/block/index.js b/packages/annotations/src/block/index.js
index 31c1a57e261ab1..c27c170b2d64a1 100644
--- a/packages/annotations/src/block/index.js
+++ b/packages/annotations/src/block/index.js
@@ -12,9 +12,9 @@ import { withSelect } from '@wordpress/data';
*/
const addAnnotationClassName = ( OriginalComponent ) => {
return withSelect( ( select, { clientId } ) => {
- const annotations = select( 'core/annotations' ).__experimentalGetAnnotationsForBlock(
- clientId
- );
+ const annotations = select(
+ 'core/annotations'
+ ).__experimentalGetAnnotationsForBlock( clientId );
return {
className: annotations
@@ -26,4 +26,8 @@ const addAnnotationClassName = ( OriginalComponent ) => {
} )( OriginalComponent );
};
-addFilter( 'editor.BlockListBlock', 'core/annotations', addAnnotationClassName );
+addFilter(
+ 'editor.BlockListBlock',
+ 'core/annotations',
+ addAnnotationClassName
+);
diff --git a/packages/annotations/src/format/annotation.js b/packages/annotations/src/format/annotation.js
index ba9a39633d84e4..9ce2a2bd6d456f 100644
--- a/packages/annotations/src/format/annotation.js
+++ b/packages/annotations/src/format/annotation.js
@@ -69,7 +69,9 @@ function retrieveAnnotationPositions( formats ) {
formats.forEach( ( characterFormats, i ) => {
characterFormats = characterFormats || [];
- characterFormats = characterFormats.filter( ( format ) => format.type === FORMAT_NAME );
+ characterFormats = characterFormats.filter(
+ ( format ) => format.type === FORMAT_NAME
+ );
characterFormats.forEach( ( format ) => {
let { id } = format.attributes;
id = id.replace( ANNOTATION_ATTRIBUTE_PREFIX, '' );
@@ -116,7 +118,11 @@ function updateAnnotationsWithPositions(
const { start, end } = currentAnnotation;
if ( start !== position.start || end !== position.end ) {
- updateAnnotationRange( currentAnnotation.id, position.start, position.end );
+ updateAnnotationRange(
+ currentAnnotation.id,
+ position.start,
+ position.end
+ );
}
} );
}
@@ -138,7 +144,9 @@ export const annotation = {
{ richTextIdentifier, blockClientId }
) {
return {
- annotations: select( STORE_KEY ).__experimentalGetAnnotationsForRichText(
+ annotations: select(
+ STORE_KEY
+ ).__experimentalGetAnnotationsForRichText(
blockClientId,
richTextIdentifier
),
@@ -157,14 +165,20 @@ export const annotation = {
},
__experimentalGetPropsForEditableTreeChangeHandler( dispatch ) {
return {
- removeAnnotation: dispatch( STORE_KEY ).__experimentalRemoveAnnotation,
- updateAnnotationRange: dispatch( STORE_KEY ).__experimentalUpdateAnnotationRange,
+ removeAnnotation: dispatch( STORE_KEY )
+ .__experimentalRemoveAnnotation,
+ updateAnnotationRange: dispatch( STORE_KEY )
+ .__experimentalUpdateAnnotationRange,
};
},
__experimentalCreateOnChangeEditableValue( props ) {
return ( formats ) => {
const positions = retrieveAnnotationPositions( formats );
- const { removeAnnotation, updateAnnotationRange, annotations } = props;
+ const {
+ removeAnnotation,
+ updateAnnotationRange,
+ annotations,
+ } = props;
updateAnnotationsWithPositions( annotations, positions, {
removeAnnotation,
diff --git a/packages/annotations/src/store/actions.js b/packages/annotations/src/store/actions.js
index 7ad35afa99b295..f5d5b8cf208e55 100644
--- a/packages/annotations/src/store/actions.js
+++ b/packages/annotations/src/store/actions.js
@@ -72,7 +72,11 @@ export function __experimentalRemoveAnnotation( annotationId ) {
*
* @return {Object} Action object.
*/
-export function __experimentalUpdateAnnotationRange( annotationId, start, end ) {
+export function __experimentalUpdateAnnotationRange(
+ annotationId,
+ start,
+ end
+) {
return {
type: 'ANNOTATION_UPDATE_RANGE',
annotationId,
diff --git a/packages/annotations/src/store/reducer.js b/packages/annotations/src/store/reducer.js
index 2fcd95118e45b4..0756c3f3d8eac5 100644
--- a/packages/annotations/src/store/reducer.js
+++ b/packages/annotations/src/store/reducer.js
@@ -15,7 +15,9 @@ import { get, isNumber, mapValues } from 'lodash';
function filterWithReference( collection, predicate ) {
const filteredCollection = collection.filter( predicate );
- return collection.length === filteredCollection.length ? collection : filteredCollection;
+ return collection.length === filteredCollection.length
+ ? collection
+ : filteredCollection;
}
/**
@@ -26,7 +28,9 @@ function filterWithReference( collection, predicate ) {
*/
function isValidAnnotationRange( annotation ) {
return (
- isNumber( annotation.start ) && isNumber( annotation.end ) && annotation.start <= annotation.end
+ isNumber( annotation.start ) &&
+ isNumber( annotation.end ) &&
+ annotation.start <= annotation.end
);
}
@@ -51,7 +55,10 @@ export function annotations( state = {}, action ) {
range: action.range,
};
- if ( newAnnotation.selector === 'range' && ! isValidAnnotationRange( newAnnotation.range ) ) {
+ if (
+ newAnnotation.selector === 'range' &&
+ ! isValidAnnotationRange( newAnnotation.range )
+ ) {
return state;
}
@@ -59,43 +66,54 @@ export function annotations( state = {}, action ) {
return {
...state,
- [ blockClientId ]: [ ...previousAnnotationsForBlock, newAnnotation ],
+ [ blockClientId ]: [
+ ...previousAnnotationsForBlock,
+ newAnnotation,
+ ],
};
case 'ANNOTATION_REMOVE':
return mapValues( state, ( annotationsForBlock ) => {
- return filterWithReference( annotationsForBlock, ( annotation ) => {
- return annotation.id !== action.annotationId;
- } );
+ return filterWithReference(
+ annotationsForBlock,
+ ( annotation ) => {
+ return annotation.id !== action.annotationId;
+ }
+ );
} );
case 'ANNOTATION_UPDATE_RANGE':
return mapValues( state, ( annotationsForBlock ) => {
let hasChangedRange = false;
- const newAnnotations = annotationsForBlock.map( ( annotation ) => {
- if ( annotation.id === action.annotationId ) {
- hasChangedRange = true;
- return {
- ...annotation,
- range: {
- start: action.start,
- end: action.end,
- },
- };
- }
+ const newAnnotations = annotationsForBlock.map(
+ ( annotation ) => {
+ if ( annotation.id === action.annotationId ) {
+ hasChangedRange = true;
+ return {
+ ...annotation,
+ range: {
+ start: action.start,
+ end: action.end,
+ },
+ };
+ }
- return annotation;
- } );
+ return annotation;
+ }
+ );
return hasChangedRange ? newAnnotations : annotationsForBlock;
} );
case 'ANNOTATION_REMOVE_SOURCE':
return mapValues( state, ( annotationsForBlock ) => {
- return filterWithReference( annotationsForBlock, ( annotation ) => {
- return annotation.source !== action.source;
- } );
+ return filterWithReference(
+ annotationsForBlock,
+ ( annotation ) => {
+ return annotation.source !== action.source;
+ }
+ );
} );
}
diff --git a/packages/annotations/src/store/selectors.js b/packages/annotations/src/store/selectors.js
index 8a3a34715a6310..fa7b97e259ab77 100644
--- a/packages/annotations/src/store/selectors.js
+++ b/packages/annotations/src/store/selectors.js
@@ -32,7 +32,10 @@ export const __experimentalGetAnnotationsForBlock = createSelector(
( state, blockClientId ) => [ get( state, blockClientId, EMPTY_ARRAY ) ]
);
-export const __experimentalGetAllAnnotationsForBlock = function( state, blockClientId ) {
+export const __experimentalGetAllAnnotationsForBlock = function(
+ state,
+ blockClientId
+) {
return get( state, blockClientId, EMPTY_ARRAY );
};
@@ -53,7 +56,8 @@ export const __experimentalGetAnnotationsForRichText = createSelector(
return get( state, blockClientId, [] )
.filter( ( annotation ) => {
return (
- annotation.selector === 'range' && richTextIdentifier === annotation.richTextIdentifier
+ annotation.selector === 'range' &&
+ richTextIdentifier === annotation.richTextIdentifier
);
} )
.map( ( annotation ) => {
diff --git a/packages/api-fetch/src/index.js b/packages/api-fetch/src/index.js
index a25ec7992ff948..9e7edc985709ed 100644
--- a/packages/api-fetch/src/index.js
+++ b/packages/api-fetch/src/index.js
@@ -14,7 +14,10 @@ import namespaceEndpointMiddleware from './middlewares/namespace-endpoint';
import httpV1Middleware from './middlewares/http-v1';
import userLocaleMiddleware from './middlewares/user-locale';
import mediaUploadMiddleware from './middlewares/media-upload';
-import { parseResponseAndNormalizeError, parseAndThrowError } from './utils/response';
+import {
+ parseResponseAndNormalizeError,
+ parseAndThrowError,
+} from './utils/response';
/**
* Default set of header values which should be sent with every request unless
@@ -88,8 +91,12 @@ const defaultFetchHandler = ( nextOptions ) => {
( value ) =>
Promise.resolve( value )
.then( checkStatus )
- .catch( ( response ) => parseAndThrowError( response, parse ) )
- .then( ( response ) => parseResponseAndNormalizeError( response, parse ) ),
+ .catch( ( response ) =>
+ parseAndThrowError( response, parse )
+ )
+ .then( ( response ) =>
+ parseResponseAndNormalizeError( response, parse )
+ ),
() => {
throw {
code: 'fetch_error',
diff --git a/packages/api-fetch/src/middlewares/fetch-all-middleware.js b/packages/api-fetch/src/middlewares/fetch-all-middleware.js
index f0ef36977d6c2c..2fa1b3b3629aab 100644
--- a/packages/api-fetch/src/middlewares/fetch-all-middleware.js
+++ b/packages/api-fetch/src/middlewares/fetch-all-middleware.js
@@ -32,8 +32,10 @@ const getNextPageUrl = ( response ) => {
};
const requestContainsUnboundedQuery = ( options ) => {
- const pathIsUnbounded = options.path && options.path.indexOf( 'per_page=-1' ) !== -1;
- const urlIsUnbounded = options.url && options.url.indexOf( 'per_page=-1' ) !== -1;
+ const pathIsUnbounded =
+ options.path && options.path.indexOf( 'per_page=-1' ) !== -1;
+ const urlIsUnbounded =
+ options.url && options.url.indexOf( 'per_page=-1' ) !== -1;
return pathIsUnbounded || urlIsUnbounded;
};
diff --git a/packages/api-fetch/src/middlewares/media-upload.js b/packages/api-fetch/src/middlewares/media-upload.js
index 4d617cd0683c5d..5668c18cfbd792 100644
--- a/packages/api-fetch/src/middlewares/media-upload.js
+++ b/packages/api-fetch/src/middlewares/media-upload.js
@@ -6,7 +6,10 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-import { parseAndThrowError, parseResponseAndNormalizeError } from '../utils/response';
+import {
+ parseAndThrowError,
+ parseResponseAndNormalizeError,
+} from '../utils/response';
/**
* Middleware handling media upload failures and retries.
@@ -49,8 +52,14 @@ function mediaUploadMiddleware( options, next ) {
return next( { ...options, parse: false } )
.catch( ( response ) => {
- const attachmentId = response.headers.get( 'x-wp-upload-attachment-id' );
- if ( response.status >= 500 && response.status < 600 && attachmentId ) {
+ const attachmentId = response.headers.get(
+ 'x-wp-upload-attachment-id'
+ );
+ if (
+ response.status >= 500 &&
+ response.status < 600 &&
+ attachmentId
+ ) {
return postProcess( attachmentId ).catch( () => {
if ( options.parse !== false ) {
return Promise.reject( {
@@ -66,7 +75,9 @@ function mediaUploadMiddleware( options, next ) {
}
return parseAndThrowError( response, options.parse );
} )
- .then( ( response ) => parseResponseAndNormalizeError( response, options.parse ) );
+ .then( ( response ) =>
+ parseResponseAndNormalizeError( response, options.parse )
+ );
}
export default mediaUploadMiddleware;
diff --git a/packages/api-fetch/src/middlewares/namespace-endpoint.js b/packages/api-fetch/src/middlewares/namespace-endpoint.js
index ef24a3dea93120..406c12926dd976 100644
--- a/packages/api-fetch/src/middlewares/namespace-endpoint.js
+++ b/packages/api-fetch/src/middlewares/namespace-endpoint.js
@@ -2,7 +2,10 @@ const namespaceAndEndpointMiddleware = ( options, next ) => {
let path = options.path;
let namespaceTrimmed, endpointTrimmed;
- if ( typeof options.namespace === 'string' && typeof options.endpoint === 'string' ) {
+ if (
+ typeof options.namespace === 'string' &&
+ typeof options.endpoint === 'string'
+ ) {
namespaceTrimmed = options.namespace.replace( /^\/|\/$/g, '' );
endpointTrimmed = options.endpoint.replace( /^\//, '' );
if ( endpointTrimmed ) {
diff --git a/packages/api-fetch/src/middlewares/preloading.js b/packages/api-fetch/src/middlewares/preloading.js
index 5a141c81413047..573a6c80b384ea 100644
--- a/packages/api-fetch/src/middlewares/preloading.js
+++ b/packages/api-fetch/src/middlewares/preloading.js
@@ -53,7 +53,11 @@ function createPreloadingMiddleware( preloadedData ) {
if ( parse && 'GET' === method && cache[ path ] ) {
return Promise.resolve( cache[ path ].body );
- } else if ( 'OPTIONS' === method && cache[ method ] && cache[ method ][ path ] ) {
+ } else if (
+ 'OPTIONS' === method &&
+ cache[ method ] &&
+ cache[ method ][ path ]
+ ) {
return Promise.resolve( cache[ method ][ path ] );
}
}
diff --git a/packages/api-fetch/src/middlewares/root-url.js b/packages/api-fetch/src/middlewares/root-url.js
index 92b50523642fcc..8d2ad636285476 100644
--- a/packages/api-fetch/src/middlewares/root-url.js
+++ b/packages/api-fetch/src/middlewares/root-url.js
@@ -20,7 +20,10 @@ const createRootURLMiddleware = ( rootURL ) => ( options, next ) => {
// API root may already include query parameter prefix if site is
// configured to use plain permalinks.
- if ( 'string' === typeof apiRoot && -1 !== apiRoot.indexOf( '?' ) ) {
+ if (
+ 'string' === typeof apiRoot &&
+ -1 !== apiRoot.indexOf( '?' )
+ ) {
path = path.replace( '?', '&' );
}
diff --git a/packages/api-fetch/src/middlewares/test/preloading.js b/packages/api-fetch/src/middlewares/test/preloading.js
index 42c00696e1849d..167e2e4eb32d65 100644
--- a/packages/api-fetch/src/middlewares/test/preloading.js
+++ b/packages/api-fetch/src/middlewares/test/preloading.js
@@ -36,7 +36,9 @@ describe( 'Preloading Middleware', () => {
body,
},
};
- const preloadingMiddleware = createPreloadingMiddleware( preloadedData );
+ const preloadingMiddleware = createPreloadingMiddleware(
+ preloadedData
+ );
const requestOptions = {
method: 'GET',
path: 'wp/v2/posts',
@@ -54,7 +56,9 @@ describe( 'Preloading Middleware', () => {
'wp/v2/demo-reverse-alphabetical?foo=bar&baz=quux': { body },
'wp/v2/demo-alphabetical?baz=quux&foo=bar': { body },
};
- const preloadingMiddleware = createPreloadingMiddleware( preloadedData );
+ const preloadingMiddleware = createPreloadingMiddleware(
+ preloadedData
+ );
let requestOptions = {
method: 'GET',
@@ -79,7 +83,9 @@ describe( 'Preloading Middleware', () => {
[ 'method empty', { [ method ]: {} } ],
] )( '%s', ( label, preloadedData ) => {
it( 'should move to the next middleware if no preloaded data', () => {
- const prelooadingMiddleware = createPreloadingMiddleware( preloadedData );
+ const prelooadingMiddleware = createPreloadingMiddleware(
+ preloadedData
+ );
const requestOptions = {
method,
path: 'wp/v2/posts',
diff --git a/packages/api-fetch/src/middlewares/test/root-url.js b/packages/api-fetch/src/middlewares/test/root-url.js
index 3480cddc532b06..921e6af8bb01e9 100644
--- a/packages/api-fetch/src/middlewares/test/root-url.js
+++ b/packages/api-fetch/src/middlewares/test/root-url.js
@@ -14,7 +14,9 @@ describe( 'Root URL middleware', () => {
path: '/wp/v2/posts',
};
const callback = ( options ) => {
- expect( options.url ).toBe( 'http://wp.org/wp-admin/rest/wp/v2/posts' );
+ expect( options.url ).toBe(
+ 'http://wp.org/wp-admin/rest/wp/v2/posts'
+ );
};
rootURLMiddleware( requestOptions, callback );
diff --git a/packages/api-fetch/src/middlewares/test/user-locale.js b/packages/api-fetch/src/middlewares/test/user-locale.js
index 03dc9136ee20e0..9626819f3e0860 100644
--- a/packages/api-fetch/src/middlewares/test/user-locale.js
+++ b/packages/api-fetch/src/middlewares/test/user-locale.js
@@ -73,7 +73,9 @@ describe( 'User locale middleware', () => {
};
const callback = ( options ) => {
- expect( options.url ).toBe( 'http://wp.org/wp-json/wp/v2/posts?_locale=user' );
+ expect( options.url ).toBe(
+ 'http://wp.org/wp-json/wp/v2/posts?_locale=user'
+ );
};
userLocaleMiddleware( requestOptions, callback );
@@ -88,7 +90,9 @@ describe( 'User locale middleware', () => {
};
const callback = ( options ) => {
- expect( options.url ).toBe( 'http://wp.org/wp-json/wp/v2/posts?foo=bar&_locale=user' );
+ expect( options.url ).toBe(
+ 'http://wp.org/wp-json/wp/v2/posts?foo=bar&_locale=user'
+ );
};
userLocaleMiddleware( requestOptions, callback );
@@ -103,7 +107,9 @@ describe( 'User locale middleware', () => {
};
const callback = ( options ) => {
- expect( options.url ).toBe( 'http://wp.org/wp-json/wp/v2/posts?_locale=foo' );
+ expect( options.url ).toBe(
+ 'http://wp.org/wp-json/wp/v2/posts?_locale=foo'
+ );
};
userLocaleMiddleware( requestOptions, callback );
@@ -118,7 +124,9 @@ describe( 'User locale middleware', () => {
};
const callback = ( options ) => {
- expect( options.url ).toBe( 'http://wp.org/wp-json/wp/v2/posts?foo=bar&_locale=foo' );
+ expect( options.url ).toBe(
+ 'http://wp.org/wp-json/wp/v2/posts?foo=bar&_locale=foo'
+ );
};
userLocaleMiddleware( requestOptions, callback );
diff --git a/packages/api-fetch/src/middlewares/user-locale.js b/packages/api-fetch/src/middlewares/user-locale.js
index 22fd232caf91b1..8debbde8d994a7 100644
--- a/packages/api-fetch/src/middlewares/user-locale.js
+++ b/packages/api-fetch/src/middlewares/user-locale.js
@@ -4,11 +4,17 @@
import { addQueryArgs, hasQueryArg } from '@wordpress/url';
function userLocaleMiddleware( options, next ) {
- if ( typeof options.url === 'string' && ! hasQueryArg( options.url, '_locale' ) ) {
+ if (
+ typeof options.url === 'string' &&
+ ! hasQueryArg( options.url, '_locale' )
+ ) {
options.url = addQueryArgs( options.url, { _locale: 'user' } );
}
- if ( typeof options.path === 'string' && ! hasQueryArg( options.path, '_locale' ) ) {
+ if (
+ typeof options.path === 'string' &&
+ ! hasQueryArg( options.path, '_locale' )
+ ) {
options.path = addQueryArgs( options.path, { _locale: 'user' } );
}
diff --git a/packages/api-fetch/src/test/index.js b/packages/api-fetch/src/test/index.js
index 05c327da6ee6f8..26431fb69a5937 100644
--- a/packages/api-fetch/src/test/index.js
+++ b/packages/api-fetch/src/test/index.js
@@ -50,14 +50,17 @@ describe( 'apiFetch', () => {
body,
} );
- expect( window.fetch ).toHaveBeenCalledWith( '/wp/v2/media?_locale=user', {
- credentials: 'include',
- headers: {
- Accept: 'application/json, */*;q=0.1',
- },
- method: 'POST',
- body,
- } );
+ expect( window.fetch ).toHaveBeenCalledWith(
+ '/wp/v2/media?_locale=user',
+ {
+ credentials: 'include',
+ headers: {
+ Accept: 'application/json, */*;q=0.1',
+ },
+ method: 'POST',
+ body,
+ }
+ );
} );
it( 'should fetch with a JSON body', () => {
@@ -72,15 +75,18 @@ describe( 'apiFetch', () => {
data: {},
} );
- expect( window.fetch ).toHaveBeenCalledWith( '/wp/v2/posts?_locale=user', {
- body: '{}',
- credentials: 'include',
- headers: {
- Accept: 'application/json, */*;q=0.1',
- 'Content-Type': 'application/json',
- },
- method: 'POST',
- } );
+ expect( window.fetch ).toHaveBeenCalledWith(
+ '/wp/v2/posts?_locale=user',
+ {
+ body: '{}',
+ credentials: 'include',
+ headers: {
+ Accept: 'application/json, */*;q=0.1',
+ 'Content-Type': 'application/json',
+ },
+ method: 'POST',
+ }
+ );
} );
it( 'should respect developer-provided options', () => {
@@ -93,15 +99,18 @@ describe( 'apiFetch', () => {
credentials: 'omit',
} );
- expect( window.fetch ).toHaveBeenCalledWith( '/wp/v2/posts?_locale=user', {
- body: '{}',
- credentials: 'omit',
- headers: {
- Accept: 'application/json, */*;q=0.1',
- 'Content-Type': 'application/json',
- },
- method: 'POST',
- } );
+ expect( window.fetch ).toHaveBeenCalledWith(
+ '/wp/v2/posts?_locale=user',
+ {
+ body: '{}',
+ credentials: 'omit',
+ headers: {
+ Accept: 'application/json, */*;q=0.1',
+ 'Content-Type': 'application/json',
+ },
+ method: 'POST',
+ }
+ );
} );
it( 'should return the error message properly', () => {
@@ -188,11 +197,13 @@ describe( 'apiFetch', () => {
} )
);
- return apiFetch( { path: '/random', parse: false } ).then( ( response ) => {
- expect( response ).toEqual( {
- status: 200,
- } );
- } );
+ return apiFetch( { path: '/random', parse: false } ).then(
+ ( response ) => {
+ expect( response ).toEqual( {
+ status: 200,
+ } );
+ }
+ );
} );
it( 'should not try to parse the error', () => {
@@ -202,11 +213,13 @@ describe( 'apiFetch', () => {
} )
);
- return apiFetch( { path: '/random', parse: false } ).catch( ( response ) => {
- expect( response ).toEqual( {
- status: 400,
- } );
- } );
+ return apiFetch( { path: '/random', parse: false } ).catch(
+ ( response ) => {
+ expect( response ).toEqual( {
+ status: 400,
+ } );
+ }
+ );
} );
it( 'should not use the default fetch handler when using a custom fetch handler', () => {
diff --git a/packages/api-fetch/src/utils/response.js b/packages/api-fetch/src/utils/response.js
index 518a7fd5e66f81..d28413862b6c63 100644
--- a/packages/api-fetch/src/utils/response.js
+++ b/packages/api-fetch/src/utils/response.js
@@ -46,10 +46,13 @@ const parseJsonAndNormalizeError = ( response ) => {
*
* @return {Promise} Parsed response.
*/
-export const parseResponseAndNormalizeError = ( response, shouldParseResponse = true ) => {
- return Promise.resolve( parseResponse( response, shouldParseResponse ) ).catch( ( res ) =>
- parseAndThrowError( res, shouldParseResponse )
- );
+export const parseResponseAndNormalizeError = (
+ response,
+ shouldParseResponse = true
+) => {
+ return Promise.resolve(
+ parseResponse( response, shouldParseResponse )
+ ).catch( ( res ) => parseAndThrowError( res, shouldParseResponse ) );
};
export function parseAndThrowError( response, shouldParseResponse = true ) {
diff --git a/packages/autop/src/index.js b/packages/autop/src/index.js
index 32512f62094eca..3a0fc7fa73600e 100644
--- a/packages/autop/src/index.js
+++ b/packages/autop/src/index.js
@@ -92,7 +92,10 @@ function replaceInHtmlTags( haystack, replacePairs ) {
for ( let j = 0; j < needles.length; j++ ) {
const needle = needles[ j ];
if ( -1 !== textArr[ i ].indexOf( needle ) ) {
- textArr[ i ] = textArr[ i ].replace( new RegExp( needle, 'g' ), replacePairs[ needle ] );
+ textArr[ i ] = textArr[ i ].replace(
+ new RegExp( needle, 'g' ),
+ replacePairs[ needle ]
+ );
changed = true;
// After one strtr() break out of the foreach loop and look at next element.
break;
@@ -170,10 +173,16 @@ export function autop( text, br = true ) {
'(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary)';
// Add a double line break above block-level opening tags.
- text = text.replace( new RegExp( '(<' + allBlocks + '[\\s/>])', 'g' ), '\n\n$1' );
+ text = text.replace(
+ new RegExp( '(<' + allBlocks + '[\\s/>])', 'g' ),
+ '\n\n$1'
+ );
// Add a double line break below block-level closing tags.
- text = text.replace( new RegExp( '()', 'g' ), '$1\n\n' );
+ text = text.replace(
+ new RegExp( '()', 'g' ),
+ '$1\n\n'
+ );
// Standardize newline characters to "\n".
text = text.replace( /\r\n|\r/g, '\n' );
@@ -231,10 +240,16 @@ export function autop( text, br = true ) {
text = text.replace( /\s*<\/p>/g, '' );
// Add a closing
inside
\n' );
// Fix line breaks around caption shortcodes.
- html = html.replace( /\s*\[caption([^\[]+)\[\/caption\]\s*/gi, '\n\n[caption$1[/caption]\n\n' );
+ html = html.replace(
+ /\s*\[caption([^\[]+)\[\/caption\]\s*/gi,
+ '\n\n[caption$1[/caption]\n\n'
+ );
html = html.replace( /caption\]\n\n+\[caption/g, 'caption]\n\n[caption' );
// Pad block elements tags with a line break.
@@ -381,7 +423,10 @@ export function removep( html ) {
new RegExp( '\\s*<((?:' + blocklist2 + ')(?: [^>]*)?)\\s*>', 'g' ),
'\n<$1>'
);
- html = html.replace( new RegExp( '\\s*\\s*', 'g' ), '\n' );
+ html = html.replace(
+ new RegExp( '\\s*\\s*', 'g' ),
+ '\n'
+ );
// Indent , and 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 02bffeab830dde..0c5d86d6d0a2b3 100644
--- a/packages/autop/src/test/index.test.js
+++ b/packages/autop/src/test/index.test.js
@@ -405,7 +405,10 @@ test( 'that autop treats inline elements as inline', () => {
test( 'element sanity', () => {
[
[ 'Hello ', 'Hello
\n' ],
- [ 'Hello ', 'Hello
\n' ],
+ [
+ 'Hello ',
+ 'Hello
\n',
+ ],
[
'Hello ',
'Hello
\n',
@@ -481,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
@@ -497,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 273df752611c15..a7dd3a2d381556 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 c3e098476db3d2..bcd915f1b5dad1 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 b422f1360416c1..5c27144430e109 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 4e765c0ab125d7..78ab2962e60ce8 100644
--- a/packages/block-directory/src/components/downloadable-block-header/index.js
+++ b/packages/block-directory/src/components/downloadable-block-header/index.js
@@ -10,12 +10,21 @@ 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".
-
+
) : (
-
+
{ title }
- { description }
+
+ { description }
+
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 36b952f3ecc5da..b63c40d34871f3 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
@@ -52,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;
@@ -67,7 +77,11 @@ export default compose(
label: __( 'Retry' ),
onClick: () => {
removeNotice( DOWNLOAD_ERROR_NOTICE_ID );
- downloadBlock( item, onSuccess, onDownloadError );
+ downloadBlock(
+ item,
+ onSuccess,
+ onDownloadError
+ );
},
},
],
@@ -78,26 +92,39 @@ export default compose(
const createdBlock = onSelect( item );
const onInstallBlockError = () => {
- createErrorNotice( __( "Block previews can't install." ), {
- id: INSTALL_ERROR_NOTICE_ID,
- actions: [
- {
- label: __( 'Retry' ),
- onClick: () => {
- removeNotice( INSTALL_ERROR_NOTICE_ID );
- installBlock( item, noop, onInstallBlockError );
+ createErrorNotice(
+ __( "Block previews can't install." ),
+ {
+ id: INSTALL_ERROR_NOTICE_ID,
+ actions: [
+ {
+ label: __( 'Retry' ),
+ onClick: () => {
+ removeNotice(
+ INSTALL_ERROR_NOTICE_ID
+ );
+ installBlock(
+ item,
+ noop,
+ onInstallBlockError
+ );
+ },
},
- },
- {
- label: __( 'Remove' ),
- onClick: () => {
- removeNotice( INSTALL_ERROR_NOTICE_ID );
- removeBlocks( createdBlock.clientId );
- unregisterBlockType( item.name );
+ {
+ label: __( 'Remove' ),
+ onClick: () => {
+ removeNotice(
+ INSTALL_ERROR_NOTICE_ID
+ );
+ removeBlocks(
+ createdBlock.clientId
+ );
+ unregisterBlockType( item.name );
+ },
},
- },
- ],
- } );
+ ],
+ }
+ );
};
installBlock( item, noop, onInstallBlockError );
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 f49e96654acc27..29d7cbb29ecac0 100644
--- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js
+++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js
@@ -31,7 +31,9 @@ function DownloadableBlocksPanel( {
{ __( 'No blocks found in your library.' ) }
);
}
@@ -65,7 +67,9 @@ function DownloadableBlocksPanel( {
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:'
+ ) }
( { 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 } );
},
diff --git a/packages/block-directory/src/store/reducer.js b/packages/block-directory/src/store/reducer.js
index d6387476f54662..c0993c56dfaf64 100644
--- a/packages/block-directory/src/store/reducer.js
+++ b/packages/block-directory/src/store/reducer.js
@@ -55,7 +55,10 @@ export const blockManagement = (
case 'ADD_INSTALLED_BLOCK_TYPE':
return {
...state,
- installedBlockTypes: [ ...state.installedBlockTypes, action.item ],
+ installedBlockTypes: [
+ ...state.installedBlockTypes,
+ action.item,
+ ],
};
case 'REMOVE_INSTALLED_BLOCK_TYPE':
return {
diff --git a/packages/block-directory/src/store/test/fixtures/index.js b/packages/block-directory/src/store/test/fixtures/index.js
index bbbfbdaa6f9ed0..0f7cc95dc8a6b4 100644
--- a/packages/block-directory/src/store/test/fixtures/index.js
+++ b/packages/block-directory/src/store/test/fixtures/index.js
@@ -1,7 +1,8 @@
export const downloadableBlock = {
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,
ratingCount: 1,
diff --git a/packages/block-directory/src/store/test/reducer.js b/packages/block-directory/src/store/test/reducer.js
index b2eaa6b667e0a1..b10edec5845a85 100644
--- a/packages/block-directory/src/store/test/reducer.js
+++ b/packages/block-directory/src/store/test/reducer.js
@@ -39,7 +39,9 @@ describe( 'state', () => {
downloadableBlocks: [ downloadableBlock ],
} );
expect( state.results ).toHaveProperty( downloadableBlock.title );
- expect( state.results[ downloadableBlock.title ] ).toHaveLength( 1 );
+ expect( state.results[ downloadableBlock.title ] ).toHaveLength(
+ 1
+ );
// It should append to the results
const updatedState = downloadableBlocks( state, {
diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js
index 96c8f33f0faa06..9a880f4e67dd35 100644
--- a/packages/block-editor/src/components/alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/alignment-toolbar/index.js
@@ -41,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 alignment = 'left';
const onChangeSpy = jest.fn();
- const wrapper = shallow( {
return {
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 b92ab806746ecf..976aa7d4abd896 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 && (
@@ -67,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
index 8b0be70c676f60..818bc3b41c0ab0 100644
--- a/packages/block-editor/src/components/block-caption/index.native.js
+++ b/packages/block-editor/src/components/block-caption/index.native.js
@@ -36,13 +36,16 @@ const BlockCaption = ( {
export default compose( [
withSelect( ( select, { clientId } ) => {
- const { getBlockAttributes, getSelectedBlockClientId } = select( 'core/block-editor' );
+ 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;
+ const shouldDisplay =
+ ! RichText.isEmpty( caption ) > 0 || isBlockSelected;
return {
shouldDisplay,
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index f060612622804e..674d437d9c7a3e 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 861370f6e3edf0..7bb45a4402f241 100644
--- a/packages/block-editor/src/components/block-compare/block-view.js
+++ b/packages/block-editor/src/components/block-compare/block-view.js
@@ -3,13 +3,24 @@
*/
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 }
+
+ { rawContent }
+
{ renderedContent }
diff --git a/packages/block-editor/src/components/block-compare/index.js b/packages/block-editor/src/components/block-compare/index.js
index f1e4d21fc992d2..f80ca412ce5114 100644
--- a/packages/block-editor/src/components/block-compare/index.js
+++ b/packages/block-editor/src/components/block-compare/index.js
@@ -61,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-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js
index f361aad8054140..dd87e2c5a08fd6 100644
--- a/packages/block-editor/src/components/block-draggable/index.js
+++ b/packages/block-editor/src/components/block-draggable/index.js
@@ -13,24 +13,33 @@ 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 {
+ 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;
+ 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,
+ 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( () => {
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 2501f32f389437..6f15cb0284af04 100644
--- a/packages/block-editor/src/components/block-drop-zone/index.js
+++ b/packages/block-editor/src/components/block-drop-zone/index.js
@@ -2,7 +2,11 @@
* WordPress dependencies
*/
import { __unstableUseDropZone as useDropZone } from '@wordpress/components';
-import { pasteHandler, getBlockTransforms, findTransform } from '@wordpress/blocks';
+import {
+ pasteHandler,
+ getBlockTransforms,
+ findTransform,
+} from '@wordpress/blocks';
import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect, useState, useCallback } from '@wordpress/element';
@@ -19,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;
}
@@ -31,9 +38,12 @@ export default function useBlockDropZone( { element, rootClientId } ) {
const [ clientId, setClientId ] = useState( null );
function selector( select ) {
- const { getBlockIndex, getClientIdsOfDescendants, getSettings, getTemplateLock } = select(
- 'core/block-editor'
- );
+ const {
+ getBlockIndex,
+ getClientIdsOfDescendants,
+ getSettings,
+ getTemplateLock,
+ } = select( 'core/block-editor' );
return {
getBlockIndex,
blockIndex: getBlockIndex( clientId, rootClientId ),
@@ -50,9 +60,11 @@ export default function useBlockDropZone( { element, rootClientId } ) {
hasUploadPermissions,
isLockedAll,
} = useSelect( selector, [ rootClientId, clientId ] );
- const { insertBlocks, updateBlockAttributes, moveBlockToPosition } = useDispatch(
- 'core/block-editor'
- );
+ const {
+ insertBlocks,
+ updateBlockAttributes,
+ moveBlockToPosition,
+ } = useDispatch( 'core/block-editor' );
const onFilesDrop = useCallback(
( files ) => {
@@ -62,15 +74,25 @@ export default function useBlockDropZone( { element, rootClientId } ) {
const transformation = findTransform(
getBlockTransforms( 'from' ),
- ( transform ) => transform.type === 'files' && transform.isMatch( files )
+ ( transform ) =>
+ transform.type === 'files' && transform.isMatch( files )
);
if ( transformation ) {
- const blocks = transformation.transform( files, updateBlockAttributes );
+ const blocks = transformation.transform(
+ files,
+ updateBlockAttributes
+ );
insertBlocks( blocks, blockIndex, rootClientId );
}
},
- [ hasUploadPermissions, updateBlockAttributes, insertBlocks, blockIndex, rootClientId ]
+ [
+ hasUploadPermissions,
+ updateBlockAttributes,
+ insertBlocks,
+ blockIndex,
+ rootClientId,
+ ]
);
const onHTMLDrop = useCallback(
@@ -86,35 +108,57 @@ export default function useBlockDropZone( { element, rootClientId } ) {
const onDrop = useCallback(
( event ) => {
- const { srcRootClientId, srcClientId, srcIndex, type } = parseDropEvent( 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 );
+ return (
+ srcRoot === dstRoot ||
+ ( ! srcRoot === true && ! dstRoot === true )
+ );
};
const isSameBlock = ( src, dst ) => src === dst;
const isSrcBlockAnAncestorOfDstBlock = ( src, dst ) =>
- getClientIdsOfDescendants( [ src ] ).some( ( id ) => id === dst );
+ getClientIdsOfDescendants( [ src ] ).some(
+ ( id ) => id === dst
+ );
if (
! isBlockDropType( type ) ||
isSameBlock( srcClientId, clientId ) ||
- isSrcBlockAnAncestorOfDstBlock( srcClientId, clientId || rootClientId )
+ isSrcBlockAnAncestorOfDstBlock(
+ srcClientId,
+ clientId || rootClientId
+ )
) {
return;
}
- const dstIndex = clientId ? getBlockIndex( clientId, rootClientId ) : undefined;
+ 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 )
+ dstIndex &&
+ srcIndex < dstIndex &&
+ isSameLevel( srcRootClientId, rootClientId )
? positionIndex - 1
: positionIndex;
- moveBlockToPosition( srcClientId, srcRootClientId, rootClientId, insertIndex );
+ moveBlockToPosition(
+ srcClientId,
+ srcRootClientId,
+ rootClientId,
+ insertIndex
+ );
},
[
getClientIdsOfDescendants,
@@ -141,9 +185,13 @@ export default function useBlockDropZone( { element, rootClientId } ) {
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;
- } );
+ const target = Array.from( element.current.children ).find(
+ ( blockEl ) => {
+ return (
+ blockEl.offsetTop + blockEl.offsetHeight / 2 > offset
+ );
+ }
+ );
if ( ! target ) {
return;
diff --git a/packages/block-editor/src/components/block-edit/context.js b/packages/block-editor/src/components/block-edit/context.js
index 0a619f91b12ccb..0ab6570bd5da0b 100644
--- a/packages/block-editor/src/components/block-edit/context.js
+++ b/packages/block-editor/src/components/block-edit/context.js
@@ -44,7 +44,10 @@ export const withBlockEditContext = ( mapContextToProps ) =>
return ( props ) => (
{ ( context ) => (
-
);
@@ -58,8 +61,15 @@ export const withBlockEditContext = ( mapContextToProps ) =>
*
* @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 3172916c870a90..c31095753d2065 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;
diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js
index 9953cebf01cc8e..3057ff3b4cf72b 100644
--- a/packages/block-editor/src/components/block-edit/index.js
+++ b/packages/block-editor/src/components/block-edit/index.js
@@ -21,15 +21,35 @@ 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 {
+ name,
+ isSelected,
+ clientId,
+ onFocus,
+ onCaretVerticalPositionChange,
+ } = this.props;
const value = this.propsToContext(
name,
isSelected,
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 0a24f55ce2471e..0b07eb03b2aad6 100644
--- a/packages/block-editor/src/components/block-edit/test/edit.js
+++ b/packages/block-editor/src/components/block-edit/test/edit.js
@@ -7,7 +7,11 @@ import { noop } from 'lodash';
/**
* WordPress dependencies
*/
-import { registerBlockType, unregisterBlockType, getBlockTypes } from '@wordpress/blocks';
+import {
+ registerBlockType,
+ unregisterBlockType,
+ getBlockTypes,
+} from '@wordpress/blocks';
/**
* Internal dependencies
@@ -66,9 +70,13 @@ describe( 'Edit', () => {
title: 'block title',
} );
- const wrapper = shallow(
);
+ const wrapper = shallow(
+
+ );
- expect( wrapper.find( edit ).hasClass( 'wp-block-test-block' ) ).toBe( true );
+ expect( wrapper.find( edit ).hasClass( 'wp-block-test-block' ) ).toBe(
+ true
+ );
expect( wrapper.find( edit ).hasClass( 'my-class' ) ).toBe( true );
} );
} );
diff --git a/packages/block-editor/src/components/block-icon/index.js b/packages/block-editor/src/components/block-icon/index.js
index b20642c6dc9ae7..5e953264fc99c3 100644
--- a/packages/block-editor/src/components/block-icon/index.js
+++ b/packages/block-editor/src/components/block-icon/index.js
@@ -31,7 +31,9 @@ export default function BlockIcon( { icon, showColors = false, className } ) {
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 36b01445309776..f7e2317b4e2d4b 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(
);
- expect( wrapper.containsMatchingElement(
) ).toBe( true );
+ expect(
+ wrapper.containsMatchingElement(
)
+ ).toBe( true );
} );
it( 'renders a span without the has-colors classname', () => {
@@ -33,14 +35,19 @@ describe( 'BlockIcon', () => {
} );
it( 'skips adding background and foreground styles when colors are not enabled', () => {
- const wrapper = shallow(
);
+ const wrapper = shallow(
+
+ );
expect( wrapper.find( 'span' ).prop( 'style' ) ).toEqual( {} );
} );
it( 'adds background and foreground styles when colors are enabled', () => {
const wrapper = shallow(
-
+
);
expect( wrapper.find( 'span' ).prop( 'style' ) ).toEqual( {
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 7aa3cdea1f088f..0f7fededfb6f9b 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -2,8 +2,14 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks';
-import { PanelBody, __experimentalSlotFillConsumer } from '@wordpress/components';
+import {
+ getBlockType,
+ getUnregisteredTypeHandlerName,
+} from '@wordpress/blocks';
+import {
+ PanelBody,
+ __experimentalSlotFillConsumer,
+} from '@wordpress/components';
import { withSelect } from '@wordpress/data';
/**
@@ -28,13 +34,18 @@ const BlockInspector = ( {
return
;
}
- const isSelectedBlockUnregistered = selectedBlockName === getUnregisteredTypeHandlerName();
+ const isSelectedBlockUnregistered =
+ selectedBlockName === getUnregisteredTypeHandlerName();
/*
* If the selected block is of an unregistered type, avoid showing it as an actual selection
* because we want the user to focus on the unregistered block warning, not block settings.
*/
- if ( ! blockType || ! selectedBlockClientId || isSelectedBlockUnregistered ) {
+ if (
+ ! blockType ||
+ ! selectedBlockClientId ||
+ isSelectedBlockUnregistered
+ ) {
if ( showNoBlockSelectedMessage ) {
return (
@@ -66,7 +77,9 @@ const BlockInspector = ( {
title={ __( 'Advanced' ) }
initialOpen={ false }
>
-
+
{ __( 'Convert to HTML' ) }
),
] }
secondaryActions={ hiddenActions }
>
- { __( 'This block contains unexpected or invalid content.' ) }
+ { __(
+ 'This block contains unexpected or invalid content.'
+ ) }
{ compare && (
setIsToolbarForced( true ), [] ),
- { bindGlobal: true, eventName: 'keydown', isDisabled: ! canFocusHiddenToolbar }
+ {
+ bindGlobal: true,
+ eventName: 'keydown',
+ isDisabled: ! canFocusHiddenToolbar,
+ }
);
if (
@@ -141,7 +146,9 @@ function BlockPopover( {
// 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';
+ const popoverPosition = showEmptyBlockSideInserter
+ ? 'top left right'
+ : 'top right left';
return (
setIsToolbarForced( false ) }
shouldAnchorIncludePadding
>
@@ -170,11 +181,17 @@ function BlockPopover( {
//
// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
tabIndex={ -1 }
- className={ classnames( 'block-editor-block-list__block-popover-inserter', {
- 'is-visible': isInserterShown,
- } ) }
+ className={ classnames(
+ 'block-editor-block-list__block-popover-inserter',
+ {
+ 'is-visible': isInserterShown,
+ }
+ ) }
>
-
) }
{ ( shouldShowContextualToolbar || isToolbarForced ) && (
@@ -196,7 +213,11 @@ function BlockPopover( {
) }
{ showEmptyBlockSideInserter && (
-
) }
@@ -214,16 +235,19 @@ function wrapperSelector( select ) {
__experimentalGetBlockListSettingsForBlocks,
} = select( 'core/block-editor' );
- const clientId = getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
+ const clientId =
+ getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
if ( ! clientId ) {
return;
}
const rootClientId = getBlockRootClientId( clientId );
- const { name, attributes = {}, isValid } = __unstableGetBlockWithoutInnerBlocks( clientId ) || {};
+ const { name, attributes = {}, isValid } =
+ __unstableGetBlockWithoutInnerBlocks( clientId ) || {};
const blockParentsClientIds = getBlockParents( clientId );
- const { __experimentalMoverDirection } = getBlockListSettings( rootClientId ) || {};
+ const { __experimentalMoverDirection } =
+ getBlockListSettings( rootClientId ) || {};
// Get Block List Settings for all ancestors of the current Block clientId
const ancestorBlockListSettings = __experimentalGetBlockListSettingsForBlocks(
@@ -232,15 +256,18 @@ function wrapperSelector( select ) {
// Find the index of the first Block with the `captureDescendantsToolbars` prop defined
// This will be the top most ancestor because getBlockParents() returns tree from top -> bottom
- const topmostAncestorWithCaptureDescendantsToolbarsIndex = findIndex( ancestorBlockListSettings, [
- '__experimentalCaptureToolbars',
- true,
- ] );
+ const topmostAncestorWithCaptureDescendantsToolbarsIndex = findIndex(
+ ancestorBlockListSettings,
+ [ '__experimentalCaptureToolbars', true ]
+ );
let capturingClientId;
if ( topmostAncestorWithCaptureDescendantsToolbarsIndex !== -1 ) {
- capturingClientId = blockParentsClientIds[ topmostAncestorWithCaptureDescendantsToolbarsIndex ];
+ capturingClientId =
+ blockParentsClientIds[
+ topmostAncestorWithCaptureDescendantsToolbarsIndex
+ ];
}
return {
@@ -250,7 +277,8 @@ function wrapperSelector( select ) {
align: attributes.align,
isValid,
moverDirection: __experimentalMoverDirection,
- isEmptyDefaultBlock: name && isUnmodifiedDefaultBlock( { name, attributes } ),
+ isEmptyDefaultBlock:
+ name && isUnmodifiedDefaultBlock( { name, attributes } ),
capturingClientId,
};
}
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index ff038162acecbb..3fb84e824f1082 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -8,7 +8,13 @@ import { animated } from 'react-spring/web.cjs';
/**
* WordPress dependencies
*/
-import { useRef, useEffect, useLayoutEffect, useState, useContext } from '@wordpress/element';
+import {
+ useRef,
+ useEffect,
+ useLayoutEffect,
+ useState,
+ useContext,
+} from '@wordpress/element';
import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
import {
@@ -125,7 +131,11 @@ function BlockListBlock( {
.find( wrapper.current )
.filter( isTextField )
// Exclude inner blocks
- .filter( ( node ) => ! ignoreInnerBlocks || isInsideRootBlock( wrapper.current, node ) );
+ .filter(
+ ( node ) =>
+ ! ignoreInnerBlocks ||
+ isInsideRootBlock( wrapper.current, node )
+ );
// If reversed (e.g. merge via backspace), use the last in the set of
// tabbables.
@@ -211,9 +221,13 @@ function BlockListBlock( {
const showEmptyBlockSideInserter =
! isNavigationMode && isSelected && isEmptyDefaultBlock && isValid;
const shouldAppearSelected =
- ! isFocusMode && ! showEmptyBlockSideInserter && isSelected && ! isTypingWithinBlock;
+ ! isFocusMode &&
+ ! showEmptyBlockSideInserter &&
+ isSelected &&
+ ! isTypingWithinBlock;
- const isDragging = isDraggingBlocks && ( isSelected || isPartOfMultiSelection );
+ const isDragging =
+ isDraggingBlocks && ( isSelected || isPartOfMultiSelection );
// Determine whether the block has props to apply to the wrapper.
if ( blockType.getEditWrapperProps ) {
@@ -237,7 +251,8 @@ function BlockListBlock( {
'is-reusable': isReusableBlock( blockType ),
'is-dragging': isDragging,
'is-typing': isTypingWithinBlock,
- 'is-focused': isFocusMode && ( isSelected || isAncestorOfSelectedBlock ),
+ 'is-focused':
+ isFocusMode && ( isSelected || isAncestorOfSelectedBlock ),
'is-focus-mode': isFocusMode,
'has-child-selected': isAncestorOfSelectedBlock,
'is-block-collapsed': isAligned,
@@ -303,10 +318,17 @@ function BlockListBlock( {
>
{ isValid && blockEdit }
- { isValid && mode === 'html' && { getSaveElement( blockType, attributes ) }
,
+
+ { getSaveElement( blockType, attributes ) }
+
,
] }
{ !! hasError &&
}
@@ -314,69 +336,81 @@ function BlockListBlock( {
);
}
-const applyWithSelect = withSelect( ( select, { clientId, rootClientId, isLargeViewport } ) => {
- const {
- isBlockSelected,
- isAncestorMultiSelected,
- isBlockMultiSelected,
- isFirstMultiSelectedBlock,
- getLastMultiSelectedBlockClientId,
- isTyping,
- getBlockMode,
- isSelectionEnabled,
- getSelectedBlocksInitialCaretPosition,
- getSettings,
- hasSelectedInnerBlock,
- getTemplateLock,
- __unstableGetBlockWithoutInnerBlocks,
- isNavigationMode,
- } = select( 'core/block-editor' );
-
- const block = __unstableGetBlockWithoutInnerBlocks( clientId );
- const isSelected = isBlockSelected( clientId );
- const { focusMode, isRTL } = getSettings();
- const templateLock = getTemplateLock( rootClientId );
- const checkDeep = true;
-
- // "ancestor" is the more appropriate label due to "deep" check
- const isAncestorOfSelectedBlock = hasSelectedInnerBlock( clientId, checkDeep );
-
- // The fallback to `{}` is a temporary fix.
- // This function should never be called when a block is not present in the state.
- // It happens now because the order in withSelect rendering is not correct.
- const { name, attributes, isValid } = block || {};
+const applyWithSelect = withSelect(
+ ( select, { clientId, rootClientId, isLargeViewport } ) => {
+ const {
+ isBlockSelected,
+ isAncestorMultiSelected,
+ isBlockMultiSelected,
+ isFirstMultiSelectedBlock,
+ getLastMultiSelectedBlockClientId,
+ isTyping,
+ getBlockMode,
+ isSelectionEnabled,
+ getSelectedBlocksInitialCaretPosition,
+ getSettings,
+ hasSelectedInnerBlock,
+ getTemplateLock,
+ __unstableGetBlockWithoutInnerBlocks,
+ isNavigationMode,
+ } = select( 'core/block-editor' );
+
+ const block = __unstableGetBlockWithoutInnerBlocks( clientId );
+ const isSelected = isBlockSelected( clientId );
+ const { focusMode, isRTL } = getSettings();
+ const templateLock = getTemplateLock( rootClientId );
+ const checkDeep = true;
+
+ // "ancestor" is the more appropriate label due to "deep" check
+ const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
+ clientId,
+ checkDeep
+ );
+
+ // The fallback to `{}` is a temporary fix.
+ // This function should never be called when a block is not present in the state.
+ // It happens now because the order in withSelect rendering is not correct.
+ const { name, attributes, isValid } = block || {};
- return {
- isMultiSelected: isBlockMultiSelected( clientId ),
- isPartOfMultiSelection: isBlockMultiSelected( clientId ) || isAncestorMultiSelected( clientId ),
- isFirstMultiSelected: isFirstMultiSelectedBlock( clientId ),
- isLastMultiSelected: getLastMultiSelectedBlockClientId() === clientId,
-
- // We only care about this prop when the block is selected
- // Thus to avoid unnecessary rerenders we avoid updating the prop if the block is not selected.
- isTypingWithinBlock: ( isSelected || isAncestorOfSelectedBlock ) && isTyping(),
-
- mode: getBlockMode( clientId ),
- isSelectionEnabled: isSelectionEnabled(),
- initialPosition: isSelected ? getSelectedBlocksInitialCaretPosition() : null,
- isEmptyDefaultBlock: name && isUnmodifiedDefaultBlock( { name, attributes } ),
- isLocked: !! templateLock,
- isFocusMode: focusMode && isLargeViewport,
- isNavigationMode: isNavigationMode(),
- isRTL,
-
- // Users of the editor.BlockListBlock filter used to be able to access the block prop
- // Ideally these blocks would rely on the clientId prop only.
- // This is kept for backward compatibility reasons.
- block,
-
- name,
- attributes,
- isValid,
- isSelected,
- isAncestorOfSelectedBlock,
- };
-} );
+ return {
+ isMultiSelected: isBlockMultiSelected( clientId ),
+ isPartOfMultiSelection:
+ isBlockMultiSelected( clientId ) ||
+ isAncestorMultiSelected( clientId ),
+ isFirstMultiSelected: isFirstMultiSelectedBlock( clientId ),
+ isLastMultiSelected:
+ getLastMultiSelectedBlockClientId() === clientId,
+
+ // We only care about this prop when the block is selected
+ // Thus to avoid unnecessary rerenders we avoid updating the prop if the block is not selected.
+ isTypingWithinBlock:
+ ( isSelected || isAncestorOfSelectedBlock ) && isTyping(),
+
+ mode: getBlockMode( clientId ),
+ isSelectionEnabled: isSelectionEnabled(),
+ initialPosition: isSelected
+ ? getSelectedBlocksInitialCaretPosition()
+ : null,
+ isEmptyDefaultBlock:
+ name && isUnmodifiedDefaultBlock( { name, attributes } ),
+ isLocked: !! templateLock,
+ isFocusMode: focusMode && isLargeViewport,
+ isNavigationMode: isNavigationMode(),
+ isRTL,
+
+ // Users of the editor.BlockListBlock filter used to be able to access the block prop
+ // Ideally these blocks would rely on the clientId prop only.
+ // This is kept for backward compatibility reasons.
+ block,
+
+ name,
+ attributes,
+ isValid,
+ isSelected,
+ isAncestorOfSelectedBlock,
+ };
+ }
+);
const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
const {
@@ -416,7 +450,9 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
},
onMerge( forward ) {
const { clientId } = ownProps;
- const { getPreviousBlockClientId, getNextBlockClientId } = select( 'core/block-editor' );
+ const { getPreviousBlockClientId, getNextBlockClientId } = select(
+ 'core/block-editor'
+ );
if ( forward ) {
const nextBlockClientId = getNextBlockClientId( clientId );
@@ -424,14 +460,19 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
mergeBlocks( clientId, nextBlockClientId );
}
} else {
- const previousBlockClientId = getPreviousBlockClientId( clientId );
+ const previousBlockClientId = getPreviousBlockClientId(
+ clientId
+ );
if ( previousBlockClientId ) {
mergeBlocks( previousBlockClientId, clientId );
}
}
},
onReplace( blocks, indexToSelect ) {
- if ( blocks.length && ! isUnmodifiedDefaultBlock( blocks[ blocks.length - 1 ] ) ) {
+ if (
+ blocks.length &&
+ ! isUnmodifiedDefaultBlock( blocks[ blocks.length - 1 ] )
+ ) {
__unstableMarkLastChangeAsPersistent();
}
replaceBlocks( [ ownProps.clientId ], blocks, indexToSelect );
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index c9ff1959711111..9092826676b3d2 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -63,7 +63,9 @@ class BlockListBlock extends Component {
onReplace={ this.props.onReplace }
insertBlocksAfter={ this.insertBlocksAfter }
mergeBlocks={ this.props.mergeBlocks }
- onCaretVerticalPositionChange={ this.props.onCaretVerticalPositionChange }
+ onCaretVerticalPositionChange={
+ this.props.onCaretVerticalPositionChange
+ }
clientId={ this.props.clientId }
/>
);
@@ -88,7 +90,10 @@ class BlockListBlock extends Component {
const fullSolidBorderStyle = {
// define style for full border
...styles.fullSolidBordered,
- ...getStylesFromColorScheme( styles.solidBorderColor, styles.solidBorderColorDark ),
+ ...getStylesFromColorScheme(
+ styles.solidBorderColor,
+ styles.solidBorderColorDark
+ ),
};
if ( hasChildren ) {
@@ -133,7 +138,10 @@ class BlockListBlock extends Component {
const dashedBorderStyle = {
// define style for dashed border
...styles.dashedBordered,
- ...getStylesFromColorScheme( styles.dashedBorderColor, styles.dashedBorderColorDark ),
+ ...getStylesFromColorScheme(
+ styles.dashedBorderColor,
+ styles.dashedBorderColorDark
+ ),
};
// return apply childOfSelected or childOfSelectedLeaf
@@ -160,7 +168,9 @@ class BlockListBlock extends Component {
const { isSelected, isDimmed } = this.props;
return [
- isSelected ? this.applySelectedBlockStyle() : this.applyUnSelectedBlockStyle(),
+ isSelected
+ ? this.applySelectedBlockStyle()
+ : this.applyUnSelectedBlockStyle(),
isDimmed && styles.dimmed,
];
}
@@ -188,7 +198,11 @@ class BlockListBlock extends Component {
isTouchable,
} = this.props;
- const accessibilityLabel = getAccessibleBlockLabel( blockType, attributes, order + 1 );
+ const accessibilityLabel = getAccessibleBlockLabel(
+ blockType,
+ attributes,
+ order + 1
+ );
return (
<>
@@ -197,7 +211,9 @@ class BlockListBlock extends Component {
this.props.onSelect( parentId ) }
+ onClick={ () =>
+ this.props.onSelect( parentId )
+ }
icon={ NavigateUpSVG }
/>
- { isSelected &&
@@ -270,23 +291,37 @@ 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 hasChildren = ! isUnregisteredBlock && !! 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 isDescendantOfParentSelected = selectedParents.includes(
+ parentId
+ );
const isTouchable =
- isSelected || isDescendantOfParentSelected || isParentSelected || parentId === '';
+ isSelected ||
+ isDescendantOfParentSelected ||
+ isParentSelected ||
+ parentId === '';
const isDimmed =
! isSelected &&
isSelectedBlockNested &&
@@ -295,7 +330,8 @@ export default compose( [
( isDescendantOfParentSelected || rootBlockId === clientId );
const isInnerBlockHolder = name === getGroupingBlockName();
- const isRootListInnerBlockHolder = ! isSelectedBlockNested && isInnerBlockHolder;
+ const isRootListInnerBlockHolder =
+ ! isSelectedBlockNested && isInnerBlockHolder;
return {
icon,
@@ -332,7 +368,10 @@ export default compose( [
return {
mergeBlocks( forward ) {
const { clientId } = ownProps;
- const { getPreviousBlockClientId, getNextBlockClientId } = select( 'core/block-editor' );
+ const {
+ getPreviousBlockClientId,
+ getNextBlockClientId,
+ } = select( 'core/block-editor' );
if ( forward ) {
const nextBlockClientId = getNextBlockClientId( clientId );
@@ -340,7 +379,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/breadcrumb.js b/packages/block-editor/src/components/block-list/breadcrumb.js
index 77fa495db99519..a47db75152663e 100644
--- a/packages/block-editor/src/components/block-list/breadcrumb.js
+++ b/packages/block-editor/src/components/block-list/breadcrumb.js
@@ -25,18 +25,30 @@ import BlockTitle from '../block-title';
*
* @return {WPComponent} The component to be rendered.
*/
-function BlockBreadcrumb( { clientId, rootClientId, moverDirection, ...props } ) {
+function BlockBreadcrumb( {
+ clientId,
+ rootClientId,
+ moverDirection,
+ ...props
+} ) {
const selected = useSelect(
( select ) => {
- const { __unstableGetBlockWithoutInnerBlocks, getBlockIndex } = select( 'core/block-editor' );
+ const {
+ __unstableGetBlockWithoutInnerBlocks,
+ getBlockIndex,
+ } = select( 'core/block-editor' );
const index = getBlockIndex( clientId, rootClientId );
- const { name, attributes } = __unstableGetBlockWithoutInnerBlocks( clientId );
+ const { name, attributes } = __unstableGetBlockWithoutInnerBlocks(
+ clientId
+ );
return { index, name, attributes };
},
[ clientId, rootClientId ]
);
const { index, name, attributes } = selected;
- const { setNavigationMode, removeBlock } = useDispatch( 'core/block-editor' );
+ const { setNavigationMode, removeBlock } = useDispatch(
+ 'core/block-editor'
+ );
const ref = useRef();
// Focus the breadcrumb in navigation mode.
@@ -54,7 +66,12 @@ function BlockBreadcrumb( { clientId, rootClientId, moverDirection, ...props } )
}
const blockType = getBlockType( name );
- const label = getAccessibleBlockLabel( blockType, attributes, index + 1, moverDirection );
+ const label = getAccessibleBlockLabel(
+ blockType,
+ attributes,
+ index + 1,
+ moverDirection
+ );
return (
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 33a9b3ace7c7e6..37d26abe1cff55 100644
--- a/packages/block-editor/src/components/block-list/breadcrumb.native.js
+++ b/packages/block-editor/src/components/block-list/breadcrumb.native.js
@@ -19,7 +19,12 @@ 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 */
} }
- disabled={ true } /* Disable temporarily since onPress function is empty */
+ disabled={
+ true
+ } /* Disable temporarily since onPress function is empty */
>
{ rootClientId &&
rootBlockIcon && [
@@ -41,7 +48,11 @@ const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon } )
,
] }
-
+
{
- const { getBlockRootClientId, getBlockName } = select( 'core/block-editor' );
+ const { getBlockRootClientId, getBlockName } = select(
+ 'core/block-editor'
+ );
const blockName = getBlockName( clientId );
const blockType = getBlockType( blockName );
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 48d05a5f629b6a..ffb5320faa1aae 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -56,7 +56,9 @@ function BlockList( {
selectedBlockClientId: getSelectedBlockClientId(),
multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
hasMultiSelection: hasMultiSelection(),
- enableAnimation: ! isTyping() && getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
+ enableAnimation:
+ ! isTyping() &&
+ getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
};
}
@@ -77,14 +79,23 @@ function BlockList( {
} );
return (
-
+
{ blockClientIds.map( ( clientId, index ) => {
const isBlockInSelection = hasMultiSelection
? multiSelectedBlockClientIds.includes( clientId )
: selectedBlockClientId === clientId;
return (
-
+
);
@@ -104,7 +121,9 @@ function BlockList( {
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index df1a9f1d7e2b6e..c3e39232598e8f 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -11,7 +11,10 @@ import { Component } from '@wordpress/element';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
import { createBlock } from '@wordpress/blocks';
-import { KeyboardAwareFlatList, ReadableContentView } from '@wordpress/components';
+import {
+ KeyboardAwareFlatList,
+ ReadableContentView,
+} from '@wordpress/components';
/**
* Internal dependencies
@@ -30,14 +33,20 @@ export class BlockList extends Component {
this.renderItem = this.renderItem.bind( this );
this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
- this.renderDefaultBlockAppender = this.renderDefaultBlockAppender.bind( this );
- this.onCaretVerticalPositionChange = this.onCaretVerticalPositionChange.bind( this );
+ this.renderDefaultBlockAppender = this.renderDefaultBlockAppender.bind(
+ this
+ );
+ this.onCaretVerticalPositionChange = this.onCaretVerticalPositionChange.bind(
+ this
+ );
this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind( this );
this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind(
this
);
- this.shouldShowInnerBlockAppender = this.shouldShowInnerBlockAppender.bind( this );
+ this.shouldShowInnerBlockAppender = this.shouldShowInnerBlockAppender.bind(
+ this
+ );
}
addBlockToEndOfPost( newBlock ) {
@@ -93,9 +102,14 @@ export class BlockList extends Component {
} = this.props;
return (
-
+
- { shouldShowInsertionPointBefore( clientId ) &&
);
@@ -220,7 +245,9 @@ export default compose( [
};
} ),
withDispatch( ( dispatch ) => {
- const { insertBlock, replaceBlock, clearSelectedBlock } = dispatch( 'core/block-editor' );
+ const { insertBlock, replaceBlock, clearSelectedBlock } = dispatch(
+ 'core/block-editor'
+ );
return {
clearSelectedBlock,
diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js
index 3ff506db3631ec..11ef726060509a 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.js
@@ -43,7 +43,9 @@ function Indicator( { clientId } ) {
return null;
}
- return
;
+ return (
+
+ );
}
export default function InsertionPoint( {
@@ -69,9 +71,11 @@ export default function InsertionPoint( {
const rect = event.target.getBoundingClientRect();
const offset = event.clientY - rect.top;
- const element = Array.from( event.target.children ).find( ( blockEl ) => {
- return blockEl.offsetTop > offset;
- } );
+ const element = Array.from( event.target.children ).find(
+ ( blockEl ) => {
+ return blockEl.offsetTop > offset;
+ }
+ );
if ( ! element ) {
return;
@@ -85,7 +89,10 @@ export default function InsertionPoint( {
const elementRect = element.getBoundingClientRect();
- if ( event.clientX > elementRect.right || event.clientX < elementRect.left ) {
+ if (
+ event.clientX > elementRect.right ||
+ event.clientX < elementRect.left
+ ) {
if ( isInserterShown ) {
setIsInserterShown( false );
}
@@ -149,17 +156,28 @@ export default function InsertionPoint( {
//
// 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,
- } ) }
+ className={ classnames(
+ 'block-editor-block-list__insertion-point-inserter',
+ {
+ // Hide the inserter above the selected block.
+ 'is-inserter-hidden':
+ inserterClientId ===
+ selectedBlockClientId,
+ }
+ ) }
>
) }
-
+
{ children }
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 8c538277725753..6af4ba78ea6348 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';
@@ -52,9 +57,16 @@ function useMovingAnimation(
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( () => {
@@ -76,7 +88,8 @@ function useMovingAnimation(
// 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;
@@ -112,7 +125,12 @@ function useMovingAnimation(
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;
}
},
@@ -123,11 +141,17 @@ function useMovingAnimation(
? {}
: {
transformOrigin: 'center',
- transform: interpolate( [ animationProps.x, animationProps.y ], ( x, y ) =>
- x === 0 && y === 0 ? undefined : `translate3d(${ x }px,${ y }px,0)`
+ 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`
+ zIndex: interpolate(
+ [ animationProps.x, animationProps.y ],
+ ( x, y ) =>
+ ! isSelected || ( x === 0 && y === 0 ) ? undefined : `1`
),
};
}
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 a1878c28df2419..ae1d897660af7b 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
@@ -4,7 +4,12 @@
import { SVG, Path } from '@wordpress/components';
const NavigateUp = (
-
+
-
{ children }
+
+
+ { children }
+
diff --git a/packages/block-editor/src/components/block-list/use-multi-selection.js b/packages/block-editor/src/components/block-list/use-multi-selection.js
index 001a7e28af84f8..1e77f8711a51de 100644
--- a/packages/block-editor/src/components/block-list/use-multi-selection.js
+++ b/packages/block-editor/src/components/block-list/use-multi-selection.js
@@ -56,13 +56,15 @@ function selector( select ) {
}
function toggleRichText( container, toggle ) {
- Array.from( container.querySelectorAll( '.rich-text' ) ).forEach( ( node ) => {
- if ( toggle ) {
- node.setAttribute( 'contenteditable', true );
- } else {
- node.removeAttribute( 'contenteditable' );
+ Array.from( container.querySelectorAll( '.rich-text' ) ).forEach(
+ ( node ) => {
+ if ( toggle ) {
+ node.setAttribute( 'contenteditable', true );
+ } else {
+ node.removeAttribute( 'contenteditable' );
+ }
}
- } );
+ );
}
export default function useMultiSelection( ref ) {
@@ -74,9 +76,12 @@ export default function useMultiSelection( ref ) {
getBlockParents,
selectedBlockClientId,
} = useSelect( selector, [] );
- const { startMultiSelect, stopMultiSelect, multiSelect, selectBlock } = useDispatch(
- 'core/block-editor'
- );
+ const {
+ startMultiSelect,
+ stopMultiSelect,
+ multiSelect,
+ selectBlock,
+ } = useDispatch( 'core/block-editor' );
const rafId = useRef();
const startClientId = useRef();
const anchorElement = useRef();
@@ -95,9 +100,14 @@ export default function useMultiSelection( ref ) {
if ( selection.rangeCount && ! selection.isCollapsed ) {
const blockNode = getBlockDOMNode( selectedBlockClientId );
- const { startContainer, endContainer } = selection.getRangeAt( 0 );
-
- if ( ! blockNode.contains( startContainer ) || ! blockNode.contains( endContainer ) ) {
+ const { startContainer, endContainer } = selection.getRangeAt(
+ 0
+ );
+
+ if (
+ ! blockNode.contains( startContainer ) ||
+ ! blockNode.contains( endContainer )
+ ) {
selection.removeAllRanges();
}
}
@@ -165,15 +175,24 @@ export default function useMultiSelection( ref ) {
toggleRichText( ref.current, true );
if ( selection.rangeCount ) {
- const { commonAncestorContainer } = selection.getRangeAt( 0 );
-
- if ( anchorElement.current.contains( commonAncestorContainer ) ) {
+ const {
+ commonAncestorContainer,
+ } = selection.getRangeAt( 0 );
+
+ if (
+ anchorElement.current.contains(
+ commonAncestorContainer
+ )
+ ) {
anchorElement.current.focus();
}
}
}
} else {
- const startPath = [ ...getBlockParents( startClientId.current ), startClientId.current ];
+ const startPath = [
+ ...getBlockParents( startClientId.current ),
+ startClientId.current,
+ ];
const endPath = [ ...getBlockParents( clientId ), clientId ];
const depth = Math.min( startPath.length, endPath.length ) - 1;
@@ -201,7 +220,10 @@ export default function useMultiSelection( ref ) {
// Only clean up when unmounting, these are added and cleaned up elsewhere.
useEffect(
() => () => {
- document.removeEventListener( 'selectionchange', onSelectionChange );
+ document.removeEventListener(
+ 'selectionchange',
+ onSelectionChange
+ );
window.removeEventListener( 'mouseup', onSelectionEnd );
window.cancelAnimationFrame( rafId.current );
},
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.js b/packages/block-editor/src/components/block-mobile-toolbar/index.js
index 689e455d833885..968b645ce72f3f 100644
--- a/packages/block-editor/src/components/block-mobile-toolbar/index.js
+++ b/packages/block-editor/src/components/block-mobile-toolbar/index.js
@@ -16,7 +16,10 @@ function BlockMobileToolbar( { clientId, moverDirection } ) {
return (
-
);
}
diff --git a/packages/block-editor/src/components/block-mover/icons.js b/packages/block-editor/src/components/block-mover/icons.js
index a55400d965e025..1ebd7922cd4b44 100644
--- a/packages/block-editor/src/components/block-mover/icons.js
+++ b/packages/block-editor/src/components/block-mover/icons.js
@@ -4,19 +4,34 @@
import { Path, SVG } from '@wordpress/components';
export const leftArrow = (
-
+
);
export const rightArrow = (
-
+
);
export const dragHandle = (
-
+
+
);
function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) {
- useShortcut( 'core/edit-post/toggle-block-navigation', useCallback( onToggle, [ onToggle ] ), {
- bindGlobal: true,
- isDisabled: ! isEnabled,
- } );
+ useShortcut(
+ 'core/edit-post/toggle-block-navigation',
+ useCallback( onToggle, [ onToggle ] ),
+ {
+ bindGlobal: true,
+ isDisabled: ! isEnabled,
+ }
+ );
const shortcut = useSelect(
( select ) =>
select( 'core/keyboard-shortcuts' ).getShortcutRepresentation(
@@ -45,16 +54,24 @@ 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 (
(
-
- { __( 'Block navigation' ) }
+
+
+ { __( 'Block navigation' ) }
+
{ hasHierarchy && (
{
- const { getSelectedBlockClientId, getBlockHierarchyRootClientId, getBlock, getBlocks } = select(
- 'core/block-editor'
- );
+ const {
+ getSelectedBlockClientId,
+ getBlockHierarchyRootClientId,
+ getBlock,
+ getBlocks,
+ } = select( 'core/block-editor' );
const selectedBlockClientId = getSelectedBlockClientId();
return {
rootBlocks: getBlocks(),
rootBlock: selectedBlockClientId
- ? getBlock( getBlockHierarchyRootClientId( selectedBlockClientId ) )
+ ? getBlock(
+ getBlockHierarchyRootClientId( selectedBlockClientId )
+ )
: null,
selectedBlockClientId,
};
diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js
index 53b91d79dc284b..32c8eba5049e89 100644
--- a/packages/block-editor/src/components/block-navigation/list.js
+++ b/packages/block-editor/src/components/block-navigation/list.js
@@ -8,7 +8,10 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { Button } from '@wordpress/components';
-import { __experimentalGetBlockLabel as getBlockLabel, getBlockType } from '@wordpress/blocks';
+import {
+ __experimentalGetBlockLabel as getBlockLabel,
+ getBlockType,
+} from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
/**
@@ -44,28 +47,37 @@ export default function BlockNavigationList( {
selectBlock( block.clientId ) }
>
{ __( '(selected block)' ) }
+
+ { __( '(selected block)' ) }
+
) }
- { showNestedBlocks && !! block.innerBlocks && !! block.innerBlocks.length && (
-
);
} ) }
diff --git a/packages/block-editor/src/components/block-pattern-picker/index.js b/packages/block-editor/src/components/block-pattern-picker/index.js
index 7a967afef4e663..160bc280a06667 100644
--- a/packages/block-editor/src/components/block-pattern-picker/index.js
+++ b/packages/block-editor/src/components/block-pattern-picker/index.js
@@ -22,13 +22,21 @@ function BlockPatternPicker( {
} );
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 */ }
-
+
{ patterns.map( ( pattern ) => (
scaledElementRect.height * scale
- ? ( containerElementRect.height - scaledElementRect.height * scale ) / 2 + padding
+ containerElementRect.height >
+ scaledElementRect.height * scale
+ ? ( containerElementRect.height -
+ scaledElementRect.height * scale ) /
+ 2 +
+ padding
: 0;
setPreviewScale( scale );
@@ -94,21 +110,35 @@ 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 (
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 ee63d16c1bf8b1..69f49a37b4dcee 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 ) {
@@ -30,7 +32,11 @@ class BlockSelectionClearer extends Component {
* @param {FocusEvent} event Focus event.
*/
clearSelectionIfFocusTarget( event ) {
- const { hasSelectedBlock, hasMultiSelection, clearSelectedBlock } = this.props;
+ const {
+ hasSelectedBlock,
+ hasMultiSelection,
+ clearSelectedBlock,
+ } = this.props;
const hasSelection = hasSelectedBlock || hasMultiSelection;
if ( event.target === this.container && hasSelection ) {
@@ -44,7 +50,11 @@ class BlockSelectionClearer extends Component {
tabIndex={ -1 }
onFocus={ this.clearSelectionIfFocusTarget }
ref={ this.bindContainer }
- { ...omit( this.props, [ 'clearSelectedBlock', 'hasSelectedBlock', 'hasMultiSelection' ] ) }
+ { ...omit( this.props, [
+ 'clearSelectedBlock',
+ 'hasSelectedBlock',
+ 'hasMultiSelection',
+ ] ) }
/>
);
}
@@ -52,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-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
index 51904e3c23c607..acf1f37830e135 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
@@ -19,11 +19,15 @@ export function BlockModeToggle( {
small = false,
isCodeEditingEnabled = true,
} ) {
- if ( ! hasBlockSupport( blockType, 'html', true ) || ! isCodeEditingEnabled ) {
+ 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 (
@@ -34,7 +38,9 @@ export function BlockModeToggle( {
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-plugins-extension.js b/packages/block-editor/src/components/block-settings-menu/block-settings-menu-plugins-extension.js
index 5e56d396f0b667..7a3058b4c945b5 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,9 +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 44feb32dbbfb2a..7bbce60bf6dfe4 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,7 +20,8 @@ export default compose(
return {
block,
- shouldRender: block && block.name === getFreeformContentHandlerName(),
+ shouldRender:
+ block && block.name === getFreeformContentHandlerName(),
};
} ),
withDispatch( ( dispatch, { block } ) => ( {
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 512e5fe60383b3..8bd25660890eb4 100644
--- a/packages/block-editor/src/components/block-settings-menu/index.js
+++ b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -7,7 +7,12 @@ import { castArray, flow } from 'lodash';
* WordPress dependencies
*/
import { __, _n } from '@wordpress/i18n';
-import { Toolbar, DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import {
+ Toolbar,
+ DropdownMenu,
+ MenuGroup,
+ MenuItem,
+} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { trash } from '@wordpress/icons';
@@ -32,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'
+ ),
};
}, [] );
@@ -62,12 +75,25 @@ export function BlockSettingsMenu( { clientIds } ) {
{ ( { onClose } ) => (
<>
- <__experimentalBlockSettingsMenuFirstItem.Slot fillProps={ { onClose } } />
- { count === 1 &&
@@ -77,23 +103,36 @@ export function BlockSettingsMenu( { clientIds } ) {
{ canInsertDefaultBlock && (
<>
{ __( 'Insert Before' ) }
{ __( 'Insert After' ) }
) }
{ count === 1 && (
-
{ ! isLocked && (
- { _n( 'Remove Block', 'Remove Blocks', count ) }
+ { _n(
+ 'Remove Block',
+ 'Remove Blocks',
+ count
+ ) }
) }
diff --git a/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
index f789f7c4066f78..d8bfef8771b878 100644
--- a/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
+++ b/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
@@ -25,7 +25,10 @@ describe( 'BlockModeToggle', () => {
it( 'should render the HTML mode button', () => {
const wrapper = getShallowRenderOutput(
-
{ 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,10 +145,16 @@ function BlockStyles( {
blocks={
type.example
? getBlockFromExample( block.name, {
- attributes: { ...type.example.attributes, className: styleClassName },
- innerBlocks: type.example.innerBlocks,
+ attributes: {
+ ...type.example.attributes,
+ className: styleClassName,
+ },
+ innerBlocks:
+ type.example.innerBlocks,
+ } )
+ : cloneBlock( block, {
+ className: styleClassName,
} )
- : cloneBlock( block, { className: styleClassName } )
}
/>
@@ -159,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 b2e26781d6becd..6b73864d08c94d 100644
--- a/packages/block-editor/src/components/block-styles/test/index.js
+++ b/packages/block-editor/src/components/block-styles/test/index.js
@@ -49,7 +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)', () => {
@@ -57,7 +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', () => {
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 2c219b1b400d25..421c26ebe09b59 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -7,7 +7,14 @@ 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 {
+ Dropdown,
+ Button,
+ Toolbar,
+ PanelBody,
+ Path,
+ SVG,
+} from '@wordpress/components';
import {
getBlockType,
getPossibleBlockTransformations,
@@ -42,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 ) {
@@ -50,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(
@@ -64,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 ) {
@@ -105,7 +120,11 @@ export class BlockSwitcher extends Component {
1 === blocks.length
? __( 'Change block type or style' )
: sprintf(
- _n( 'Change type of %d block', 'Change type of %d blocks', blocks.length ),
+ _n(
+ 'Change type of %d block',
+ 'Change type of %d blocks',
+ blocks.length
+ ),
blocks.length
);
@@ -137,25 +156,39 @@ export class BlockSwitcher extends Component {
} }
renderContent={ ( { onClose } ) => (
<>
- { ( hasBlockStyles || possibleBlockTransformations.length !== 0 ) && (
+ { ( hasBlockStyles ||
+ possibleBlockTransformations.length !== 0 ) && (
{ hasBlockStyles && (
-
+
) }
{ 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();
@@ -174,14 +207,24 @@ export class BlockSwitcher extends Component {
viewportWidth={ 500 }
blocks={
hoveredBlockType.example
- ? getBlockFromExample( hoveredBlock.name, {
- attributes: {
- ...hoveredBlockType.example.attributes,
- className: hoveredClassName,
- },
- innerBlocks: hoveredBlockType.example.innerBlocks,
+ ? getBlockFromExample(
+ hoveredBlock.name,
+ {
+ attributes: {
+ ...hoveredBlockType
+ .example
+ .attributes,
+ className: hoveredClassName,
+ },
+ innerBlocks:
+ hoveredBlockType
+ .example
+ .innerBlocks,
+ }
+ )
+ : cloneBlock( hoveredBlock, {
+ className: hoveredClassName,
} )
- : cloneBlock( hoveredBlock, { className: hoveredClassName } )
}
/>
{ hasMovers && (
-
+
) }
@@ -63,13 +75,22 @@ export default function BlockToolbar() {
return (
{ 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 e1f8ff19490895..1819c5b2e5ba1a 100644
--- a/packages/block-editor/src/components/block-toolbar/index.native.js
+++ b/packages/block-editor/src/components/block-toolbar/index.native.js
@@ -12,15 +12,23 @@ import UngroupButton from '../ungroup-button';
export default function BlockToolbar() {
const { blockClientIds, isValid, mode } = useSelect( ( select ) => {
- const { getBlockMode, getSelectedBlockClientIds, isBlockValid } = select( 'core/block-editor' );
+ const {
+ getBlockMode,
+ getSelectedBlockClientIds,
+ isBlockValid,
+ } = select( 'core/block-editor' );
const selectedBlockClientIds = getSelectedBlockClientIds();
return {
blockClientIds: selectedBlockClientIds,
isValid:
- selectedBlockClientIds.length === 1 ? isBlockValid( selectedBlockClientIds[ 0 ] ) : null,
+ selectedBlockClientIds.length === 1
+ ? isBlockValid( selectedBlockClientIds[ 0 ] )
+ : null,
mode:
- selectedBlockClientIds.length === 1 ? getBlockMode( selectedBlockClientIds[ 0 ] ) : null,
+ 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 ee17ab5219904c..edcac5011ba794 100644
--- a/packages/block-editor/src/components/block-types-list/index.js
+++ b/packages/block-editor/src/components/block-types-list/index.js
@@ -8,10 +8,17 @@ 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 { patterns = [] } = item;
- const hasDefaultPattern = patterns.some( ( { isDefault } ) => isDefault );
+ const hasDefaultPattern = patterns.some(
+ ( { isDefault } ) => isDefault
+ );
// If there is no default inserter pattern provided,
// then default block type is displayed.
@@ -29,7 +36,9 @@ function BlockTypesList( { items = [], onSelect, onHover = () => {}, children }
title: pattern.title || item.title,
description: pattern.description || item.description,
// If `example` is explicitly undefined for the pattern, the preview will not be shown.
- example: pattern.hasOwnProperty( 'example' ) ? pattern.example : item.example,
+ example: pattern.hasOwnProperty( 'example' )
+ ? pattern.example
+ : item.example,
initialAttributes: {
...item.initialAttributes,
...pattern.attributes,
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 f71194c254d898..1404e63a332050 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,21 +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 a0b36cdbf32ccf..ee48eae9ee5ede 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,11 +16,17 @@ 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'
+ ),
},
};
@@ -38,13 +44,21 @@ export function BlockVerticalAlignmentToolbar( {
}
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 ],
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 aadcfd991d1e39..60a84fbe872c6e 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
@@ -13,7 +13,10 @@ describe( 'BlockVerticalAlignmentToolbar', () => {
const onChange = jest.fn();
const wrapper = shallow(
- {
+ renderToggle={ ( {
+ 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' );
+ label = _x(
+ 'Add block',
+ 'Generic label for block inserter button'
+ );
}
const isToggleButton = ! hasSingleBlockType;
return (
- { label }
+
+ { label }
+
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 290d3192ae70d5..070993d3d9848f 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,10 +15,17 @@ import { Button, Dashicon } from '@wordpress/components';
import Inserter from '../inserter';
import styles from './styles.scss';
-function ButtonBlockAppender( { rootClientId, getStylesFromColorScheme, showSeparator } ) {
+function ButtonBlockAppender( {
+ rootClientId,
+ getStylesFromColorScheme,
+ showSeparator,
+} ) {
const appenderStyle = {
...styles.appender,
- ...getStylesFromColorScheme( styles.appenderLight, styles.appenderDark ),
+ ...getStylesFromColorScheme(
+ styles.appenderLight,
+ styles.appenderDark
+ ),
};
const addBlockButtonStyle = getStylesFromColorScheme(
styles.addBlockButton,
diff --git a/packages/block-editor/src/components/caption/index.native.js b/packages/block-editor/src/components/caption/index.native.js
index 75be2714dc00d7..4669f1b8a4c3e8 100644
--- a/packages/block-editor/src/components/caption/index.native.js
+++ b/packages/block-editor/src/components/caption/index.native.js
@@ -25,7 +25,9 @@ const Caption = ( {
} ) => (
{
const settings = select( 'core/block-editor' ).getSettings();
- const colors = ownProps.colors === undefined ? settings.colors : ownProps.colors;
+ const colors =
+ ownProps.colors === undefined ? settings.colors : ownProps.colors;
const disableCustomColors =
ownProps.disableCustomColors === undefined
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index a46f244b33a33f..e91250ca77f2d0 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -38,7 +38,14 @@ const colorsAndGradientKeys = [
'disableCustomGradients',
];
-function VisualLabel( { colors, gradients, label, currentTab, colorValue, gradientValue } ) {
+function VisualLabel( {
+ colors,
+ gradients,
+ label,
+ currentTab,
+ colorValue,
+ gradientValue,
+} ) {
let value, ariaLabel;
if ( currentTab === 'color' ) {
if ( colorValue ) {
@@ -49,15 +56,23 @@ function VisualLabel( { colors, gradients, label, currentTab, colorValue, gradie
}
} else if ( currentTab === 'gradient' && gradientValue ) {
value = gradientValue;
- const gradientObject = __experimentalGetGradientObjectByGradientValue( gradients, value );
+ const gradientObject = __experimentalGetGradientObjectByGradientValue(
+ gradients,
+ value
+ );
const gradientName = gradientObject && gradientObject.name;
- ariaLabel = sprintf( gradientIndicatorAriaLabel, gradientName || value );
+ ariaLabel = sprintf(
+ gradientIndicatorAriaLabel,
+ gradientName || value
+ );
}
return (
<>
{ label }
- { !! value &&
+
@@ -155,11 +177,17 @@ function ColorGradientControlSelect( props ) {
const settings = select( 'core/block-editor' ).getSettings();
return pick( settings, colorsAndGradientKeys );
} );
- return
{ title }
-
);
return (
@@ -133,11 +151,17 @@ const PanelColorGradientSettingsSelect = ( props ) => {
const settings = select( 'core/block-editor' ).getSettings();
return pick( settings, colorsAndGradientKeys );
} );
- return
);
+ const EnhancedComponent = withCustomColors( 'backgroundColor' )( () => (
+
+ ) );
- const wrapper = shallow( props.setBackgroundColor( 'ff0000' ) }>Test Me
+ const EnhancedComponent = withCustomColors(
+ 'backgroundColor'
+ )( ( props ) => (
+ props.setBackgroundColor( 'ff0000' ) }>
+ Test Me
+
) );
const setAttributes = jest.fn();
const wrapper = mount(
- props.setBackgroundColor( '000000' ) }>Test Me
+ const EnhancedComponent = withCustomColors(
+ 'backgroundColor'
+ )( ( props ) => (
+ props.setBackgroundColor( '000000' ) }>
+ Test Me
+
) );
const setAttributes = jest.fn();
const wrapper = mount(
-
);
}
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();
@@ -83,7 +95,9 @@ export default compose(
};
} ),
withDispatch( ( dispatch, ownProps ) => {
- const { insertDefaultBlock, startTyping } = dispatch( 'core/block-editor' );
+ const { insertDefaultBlock, startTyping } = dispatch(
+ 'core/block-editor'
+ );
return {
onAppend() {
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 7f6390d1fa2aad..726c060241d63e 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
@@ -30,11 +30,16 @@ export function DefaultBlockAppender( {
}
const value =
- typeof placeholder === 'string' ? decodeEntities( placeholder ) : __( 'Start writingโฆ' );
+ typeof placeholder === 'string'
+ ? decodeEntities( placeholder )
+ : __( 'Start writingโฆ' );
return (
-
+
{} } />
@@ -43,12 +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 {
@@ -57,7 +67,9 @@ export default compose(
};
} ),
withDispatch( ( dispatch, ownProps ) => {
- const { insertDefaultBlock, startTyping } = dispatch( 'core/block-editor' );
+ const { insertDefaultBlock, startTyping } = dispatch(
+ 'core/block-editor'
+ );
return {
onAppend() {
diff --git a/packages/block-editor/src/components/default-block-appender/test/index.js b/packages/block-editor/src/components/default-block-appender/test/index.js
index 4035827b2d2d13..407adb838f9aae 100644
--- a/packages/block-editor/src/components/default-block-appender/test/index.js
+++ b/packages/block-editor/src/components/default-block-appender/test/index.js
@@ -22,14 +22,18 @@ describe( 'DefaultBlockAppender', () => {
it( 'should match snapshot', () => {
const onAppend = jest.fn();
- const wrapper = shallow(
);
+ const wrapper = shallow(
+
+ );
expect( wrapper ).toMatchSnapshot();
} );
it( 'should append a default block when input focused', () => {
const onAppend = jest.fn();
- const wrapper = shallow(
);
+ const wrapper = shallow(
+
+ );
wrapper.find( 'TextareaAutosize' ).simulate( 'focus' );
@@ -41,7 +45,11 @@ describe( 'DefaultBlockAppender', () => {
it( 'should optionally show without prompt', () => {
const onAppend = jest.fn();
const wrapper = shallow(
-
+
);
const input = wrapper.find( 'TextareaAutosize' );
diff --git a/packages/block-editor/src/components/default-style-picker/index.js b/packages/block-editor/src/components/default-style-picker/index.js
index 011e2061b6112c..5880d8bd5850b3 100644
--- a/packages/block-editor/src/components/default-style-picker/index.js
+++ b/packages/block-editor/src/components/default-style-picker/index.js
@@ -12,13 +12,25 @@ import { SelectControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
export default function DefaultStylePicker( { blockName } ) {
- const { preferredStyle, onUpdatePreferredStyleVariations, styles } = useSelect(
+ const {
+ preferredStyle,
+ onUpdatePreferredStyleVariations,
+ styles,
+ } = useSelect(
( select ) => {
const settings = select( 'core/block-editor' ).getSettings();
- const preferredStyleVariations = settings.__experimentalPreferredStyleVariations;
+ const preferredStyleVariations =
+ settings.__experimentalPreferredStyleVariations;
return {
- preferredStyle: get( preferredStyleVariations, [ 'value', blockName ] ),
- onUpdatePreferredStyleVariations: get( preferredStyleVariations, [ 'onChange' ], null ),
+ preferredStyle: get( preferredStyleVariations, [
+ 'value',
+ blockName,
+ ] ),
+ onUpdatePreferredStyleVariations: get(
+ preferredStyleVariations,
+ [ 'onChange' ],
+ null
+ ),
styles: select( 'core/blocks' ).getBlockStyles( blockName ),
};
},
diff --git a/packages/block-editor/src/components/font-sizes/font-size-picker.js b/packages/block-editor/src/components/font-sizes/font-size-picker.js
index 57bf783fd6bef8..9200924ad22be8 100644
--- a/packages/block-editor/src/components/font-sizes/font-size-picker.js
+++ b/packages/block-editor/src/components/font-sizes/font-size-picker.js
@@ -5,7 +5,9 @@ import { FontSizePicker } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
export default withSelect( ( select ) => {
- const { disableCustomFontSizes, fontSizes } = select( 'core/block-editor' ).getSettings();
+ const { disableCustomFontSizes, fontSizes } = select(
+ 'core/block-editor'
+ ).getSettings();
return {
disableCustomFontSizes,
diff --git a/packages/block-editor/src/components/font-sizes/utils.js b/packages/block-editor/src/components/font-sizes/utils.js
index 09de76dcf7f6aa..17f3cfe680dc75 100644
--- a/packages/block-editor/src/components/font-sizes/utils.js
+++ b/packages/block-editor/src/components/font-sizes/utils.js
@@ -14,7 +14,11 @@ import { find, kebabCase } from 'lodash';
* @return {?string} If fontSizeAttribute is set and an equal slug is found in fontSizes it returns the font size object for that slug.
* Otherwise, an object with just the size value based on customFontSize is returned.
*/
-export const getFontSize = ( fontSizes, fontSizeAttribute, customFontSizeAttribute ) => {
+export const getFontSize = (
+ fontSizes,
+ fontSizeAttribute,
+ customFontSizeAttribute
+) => {
if ( fontSizeAttribute ) {
const fontSizeObject = find( fontSizes, { slug: fontSizeAttribute } );
if ( fontSizeObject ) {
diff --git a/packages/block-editor/src/components/font-sizes/with-font-sizes.js b/packages/block-editor/src/components/font-sizes/with-font-sizes.js
index c89b31214f544b..4476484d30a3d6 100644
--- a/packages/block-editor/src/components/font-sizes/with-font-sizes.js
+++ b/packages/block-editor/src/components/font-sizes/with-font-sizes.js
@@ -34,9 +34,9 @@ export default ( ...fontSizeNames ) => {
const fontSizeAttributeNames = reduce(
fontSizeNames,
( fontSizeAttributeNamesAccumulator, fontSizeAttributeName ) => {
- fontSizeAttributeNamesAccumulator[ fontSizeAttributeName ] = `custom${ upperFirst(
+ fontSizeAttributeNamesAccumulator[
fontSizeAttributeName
- ) }`;
+ ] = `custom${ upperFirst( fontSizeAttributeName ) }`;
return fontSizeAttributeNamesAccumulator;
},
{}
@@ -45,7 +45,9 @@ export default ( ...fontSizeNames ) => {
return createHigherOrderComponent(
compose( [
withSelect( ( select ) => {
- const { fontSizes } = select( 'core/block-editor' ).getSettings();
+ const { fontSizes } = select(
+ 'core/block-editor'
+ ).getSettings();
return {
fontSizes,
};
@@ -63,44 +65,68 @@ export default ( ...fontSizeNames ) => {
createSetters() {
return reduce(
fontSizeAttributeNames,
- ( settersAccumulator, customFontSizeAttributeName, fontSizeAttributeName ) => {
- const upperFirstFontSizeAttributeName = upperFirst( fontSizeAttributeName );
+ (
+ settersAccumulator,
+ customFontSizeAttributeName,
+ fontSizeAttributeName
+ ) => {
+ const upperFirstFontSizeAttributeName = upperFirst(
+ fontSizeAttributeName
+ );
settersAccumulator[
`set${ upperFirstFontSizeAttributeName }`
- ] = this.createSetFontSize( fontSizeAttributeName, customFontSizeAttributeName );
+ ] = this.createSetFontSize(
+ fontSizeAttributeName,
+ customFontSizeAttributeName
+ );
return settersAccumulator;
},
{}
);
}
- createSetFontSize( fontSizeAttributeName, customFontSizeAttributeName ) {
+ createSetFontSize(
+ fontSizeAttributeName,
+ customFontSizeAttributeName
+ ) {
return ( fontSizeValue ) => {
const fontSizeObject = find( this.props.fontSizes, {
size: Number( fontSizeValue ),
} );
this.props.setAttributes( {
[ fontSizeAttributeName ]:
- fontSizeObject && fontSizeObject.slug ? fontSizeObject.slug : undefined,
+ fontSizeObject && fontSizeObject.slug
+ ? fontSizeObject.slug
+ : undefined,
[ customFontSizeAttributeName ]:
- fontSizeObject && fontSizeObject.slug ? undefined : fontSizeValue,
+ fontSizeObject && fontSizeObject.slug
+ ? undefined
+ : fontSizeValue,
} );
};
}
- static getDerivedStateFromProps( { attributes, fontSizes }, previousState ) {
- const didAttributesChange = ( customFontSizeAttributeName, fontSizeAttributeName ) => {
+ static getDerivedStateFromProps(
+ { attributes, fontSizes },
+ previousState
+ ) {
+ const didAttributesChange = (
+ customFontSizeAttributeName,
+ fontSizeAttributeName
+ ) => {
if ( previousState[ fontSizeAttributeName ] ) {
// if new font size is name compare with the previous slug
if ( attributes[ fontSizeAttributeName ] ) {
return (
attributes[ fontSizeAttributeName ] !==
- previousState[ fontSizeAttributeName ].slug
+ previousState[ fontSizeAttributeName ]
+ .slug
);
}
// if font size is not named, update when the font size value changes.
return (
- previousState[ fontSizeAttributeName ].size !==
+ previousState[ fontSizeAttributeName ]
+ .size !==
attributes[ customFontSizeAttributeName ]
);
}
@@ -108,14 +134,27 @@ export default ( ...fontSizeNames ) => {
return true;
};
- if ( ! some( fontSizeAttributeNames, didAttributesChange ) ) {
+ if (
+ ! some(
+ fontSizeAttributeNames,
+ didAttributesChange
+ )
+ ) {
return null;
}
const newState = reduce(
- pickBy( fontSizeAttributeNames, didAttributesChange ),
- ( newStateAccumulator, customFontSizeAttributeName, fontSizeAttributeName ) => {
- const fontSizeAttributeValue = attributes[ fontSizeAttributeName ];
+ pickBy(
+ fontSizeAttributeNames,
+ didAttributesChange
+ ),
+ (
+ newStateAccumulator,
+ customFontSizeAttributeName,
+ fontSizeAttributeName
+ ) => {
+ const fontSizeAttributeValue =
+ attributes[ fontSizeAttributeName ];
const fontSizeObject = getFontSize(
fontSizes,
fontSizeAttributeValue,
@@ -123,7 +162,9 @@ export default ( ...fontSizeNames ) => {
);
newStateAccumulator[ fontSizeAttributeName ] = {
...fontSizeObject,
- class: getFontSizeClass( fontSizeAttributeValue ),
+ class: getFontSizeClass(
+ fontSizeAttributeValue
+ ),
};
return newStateAccumulator;
},
diff --git a/packages/block-editor/src/components/gradient-picker/control.js b/packages/block-editor/src/components/gradient-picker/control.js
index 843d0d98d20e35..f57802aada39b1 100644
--- a/packages/block-editor/src/components/gradient-picker/control.js
+++ b/packages/block-editor/src/components/gradient-picker/control.js
@@ -35,7 +35,12 @@ export default function( {
return null;
}
return (
-
+
{ label }
-
{ __( 'Image Dimensions' ) }
+
+ { __( 'Image Dimensions' ) }
+
onChange( { width: parseInt( value, 10 ) } ) }
+ onChange={ ( value ) =>
+ onChange( { width: parseInt( value, 10 ) } )
+ }
/>
onChange( { height: parseInt( value, 10 ) } ) }
+ onChange={ ( value ) =>
+ 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 scaledWidth = Math.round(
+ imageWidth * ( scale / 100 )
+ );
+ const scaledHeight = Math.round(
+ imageHeight * ( scale / 100 )
+ );
- const isCurrent = width === scaledWidth && height === scaledHeight;
+ const isCurrent =
+ width === scaledWidth &&
+ height === scaledHeight;
return (
{ scale }%
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index 59c30699c588f1..0227ceabcc6470 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/packages/block-editor/src/components/index.native.js
@@ -18,7 +18,11 @@ export {
__unstableRichTextInputEvent,
} from './rich-text';
export { default as MediaPlaceholder } from './media-placeholder';
-export { default as MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from './media-upload';
+export {
+ default as MediaUpload,
+ MEDIA_TYPE_IMAGE,
+ MEDIA_TYPE_VIDEO,
+} from './media-upload';
export { default as MediaUploadProgress } from './media-upload-progress';
export { default as MediaEdit } from './media-edit';
export { default as URLInput } from './url-input';
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 8a61844b67d8ff..5823a5e42c7b0c 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
@@ -5,7 +5,12 @@ import BaseButtonBlockAppender from '../button-block-appender';
import withClientId from './with-client-id';
export const ButtonBlockAppender = ( { clientId, showSeparator } ) => {
- return
- { ! templateInProcess &&
);
}
@@ -191,14 +204,20 @@ InnerBlocks = compose( [
__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 && blocks.length !== 0
+ block.innerBlocks.length === 0 &&
+ templateInsertUpdatesSelection &&
+ blocks.length !== 0
);
},
__unstableMarkNextChangeAsNotPersistent,
@@ -213,7 +232,9 @@ InnerBlocks = compose( [
InnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
InnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
-InnerBlocks.Content = withBlockContentContext( ( { BlockContent } ) =>
{
event.preventDefault();
onClick();
@@ -32,10 +42,15 @@ function InserterListItem( { icon, onClick, isDisabled, title, className, ...pro
disabled={ isDisabled }
{ ...props }
>
-
+
- { title }
+
+ { title }
+
);
diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
index 1fe3b55f11b815..dcef449c56e810 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -19,11 +19,20 @@ import { plusCircle } from '@wordpress/icons';
*/
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' );
}
@@ -77,7 +86,13 @@ class Inserter extends Component {
renderToggle = defaultRenderToggle,
} = this.props;
- return renderToggle( { onToggle, isOpen, disabled, blockTitle, hasSingleBlockType } );
+ return renderToggle( {
+ onToggle,
+ isOpen,
+ disabled,
+ blockTitle,
+ hasSingleBlockType,
+ } );
}
/**
@@ -111,7 +126,11 @@ class Inserter extends Component {
}
render() {
- const { position, hasSingleBlockType, insertOnlyAllowedBlock } = this.props;
+ const {
+ position,
+ hasSingleBlockType,
+ insertOnlyAllowedBlock,
+ } = this.props;
if ( hasSingleBlockType ) {
return this.renderToggle( { onToggle: insertOnlyAllowedBlock } );
@@ -134,18 +153,24 @@ class Inserter extends Component {
export default compose( [
withSelect( ( select, { clientId, rootClientId } ) => {
- const { getBlockRootClientId, hasInserterItems, __experimentalGetAllowedBlocks } = select(
- 'core/block-editor'
+ const {
+ getBlockRootClientId,
+ hasInserterItems,
+ __experimentalGetAllowedBlocks,
+ } = select( 'core/block-editor' );
+ const { __experimentalGetBlockPatterns: getBlockPatterns } = select(
+ 'core/blocks'
);
- const { __experimentalGetBlockPatterns: getBlockPatterns } = select( 'core/blocks' );
- rootClientId = rootClientId || getBlockRootClientId( clientId ) || undefined;
+ rootClientId =
+ rootClientId || getBlockRootClientId( clientId ) || undefined;
const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId );
const hasSingleBlockType =
size( allowedBlocks ) === 1 &&
- size( getBlockPatterns( allowedBlocks[ 0 ].name, 'inserter' ) ) === 0;
+ size( getBlockPatterns( allowedBlocks[ 0 ].name, 'inserter' ) ) ===
+ 0;
let allowedBlockType = false;
if ( hasSingleBlockType ) {
@@ -175,9 +200,11 @@ export default compose( [
}
function getInsertionIndex() {
- const { getBlockIndex, getBlockSelectionEnd, getBlockOrder } = select(
- 'core/block-editor'
- );
+ const {
+ getBlockIndex,
+ getBlockSelectionEnd,
+ getBlockOrder,
+ } = select( 'core/block-editor' );
// If the clientId is defined, we insert at the position of the block.
if ( clientId ) {
@@ -198,11 +225,19 @@ export default compose( [
const blockToInsert = createBlock( allowedBlockType.name );
- insertBlock( blockToInsert, getInsertionIndex(), rootClientId, selectBlockOnInsert );
+ insertBlock(
+ blockToInsert,
+ getInsertionIndex(),
+ rootClientId,
+ selectBlockOnInsert
+ );
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 2c9436237db78e..49530fdd4049d6 100644
--- a/packages/block-editor/src/components/inserter/index.native.js
+++ b/packages/block-editor/src/components/inserter/index.native.js
@@ -2,7 +2,12 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Dropdown, ToolbarButton, Dashicon, Picker } 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';
@@ -18,7 +23,9 @@ import BlockInsertionPoint from '../block-list/insertion-point';
const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
item.name.split( '/' )[ 0 ];
// Copied over from the Columns block. It seems like it should become part of public API.
const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => {
- return map( innerBlocksTemplate, ( [ name, attributes, innerBlocks = [] ] ) =>
- createBlock( name, attributes, createBlocksFromInnerBlocksTemplate( innerBlocks ) )
+ return map(
+ innerBlocksTemplate,
+ ( [ name, attributes, innerBlocks = [] ] ) =>
+ createBlock(
+ name,
+ attributes,
+ createBlocksFromInnerBlocksTemplate( innerBlocks )
+ )
);
};
@@ -116,9 +136,13 @@ export class InserterMenu extends Component {
this.props.setTimeout( () => {
// We need a generic way to access the panel's container
- scrollIntoView( this.panels[ panel ], this.inserterResults.current, {
- alignWithTop: true,
- } );
+ scrollIntoView(
+ this.panels[ panel ],
+ this.inserterResults.current,
+ {
+ alignWithTop: true,
+ }
+ );
} );
}
};
@@ -152,25 +176,46 @@ export class InserterMenu extends Component {
}
filter( filterValue = '' ) {
- const { categories, collections, debouncedSpeak, items, rootChildBlocks } = this.props;
+ const {
+ categories,
+ collections,
+ debouncedSpeak,
+ items,
+ rootChildBlocks,
+ } = this.props;
- const filteredItems = searchItems( items, categories, collections, filterValue );
+ const filteredItems = searchItems(
+ items,
+ categories,
+ collections,
+ filterValue
+ );
- const childItems = filter( filteredItems, ( { name } ) => includes( rootChildBlocks, name ) );
+ const childItems = filter( filteredItems, ( { name } ) =>
+ includes( rootChildBlocks, name )
+ );
let suggestedItems = [];
if ( ! filterValue ) {
- const maxSuggestedItems = this.props.maxSuggestedItems || MAX_SUGGESTED_ITEMS;
- suggestedItems = filter( items, ( item ) => item.utility > 0 ).slice( 0, maxSuggestedItems );
+ const maxSuggestedItems =
+ this.props.maxSuggestedItems || MAX_SUGGESTED_ITEMS;
+ suggestedItems = filter(
+ items,
+ ( item ) => item.utility > 0
+ ).slice( 0, maxSuggestedItems );
}
const reusableItems = filter( filteredItems, { category: 'reusable' } );
const getCategoryIndex = ( item ) => {
- return findIndex( categories, ( category ) => category.slug === item.category );
+ return findIndex(
+ categories,
+ ( category ) => category.slug === item.category
+ );
};
const itemsPerCategory = flow(
- ( itemList ) => filter( itemList, ( item ) => item.category !== 'reusable' ),
+ ( itemList ) =>
+ filter( itemList, ( item ) => item.category !== 'reusable' ),
( itemList ) => sortBy( itemList, getCategoryIndex ),
( itemList ) => groupBy( itemList, 'category' )
)( filteredItems );
@@ -205,7 +250,9 @@ export class InserterMenu extends Component {
const resultCount = Object.keys( itemsPerCategory ).reduce(
( accumulator, currentCategorySlug ) => {
- return accumulator + itemsPerCategory[ currentCategorySlug ].length;
+ return (
+ accumulator + itemsPerCategory[ currentCategorySlug ].length
+ );
},
0
);
@@ -218,7 +265,12 @@ export class InserterMenu extends Component {
}
onKeyDown( event ) {
- if ( includes( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ], event.keyCode ) ) {
+ if (
+ includes(
+ [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ],
+ event.keyCode
+ )
+ ) {
// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
event.stopPropagation();
}
@@ -249,7 +301,9 @@ export class InserterMenu extends Component {
! isEmpty( reusableItems ) ||
! isEmpty( itemsPerCategory ) ||
! isEmpty( itemsPerCollection );
- const hoveredItemBlockType = hoveredItem ? getBlockType( hoveredItem.name ) : null;
+ const hoveredItemBlockType = hoveredItem
+ ? getBlockType( hoveredItem.name )
+ : null;
const hasHelpPanel = hasItems && showInserterHelpPanel;
// Disable reason (no-autofocus): The inserter menu is a modal display, not one which
@@ -312,7 +366,8 @@ export class InserterMenu extends Component {
) }
{ map( categories, ( category ) => {
- const categoryItems = itemsPerCategory[ category.slug ];
+ const categoryItems =
+ itemsPerCategory[ category.slug ];
if ( ! categoryItems || ! categoryItems.length ) {
return null;
}
@@ -322,7 +377,9 @@ 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 ) }
>
{
- const collectionItems = itemsPerCollection[ namespace ];
- if ( ! collectionItems || ! collectionItems.length ) {
+ const collectionItems =
+ itemsPerCollection[ namespace ];
+ if (
+ ! collectionItems ||
+ ! collectionItems.length
+ ) {
return null;
}
@@ -374,7 +435,9 @@ export class InserterMenu extends Component {
/>
{ __( 'Manage all reusable blocks' ) }
@@ -410,23 +473,37 @@ export class InserterMenu extends Component {
{ hoveredItem && (
<>
- { ! isReusableBlock( hoveredItem ) &&
}
+ { ! isReusableBlock( hoveredItem ) && (
+
+ ) }
- { isReusableBlock( hoveredItem ) || hoveredItemBlockType.example ? (
+ { isReusableBlock( hoveredItem ) ||
+ hoveredItemBlockType.example ? (
@@ -455,12 +532,16 @@ export class InserterMenu extends Component {
) }
- { __( 'Browse through the library to learn more about what each block does.' ) }
+ { __(
+ 'Browse through the library to learn more about what each block does.'
+ ) }
{ __experimentalCreateInterpolateElement(
- __( 'While writing, you can press / to quickly insert new blocks.' ),
+ __(
+ 'While writing, you can press / to quickly insert new blocks.'
+ ),
{ kbd:
@@ -475,42 +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, getCollections, 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(),
- collections: getCollections(),
- 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.
@@ -518,7 +614,11 @@ export default compose(
// it's fine to extract it.
// eslint-disable-next-line no-restricted-syntax
function getInsertionIndex() {
- const { getBlockIndex, getBlockSelectionEnd, getBlockOrder } = select( 'core/block-editor' );
+ const {
+ getBlockIndex,
+ getBlockSelectionEnd,
+ getBlockOrder,
+ } = select( 'core/block-editor' );
const { clientId, destinationRootClientId, isAppender } = ownProps;
// If the clientId is defined, we insert at the position of the block.
@@ -543,7 +643,9 @@ export default compose(
},
hideInsertionPoint,
onSelect( item ) {
- const { replaceBlocks, insertBlock } = dispatch( 'core/block-editor' );
+ const { replaceBlocks, insertBlock } = dispatch(
+ 'core/block-editor'
+ );
const { getSelectedBlock } = select( 'core/block-editor' );
const {
isAppender,
@@ -558,7 +660,11 @@ export default compose(
createBlocksFromInnerBlocksTemplate( innerBlocks )
);
- if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) {
+ if (
+ ! isAppender &&
+ selectedBlock &&
+ isUnmodifiedDefaultBlock( selectedBlock )
+ ) {
replaceBlocks( selectedBlock.clientId, insertedBlock );
} else {
insertBlock(
@@ -570,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 df48da04dca2a6..27573aeca96a7a 100644
--- a/packages/block-editor/src/components/inserter/menu.native.js
+++ b/packages/block-editor/src/components/inserter/menu.native.js
@@ -9,7 +9,11 @@ import { FlatList, View, Text, TouchableHighlight } from 'react-native';
import { Component } from '@wordpress/element';
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';
/**
@@ -38,14 +42,18 @@ export class InserterMenu extends Component {
calculateNumberOfColumns() {
const bottomSheetWidth = BottomSheet.getWidth();
- const { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } = styles.modalItem;
+ 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 );
}
@@ -70,7 +78,10 @@ export class InserterMenu extends Component {
styles.modalIconWrapper,
styles.modalIconWrapperDark
);
- const modalIconStyle = getStylesFromColorScheme( styles.modalIcon, styles.modalIconDark );
+ const modalIconStyle = getStylesFromColorScheme(
+ styles.modalIcon,
+ styles.modalIconDark
+ );
const modalItemLabelStyle = getStylesFromColorScheme(
styles.modalItemLabel,
styles.modalItemLabelDark
@@ -90,7 +101,9 @@ export class InserterMenu extends Component {
keyboardShouldPersistTaps="always"
numColumns={ this.state.numberOfColumns }
data={ this.props.items }
- ItemSeparatorComponent={ () =>
}
+ ItemSeparatorComponent={ () => (
+
+ ) }
keyExtractor={ ( item ) => item.name }
renderItem={ ( { item } ) => (
-
{ item.title }
+
+ { item.title }
+
) }
@@ -135,12 +150,17 @@ export default compose(
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();
+ const {
+ __experimentalShouldInsertAtTheTop: shouldInsertAtTheTop,
+ } = getSettings();
return {
rootChildBlocks: getChildBlockNames( destinationRootBlockName ),
@@ -163,7 +183,9 @@ export default compose(
return {
showInsertionPoint() {
if ( ownProps.shouldReplaceBlock ) {
- const { getBlockOrder, getBlockCount } = select( 'core/block-editor' );
+ const { getBlockOrder, getBlockCount } = select(
+ 'core/block-editor'
+ );
const count = getBlockCount();
if ( count === 1 ) {
@@ -172,14 +194,17 @@ export default compose(
clearSelectedBlock();
resetBlocks( [] );
} else {
- const blockToReplace = getBlockOrder( ownProps.destinationRootClientId )[
- ownProps.insertionIndex
- ];
+ const blockToReplace = getBlockOrder(
+ ownProps.destinationRootClientId
+ )[ ownProps.insertionIndex ];
removeBlock( blockToReplace, false );
}
}
- showInsertionPoint( ownProps.destinationRootClientId, ownProps.insertionIndex );
+ showInsertionPoint(
+ ownProps.destinationRootClientId,
+ ownProps.insertionIndex
+ );
},
hideInsertionPoint,
onSelect( item ) {
@@ -187,12 +212,20 @@ export default compose(
const insertedBlock = createBlock( name, initialAttributes );
- insertBlock( insertedBlock, ownProps.insertionIndex, ownProps.destinationRootClientId );
+ insertBlock(
+ insertedBlock,
+ ownProps.insertionIndex,
+ ownProps.destinationRootClientId
+ );
ownProps.onSelect();
},
insertDefaultBlock() {
- insertDefaultBlock( {}, ownProps.destinationRootClientId, ownProps.insertionIndex );
+ insertDefaultBlock(
+ {},
+ ownProps.destinationRootClientId,
+ ownProps.insertionIndex
+ );
},
};
} ),
diff --git a/packages/block-editor/src/components/inserter/search-items.js b/packages/block-editor/src/components/inserter/search-items.js
index 0b3264410011ed..18e5179380421b 100644
--- a/packages/block-editor/src/components/inserter/search-items.js
+++ b/packages/block-editor/src/components/inserter/search-items.js
@@ -1,7 +1,15 @@
/**
* External dependencies
*/
-import { deburr, differenceWith, find, get, intersectionWith, isEmpty, words } from 'lodash';
+import {
+ deburr,
+ differenceWith,
+ find,
+ get,
+ intersectionWith,
+ isEmpty,
+ words,
+} from 'lodash';
/**
* Converts the search term into a list of normalized terms.
@@ -31,7 +39,8 @@ const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
return differenceWith(
unmatchedTerms,
normalizeSearchTerm( unprocessedTerms ),
- ( unmatchedTerm, unprocessedTerm ) => unprocessedTerm.includes( unmatchedTerm )
+ ( unmatchedTerm, unprocessedTerm ) =>
+ unprocessedTerm.includes( unmatchedTerm )
);
};
@@ -53,40 +62,51 @@ export const searchItems = ( items, categories, collections, searchTerm ) => {
}
return items
- .filter( ( { name, title, category, keywords = [], patterns = [] } ) => {
- let unmatchedTerms = removeMatchingTerms( normalizedSearchTerms, title );
+ .filter(
+ ( { name, title, category, keywords = [], patterns = [] } ) => {
+ 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' ] )
+ );
- const itemCollection = collections[ name.split( '/' )[ 0 ] ];
- if ( itemCollection ) {
- unmatchedTerms = removeMatchingTerms( unmatchedTerms, itemCollection.title );
- }
+ const itemCollection = collections[ name.split( '/' )[ 0 ] ];
+ if ( itemCollection ) {
+ unmatchedTerms = removeMatchingTerms(
+ unmatchedTerms,
+ itemCollection.title
+ );
+ }
+
+ if ( unmatchedTerms.length === 0 ) {
+ return true;
+ }
+
+ unmatchedTerms = removeMatchingTerms(
+ unmatchedTerms,
+ patterns.map( ( pattern ) => pattern.title ).join( ' ' )
+ );
- if ( unmatchedTerms.length === 0 ) {
- return true;
+ return unmatchedTerms.length === 0;
}
-
- unmatchedTerms = removeMatchingTerms(
- unmatchedTerms,
- patterns.map( ( pattern ) => pattern.title ).join( ' ' )
- );
-
- return unmatchedTerms.length === 0;
- } )
+ )
.map( ( item ) => {
if ( isEmpty( item.patterns ) ) {
return item;
@@ -97,7 +117,8 @@ export const searchItems = ( items, categories, collections, searchTerm ) => {
intersectionWith(
normalizedSearchTerms,
normalizeSearchTerm( pattern.title ),
- ( termToMatch, labelTerm ) => labelTerm.includes( termToMatch )
+ ( termToMatch, labelTerm ) =>
+ labelTerm.includes( termToMatch )
).length > 0
);
} );
diff --git a/packages/block-editor/src/components/inserter/test/menu.js b/packages/block-editor/src/components/inserter/test/menu.js
index cea1b1e4a64e69..70881f2f30ce3a 100644
--- a/packages/block-editor/src/components/inserter/test/menu.js
+++ b/packages/block-editor/src/components/inserter/test/menu.js
@@ -22,7 +22,9 @@ const DEFAULT_PROPS = {
};
const getWrapperForProps = ( propOverrides ) => {
- return TestUtils.renderIntoDocument(
);
+ return TestUtils.renderIntoDocument(
+
+ );
};
const initializeMenuDefaultStateAndReturnElement = ( propOverrides ) => {
@@ -43,19 +45,23 @@ const initializeAllClosedMenuStateAndReturnElement = ( propOverrides ) => {
};
const assertNoResultsMessageToBePresent = ( element ) => {
- const noResultsMessage = element.querySelector( '.block-editor-inserter__no-results' );
+ const noResultsMessage = element.querySelector(
+ '.block-editor-inserter__no-results'
+ );
expect( noResultsMessage.textContent ).toEqual( 'No blocks found.' );
};
const assertNoResultsMessageNotToBePresent = ( element ) => {
- const noResultsMessage = element.querySelector( '.block-editor-inserter__no-results' );
+ const noResultsMessage = element.querySelector(
+ '.block-editor-inserter__no-results'
+ );
expect( noResultsMessage ).toBe( null );
};
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 ) => {
@@ -70,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', () => {
@@ -84,8 +94,12 @@ describe( 'InserterMenu', () => {
} );
it( 'should show nothing if there are no items', () => {
- const element = initializeMenuDefaultStateAndReturnElement( { items: [] } );
- const visibleBlocks = element.querySelector( '.block-editor-block-types-list__item' );
+ const element = initializeMenuDefaultStateAndReturnElement( {
+ items: [],
+ } );
+ const visibleBlocks = element.querySelector(
+ '.block-editor-block-types-list__item'
+ );
expect( visibleBlocks ).toBe( null );
@@ -94,7 +108,9 @@ describe( 'InserterMenu', () => {
it( 'should show only high utility items in the suggested tab', () => {
const element = initializeMenuDefaultStateAndReturnElement();
- const visibleBlocks = element.querySelectorAll( '.block-editor-block-types-list__item-title' );
+ const visibleBlocks = element.querySelectorAll(
+ '.block-editor-block-types-list__item-title'
+ );
expect( visibleBlocks ).toHaveLength( 3 );
expect( visibleBlocks[ 0 ].textContent ).toEqual( 'Text' );
expect( visibleBlocks[ 1 ].textContent ).toEqual( 'Advanced Text' );
@@ -102,8 +118,12 @@ describe( 'InserterMenu', () => {
} );
it( 'should limit the number of items shown in the suggested tab', () => {
- const element = initializeMenuDefaultStateAndReturnElement( { maxSuggestedItems: 2 } );
- const visibleBlocks = element.querySelectorAll( '.block-editor-block-types-list__list-item' );
+ const element = initializeMenuDefaultStateAndReturnElement( {
+ maxSuggestedItems: 2,
+ } );
+ const visibleBlocks = element.querySelectorAll(
+ '.block-editor-block-types-list__list-item'
+ );
expect( visibleBlocks ).toHaveLength( 2 );
} );
@@ -115,7 +135,9 @@ describe( 'InserterMenu', () => {
assertOpenedPanels( element, 1 );
- const visibleBlocks = element.querySelectorAll( '.block-editor-block-types-list__item-title' );
+ const visibleBlocks = element.querySelectorAll(
+ '.block-editor-block-types-list__item-title'
+ );
expect( visibleBlocks ).toHaveLength( 2 );
expect( visibleBlocks[ 0 ].textContent ).toBe( 'YouTube' );
@@ -132,7 +154,9 @@ describe( 'InserterMenu', () => {
assertOpenedPanels( element, 1 );
- const visibleBlocks = element.querySelectorAll( '.block-editor-block-types-list__item-title' );
+ const visibleBlocks = element.querySelectorAll(
+ '.block-editor-block-types-list__item-title'
+ );
expect( visibleBlocks ).toHaveLength( 1 );
expect( visibleBlocks[ 0 ].textContent ).toBe( 'My reusable block' );
@@ -142,13 +166,18 @@ 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 );
assertOpenedPanels( element, 1 );
- const visibleBlocks = element.querySelectorAll( '.block-editor-block-types-list__item-title' );
+ const visibleBlocks = element.querySelectorAll(
+ '.block-editor-block-types-list__item-title'
+ );
expect( visibleBlocks ).toHaveLength( 3 );
expect( visibleBlocks[ 0 ].textContent ).toBe( 'Text' );
@@ -178,13 +207,17 @@ describe( 'InserterMenu', () => {
assertOpenedPanels( element, 3 );
- const matchingCategories = element.querySelectorAll( '.components-panel__body-toggle' );
+ const matchingCategories = element.querySelectorAll(
+ '.components-panel__body-toggle'
+ );
expect( matchingCategories ).toHaveLength( 3 );
expect( matchingCategories[ 0 ].textContent ).toBe( 'Common blocks' );
expect( matchingCategories[ 1 ].textContent ).toBe( 'Embeds' );
- const visibleBlocks = element.querySelectorAll( '.block-editor-block-types-list__item-title' );
+ const visibleBlocks = element.querySelectorAll(
+ '.block-editor-block-types-list__item-title'
+ );
expect( visibleBlocks ).toHaveLength( 5 );
expect( visibleBlocks[ 0 ].textContent ).toBe( 'Text' );
@@ -200,13 +233,17 @@ describe( 'InserterMenu', () => {
assertOpenedPanels( element, 3 );
- const matchingCategories = element.querySelectorAll( '.components-panel__body-toggle' );
+ const matchingCategories = element.querySelectorAll(
+ '.components-panel__body-toggle'
+ );
expect( matchingCategories ).toHaveLength( 3 );
expect( matchingCategories[ 0 ].textContent ).toBe( 'Common blocks' );
expect( matchingCategories[ 1 ].textContent ).toBe( 'Embeds' );
- const visibleBlocks = element.querySelectorAll( '.block-editor-block-types-list__item-title' );
+ const visibleBlocks = element.querySelectorAll(
+ '.block-editor-block-types-list__item-title'
+ );
expect( visibleBlocks ).toHaveLength( 5 );
expect( visibleBlocks[ 0 ].textContent ).toBe( 'Text' );
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 cbedd580b10a50..e53a524ea90b6b 100644
--- a/packages/block-editor/src/components/inserter/test/search-items.js
+++ b/packages/block-editor/src/components/inserter/test/search-items.js
@@ -30,60 +30,74 @@ describe( 'normalizeSearchTerm', () => {
} );
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, collections, ' - ? * ' ) ).toBe( items );
+ expect( searchItems( items, categories, collections, ' - ? * ' ) ).toBe(
+ items
+ );
} );
it( 'should search items using the title ignoring case', () => {
- expect( searchItems( items, categories, collections, '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, collections, 'GOOGL' ) ).toEqual( [ youtubeItem ] );
+ expect(
+ searchItems( items, categories, collections, 'GOOGL' )
+ ).toEqual( [ youtubeItem ] );
} );
it( 'should search items using the categories', () => {
- expect( searchItems( items, categories, collections, '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, collections, '/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, collections, 'youtube embed video' ) ).toEqual( [
- youtubeItem,
- ] );
+ expect(
+ searchItems( items, categories, collections, 'youtube embed video' )
+ ).toEqual( [ youtubeItem ] );
} );
it( 'should match words using also patterns and return all matched patterns', () => {
- const filteredItems = searchItems( items, categories, collections, 'pattern' );
+ const filteredItems = searchItems(
+ items,
+ categories,
+ collections,
+ 'pattern'
+ );
expect( filteredItems ).toHaveLength( 1 );
expect( filteredItems[ 0 ].patterns ).toHaveLength( 3 );
} );
it( 'should match words using also patterns and filter out unmatched patterns', () => {
- const filteredItems = searchItems( items, categories, collections, 'patterns two three' );
+ const filteredItems = searchItems(
+ items,
+ categories,
+ collections,
+ 'patterns two three'
+ );
expect( filteredItems ).toHaveLength( 1 );
expect( filteredItems[ 0 ].patterns ).toHaveLength( 2 );
expect( filteredItems[ 0 ].patterns[ 0 ].title ).toBe( 'Pattern Two' );
- expect( filteredItems[ 0 ].patterns[ 1 ].title ).toBe( 'Pattern Three' );
+ expect( filteredItems[ 0 ].patterns[ 1 ].title ).toBe(
+ 'Pattern Three'
+ );
} );
} );
diff --git a/packages/block-editor/src/components/keyboard-shortcuts/index.js b/packages/block-editor/src/components/keyboard-shortcuts/index.js
index bd2994402572f8..3259707632cd94 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(),
@@ -101,7 +103,10 @@ function KeyboardShortcuts() {
useCallback(
( event ) => {
event.preventDefault();
- multiSelect( first( rootBlocksClientIds ), last( rootBlocksClientIds ) );
+ multiSelect(
+ first( rootBlocksClientIds ),
+ last( rootBlocksClientIds )
+ );
},
[ rootBlocksClientIds, multiSelect ]
)
@@ -150,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',
@@ -160,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',
@@ -184,7 +193,9 @@ function KeyboardShortcutsRegister() {
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/index.js b/packages/block-editor/src/components/link-control/index.js
index 4128be67048b92..cda7986a9f8c44 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -9,7 +9,13 @@ import { noop, startsWith } from 'lodash';
*/
import { Button, ExternalLink, VisuallyHidden } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
-import { useRef, useCallback, useState, Fragment, useEffect } from '@wordpress/element';
+import {
+ useRef,
+ useCallback,
+ useState,
+ Fragment,
+ useEffect,
+} from '@wordpress/element';
import {
safeDecodeURI,
filterURLForDisplay,
@@ -84,19 +90,30 @@ import LinkControlSearchInput from './search-input';
*
* @param {WPLinkControlProps} props Component props.
*/
-function LinkControl( { value, settings, onChange = noop, showInitialSuggestions } ) {
+function LinkControl( {
+ value,
+ settings,
+ onChange = noop,
+ showInitialSuggestions,
+} ) {
const wrapperNode = useRef();
const instanceId = useInstanceId( LinkControl );
- const [ inputValue, setInputValue ] = useState( ( value && value.url ) || '' );
- const [ isEditingLink, setIsEditingLink ] = useState( ! value || ! value.url );
+ 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,
+ fetchSearchSuggestions: getSettings()
+ .__experimentalFetchLinkSuggestions,
};
}, [] );
- const displayURL = ( value && filterURLForDisplay( safeDecodeURI( value.url ) ) ) || '';
+ const displayURL =
+ ( value && filterURLForDisplay( safeDecodeURI( value.url ) ) ) || '';
useEffect( () => {
// When `isEditingLink` is set to `false`, a focus loss could occur
@@ -115,7 +132,8 @@ function LinkControl( { value, settings, onChange = noop, showInitialSuggestions
// 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;
+ focus.focusable.find( wrapperNode.current )[ 0 ] ||
+ wrapperNode.current;
nextFocusTarget.focus();
}
@@ -187,7 +205,8 @@ function LinkControl( { value, settings, onChange = noop, showInitialSuggestions
*/
function stopEditing() {
isEndingEditWithFocus.current =
- !! wrapperNode.current && wrapperNode.current.contains( document.activeElement );
+ !! wrapperNode.current &&
+ wrapperNode.current.contains( document.activeElement );
setIsEditingLink( false );
}
@@ -201,9 +220,15 @@ function LinkControl( { value, settings, onChange = noop, showInitialSuggestions
const isTel = protocol.includes( 'tel' );
const handleManualEntry =
- isInternal || isMailto || isTel || isURL( val ) || ( val && val.includes( 'www.' ) );
-
- return handleManualEntry ? handleDirectEntry( val, args ) : handleEntitySearch( val, args );
+ isInternal ||
+ isMailto ||
+ isTel ||
+ isURL( val ) ||
+ ( val && val.includes( 'www.' ) );
+
+ return handleManualEntry
+ ? handleDirectEntry( val, args )
+ : handleEntitySearch( val, args );
},
[ handleDirectEntry, fetchSearchSuggestions ]
);
@@ -217,9 +242,12 @@ function LinkControl( { value, settings, onChange = noop, showInitialSuggestions
isLoading,
isInitialSuggestions,
} ) => {
- const resultsListClasses = classnames( 'block-editor-link-control__search-results', {
- 'is-loading': isLoading,
- } );
+ const resultsListClasses = classnames(
+ 'block-editor-link-control__search-results',
+ {
+ 'is-loading': isLoading,
+ }
+ );
const manualLinkEntryTypes = [ 'url', 'mailto', 'tel', 'internal' ];
const searchResultsLabelId = isInitialSuggestions
@@ -258,14 +286,19 @@ function LinkControl( { value, settings, onChange = noop, showInitialSuggestions
{ suggestions.map( ( suggestion, index ) => (
{
stopEditing();
onChange( { ...value, ...suggestion } );
} }
isSelected={ index === selectedSuggestion }
- isURL={ manualLinkEntryTypes.includes( suggestion.type.toLowerCase() ) }
+ isURL={ manualLinkEntryTypes.includes(
+ suggestion.type.toLowerCase()
+ ) }
searchTerm={ inputValue }
/>
) ) }
@@ -275,7 +308,11 @@ function LinkControl( { value, settings, onChange = noop, showInitialSuggestions
};
return (
-
+
{ isEditingLink || ! value ? (
) : (
-
+
{ __( 'Currently selected' ) }:
{ value && value.title && (
- { displayURL }
+
+ { displayURL }
+
) }
@@ -321,7 +366,11 @@ function LinkControl( { value, settings, onChange = noop, showInitialSuggestions
{ __( 'Edit' ) }
-
) }
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 bc7062fae35046..a3c4fb37f4eb5d 100644
--- a/packages/block-editor/src/components/link-control/search-item.js
+++ b/packages/block-editor/src/components/link-control/search-item.js
@@ -29,19 +29,30 @@ export const LinkControlSearchItem = ( {
} ) }
>
{ isURL && (
-
+
) }
-
-
+
{ ! isURL && ( safeDecodeURI( suggestion.url ) || '' ) }
{ isURL && __( 'Press ENTER to add this link' ) }
{ suggestion.type && (
- { suggestion.type }
+
+ { suggestion.type }
+
) }
);
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 0df4b5bb919802..0df253d11a1ebc 100644
--- a/packages/block-editor/src/components/link-control/settings-drawer.js
+++ b/packages/block-editor/src/components/link-control/settings-drawer.js
@@ -16,7 +16,11 @@ const defaultSettings = [
},
];
-const LinkControlSettingsDrawer = ( { value, onChange = noop, settings = defaultSettings } ) => {
+const LinkControlSettingsDrawer = ( {
+ value,
+ onChange = noop,
+ settings = defaultSettings,
+} ) => {
if ( ! settings || ! settings.length ) {
return null;
}
@@ -40,7 +44,9 @@ const LinkControlSettingsDrawer = ( { value, onChange = noop, settings = default
return (
- { __( 'Currently selected link settings' ) }
+
+ { __( 'Currently selected link settings' ) }
+
{ theSettings }
);
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 3af7a7d85f8ebb..b470155977a30b 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
@@ -36,8 +36,13 @@ export const fauxEntitySuggestions = [
];
/* eslint-disable no-unused-vars */
-export const fetchFauxEntitySuggestions = ( val = '', { perPage = null } = {} ) => {
- const suggestions = perPage ? take( fauxEntitySuggestions, perPage ) : fauxEntitySuggestions;
+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 73ce1ca49d891a..44424efe334295 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -57,7 +57,9 @@ describe( 'Basic rendering', () => {
} );
// Search Input UI
- const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+ const searchInput = container.querySelector(
+ 'input[aria-label="URL"]'
+ );
expect( searchInput ).not.toBeNull();
expect( container.innerHTML ).toMatchSnapshot();
@@ -82,7 +84,9 @@ describe( 'Searching for a link', () => {
} );
// 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( () => {
@@ -123,7 +127,9 @@ describe( 'Searching for a link', () => {
} );
// 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,11 +140,16 @@ 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(
@@ -149,10 +160,15 @@ describe( 'Searching for a link', () => {
);
// 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' ] ] )(
+ 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( () => {
@@ -160,30 +176,42 @@ describe( 'Searching for a link', () => {
} );
// 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( () => {
- Simulate.change( searchInput, { target: { value: searchTerm } } );
+ Simulate.change( searchInput, {
+ target: { value: searchTerm },
+ } );
} );
// 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 lastSearchResultItemHTML = last( searchResultElements ).innerHTML;
+ 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
+ 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( searchTerm )
+ );
+ expect( lastSearchResultItemHTML ).toEqual(
+ expect.stringContaining( 'URL' )
+ );
expect( lastSearchResultItemHTML ).toEqual(
expect.stringContaining( 'Press ENTER to add this link' )
);
@@ -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( '' );
@@ -248,24 +282,37 @@ describe( 'Manual link entry', () => {
} );
// 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( () => {
- Simulate.change( searchInput, { target: { value: searchTerm } } );
+ Simulate.change( searchInput, {
+ target: { value: searchTerm },
+ } );
} );
// 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 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( 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' )
);
@@ -285,11 +332,15 @@ describe( 'Manual link entry', () => {
} );
// 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( () => {
- Simulate.change( searchInput, { target: { value: searchTerm } } );
+ Simulate.change( searchInput, {
+ target: { value: searchTerm },
+ } );
} );
// fetchFauxEntitySuggestions resolves on next "tick" of event loop
@@ -299,12 +350,19 @@ describe( 'Manual link entry', () => {
const searchResultElements = container.querySelectorAll(
'[role="listbox"] [role="option"]'
);
- const firstSearchResultItemHTML = searchResultElements[ 0 ].innerHTML;
+ 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( 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' )
);
@@ -324,11 +382,17 @@ describe( 'Default search suggestions', () => {
await eventLoopTick();
// Search Input UI
- const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+ 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 searchResultsWrapper = container.querySelector(
+ '[role="listbox"]'
+ );
+ const initialSearchResultElements = searchResultsWrapper.querySelectorAll(
+ '[role="option"]'
+ );
const searchResultsLabel = container.querySelector(
`#${ searchResultsWrapper.getAttribute( 'aria-labelledby' ) }`
@@ -344,7 +408,9 @@ describe( 'Default search suggestions', () => {
expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
// Verify the search results already display the initial suggestions
- expect( initialSearchResultElements ).toHaveLength( expectedResultsLength );
+ expect( initialSearchResultElements ).toHaveLength(
+ expectedResultsLength
+ );
expect( searchResultsLabel.innerHTML ).toEqual( 'Recently updated' );
} );
@@ -357,7 +423,10 @@ describe( 'Default search suggestions', () => {
//
act( () => {
render(
- setLink( suggestion ) } />;
+ return (
+ setLink( suggestion ) }
+ />
+ );
};
act( () => {
@@ -460,8 +544,12 @@ describe( 'Selecting links', () => {
Simulate.click( currentLinkBtn );
} );
- const searchInput = container.querySelector( 'input[aria-label="URL"]' );
- currentLinkUI = container.querySelector( '.block-editor-link-control__search-item.is-current' );
+ const searchInput = container.querySelector(
+ 'input[aria-label="URL"]'
+ );
+ currentLinkUI = container.querySelector(
+ '.block-editor-link-control__search-item.is-current'
+ );
// We should be back to showing the search input
expect( searchInput ).not.toBeNull();
@@ -489,7 +577,10 @@ describe( 'Selecting links', () => {
const [ link, setLink ] = useState();
return (
- setLink( suggestion ) } />
+ setLink( suggestion ) }
+ />
);
};
@@ -498,11 +589,15 @@ describe( 'Selecting links', () => {
} );
// 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( () => {
- Simulate.change( searchInput, { target: { value: searchTerm } } );
+ Simulate.change( searchInput, {
+ target: { value: searchTerm },
+ } );
} );
// fetchFauxEntitySuggestions resolves on next "tick" of event loop
@@ -524,11 +619,17 @@ describe( 'Selecting links', () => {
'.block-editor-link-control__search-item.is-current'
);
const currentLinkHTML = currentLink.innerHTML;
- const currentLinkAnchor = currentLink.querySelector( `[href="${ selectedLink.url }"]` );
+ const currentLinkAnchor = currentLink.querySelector(
+ `[href="${ selectedLink.url }"]`
+ );
// Check that this suggestion is now shown as selected
- expect( currentLinkHTML ).toEqual( expect.stringContaining( selectedLink.title ) );
- expect( currentLinkHTML ).toEqual( expect.stringContaining( 'Edit' ) );
+ expect( currentLinkHTML ).toEqual(
+ expect.stringContaining( selectedLink.title )
+ );
+ expect( currentLinkHTML ).toEqual(
+ expect.stringContaining( 'Edit' )
+ );
expect( currentLinkAnchor ).not.toBeNull();
}
);
@@ -554,7 +655,10 @@ describe( 'Selecting links', () => {
const [ link, setLink ] = useState();
return (
- setLink( suggestion ) } />
+ setLink( suggestion ) }
+ />
);
};
@@ -563,12 +667,16 @@ describe( 'Selecting links', () => {
} );
// Search Input UI
- const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+ const searchInput = container.querySelector(
+ 'input[aria-label="URL"]'
+ );
const form = container.querySelector( 'form' );
// Simulate searching for a term
act( () => {
- Simulate.change( searchInput, { target: { value: searchTerm } } );
+ Simulate.change( searchInput, {
+ target: { value: searchTerm },
+ } );
} );
//fetchFauxEntitySuggestions resolves on next "tick" of event loop
@@ -591,7 +699,9 @@ describe( 'Selecting links', () => {
);
// We should have highlighted the first item using the keyboard
- expect( selectedSearchResultElement ).toEqual( firstSearchSuggestion );
+ expect( selectedSearchResultElement ).toEqual(
+ firstSearchSuggestion
+ );
// Only entity searches contain more than 1 suggestion
if ( type === 'entity' ) {
@@ -605,7 +715,9 @@ describe( 'Selecting links', () => {
);
// We should have highlighted the first item using the keyboard
- expect( selectedSearchResultElement ).toEqual( secondSearchSuggestion );
+ expect( selectedSearchResultElement ).toEqual(
+ secondSearchSuggestion
+ );
// Check we can go back up via up arrow
act( () => {
@@ -617,7 +729,9 @@ describe( 'Selecting links', () => {
);
// We should be back to highlighting the first search result again
- expect( selectedSearchResultElement ).toEqual( firstSearchSuggestion );
+ expect( selectedSearchResultElement ).toEqual(
+ firstSearchSuggestion
+ );
}
// Commit the selected item as the current link
@@ -633,13 +747,21 @@ describe( 'Selecting links', () => {
'.block-editor-link-control__search-item.is-current'
);
const currentLinkHTML = currentLink.innerHTML;
- const currentLinkAnchor = currentLink.querySelector( `[href="${ selectedLink.url }"]` );
+ const currentLinkAnchor = currentLink.querySelector(
+ `[href="${ selectedLink.url }"]`
+ );
// Make sure focus is retained after submission.
- expect( container.contains( document.activeElement ) ).toBe( true );
+ expect( container.contains( document.activeElement ) ).toBe(
+ true
+ );
- expect( currentLinkHTML ).toEqual( expect.stringContaining( selectedLink.title ) );
- expect( currentLinkHTML ).toEqual( expect.stringContaining( 'Edit' ) );
+ expect( currentLinkHTML ).toEqual(
+ expect.stringContaining( selectedLink.title )
+ );
+ expect( currentLinkHTML ).toEqual(
+ expect.stringContaining( 'Edit' )
+ );
expect( currentLinkAnchor ).not.toBeNull();
}
);
@@ -661,13 +783,21 @@ describe( 'Addition Settings UI', () => {
render(
- 
+