Make WordPress Core


Ignore:
Timestamp:
12/14/2018 01:45:57 AM (8 years ago)
Author:
desrosj
Message:

Twenty Ten: Add styles and support for the new block-based editor.

This update adds styles and theme support related to the new block-based editor to enhance the experience of using it with Twenty Ten.

These are the specific changes made to this theme:

  • Add blocks.css, to style blocks on the front end, to make sure they match the theme’s existing HTML element styles.
  • Add editor-blocks.css to style blocks in the editor, to make sure they match the theme’s existing HTML element styles.
  • Add theme support for editor-styles, to pull the existing editor stylesheet into the new editor.
  • Add theme support for wp-block-styles, to load the default block styles on the front end.
  • Add theme support for editor-color-palette, to load a color palette based on the theme’s color scheme into the block-based editor.

Props nielslange, crunnells, laurelfulford, davidakennedy.

Merges [43793] to trunk.

Fixes #45038.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk

  • trunk/src/wp-content/themes/twentyten/functions.php

    r43571 r44137  
    7676                // This theme styles the visual editor with editor-style.css to match the theme style.
    7777                add_editor_style();
     78
     79                // Load regular editor styles into the new block-based editor.
     80                add_theme_support( 'editor-styles' );
     81
     82                // Load default block styles.
     83                add_theme_support( 'wp-block-styles' );
     84
     85                // Add support for custom color scheme.
     86                add_theme_support(
     87                        'editor-color-palette',
     88                        array(
     89                                array(
     90                                        'name'  => __( 'Blue', 'twentyten' ),
     91                                        'slug'  => 'blue',
     92                                        'color' => '#0066cc',
     93                                ),
     94                                array(
     95                                        'name'  => __( 'Black', 'twentyten' ),
     96                                        'slug'  => 'black',
     97                                        'color' => '#000',
     98                                ),
     99                                array(
     100                                        'name'  => __( 'Medium Gray', 'twentyten' ),
     101                                        'slug'  => 'medium-gray',
     102                                        'color' => '#666',
     103                                ),
     104                                array(
     105                                        'name'  => __( 'Light Gray', 'twentyten' ),
     106                                        'slug'  => 'light-gray',
     107                                        'color' => '#f1f1f1',
     108                                ),
     109                                array(
     110                                        'name'  => __( 'White', 'twentyten' ),
     111                                        'slug'  => 'white',
     112                                        'color' => '#fff',
     113                                ),
     114                        )
     115                );
    78116
    79117                // Post Format support. You can also use the legacy "gallery" or "asides" (note the plural) categories.
     
    656694}
    657695add_filter( 'widget_tag_cloud_args', 'twentyten_widget_tag_cloud_args' );
     696
     697/**
     698 * Enqueue scripts and styles for front end.
     699 *
     700 * @since Twenty Ten 2.6
     701 */
     702function twentyten_scripts_styles() {
     703        // Theme block stylesheet.
     704        wp_enqueue_style( 'twentyten-block-style', get_template_directory_uri() . '/blocks.css', array(), '20181018' );
     705}
     706add_action( 'wp_enqueue_scripts', 'twentyten_scripts_styles' );
     707
     708/**
     709 * Enqueue editor styles for Gutenberg
     710 *
     711 * @since Twenty Ten 2.6
     712 */
     713function twentyten_block_editor_styles() {
     714        // Block styles.
     715        wp_enqueue_style( 'twentyten-block-editor-style', get_template_directory_uri() . '/editor-blocks.css' );
     716}
     717add_action( 'enqueue_block_editor_assets', 'twentyten_block_editor_styles' );
     718
     719
Note: See TracChangeset for help on using the changeset viewer.