Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Experiment: Temporary hack to render blocks in customizer #29365

Merged
merged 4 commits into from
Mar 3, 2021
Merged

Experiment: Temporary hack to render blocks in customizer #29365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
400eca1
Add __unstable_instance to the widget customizer setting
noisysocks Feb 25, 2021
ca84538
Render blocks in the customizer
kevin940726 Feb 25, 2021
016f2dd
Update to use __internalWidgetId
kevin940726 Feb 26, 2021
d7d880a
Remove experimental prefix
kevin940726 Mar 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions lib/widgets-customize.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,66 @@ function gutenberg_widgets_customize_register( $manager ) {
}
}

/**
* Our own implementation of WP_Customize_Widgets::sanitize_widget_instance
* which uses __unstable_instance if it exists.
*
* @param array $value Widget instance to sanitize.
* @return array|void Sanitized widget instance.
*/
function gutenberg_widgets_customize_sanitize_widget_instance( $value ) {
global $wp_customize;

if ( isset( $value['__unstable_instance'] ) ) {
return $value['__unstable_instance'];
}

return $wp_customize->widgets->sanitize_widget_instance( $value );
}

/**
* Our own implementation of WP_Customize_Widgets::sanitize_widget_js_instance
* which adds __unstable_instance.
*
* @param array $value Widget instance to convert to JSON.
* @return array JSON-converted widget instance.
*/
function gutenberg_widgets_customize_sanitize_widget_js_instance( $value ) {
global $wp_customize;

$sanitized_value = $wp_customize->widgets->sanitize_widget_js_instance( $value );

$sanitized_value['__unstable_instance'] = $value;

return $sanitized_value;
}

/**
* TEMPORARY HACK! \o/
*
* Swaps the customizer setting's sanitize_callback and sanitize_js_callback
* arguments with our own implementation that adds __unstable_instance to the
* sanitized value.
*
* This lets the block editor use __unstable_instance to create blocks.
*
* A proper fix would be to only add the raw instance when the widget is a block
* widget and to update the Legacy Widget block to work with encoded instance
* values. See https://github.com/WordPress/gutenberg/issues/28902.
*
* @param array $args Array of Customizer setting arguments.
* @param string $id Widget setting ID.
*/
function gutenberg_widgets_customize_add_unstable_instance( $args, $id ) {
if ( 0 === strpos( $id, 'widget_' ) ) {
$args['sanitize_callback'] = 'gutenberg_widgets_customize_sanitize_widget_instance';
$args['sanitize_js_callback'] = 'gutenberg_widgets_customize_sanitize_widget_js_instance';
}

return $args;
}

if ( gutenberg_is_experiment_enabled( 'gutenberg-widgets-in-customizer' ) ) {
add_action( 'customize_register', 'gutenberg_widgets_customize_register' );
add_filter( 'widget_customizer_setting_args', 'gutenberg_widgets_customize_add_unstable_instance', 10, 2 );
}
7 changes: 4 additions & 3 deletions packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export default class SidebarAdapter {
};
}

addWidget( widget ) {
addWidget( widget, index ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe default this to something e.g. index = 0?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMHO, this method should remain private, thus we don't need to assign defaults to make it easy to use. Instead, we should mark index as required explicitly to prevent us from introducing unexpected bugs 😅 .

const widgetModel = wp.customize.Widgets.availableWidgets.findWhere( {
id_base: widget.idBase,
} );
Expand Down Expand Up @@ -169,9 +169,10 @@ export default class SidebarAdapter {
);
setting.set( {} );

const widgetIds = this.setting.get();
const widgetIds = [ ...this.setting.get() ];
const widgetId = settingIdToWidgetId( settingId );
this.setting.set( [ ...widgetIds, widgetId ] );
widgetIds.splice( index, 0, widgetId );
this.setting.set( widgetIds );

return widgetId;
}
Expand Down
136 changes: 77 additions & 59 deletions packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,24 @@
/**
* External dependencies
*/
import { invert, omit, keyBy, isEqual } from 'lodash';
import { omit, keyBy, isEqual } from 'lodash';

/**
* WordPress dependencies
*/
import { serialize, parse, createBlock } from '@wordpress/blocks';
import { useState, useEffect, useCallback, useRef } from '@wordpress/element';

function addWidgetIdToBlock( block, widgetId ) {
return {
...block,
attributes: {
...( block.attributes || {} ),
__internalWidgetId: widgetId,
},
};
}

function blockToWidget( block, existingWidget = null ) {
let widget;

Expand All @@ -27,10 +37,16 @@ function blockToWidget( block, existingWidget = null ) {
};
}
} else {
const instance = {
content: serialize( block ),
};
widget = {
idBase: 'block',
widgetClass: 'WP_Widget_Block',
instance: { content: serialize( block ) },
instance: {
...instance,
__unstable_instance: instance,
},
};
}

Expand All @@ -40,12 +56,13 @@ function blockToWidget( block, existingWidget = null ) {
};
}

function widgetToBlock( widget, existingBlock = null ) {
function widgetToBlock( widget ) {
let block;

// FIXME: We'll never get it here with blocks, we need to update this.
if ( widget.widgetClass === 'WP_Widget_Block' ) {
const parsedBlocks = parse( widget.instance.content );
if ( widget.idBase === 'block' ) {
const parsedBlocks = parse(
widget.instance.__unstable_instance.content
);
block = parsedBlocks.length
? parsedBlocks[ 0 ]
: createBlock( 'core/paragraph', {} );
Expand All @@ -68,20 +85,16 @@ function widgetToBlock( widget, existingBlock = null ) {
block = createBlock( 'core/legacy-widget', attributes, [] );
}

return {
...block,
clientId: existingBlock?.clientId ?? block.clientId,
};
return addWidgetIdToBlock( block, widget.id );
}

function initState( sidebar ) {
const state = { blocks: [], widgetIds: {} };
const state = { blocks: [] };

for ( const widgetId of sidebar.getWidgetIds() ) {
const widget = sidebar.getWidget( widgetId );
const block = widgetToBlock( widget );
state.blocks.push( block );
state.widgetIds[ block.clientId ] = widgetId;
}

return state;
Expand Down Expand Up @@ -109,60 +122,55 @@ export default function useSidebarBlockEditor( sidebar ) {
);
setState( ( lastState ) => ( {
blocks: [ ...lastState.blocks, block ],
widgetIds: {
...lastState.widgetIds,
[ block.clientId ]: widgetId,
},
} ) );
break;
}

case 'widgetRemoved': {
const { widgetId } = event;
const blockClientId = invert( state.widgetIds )[ widgetId ];
setState( ( lastState ) => ( {
blocks: lastState.blocks.filter(
( { clientId } ) => clientId !== blockClientId
( { attributes: { __internalWidgetId } } ) =>
__internalWidgetId !== widgetId
),
widgetIds: omit( lastState.widgetIds, blockClientId ),
} ) );
break;
}

case 'widgetChanged': {
const { widgetId } = event;
const blockClientIdToUpdate = invert( state.widgetIds )[
widgetId
];
const blockToUpdate = state.blocks.find(
( { clientId } ) => clientId === blockClientIdToUpdate
( { attributes: { __internalWidgetId } } ) =>
__internalWidgetId === widgetId
);
const updatedBlock = widgetToBlock(
sidebar.getWidget( widgetId ),
blockToUpdate
);
setState( ( lastState ) => ( {
...lastState,
blocks: lastState.blocks.map( ( block ) =>
block.clientId === blockClientIdToUpdate
? updatedBlock
: block
block === blockToUpdate ? updatedBlock : block
),
} ) );
break;
}

case 'widgetsReordered':
const { widgetIds } = event;
const blockClientIds = invert( state.widgetIds );
const blocksByClientId = keyBy( state.blocks, 'clientId' );
setState( ( lastState ) => ( {
...lastState,
blocks: widgetIds.map(
( widgetId ) =>
blocksByClientId[ blockClientIds[ widgetId ] ]
),
} ) );

setState( ( lastState ) => {
const blocksByWidgetId = keyBy(
lastState.blocks,
'attributes.__internalWidgetId'
);

return {
...lastState,
blocks: widgetIds.map(
( widgetId ) => blocksByWidgetId[ widgetId ]
),
};
} );
break;
}
};
Expand All @@ -175,17 +183,23 @@ export default function useSidebarBlockEditor( sidebar ) {
( nextBlocks ) => {
ignoreIncoming.current = true;

let nextWidgetIds = state.widgetIds;

const blocksByClientId = keyBy( state.blocks, 'clientId' );

const seen = {};

for ( const nextBlock of nextBlocks ) {
if ( nextBlock.clientId in blocksByClientId ) {
const block = blocksByClientId[ nextBlock.clientId ];
const blocksByWidgetId = keyBy(
state.blocks,
( block ) => block.attributes.__internalWidgetId
);

nextBlocks.forEach( ( nextBlock, index ) => {
if (
nextBlock.attributes.__internalWidgetId &&
nextBlock.attributes.__internalWidgetId in blocksByWidgetId
) {
const block =
blocksByWidgetId[
nextBlock.attributes.__internalWidgetId
];
if ( ! isEqual( block, nextBlock ) ) {
const widgetId = state.widgetIds[ nextBlock.clientId ];
const widgetId =
nextBlock.attributes.__internalWidgetId;
const widgetToUpdate = sidebar.getWidget( widgetId );
const widget = blockToWidget(
nextBlock,
Expand All @@ -195,40 +209,44 @@ export default function useSidebarBlockEditor( sidebar ) {
}
} else {
const widget = blockToWidget( nextBlock );
const widgetId = sidebar.addWidget( widget );
if ( nextWidgetIds === state.widgetIds ) {
nextWidgetIds = { ...state.widgetIds };
}
nextWidgetIds[ nextBlock.clientId ] = widgetId;
sidebar.addWidget( widget, index );
}
} );

seen[ nextBlock.clientId ] = true;
}
const seen = nextBlocks.map(
( block ) => block.attributes.__internalWidgetId
);

for ( const block of state.blocks ) {
if ( ! seen[ block.clientId ] ) {
const widgetId = state.widgetIds[ block.clientId ];
const widgetId = block.attributes.__internalWidgetId;
if ( ! seen.includes( widgetId ) ) {
sidebar.removeWidget( widgetId );
}
}

if (
nextBlocks.length === state.blocks.length &&
! isEqual(
nextBlocks.map( ( { clientId } ) => clientId ),
state.blocks.map( ( { clientId } ) => clientId )
nextBlocks.map(
( { attributes: { __internalWidgetId } } ) =>
__internalWidgetId
),
state.blocks.map(
( { attributes: { __internalWidgetId } } ) =>
__internalWidgetId
)
)
) {
const order = nextBlocks.map(
( { clientId } ) => state.widgetIds[ clientId ]
( { attributes: { __internalWidgetId } } ) =>
__internalWidgetId
);
sidebar.setWidgetIds( order );
}

setState( ( lastState ) => ( {
...lastState,
blocks: nextBlocks,
widgetIds: nextWidgetIds,
} ) );

ignoreIncoming.current = false;
Expand Down