| @@ -1,7 +1,7 @@ | ||
| 1 | 1 | <?php |
| 2 | 2 | /** |
| 3 | - * Bootstraping the Gutenberg widgets page. | |
| 3 | + * Bootstrapping the Gutenberg widgets page. | |
| 4 | 4 | * |
| 5 | 5 | * @package gutenberg |
| 6 | 6 | */ |
| 7 | 7 | |
| @@ -8,22 +8,14 @@ | ||
| 8 | 8 | /** |
| 9 | 9 | * The main entry point for the Gutenberg widgets page. |
| 10 | 10 | * |
| 11 | 11 | * @since 5.2.0 |
| 12 | - * | |
| 13 | - * @param string $page The page name the function is being called for, `'gutenberg_customizer'` for the Customizer. | |
| 14 | 12 | */ |
| 15 | -function the_gutenberg_widgets( $page = 'gutenberg_page_gutenberg-widgets' ) { | |
| 13 | +function the_gutenberg_widgets() { | |
| 16 | 14 | ?> |
| 17 | 15 | <div |
| 18 | 16 | id="widgets-editor" |
| 19 | - class="blocks-widgets-container | |
| 20 | - <?php | |
| 21 | - echo 'gutenberg_customizer' === $page | |
| 22 | - ? ' is-in-customizer' | |
| 23 | - : ''; | |
| 24 | - ?> | |
| 25 | - " | |
| 17 | + class="blocks-widgets-container" | |
| 26 | 18 | > |
| 27 | 19 | </div> |
| 28 | 20 | <?php |
| 29 | 21 | } |
| @@ -28,8 +20,52 @@ | ||
| 28 | 20 | <?php |
| 29 | 21 | } |
| 30 | 22 | |
| 31 | 23 | /** |
| 24 | + * Creates an array of theme styles to load into the block editor. | |
| 25 | + * | |
| 26 | + * @since 5.8.0 | |
| 27 | + * | |
| 28 | + * @global array $editor_styles | |
| 29 | + * | |
| 30 | + * @return array | |
| 31 | + */ | |
| 32 | +function gutenberg_get_block_editor_theme_styles() { | |
| 33 | + global $editor_styles; | |
| 34 | + | |
| 35 | + $styles = array( | |
| 36 | + array( | |
| 37 | + 'css' => 'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }', | |
| 38 | + '__unstableType' => 'core', | |
| 39 | + ), | |
| 40 | + ); | |
| 41 | + if ( $editor_styles && current_theme_supports( 'editor-styles' ) ) { | |
| 42 | + foreach ( $editor_styles as $style ) { | |
| 43 | + if ( preg_match( '~^(https?:)?//~', $style ) ) { | |
| 44 | + $response = wp_remote_get( $style ); | |
| 45 | + if ( ! is_wp_error( $response ) ) { | |
| 46 | + $styles[] = array( | |
| 47 | + 'css' => wp_remote_retrieve_body( $response ), | |
| 48 | + '__unstableType' => 'theme', | |
| 49 | + ); | |
| 50 | + } | |
| 51 | + } else { | |
| 52 | + $file = get_theme_file_path( $style ); | |
| 53 | + if ( is_file( $file ) ) { | |
| 54 | + $styles[] = array( | |
| 55 | + 'css' => file_get_contents( $file ), | |
| 56 | + 'baseURL' => get_theme_file_uri( $style ), | |
| 57 | + '__unstableType' => 'theme', | |
| 58 | + ); | |
| 59 | + } | |
| 60 | + } | |
| 61 | + } | |
| 62 | + } | |
| 63 | + | |
| 64 | + return $styles; | |
| 65 | +} | |
| 66 | + | |
| 67 | +/** | |
| 32 | 68 | * Initialize the Gutenberg widgets page. |
| 33 | 69 | * |
| 34 | 70 | * @since 5.2.0 |
| 35 | 71 | * |
| @@ -35,78 +71,44 @@ | ||
| 35 | 71 | * |
| 36 | 72 | * @param string $hook Page. |
| 37 | 73 | */ |
| 38 | 74 | function gutenberg_widgets_init( $hook ) { |
| 39 | - if ( 'gutenberg_page_gutenberg-widgets' !== $hook && 'gutenberg_customizer' !== $hook ) { | |
| 40 | - return; | |
| 75 | + if ( ! in_array( $hook, array( 'appearance_page_gutenberg-widgets' ), true ) ) { | |
| 76 | + return; | |
| 41 | 77 | } |
| 42 | 78 | |
| 43 | - $initializer_name = 'gutenberg_page_gutenberg-widgets' === $hook | |
| 44 | - ? 'initialize' | |
| 45 | - : 'customizerInitialize'; | |
| 79 | + add_filter( 'admin_body_class', 'gutenberg_widgets_editor_add_admin_body_classes' ); | |
| 46 | 80 | |
| 47 | - // Media settings. | |
| 48 | - $max_upload_size = wp_max_upload_size(); | |
| 49 | - if ( ! $max_upload_size ) { | |
| 50 | - $max_upload_size = 0; | |
| 51 | - } | |
| 52 | - | |
| 53 | - /** This filter is documented in wp-admin/includes/media.php */ | |
| 54 | - $image_size_names = apply_filters( | |
| 55 | - 'image_size_names_choose', | |
| 56 | - array( | |
| 57 | - 'thumbnail' => __( 'Thumbnail', 'gutenberg' ), | |
| 58 | - 'medium' => __( 'Medium', 'gutenberg' ), | |
| 59 | - 'large' => __( 'Large', 'gutenberg' ), | |
| 60 | - 'full' => __( 'Full Size', 'gutenberg' ), | |
| 61 | - ) | |
| 81 | + $widgets_editor_context = new WP_Block_Editor_Context(); | |
| 82 | + $settings = array_merge( | |
| 83 | + gutenberg_get_default_block_editor_settings(), | |
| 84 | + gutenberg_get_legacy_widget_settings(), | |
| 85 | + array( 'styles' => gutenberg_get_block_editor_theme_styles() ) | |
| 62 | 86 | ); |
| 63 | 87 | |
| 64 | - $available_image_sizes = array(); | |
| 65 | - foreach ( $image_size_names as $image_size_slug => $image_size_name ) { | |
| 66 | - $available_image_sizes[] = array( | |
| 67 | - 'slug' => $image_size_slug, | |
| 68 | - 'name' => $image_size_name, | |
| 69 | - ); | |
| 70 | - } | |
| 88 | + // This purposefully does not rely on apply_filters( 'block_editor_settings', $settings, null ); | |
| 89 | + // Applying that filter would bring over multitude of features from the post editor, some of which | |
| 90 | + // may be undesirable. Instead of using that filter, we simply pick just the settings that are needed. | |
| 91 | + $settings = gutenberg_experimental_global_styles_settings( $settings ); | |
| 92 | + $settings = gutenberg_extend_block_editor_styles( $settings ); | |
| 71 | 93 | |
| 72 | - $settings = array_merge( | |
| 94 | + gutenberg_initialize_editor( | |
| 95 | + 'widgets_editor', | |
| 96 | + 'edit-widgets', | |
| 73 | 97 | array( |
| 74 | - 'disableCustomColors' => get_theme_support( 'disable-custom-colors' ), | |
| 75 | - 'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ), | |
| 76 | - 'imageSizes' => $available_image_sizes, | |
| 77 | - 'isRTL' => is_rtl(), | |
| 78 | - 'maxUploadFileSize' => $max_upload_size, | |
| 79 | - ), | |
| 80 | - gutenberg_get_legacy_widget_settings() | |
| 81 | - ); | |
| 82 | - | |
| 83 | - list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' ); | |
| 84 | - list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' ); | |
| 85 | - | |
| 86 | - if ( false !== $color_palette ) { | |
| 87 | - $settings['colors'] = $color_palette; | |
| 88 | - } | |
| 89 | - | |
| 90 | - if ( false !== $font_sizes ) { | |
| 91 | - $settings['fontSizes'] = $font_sizes; | |
| 92 | - } | |
| 93 | - | |
| 94 | - wp_add_inline_script( | |
| 95 | - 'wp-edit-widgets', | |
| 96 | - sprintf( | |
| 97 | - 'wp.domReady( function() { | |
| 98 | - wp.editWidgets.%s( "widgets-editor", %s ); | |
| 99 | - } );', | |
| 100 | - $initializer_name, | |
| 101 | - wp_json_encode( gutenberg_experiments_editor_settings( $settings ) ) | |
| 98 | + 'preload_paths' => array( | |
| 99 | + array( '/wp/v2/media', 'OPTIONS' ), | |
| 100 | + '/wp/v2/sidebars?context=edit&per_page=-1', | |
| 101 | + '/wp/v2/widgets?context=edit&per_page=-1&_embed=about', | |
| 102 | + ), | |
| 103 | + 'editor_settings' => $settings, | |
| 102 | 104 | ) |
| 103 | 105 | ); |
| 104 | 106 | |
| 105 | - // Preload server-registered block schemas. | |
| 106 | 107 | wp_add_inline_script( |
| 107 | 108 | 'wp-blocks', |
| 108 | - 'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');' | |
| 109 | + sprintf( 'wp.blocks.setCategories( %s );', wp_json_encode( gutenberg_get_block_categories( $widgets_editor_context ) ) ), | |
| 110 | + 'after' | |
| 109 | 111 | ); |
| 110 | 112 | |
| 111 | 113 | wp_enqueue_script( 'wp-edit-widgets' ); |
| 112 | 114 | wp_enqueue_script( 'admin-widgets' ); |
| @@ -112,6 +114,93 @@ | ||
| 112 | 114 | wp_enqueue_script( 'admin-widgets' ); |
| 113 | 115 | wp_enqueue_script( 'wp-format-library' ); |
| 114 | 116 | wp_enqueue_style( 'wp-edit-widgets' ); |
| 115 | 117 | wp_enqueue_style( 'wp-format-library' ); |
| 118 | + do_action( 'enqueue_block_editor_assets' ); | |
| 116 | 119 | } |
| 117 | 120 | add_action( 'admin_enqueue_scripts', 'gutenberg_widgets_init' ); |
| 121 | + | |
| 122 | +/** | |
| 123 | + * Tells the script loader to load the scripts and styles of custom block on widgets editor screen. | |
| 124 | + * | |
| 125 | + * @param bool $is_block_editor_screen Current decision about loading block assets. | |
| 126 | + * @return bool Filtered decision about loading block assets. | |
| 127 | + */ | |
| 128 | +function gutenberg_widgets_editor_load_block_editor_scripts_and_styles( $is_block_editor_screen ) { | |
| 129 | + if ( is_callable( 'get_current_screen' ) && get_current_screen() && 'appearance_page_gutenberg-widgets' === get_current_screen()->base ) { | |
| 130 | + return true; | |
| 131 | + } | |
| 132 | + | |
| 133 | + return $is_block_editor_screen; | |
| 134 | +} | |
| 135 | + | |
| 136 | +add_filter( 'should_load_block_editor_scripts_and_styles', 'gutenberg_widgets_editor_load_block_editor_scripts_and_styles' ); | |
| 137 | + | |
| 138 | +/** | |
| 139 | + * Adds admin classes necessary for the block-based widgets screen. | |
| 140 | + * | |
| 141 | + * - Adds `block-editor-page` editor body class to allow directly styling the admin pages that are based on the block editor. | |
| 142 | + * - Shows responsive embeds correctly on the widgets screen by adding the `wp-embed-responsive` class. | |
| 143 | + * | |
| 144 | + * @param string $classes existing admin body classes. | |
| 145 | + * | |
| 146 | + * @return string admin body classes including the `block-editor-page` and `wp-embed-responsive` classes. | |
| 147 | + */ | |
| 148 | +function gutenberg_widgets_editor_add_admin_body_classes( $classes ) { | |
| 149 | + return "$classes block-editor-page wp-embed-responsive"; | |
| 150 | +} | |
| 151 | + | |
| 152 | +/** | |
| 153 | + * Emulates the Widgets screen `admin_print_styles` when at the block editor | |
| 154 | + * screen. | |
| 155 | + */ | |
| 156 | +function gutenberg_block_editor_admin_print_styles() { | |
| 157 | + if ( is_callable( 'get_current_screen' ) && 'appearance_page_gutenberg-widgets' === get_current_screen()->base ) { | |
| 158 | + /** This action is documented in wp-admin/admin-footer.php */ | |
| 159 | + // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores | |
| 160 | + do_action( 'admin_print_styles-widgets.php' ); | |
| 161 | + } | |
| 162 | +} | |
| 163 | +add_action( 'admin_print_styles', 'gutenberg_block_editor_admin_print_styles' ); | |
| 164 | + | |
| 165 | +/** | |
| 166 | + * Emulates the Widgets screen `admin_print_scripts` when at the block editor | |
| 167 | + * screen. | |
| 168 | + */ | |
| 169 | +function gutenberg_block_editor_admin_print_scripts() { | |
| 170 | + if ( is_callable( 'get_current_screen' ) && 'appearance_page_gutenberg-widgets' === get_current_screen()->base ) { | |
| 171 | + /** This action is documented in wp-admin/includes/ajax-actions.php */ | |
| 172 | + do_action( 'load-widgets.php' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores | |
| 173 | + /** This action is documented in wp-admin/includes/ajax-actions.php */ | |
| 174 | + do_action( 'widgets.php' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores | |
| 175 | + /** This action is documented in wp-admin/widgets.php */ | |
| 176 | + do_action( 'sidebar_admin_setup' ); | |
| 177 | + // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores | |
| 178 | + do_action( 'admin_print_scripts-widgets.php' ); | |
| 179 | + } | |
| 180 | +} | |
| 181 | +add_action( 'admin_print_scripts', 'gutenberg_block_editor_admin_print_scripts' ); | |
| 182 | + | |
| 183 | +/** | |
| 184 | + * Emulates the Widgets screen `admin_print_footer_scripts` when at the block | |
| 185 | + * editor screen. | |
| 186 | + */ | |
| 187 | +function gutenberg_block_editor_admin_print_footer_scripts() { | |
| 188 | + if ( is_callable( 'get_current_screen' ) && 'appearance_page_gutenberg-widgets' === get_current_screen()->base ) { | |
| 189 | + /** This action is documented in wp-admin/admin-footer.php */ | |
| 190 | + // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores | |
| 191 | + do_action( 'admin_print_footer_scripts-widgets.php' ); | |
| 192 | + } | |
| 193 | +} | |
| 194 | +add_action( 'admin_print_footer_scripts', 'gutenberg_block_editor_admin_print_footer_scripts' ); | |
| 195 | + | |
| 196 | +/** | |
| 197 | + * Emulates the Widgets screen `admin_footer` when at the block editor screen. | |
| 198 | + */ | |
| 199 | +function gutenberg_block_editor_admin_footer() { | |
| 200 | + if ( is_callable( 'get_current_screen' ) && 'appearance_page_gutenberg-widgets' === get_current_screen()->base ) { | |
| 201 | + /** This action is documented in wp-admin/admin-footer.php */ | |
| 202 | + // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores | |
| 203 | + do_action( 'admin_footer-widgets.php' ); | |
| 204 | + } | |
| 205 | +} | |
| 206 | +add_action( 'admin_footer', 'gutenberg_block_editor_admin_footer' ); | |
