Skip to content

Commit

Permalink
Async block loading
Browse files Browse the repository at this point in the history
  • Loading branch information
jsnajdr committed Dec 15, 2023
1 parent 5dd5ad2 commit e8680ee
Show file tree
Hide file tree
Showing 62 changed files with 741 additions and 475 deletions.
4 changes: 4 additions & 0 deletions docs/reference-guides/data/data-core-block-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -846,6 +846,10 @@ _Returns_

- `string|false`: Block Template Lock

### getUnsyncedPatterns

Undocumented declaration.

### hasBlockMovingClientId

Returns whether block moving mode is enabled.
Expand Down
8 changes: 8 additions & 0 deletions docs/reference-guides/data/data-core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,14 @@ _Returns_

- `(WPBlockVariation[]|void)`: Block variations.

### getBootstrappedBlockType

Undocumented declaration.

### getBootstrappedBlockTypes

Undocumented declaration.

### getCategories

Returns all the available block categories.
Expand Down
7 changes: 7 additions & 0 deletions lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,13 @@ function gutenberg_deregister_core_block_and_assets( $block_name ) {
}
}
}
if ( ! empty( $block_type->editor_script_handles ) ) {
foreach ( $block_type->editor_script_handles as $editor_script_handle ) {
if ( str_starts_with( $editor_script_handle, 'wp-block-' ) ) {
wp_deregister_script( $editor_script_handle );
}
}
}
$registry->unregister( $block_name );
}
}
Expand Down
52 changes: 52 additions & 0 deletions lib/init.php
Original file line number Diff line number Diff line change
Expand Up @@ -57,3 +57,55 @@ function gutenberg_menu() {
);
}
add_action( 'admin_menu', 'gutenberg_menu', 9 );

// disable loading and enqueuing block editor scripts and styles
add_filter( 'should_load_block_editor_scripts_and_styles', '__return_false', 11 );

function get_block_importmap() {
$block_registry = WP_Block_Type_Registry::get_instance();
$scripts = wp_scripts();
$styles = wp_styles();
$blocks = array();

foreach ( $block_registry->get_all_registered() as $block_name => $block_type ) {
$imports = array();
if ( isset( $block_type->editor_script_handles ) ) {
foreach ( $block_type->editor_script_handles as $handle ) {
$spec = $scripts->registered[ $handle ];
$imports[] = array(
'type' => 'script',
'handle' => $spec->handle,
'src' => $spec->src,
'ver' => $spec->ver
);
}
}
if ( isset( $block_type->editor_style_handles ) ) {
foreach ( $block_type->editor_style_handles as $handle ) {
if ( ! isset( $styles->registered[ $handle ] ) ) {
continue;
}
$spec = $styles->registered[ $handle ];
$imports[] = array(
'type' => 'style',
'handle' => $spec->handle,
'src' => $spec->src,
'ver' => $spec->ver
);
}
}
if ( ! empty( $imports ) ) {
$blocks[ $block_name ] = $imports;
}
}

return $blocks;
}

function emit_importmap() {
wp_register_script( 'wp-importmap', '');
wp_add_inline_script( 'wp-importmap', 'wp.importmap = ' . wp_json_encode( get_block_importmap() ) . ';' );
wp_enqueue_script('wp-importmap');
}

add_action( 'enqueue_block_editor_assets', 'emit_importmap' );
5 changes: 2 additions & 3 deletions packages/block-editor/src/autocompleters/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,20 +116,19 @@ function createBlockCompleter() {
allowContext( before, after ) {
return ! ( /\S/.test( before ) || /\S/.test( after ) );
},
getOptionCompletion( inserterItem ) {
async getOptionCompletion( inserterItem ) {
const {
name,
initialAttributes,
innerBlocks,
syncStatus,
content,
} = inserterItem;

return {
action: 'replace',
value:
syncStatus === 'unsynced'
? parse( content, {
? await parse( content, {
__unstableSkipMigrationLogs: true,
} )
: createBlock(
Expand Down
7 changes: 5 additions & 2 deletions packages/block-editor/src/components/block-actions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,18 @@ export default function BlockActions( {
selectBlock( clientIds[ 0 ] );
setBlockMovingClientId( clientIds[ 0 ] );
},
onGroup() {
async onGroup() {
if ( ! blocks.length ) {
return;
}

const groupingBlockName = getGroupingBlockName();

// Activate the `transform` on `core/group` which does the conversion.
const newBlocks = switchToBlockType( blocks, groupingBlockName );
const newBlocks = await switchToBlockType(
blocks,
groupingBlockName
);

if ( ! newBlocks ) {
return;
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-list/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
) {
removeBlock( _clientId );
} else {
registry.batch( () => {
registry.batch( async () => {
if (
canInsertBlockType(
getBlockName( firstClientId ),
Expand All @@ -405,7 +405,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
getBlockIndex( _clientId )
);
} else {
const replacement = switchToBlockType(
const replacement = await switchToBlockType(
getBlock( firstClientId ),
getDefaultBlockName()
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -482,7 +482,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
) {
removeBlock( _clientId );
} else {
registry.batch( () => {
registry.batch( async () => {
if (
canInsertBlockType(
getBlockName( firstClientId ),
Expand All @@ -496,7 +496,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
getBlockIndex( _clientId )
);
} else {
const replacement = switchToBlockType(
const replacement = await switchToBlockType(
getBlock( firstClientId ),
getDefaultBlockName()
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,13 @@ import { store as blockEditorStore } from '../../store';
*/
function useGenericPreviewBlock( block, type ) {
return useMemo( () => {
const example = type?.example;
const blockName = type?.name;

if ( example && blockName ) {
return getBlockFromExample( blockName, {
attributes: example.attributes,
innerBlocks: example.innerBlocks,
} );
if ( type && type.blockName && type.example ) {
return getBlockFromExample( type.blockName, type.example );
}

if ( block ) {
return cloneBlock( block );
}
}, [ type?.example ? block?.name : block, type ] );
}, [ type, type?.example ? block?.name : block ] );
}

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
getBlockMenuDefaultClassName,
switchToBlockType,
} from '@wordpress/blocks';
import { useState, useMemo } from '@wordpress/element';
import { useEffect, useState, useMemo } from '@wordpress/element';

/**
* Internal dependencies
Expand Down Expand Up @@ -63,6 +63,21 @@ function useGroupedTransforms( possibleBlockTransformations ) {
return transformations;
}

function Preview( { blocks, transformName } ) {
const [ switched, setSwitched ] = useState( null );
useEffect( () => {
switchToBlockType( blocks, transformName ).then( ( result ) =>
setSwitched( result )
);
}, [ blocks, transformName ] );

if ( ! switched ) {
return null;
}

return <PreviewBlockPopover blocks={ blocks } />;
}

const BlockTransformationsMenu = ( {
className,
possibleBlockTransformations,
Expand Down Expand Up @@ -91,11 +106,10 @@ const BlockTransformationsMenu = ( {
<>
<MenuGroup label={ __( 'Transform to' ) } className={ className }>
{ hoveredTransformItemName && (
<PreviewBlockPopover
blocks={ switchToBlockType(
blocks,
hoveredTransformItemName
) }
<Preview
key={ hoveredTransformItemName }
blocks={ blocks }
transformName={ hoveredTransformItemName }
/>
) }
{ !! possibleBlockVariationTransformations?.length && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,10 @@ const BlockTransformationsMenu = ( {
const getAnchor = () =>
anchorNodeRef ? findNodeHandle( anchorNodeRef ) : undefined;

function onPickerSelect( value ) {
async function onPickerSelect( value ) {
replaceBlocks(
selectedBlockClientId,
switchToBlockType( selectedBlock, value )
await switchToBlockType( selectedBlock, value )
);

const selectedItem = pickerOptions().find(
Expand Down
Loading

0 comments on commit e8680ee

Please sign in to comment.