Jorge Costa 9:34 pm on March 2, 2020
Tags: , ,   

New gradient theme APIs

WordPress 5.4 lets your theme use gradients as backgrounds in Cover and Buttons blocks, courtesy of some new theme APIs. You’ll notice they parallel the approaches of the colors and fonts APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways..

Configure the predefined set of gradients

Start by configuring a predefined set of gradients. Do that with the theme-support option editor-gradient-presets, then pass an array that represents the gradient set:

add_theme_support(
    'editor-gradient-presets',
    array(
        array(
            'name'     => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
            'slug'     => 'vivid-cyan-blue-to-vivid-purple'
        ),
        array(
            'name'     => __( 'Vivid green cyan to vivid cyan blue', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)',
            'slug'     =>  'vivid-green-cyan-to-vivid-cyan-blue',
        ),
        array(
            'name'     => __( 'Light green cyan to vivid green cyan', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
            'slug'     => 'light-green-cyan-to-vivid-green-cyan',
        ),
        array(
            'name'     => __( 'Luminous vivid amber to luminous vivid orange', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
            'slug'     => 'luminous-vivid-amber-to-luminous-vivid-orange',
        ),
        array(
            'name'     => __( 'Luminous vivid orange to vivid red', 'themeLangDomain' ),
            'gradient' => 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
            'slug'     => 'luminous-vivid-orange-to-vivid-red',
        ),
    )
);

For more, see https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-gradient-presets.

Disable custom gradients

You can also disable custom gradients:

add_theme_support( 'disable-custom-gradients' );

This call limits your users to the default gradients you defined in the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor or that you added to the editor-gradient-presets theme support setting.

For more, see https://developer.wordpress.org/block-editor/developers/themes/theme-support/#disabling-custom-gradients.

Disable gradient functionality

You can also use these APIs to shut down gradient functionality altogether. Just combine these two calls:

add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-gradient-presets', array() );

#5-4, #block-editor, #dev-notes