tcmulder / aquamin

Aquamin WordPress Theme
3 stars 1 forks source link

Fix --c-bg for editor. #144

Open tcmulder opened 2 weeks ago

tcmulder commented 2 weeks ago

You can find this implemented in Overture Promotions's core.php. Essentially, the code wasn't loaded in the iframe-ed editor, but this forced it to:

/**
 * Allow access to current background color var
 *
 * This let's you do things like:
 *  .thing {
*       border: 1px solid var(--c-bg);
*   }
* So, for .thing.has-0-000-background-color
* you'll get a black border, and for
* .thing.has-0-900-background-color you'll
* get a white border, matching their respective
* backgrounds. It's often quite useful.
*/
function aquamin_bg_css() {
    $style_html = '';
    $colors = wp_get_global_settings( array( 'color', 'palette', 'theme' ) );
    $site_background = wp_get_global_styles( array( 'color', 'background' ) );
    if ( $colors ) {
        $styles = array( sprintf(
            ':root,.is-root-container{--c-bg:%s;}/*%s*/', $site_background, __( 'Value of theme.json\'s styles.color.background' ) )
        );
        foreach( $colors as $color ) {
            array_push( $styles, sprintf(
                '.has-%s-background-color{--c-bg:var(--c-%s)}/*%s*/',
                $color[ 'slug' ],
                $color[ 'slug' ],
                $color[ 'name' ]
            ) );
        }
        $style_html = implode( "\n", $styles );
    }
    return $style_html;
}

add_action( 'wp_enqueue_scripts', 'aquamin_bg_front_end', 50 );
function aquamin_bg_front_end() {
    $style_html = aquamin_bg_css();
    if ( $style_html ) {
        wp_add_inline_style( 'aquamin-style', $style_html );
    }
}

add_filter( 'block_editor_settings_all', 'aquamin_bg_back_end', 10,2 );
function aquamin_bg_back_end( $editor_settings, $editor_context ) {
    $style_html = aquamin_bg_css();
    if ( $style_html ) {
        $editor_settings["styles"][] = array( "css" => $style_html );
    }
    return $editor_settings;
}