WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
05/25/2021 08:38:04 AM (2 years ago)
Author:
noisysocks
Message:

Adds the widgets block editor to widgets.php and customize.php

Moves the widgets block editor from Gutenberg into WordPress Core.

  • Adds @wordpress/edit-widgets, @wordpress/customize-widgets and @wordpress/widgets.
  • Modifies wp-admin/widgets.php to branch between the old editor and new editor depending on wp_use_widgets_block_editor().
  • Modifies WP_Customize_Widgets to branch between the old editor control and new editor control depending on wp_use_widgets_block_editor().

Fixes #51506.
Props isabel_brison, TimothyBlynJacobs, andraganescu, kevin940726, talldanwp.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/class-wp-customize-widgets.php

    r49108 r50996  
    119119        add_action( 'customize_preview_init', array( $this, 'customize_preview_init' ) );
    120120        add_filter( 'customize_refresh_nonces', array( $this, 'refresh_nonces' ) );
     121        add_filter( 'should_load_block_editor_scripts_and_styles', array( $this, 'should_load_block_editor_scripts_and_styles' ) );
    121122
    122123        add_action( 'dynamic_sidebar', array( $this, 'tally_rendered_widgets' ) );
    … …  
    368369    public function customize_register() {
    369370        global $wp_registered_widgets, $wp_registered_widget_controls, $wp_registered_sidebars;
     371
     372        $use_widgets_block_editor = wp_use_widgets_block_editor();
    370373
    371374        add_filter( 'sidebars_widgets', array( $this, 'preview_sidebars_widgets' ), 1 );
    … …  
    447450
    448451                    $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,
     452                        'title'      => $wp_registered_sidebars[ $sidebar_id ]['name'],
     453                        'priority'   => array_search( $sidebar_id, array_keys( $wp_registered_sidebars ), true ),
     454                        'panel'      => 'widgets',
     455                        'sidebar_id' => $sidebar_id,
    454456                    );
     457
     458                    if ( $use_widgets_block_editor ) {
     459                        $section_args['description'] = '';
     460                    } else {
     461                        $section_args['description'] = $wp_registered_sidebars[ $sidebar_id ]['description'];
     462                    }
    455463
    456464                    /**
    … …  
    468476                    $this->manager->add_section( $section );
    469477
    470                     $control           = new WP_Widget_Area_Customize_Control(
     478                    if ( $use_widgets_block_editor ) {
     479                        $control = new WP_Sidebar_Block_Editor_Control(
     480                            $this->manager,
     481                            $setting_id,
     482                            array(
     483                                'section'    => $section_id,
     484                                'sidebar_id' => $sidebar_id,
     485                            )
     486                        );
     487                    } else {
     488                        $control = new WP_Widget_Area_Customize_Control(
     489                            $this->manager,
     490                            $setting_id,
     491                            array(
     492                                'section'    => $section_id,
     493                                'sidebar_id' => $sidebar_id,
     494                                'priority'   => count( $sidebar_widget_ids ), // place 'Add Widget' and 'Reorder' buttons at end.
     495                            )
     496                        );
     497                    }
     498
     499                    $this->manager->add_control( $control );
     500
     501                    $new_setting_ids[] = $setting_id;
     502                }
     503            }
     504
     505            if ( ! $use_widgets_block_editor ) {
     506                // Add a control for each active widget (located in a sidebar).
     507                foreach ( $sidebar_widget_ids as $i => $widget_id ) {
     508
     509                    // Skip widgets that may have gone away due to a plugin being deactivated.
     510                    if ( ! $is_active_sidebar || ! isset( $wp_registered_widgets[ $widget_id ] ) ) {
     511                        continue;
     512                    }
     513
     514                    $registered_widget = $wp_registered_widgets[ $widget_id ];
     515                    $setting_id        = $this->get_setting_id( $widget_id );
     516                    $id_base           = $wp_registered_widget_controls[ $widget_id ]['id_base'];
     517
     518                    $control = new WP_Widget_Form_Customize_Control(
    471519                        $this->manager,
    472520                        $setting_id,
    473521                        array(
    474                             'section'    => $section_id,
    475                             'sidebar_id' => $sidebar_id,
    476                             'priority'   => count( $sidebar_widget_ids ), // place 'Add Widget' and 'Reorder' buttons at end.
     522                            'label'          => $registered_widget['name'],
     523                            'section'        => $section_id,
     524                            'sidebar_id'     => $sidebar_id,
     525                            'widget_id'      => $widget_id,
     526                            'widget_id_base' => $id_base,
     527                            'priority'       => $i,
     528                            'width'          => $wp_registered_widget_controls[ $widget_id ]['width'],
     529                            'height'         => $wp_registered_widget_controls[ $widget_id ]['height'],
     530                            'is_wide'        => $this->is_wide_widget( $widget_id ),
    477531                        )
    478532                    );
    479                     $new_setting_ids[] = $setting_id;
    480 
    481533                    $this->manager->add_control( $control );
    482534                }
    483             }
    484 
    485             // Add a control for each active widget (located in a sidebar).
    486             foreach ( $sidebar_widget_ids as $i => $widget_id ) {
    487 
    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                 }
    492 
    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'];
    496 
    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 );
    513535            }
    514536        }
    … …  
    806828            sprintf( 'var _wpCustomizeWidgetsSettings = %s;', wp_json_encode( $settings ) )
    807829        );
     830
     831        // TODO: Update 'wp-customize-widgets' to not rely so much on things in
     832        // 'customize-widgets'. This will let us skip most of the above and not
     833        // enqueue 'customize-widgets' which saves bytes.
     834
     835        if ( wp_use_widgets_block_editor() ) {
     836            $block_editor_context = new WP_Block_Editor_Context();
     837
     838            $editor_settings = get_block_editor_settings( array(), $block_editor_context );
     839
     840            wp_add_inline_script(
     841                'wp-customize-widgets',
     842                sprintf(
     843                    'wp.domReady( function() {
     844                       wp.customizeWidgets.initialize( "widgets-customizer", %s );
     845                    } );',
     846                    wp_json_encode( $editor_settings )
     847                )
     848            );
     849
     850            // Preload server-registered block schemas.
     851            wp_add_inline_script(
     852                'wp-blocks',
     853                'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
     854            );
     855
     856            wp_add_inline_script(
     857                'wp-blocks',
     858                sprintf( 'wp.blocks.setCategories( %s );', wp_json_encode( get_block_categories( 'widgets-customizer' ) ) ),
     859                'after'
     860            );
     861
     862            wp_enqueue_script( 'wp-customize-widgets' );
     863            wp_enqueue_style( 'wp-customize-widgets' );
     864            wp_enqueue_script( 'wp-format-library' );
     865            wp_enqueue_style( 'wp-format-library' );
     866
     867            /** This action is documented in edit-form-blocks.php */
     868            do_action( 'enqueue_block_editor_assets' );
     869        }
    808870    }
    809871
    … …  
    889951            $args['transport']            = current_theme_supports( 'customize-selective-refresh-widgets' ) ? 'postMessage' : 'refresh';
    890952        } 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' );
     953            $id_base                      = $matches['id_base'];
     954            $args['sanitize_callback']    = function( $value ) use ( $id_base ) {
     955                return $this->sanitize_widget_instance( $value, $id_base );
     956            };
     957            $args['sanitize_js_callback'] = function( $value ) use ( $id_base ) {
     958                return $this->sanitize_widget_js_instance( $value, $id_base );
     959            };
    893960            $args['transport']            = $this->is_widget_selective_refreshable( $matches['id_base'] ) ? 'postMessage' : 'refresh';
    894961        }
    … …  
    11101177
    11111178    /**
     1179     * Tells the script loader to load the scripts and styles of custom blocks
     1180     * if the widgets block editor is enabled.
     1181     *
     1182     * @since 5.8.0
     1183     *
     1184     * @param bool $is_block_editor_screen Current decision about loading block assets.
     1185     * @return bool Filtered decision about loading block assets.
     1186     */
     1187    public function should_load_block_editor_scripts_and_styles( $is_block_editor_screen ) {
     1188        if ( wp_use_widgets_block_editor() ) {
     1189            return true;
     1190        }
     1191
     1192        return $is_block_editor_screen;
     1193    }
     1194
     1195    /**
    11121196     * When previewing, ensures the proper previewing widgets are used.
    11131197     *
    … …  
    13151399     *
    13161400     * @param array $value Widget instance to sanitize.
     1401     * @param string $id_base Base of the ID of the widget being sanitized.
    13171402     * @return array|void Sanitized widget instance.
    13181403     */
    1319     public function sanitize_widget_instance( $value ) {
     1404    public function sanitize_widget_instance( $value, $id_base = null ) {
     1405        global $wp_widget_factory;
     1406
    13201407        if ( array() === $value ) {
    1321             return $value;
    1322         }
    1323 
    1324         if ( empty( $value['is_widget_customizer_js_value'] )
    1325             || empty( $value['instance_hash_key'] )
    1326             || empty( $value['encoded_serialized_instance'] ) ) {
     1408            return;
     1409        }
     1410
     1411        if ( isset( $value['raw_instance'] ) && $id_base && wp_use_widgets_block_editor() ) {
     1412            $widget_object = $wp_widget_factory->get_widget_object( $id_base );
     1413            if ( ! empty( $widget_object->widget_options['show_instance_in_rest'] ) ) {
     1414                return $value['raw_instance'];
     1415            }
     1416        }
     1417
     1418        if (
     1419            empty( $value['is_widget_customizer_js_value'] ) ||
     1420            empty( $value['instance_hash_key'] ) ||
     1421            empty( $value['encoded_serialized_instance'] )
     1422        ) {
    13271423            return;
    13281424        }
    … …  
    13511447     *
    13521448     * @param array $value Widget instance to convert to JSON.
     1449     * @param string $id_base Base of the ID of the widget being sanitized.
    13531450     * @return array JSON-converted widget instance.
    13541451     */
    1355     public function sanitize_widget_js_instance( $value ) {
     1452    public function sanitize_widget_js_instance( $value, $id_base = null ) {
     1453        global $wp_widget_factory;
     1454
    13561455        if ( empty( $value['is_widget_customizer_js_value'] ) ) {
    13571456            $serialized = serialize( $value );
    13581457
    1359             $value = array(
     1458            $js_value = array(
    13601459                'encoded_serialized_instance'   => base64_encode( $serialized ),
    13611460                'title'                         => empty( $value['title'] ) ? '' : $value['title'],
    … …  
    13631462                'instance_hash_key'             => $this->get_instance_hash_key( $serialized ),
    13641463            );
    1365         }
     1464
     1465            if ( $id_base && wp_use_widgets_block_editor() ) {
     1466                $widget_object = $wp_widget_factory->get_widget_object( $id_base );
     1467                if ( ! empty( $widget_object->widget_options['show_instance_in_rest'] ) ) {
     1468                    $js_value['raw_instance'] = (object) $value;
     1469                }
     1470            }
     1471
     1472            return $js_value;
     1473        }
     1474
    13661475        return $value;
    13671476    }
    … …  
    14331542            }
    14341543
    1435             $instance = $this->sanitize_widget_instance( $sanitized_widget_setting );
     1544            $instance = $this->sanitize_widget_instance( $sanitized_widget_setting, $parsed_id['id_base'] );
    14361545            if ( is_null( $instance ) ) {
    14371546                $this->stop_capturing_option_updates();
    … …  
    14991608         * instead of the default widget instance value (an empty array).
    15001609         */
    1501         $this->manager->set_post_value( $setting_id, $this->sanitize_widget_js_instance( $instance ) );
     1610        $this->manager->set_post_value( $setting_id, $this->sanitize_widget_js_instance( $instance, $parsed_id['id_base'] ) );
    15021611
    15031612        // Obtain the widget control with the updated instance in place.
    … …  
    15721681
    15731682        $form     = $updated_widget['form'];
    1574         $instance = $this->sanitize_widget_js_instance( $updated_widget['instance'] );
     1683        $instance = $this->sanitize_widget_js_instance( $updated_widget['instance'], $id_base );
    15751684
    15761685        wp_send_json_success( compact( 'form', 'instance' ) );
Note: See TracChangeset for help on using the changeset viewer.