Skip to content

Commit 2c74335

Browse files
noisysocksnoisysocks
committed
Add block editor to customize.php
1 parent 5a6c23f commit 2c74335

File tree

6 files changed

+244
-66
lines changed

6 files changed

+244
-66
lines changed

‎src/wp-admin/widgets.php‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,7 @@
2323
$title = __( 'Widgets' );
2424
$parent_file = 'themes.php';
2525

26-
/**
27-
* Filters whether or not to use the block editor to manage widgets.
28-
*
29-
* @since 5.8.0
30-
*
31-
* @param boolean $use_widgets_block_editor Whether or not to use the block editor to manage widgets.
32-
*/
33-
$use_widgets_block_editor = apply_filters(
34-
'use_widgets_block_editor',
35-
get_theme_support( 'widgets-block-editor' )
36-
);
37-
38-
$use_widgets_block_editor = true;
39-
40-
if ( $use_widgets_block_editor ) {
26+
if ( wp_use_widgets_block_editor() ) {
4127
require ABSPATH . 'wp-admin/widgets-form-blocks.php';
4228
} else {
4329
require ABSPATH . 'wp-admin/widgets-form.php';

‎src/wp-includes/class-wp-customize-control.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -795,3 +795,8 @@ protected function content_template() {}
795795
* WP_Customize_Date_Time_Control class.
796796
*/
797797
require_once ABSPATH . WPINC . '/customize/class-wp-customize-date-time-control.php';
798+
799+
/**
800+
* WP_Sidebar_Block_Editor_Control class.
801+
*/
802+
require_once ABSPATH . WPINC . '/customize/class-wp-sidebar-block-editor-control.php';

‎src/wp-includes/class-wp-customize-widgets.php‎

Lines changed: 171 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -368,6 +368,8 @@ public function schedule_customize_register() {
368368
public function customize_register() {
369369
global $wp_registered_widgets, $wp_registered_widget_controls, $wp_registered_sidebars;
370370

371+
$use_widgets_block_editor = wp_use_widgets_block_editor();
372+
371373
add_filter( 'sidebars_widgets', array( $this, 'preview_sidebars_widgets' ), 1 );
372374

373375
$sidebars_widgets = array_merge(
@@ -446,13 +448,18 @@ public function customize_register() {
446448
if ( $is_active_sidebar ) {
447449

448450
$section_args = array(
449-
'title' => $wp_registered_sidebars[ $sidebar_id ]['name'],
450-
'description' => $wp_registered_sidebars[ $sidebar_id ]['description'],
451-
'priority' => array_search( $sidebar_id, array_keys( $wp_registered_sidebars ), true ),
452-
'panel' => 'widgets',
453-
'sidebar_id' => $sidebar_id,
451+
'title' => $wp_registered_sidebars[ $sidebar_id ]['name'],
452+
'priority' => array_search( $sidebar_id, array_keys( $wp_registered_sidebars ), true ),
453+
'panel' => 'widgets',
454+
'sidebar_id' => $sidebar_id,
454455
);
455456

457+
if ( $use_widgets_block_editor ) {
458+
$section_args['description'] = '';
459+
} else {
460+
$section_args['description'] = $wp_registered_sidebars[ $sidebar_id ]['description'];
461+
}
462+
456463
/**
457464
* Filters Customizer widget section arguments for a given sidebar.
458465
*
@@ -467,49 +474,63 @@ public function customize_register() {
467474
$section = new WP_Customize_Sidebar_Section( $this->manager, $section_id, $section_args );
468475
$this->manager->add_section( $section );
469476

470-
$control = new WP_Widget_Area_Customize_Control(
471-
$this->manager,
472-
$setting_id,
473-
array(
474-
'section' => $section_id,
475-
'sidebar_id' => $sidebar_id,
476-
'priority' => count( $sidebar_widget_ids ), // place 'Add Widget' and 'Reorder' buttons at end.
477-
)
478-
);
479-
$new_setting_ids[] = $setting_id;
477+
if ( $use_widgets_block_editor ) {
478+
$control = new WP_Sidebar_Block_Editor_Control(
479+
$this->manager,
480+
$setting_id,
481+
array(
482+
'section' => $section_id,
483+
'sidebar_id' => $sidebar_id,
484+
)
485+
);
486+
} else {
487+
$control = new WP_Widget_Area_Customize_Control(
488+
$this->manager,
489+
$setting_id,
490+
array(
491+
'section' => $section_id,
492+
'sidebar_id' => $sidebar_id,
493+
'priority' => count( $sidebar_widget_ids ), // place 'Add Widget' and 'Reorder' buttons at end.
494+
)
495+
);
496+
}
480497

481498
$this->manager->add_control( $control );
499+
500+
$new_setting_ids[] = $setting_id;
482501
}
483502
}
484503

485-
// Add a control for each active widget (located in a sidebar).
486-
foreach ( $sidebar_widget_ids as $i => $widget_id ) {
504+
if ( ! $use_widgets_block_editor ) {
505+
// Add a control for each active widget (located in a sidebar).
506+
foreach ( $sidebar_widget_ids as $i => $widget_id ) {
487507

488-
// Skip widgets that may have gone away due to a plugin being deactivated.
489-
if ( ! $is_active_sidebar || ! isset( $wp_registered_widgets[ $widget_id ] ) ) {
490-
continue;
491-
}
508+
// Skip widgets that may have gone away due to a plugin being deactivated.
509+
if ( ! $is_active_sidebar || ! isset( $wp_registered_widgets[ $widget_id ] ) ) {
510+
continue;
511+
}
492512

493-
$registered_widget = $wp_registered_widgets[ $widget_id ];
494-
$setting_id = $this->get_setting_id( $widget_id );
495-
$id_base = $wp_registered_widget_controls[ $widget_id ]['id_base'];
513+
$registered_widget = $wp_registered_widgets[ $widget_id ];
514+
$setting_id = $this->get_setting_id( $widget_id );
515+
$id_base = $wp_registered_widget_controls[ $widget_id ]['id_base'];
496516

497-
$control = new WP_Widget_Form_Customize_Control(
498-
$this->manager,
499-
$setting_id,
500-
array(
501-
'label' => $registered_widget['name'],
502-
'section' => $section_id,
503-
'sidebar_id' => $sidebar_id,
504-
'widget_id' => $widget_id,
505-
'widget_id_base' => $id_base,
506-
'priority' => $i,
507-
'width' => $wp_registered_widget_controls[ $widget_id ]['width'],
508-
'height' => $wp_registered_widget_controls[ $widget_id ]['height'],
509-
'is_wide' => $this->is_wide_widget( $widget_id ),
510-
)
511-
);
512-
$this->manager->add_control( $control );
517+
$control = new WP_Widget_Form_Customize_Control(
518+
$this->manager,
519+
$setting_id,
520+
array(
521+
'label' => $registered_widget['name'],
522+
'section' => $section_id,
523+
'sidebar_id' => $sidebar_id,
524+
'widget_id' => $widget_id,
525+
'widget_id_base' => $id_base,
526+
'priority' => $i,
527+
'width' => $wp_registered_widget_controls[ $widget_id ]['width'],
528+
'height' => $wp_registered_widget_controls[ $widget_id ]['height'],
529+
'is_wide' => $this->is_wide_widget( $widget_id ),
530+
)
531+
);
532+
$this->manager->add_control( $control );
533+
}
513534
}
514535
}
515536

@@ -805,6 +826,72 @@ public function enqueue_scripts() {
805826
'data',
806827
sprintf( 'var _wpCustomizeWidgetsSettings = %s;', wp_json_encode( $settings ) )
807828
);
829+
830+
// TODO: Do we need to do all of the above if block editor is enabled?
831+
// TODO: Maybe this should be a different function?
832+
if ( wp_use_widgets_block_editor() ) {
833+
$block_editor_context = new WP_Block_Editor_Context();
834+
$editor_settings = get_block_editor_settings(
835+
array(
836+
// TODO: DRY this up.
837+
/** This action is documented in widgets-form-blocks.php */
838+
'widgetTypesToHideFromLegacyWidgetBlock' => apply_filters(
839+
'widget_types_to_hide_from_legacy_widget_block',
840+
array(
841+
'pages',
842+
'calendar',
843+
'archives',
844+
'media_audio',
845+
'media_image',
846+
'media_gallery',
847+
'media_video',
848+
'meta',
849+
'search',
850+
'text',
851+
'categories',
852+
'recent-posts',
853+
'recent-comments',
854+
'rss',
855+
'tag_cloud',
856+
'nav_menu',
857+
'custom_html',
858+
'block',
859+
)
860+
),
861+
),
862+
$block_editor_context
863+
);
864+
865+
wp_add_inline_script(
866+
'wp-customize-widgets',
867+
sprintf(
868+
'wp.domReady( function() {
869+
wp.customizeWidgets.initialize( "widgets-customizer", %s );
870+
} );',
871+
wp_json_encode( $editor_settings )
872+
)
873+
);
874+
875+
// Preload server-registered block schemas.
876+
wp_add_inline_script(
877+
'wp-blocks',
878+
'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
879+
);
880+
881+
wp_add_inline_script(
882+
'wp-blocks',
883+
sprintf( 'wp.blocks.setCategories( %s );', wp_json_encode( get_block_categories( 'widgets-customizer' ) ) ),
884+
'after'
885+
);
886+
887+
wp_enqueue_script( 'wp-customize-widgets' );
888+
wp_enqueue_style( 'wp-customize-widgets' );
889+
wp_enqueue_script( 'wp-format-library' );
890+
wp_enqueue_style( 'wp-format-library' );
891+
892+
/** This action is documented in edit-form-blocks.php */
893+
do_action( 'enqueue_block_editor_assets' );
894+
}
808895
}
809896

810897
/**
@@ -888,8 +975,13 @@ public function get_setting_args( $id, $overrides = array() ) {
888975
$args['sanitize_js_callback'] = array( $this, 'sanitize_sidebar_widgets_js_instance' );
889976
$args['transport'] = current_theme_supports( 'customize-selective-refresh-widgets' ) ? 'postMessage' : 'refresh';
890977
} elseif ( preg_match( $this->setting_id_patterns['widget_instance'], $id, $matches ) ) {
891-
$args['sanitize_callback'] = array( $this, 'sanitize_widget_instance' );
892-
$args['sanitize_js_callback'] = array( $this, 'sanitize_widget_js_instance' );
978+
$id_base = $matches['id_base'];
979+
$args['sanitize_callback'] = function( $value ) use ( $id_base ) {
980+
return $this->sanitize_widget_instance( $value, $id_base );
981+
};
982+
$args['sanitize_js_callback'] = function( $value ) use ( $id_base ) {
983+
return $this->sanitize_widget_js_instance( $value, $id_base );
984+
};
893985
$args['transport'] = $this->is_widget_selective_refreshable( $matches['id_base'] ) ? 'postMessage' : 'refresh';
894986
}
895987

@@ -1314,16 +1406,31 @@ protected function get_instance_hash_key( $serialized_instance ) {
13141406
* @since 3.9.0
13151407
*
13161408
* @param array $value Widget instance to sanitize.
1409+
* @param string $id_base Base of the ID of the widget being sanitized.
13171410
* @return array|void Sanitized widget instance.
13181411
*/
1319-
public function sanitize_widget_instance( $value ) {
1412+
public function sanitize_widget_instance( $value, $id_base = null ) {
1413+
global $wp_widget_factory;
1414+
13201415
if ( array() === $value ) {
13211416
return $value;
13221417
}
13231418

1324-
if ( empty( $value['is_widget_customizer_js_value'] )
1325-
|| empty( $value['instance_hash_key'] )
1326-
|| empty( $value['encoded_serialized_instance'] ) ) {
1419+
if ( empty( $value['is_widget_customizer_js_value'] ) ) {
1420+
return;
1421+
}
1422+
1423+
if ( isset( $value['raw_instance'] ) && $id_base ) {
1424+
$widget_object = $wp_widget_factory->get_widget_object( $id_base );
1425+
if ( ! empty( $widget_object->show_instance_in_rest ) ) {
1426+
return $value['raw_instance'];
1427+
}
1428+
}
1429+
1430+
if (
1431+
empty( $value['instance_hash_key'] ) ||
1432+
empty( $value['encoded_serialized_instance'] )
1433+
) {
13271434
return;
13281435
}
13291436

@@ -1350,19 +1457,32 @@ public function sanitize_widget_instance( $value ) {
13501457
* @since 3.9.0
13511458
*
13521459
* @param array $value Widget instance to convert to JSON.
1460+
* @param string $id_base Base of the ID of the widget being sanitized.
13531461
* @return array JSON-converted widget instance.
13541462
*/
1355-
public function sanitize_widget_js_instance( $value ) {
1463+
public function sanitize_widget_js_instance( $value, $id_base = null ) {
1464+
global $wp_widget_factory;
1465+
13561466
if ( empty( $value['is_widget_customizer_js_value'] ) ) {
13571467
$serialized = serialize( $value );
13581468

1359-
$value = array(
1469+
$js_value = array(
13601470
'encoded_serialized_instance' => base64_encode( $serialized ),
13611471
'title' => empty( $value['title'] ) ? '' : $value['title'],
13621472
'is_widget_customizer_js_value' => true,
13631473
'instance_hash_key' => $this->get_instance_hash_key( $serialized ),
13641474
);
1475+
1476+
if ( $id_base ) {
1477+
$widget_object = $wp_widget_factory->get_widget_object( $id_base );
1478+
if ( ! empty( $widget_object->show_instance_in_rest ) ) {
1479+
$js_value['raw_instance'] = (object) $value;
1480+
}
1481+
}
1482+
1483+
return $js_value;
13651484
}
1485+
13661486
return $value;
13671487
}
13681488

@@ -1432,7 +1552,7 @@ public function call_widget_update( $widget_id ) {
14321552
return new WP_Error( 'widget_setting_malformed' );
14331553
}
14341554

1435-
$instance = $this->sanitize_widget_instance( $sanitized_widget_setting );
1555+
$instance = $this->sanitize_widget_instance( $sanitized_widget_setting, $parsed_id['id_base'] );
14361556
if ( is_null( $instance ) ) {
14371557
$this->stop_capturing_option_updates();
14381558
return new WP_Error( 'widget_setting_unsanitized' );
@@ -1498,7 +1618,7 @@ public function call_widget_update( $widget_id ) {
14981618
* in place from WP_Customize_Setting::preview() will use this value
14991619
* instead of the default widget instance value (an empty array).
15001620
*/
1501-
$this->manager->set_post_value( $setting_id, $this->sanitize_widget_js_instance( $instance ) );
1621+
$this->manager->set_post_value( $setting_id, $this->sanitize_widget_js_instance( $instance, $parsed_id['id_base'] ) );
15021622

15031623
// Obtain the widget control with the updated instance in place.
15041624
ob_start();
@@ -1571,7 +1691,7 @@ public function wp_ajax_update_widget() {
15711691
}
15721692

15731693
$form = $updated_widget['form'];
1574-
$instance = $this->sanitize_widget_js_instance( $updated_widget['instance'] );
1694+
$instance = $this->sanitize_widget_js_instance( $updated_widget['instance'], $id_base );
15751695

15761696
wp_send_json_success( compact( 'form', 'instance' ) );
15771697
}

‎src/wp-includes/customize/class-wp-sidebar-block-editor-control.php‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<?php
2+
/**
3+
* Customize API: WP_Sidebar_Block_Editor_Control class.
4+
*
5+
* @package WordPress
6+
* @subpackage Customize
7+
* @since 5.8.0
8+
*/
9+
10+
/**
11+
* Core class used to implement the widgets block editor control in the
12+
* customizer.
13+
*
14+
* @since 5.8.0
15+
*
16+
* @see WP_Customize_Control
17+
*/
18+
class WP_Sidebar_Block_Editor_Control extends WP_Customize_Control {
19+
/**
20+
* The control type.
21+
*
22+
* @since 5.8.0
23+
*
24+
* @var string
25+
*/
26+
public $type = 'sidebar_block_editor';
27+
28+
/**
29+
* Render the widgets block editor container.
30+
*
31+
* @since 5.8.0
32+
*/
33+
public function render_content() {
34+
// Render an empty control. The JavaScript in
35+
// @wordpress/customize-widgets will do the rest.
36+
}
37+
}

0 commit comments

Comments
 (0)