Skip to content

Instantly share code, notes, and snippets.

@melissajclark

melissajclark/block-editor-admin.css

Created November 20, 2024 19:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save melissajclark/536b41c88db2c93657f2e681b536918b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save melissajclark/536b41c88db2c93657f2e681b536918b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. melissajclark created this gist Nov 20, 2024.
    60 changes: 60 additions & 0 deletions block-editor-admin.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    /* CSS for different templates, some examples below */

    .post-type-page.sky-full-width .editor-styles-wrapper {
    padding-bottom: var(--wp--preset--spacing--80);
    background-color: var(--wp--preset--color--sky);
    background-image: url("../images/bg-noise-multiply@2x.png");
    background-size: 300px 300px;
    }

    .post-type-page:not(.default-page-template) .editor-styles-wrapper .nt-page__content-wrap {
    position: static;
    top: auto;
    margin-top: var(--wp--preset--spacing--80);
    }

    .post-type-page.default-page-template .editor-styles-wrapper {
    background-color: var(--wp--preset--color--sky);
    background-image: url("../images/bg-noise-multiply@2x.png");
    background-size: 300px 300px;
    padding-bottom: var(--wp--preset--spacing--80);
    }

    .post-type-page.default-page-template .editor-styles-wrapper .block-editor-block-list__layout.is-root-container {
    padding-bottom: var(--wp--preset--spacing--80);
    }

    .post-type-page.default-page-template .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .alignfull,
    .post-type-page.default-page-template .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .alignwide {
    max-width: 736px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }

    .post-type-page .editor-post-title.wp-block-post-title,
    .post-type-page .is-style-h1,
    .post-type-page .wp-block-heading.is-style-h1,
    .post-type-page .editor-styles-wrapper h1 {
    font-size: var(--wp--custom--font-size--page-title);
    font-family: var(--wp--custom--font-family--body);
    letter-spacing: var(--wp--custom--letter-spacing--page-title);
    line-height: var(--wp--custom--line-height--page-title);
    font-weight: 700;
    }

    .post-type-page .editor-styles-wrapper h3,
    .post-type-page .is-style-h3,
    .post-type-page h2.wp-block-heading.is-style-h3,
    .post-type-page .wp-block-heading.is-style-h3 {
    font-weight: 700;
    font-size: var(--wp--custom--heading-size--4);
    letter-spacing: var(--wp--custom--letter-spacing--h-4);
    }

    .post-type-page .editor-styles-wrapper h3 a,
    .post-type-page .is-style-h3 a,
    .post-type-page h2.wp-block-heading.is-style-h3 a,
    .post-type-page .wp-block-heading.is-style-h3 a {
    border-bottom: none;
    }
    68 changes: 68 additions & 0 deletions functions.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    <?php
    /**
    * Admin body classes
    *
    * @link https://developer.wordpress.org/reference/hooks/admin_body_class/
    * @link https://kellenmace.com/get-page-template-post-wordpress-admin/
    */

    function clientname_admin_body_classes( $classes ) {

    $classes .= ' client-name-admin';

    $clientname_current_template = get_post_meta( get_the_ID(), '_wp_page_template', true );
    $clientname_post_type = get_post_type();

    // posts
    if ( $clientname_post_type === 'post' ){

    if ( empty( $clientname_current_template ) || $clientname_current_template === 'default' || $clientname_current_template == 'single-no-ads.php' ) {

    $classes .= ' single-standard';

    } elseif ( $clientname_current_template === 'single-alternate.php' || $clientname_current_template === 'single-alternate-no-ads.php' ) {

    $classes .= ' single-alternate';
    }

    // pages
    } elseif ( $clientname_post_type === 'page' ) {

    if ( empty( $clientname_current_template ) || $clientname_current_template === 'default' ) {

    $classes .= ' default-page-template';

    } elseif ( $clientname_current_template === 'template-no-title-sky.php' ) {

    $classes .= ' full-width-template sky-full-width';

    } elseif ( $clientname_current_template === 'template-home.php' || $clientname_current_template === 'template-no-title.php' || $clientname_current_template === 'template-no-title-no-header-footer.php' ) {

    $classes .= ' full-width-template nt-noise-bg';

    }
    }

    return $classes;
    }

    add_filter( 'admin_body_class', 'clientname_admin_body_classes' );


    /**
    *
    * Admin stylesheet for styling different page/post templates
    *
    */

    function clientname_block_styles() {

    wp_enqueue_style(
    'client-name-editor-admin',
    get_stylesheet_directory_uri() . '/assets/css/block-editor-admin.css',
    array(),
    // false,
    filemtime( get_stylesheet_directory() . '/assets/css/block-editor-admin.css' )
    );
    }
    add_action( 'enqueue_block_editor_assets', 'clientname_block_styles' );