To start colors should be defined for the theme in the variables.scss file.
Cover block with solid primary background
Cover block with custom gradient background
For example…
$color_primary: $color_blue; $color_secondary: $color_green; $color_tertiary: $color_orange; $color_quaternary: $color_red;
Then in the template-colors.php file the hex color codes should be updated to reflect the colors the new variables generate. A page such a this is helpful.
<?php // Multidimensional array global $theme_colors; $theme_colors = array( "primary" => array( "slug" => "primary", "hex" => "#0368c8", "label" => "Primary" ), "primary-light" => array( "slug" => "primary-light", "hex" => "#b3d2ef", "label" => "Primary Light" ), "primary-dark" => array( "slug" => "primary-dark", "hex" => "#02498c", "label" => "Primary Dark" ), "secondary" => array( "slug" => "secondary", "hex" => "#007765", "label" => "Secondary" ), "secondary-light" => array( "slug" => "secondary-light", "hex" => "#b3d6d1", "label" => "Secondary light" ), "secondary-dark" => array( "slug" => "secondary-dark", "hex" => "#005347", "label" => "Secondary Dark" ), "tertiary" => array( "slug" => "tertiary", "hex" => "#d17800", "label" => "Tertiary" ), "tertiary-light" => array( "slug" => "tertiary-light", "hex" => "#f1d7b3", "label" => "Tertiary Light" ), "tertiary-dark" => array( "slug" => "tertiary-dark", "hex" => "#925400", "label" => "Tertiary Dark" ), "quaternary" => array( "slug" => "quaternary", "hex" => "#b60539", "label" => "Quaternary" ), "quaternary-light" => array( "slug" => "quaternary-light", "hex" => "#e9b4c4", "label" => "Quaternary Light" ), "quaternary-dark" => array( "slug" => "quaternary-dark", "hex" => "#7f0428", "label" => "Quaternary Dark" ), "white" => array( "slug" => "white", "hex" => "#ffffff", "label" => "white" ), "gray-light" => array( "slug" => "gray-light", "hex" => "#d1d1d1", "label" => "Gray Light" ), "gray" => array( "slug" => "gray", "hex" => "#676767", "label" => "Gray" ), "gray-dark" => array( "slug" => "gray-dark", "hex" => "#484848", "label" => "Gray Dark" ), "black" => array( "slug" => "black", "hex" => "#000000", "label" => "Black" ) );
All the options should now appear in the editors color picker options.
Gradients
Start by declaring the gradients that should appear as options in editor.
<?php function theme_custom_gradients() { add_theme_support('editor-gradient-presets', array( array( 'name' => __('Primary', 'gomo'), 'gradient' => 'linear-gradient(135deg, rgba(91,169,214,1) 0%, rgba(27,106,175,1) 100%)', 'slug' => 'primary' ), array( 'name' => __('Secondary', 'gomo'), 'gradient' => 'linear-gradient(135deg, rgba(91,169,214,0.5) 0%, rgba(91,169,214,0) 100%)', 'slug' => 'secondary' ), )); } add_action('after_setup_theme', 'theme_custom_gradients');
All the options should now appear in the editors color picker options but the styles must still be added for each gradient in colors.scss file.
$gradients-list:( primary: linear-gradient(135deg, rgba(91,169,214,1) 0%, rgba(27,106,175,1) 100%), secondary: linear-gradient(135deg, rgba(91,169,214,0.5) 0%, rgba(91,169,214,0) 100%) ); @each $key,$val in $gradients-list{ :root { .has-#{$key}-gradient-background { background: #{$val}; } } }