Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: migrate colors to generic ones [closes #19] #21

Closed
wants to merge 10 commits into from
Closed

chore: migrate colors to generic ones [closes #19] #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9e1fa0f
chore: adds starter content [closes #18]
abaicus Dec 8, 2022
556603c
chore: migrate colors to generic ones [closes #19]
abaicus Dec 8, 2022
7063b58
chore: add migration routine for style variations [closes #19]
abaicus Dec 8, 2022
2ec40c5
Merge branch 'development' into color-migrate
abaicus Dec 8, 2022
4e3010b
Merge pull request #48 from Codeinwp/development
HardeepAsrani Jul 3, 2023
6eb324b
Merge pull request #74 from Codeinwp/development
HardeepAsrani Nov 16, 2023
2bd6377
fix: fix color migration in editor
HardeepAsrani Nov 16, 2023
6ad45d8
Merge branch 'color-migrate' of https://github.com/Codeinwp/raft into…
HardeepAsrani Nov 16, 2023
10fc68d
fix: replace slugs in templates & patterns
HardeepAsrani Nov 16, 2023
89d46d4
fix: replace slug in posts query loop
HardeepAsrani Nov 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/css/src/blocks/_categories.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

li {
margin: 5px;
background-color: var(--wp--preset--color--raft-bg-alt);
background-color: var(--wp--preset--color--ti-bg-alt);
border-radius: 25px;
padding: 8px 24px;
}
Expand Down
2 changes: 1 addition & 1 deletion assets/css/src/blocks/_image.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ figure.wp-block-image {
figcaption {

@extend %figcaption;
color: var(--wp--preset--color--raft-fg);
color: var(--wp--preset--color--ti-fg);
opacity: 0.6;
}
}
Expand Down
4 changes: 2 additions & 2 deletions assets/css/src/blocks/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Overwrite the selector...
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
background: var(--wp--preset--color--raft-bg);
color: var(--wp--preset--color--raft-fg);
background: var(--wp--preset--color--ti-bg);
color: var(--wp--preset--color--ti-fg);
}

.wp-block-navigation__responsive-container.is-menu-open {
Expand Down
2 changes: 1 addition & 1 deletion assets/css/src/blocks/_post-terms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
a {
padding: 8px 24px;
margin: 5px;
background-color: var(--wp--preset--color--raft-bg-alt);
background-color: var(--wp--preset--color--ti-bg-alt);
border-radius: 25px;
}

Expand Down
6 changes: 3 additions & 3 deletions assets/css/src/blocks/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
}

.wp-block-search__button {
background: var(--wp--preset--color--raft-accent);
color: var(--wp--preset--color--raft-fg-alt);
border-color: var(--wp--preset--color--raft-accent);
background: var(--wp--preset--color--ti-accent);
color: var(--wp--preset--color--ti-fg-alt);
border-color: var(--wp--preset--color--ti-accent);
border-radius: 5px;
}
}
4 changes: 2 additions & 2 deletions assets/css/src/blocks/_table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.wp-block-table {

&.is-style-stripes tbody tr:nth-child(odd) {
background-color: var(--wp--preset--color--raft-bg-alt);
background-color: var(--wp--preset--color--ti-bg-alt);
}

thead {
Expand All @@ -14,7 +14,7 @@

figcaption {
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--raft-fg);
color: var(--wp--preset--color--ti-fg);
opacity: 0.6;
}
}
19 changes: 19 additions & 0 deletions assets/css/src/common/_color-migration.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
//.has-raft-fg-alt-color
//.has-raft-accent-background-color
$colors: (
raft-bg : ti-bg,
raft-fg: ti-fg,
raft-bg-alt: ti-bg-alt,
raft-fg-alt: ti-fg-alt,
raft-accent: ti-accent,
);

// remap color css variables to has-*-color and has-*-background-color
@each $raft, $generic in $colors {
.has-#{$raft}-color {
color: var(--wp--preset--color--#{$generic});
}
.has-#{$raft}-background-color {
background-color: var(--wp--preset--color--#{$generic});
}
}
1 change: 1 addition & 0 deletions assets/css/src/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

@import "common/generic";
@import "common/typography";
@import "common/color-migration";
@import "blocks/main";
@import "elements/main";
@import "editor/blocks/main";
Expand Down
12 changes: 6 additions & 6 deletions assets/css/src/elements/_extends.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
%input-base {
border-radius: 5px;
color: var(--wp--preset--color--raft-fg);
background: var(--wp--preset--color--raft-bg);
border: 2px solid var(--wp--preset--color--raft-fg);
color: var(--wp--preset--color--ti-fg);
background: var(--wp--preset--color--ti-bg);
border: 2px solid var(--wp--preset--color--ti-fg);
}

@mixin button-base {
Expand All @@ -17,7 +17,7 @@
%button {

@include button-base;
color: var(--wp--preset--color--raft-fg-alt);
background: var(--wp--preset--color--raft-accent);
border-color: var(--wp--preset--color--raft-accent);
color: var(--wp--preset--color--ti-fg-alt);
background: var(--wp--preset--color--ti-accent);
border-color: var(--wp--preset--color--ti-accent);
}
1 change: 1 addition & 0 deletions assets/css/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import "common/generic";
@import "common/typography";
@import "common/color-migration";
@import "common/vars";
@import "elements/main";
@import "blocks/main";
Expand Down
1 change: 1 addition & 0 deletions inc/Core.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ public function __construct() {
new Admin();
new Block_Patterns();
new Block_Styles();
new Migration();
}

/**
Expand Down
155 changes: 155 additions & 0 deletions inc/Migration.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
<?php
/**
* Migrations handler class.
*
* @author Themeisle
* @package raft
* @since 1.0.6
*/

namespace Raft;

/**
* Class Migration
*
* @package raft
*/
class Migration {
/**
* Global styles post id.
*
* @var int
*/
private $global_styles_post_id = 0;

/**
* Global styles data.
*
* @var string
*/
private $global_styles_data;

const MIGRATION_FLAGS = array(
'colors' => 'raft_colors_migration',
);

/**
* Migration Constructor
*/
public function __construct() {
if ( $this->was_migrated( 'colors' ) ) {
return;
}

$this->setup_properties();

add_action( 'init', array( $this, 'migrate_old_colors' ) );
}


/**
* Setup the properties.
*
* @return void
*/
private function setup_properties() {
$args = array(
'posts_per_page' => 1,
'orderby' => 'date',
'order' => 'desc',
'post_type' => 'wp_global_styles',
'post_status' => 'publish',
'ignore_sticky_posts' => true,
'no_found_rows' => true,
'tax_query' => array( // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query
array(
'taxonomy' => 'wp_theme',
'field' => 'name',
'terms' => 'raft',
),
),
);

$global_style_query = new \WP_Query();
$recent_posts = $global_style_query->query( $args );

if ( empty( $recent_posts ) ) {
return;
}

$this->global_styles_data = json_decode( $recent_posts[0]->post_content, true );
$this->global_styles_post_id = $recent_posts[0]->ID;
}

/**
* Migrate the old color slugs.
*
* @return void
*/
public function migrate_old_colors() {
if ( $this->was_migrated( 'colors' ) ) {
return;
}

if ( 0 === $this->global_styles_post_id || empty( $this->global_styles_data ) ) {
return;
}

if (
! isset( $this->global_styles_data['settings'] ) ||
! isset( $this->global_styles_data['settings']['color'] ) ||
! isset( $this->global_styles_data['settings']['color']['palette'] ) ||
! isset( $this->global_styles_data['settings']['color']['palette']['theme'] )
) {
return;
}

$colors = $this->global_styles_data['settings']['color']['palette']['theme'];

array_walk(
$colors,
function ( &$color ) {
$color['slug'] = str_replace( 'raft-', 'ti-', $color['slug'] );

return $color;
}
);

$this->global_styles_data['settings']['color']['palette']['theme'] = $colors;

$update = wp_update_post(
array(
'ID' => $this->global_styles_post_id,
'post_content' => wp_json_encode( $this->global_styles_data ),
)
);

if ( is_wp_error( $update ) ) {
return;
}

$this->set_migrated( 'colors' );
}

/**
* Check if a migration was already done.
*
* @param string $key The migration key.
*
* @return bool
*/
private function was_migrated( $key ) {
return get_option( self::MIGRATION_FLAGS[ $key ], false ) === true;
}

/**
* Set a migration as done.
*
* @param string $key The migration key.
*
* @return void
*/
private function set_migrated( $key ) {
update_option( self::MIGRATION_FLAGS[ $key ], true );
}
}
8 changes: 4 additions & 4 deletions inc/patterns/alternating-feature-columns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,16 @@
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"32px","right":"32px","bottom":"32px","left":"32px"}}},"backgroundColor":"raft-bg-alt"} -->
<div class="wp-block-column is-vertically-aligned-center has-raft-bg-alt-background-color has-background" style="padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px"><!-- wp:image {"align":"center","sizeSlug":"full","linkDestination":"none"} -->
<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"32px","right":"32px","bottom":"32px","left":"32px"}}},"backgroundColor":"ti-bg-alt"} -->
<div class="wp-block-column is-vertically-aligned-center has-ti-bg-alt-background-color has-background" style="padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px"><!-- wp:image {"align":"center","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="' . esc_url( $images[0] ) . '" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"center","style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"32px","right":"32px","bottom":"32px","left":"32px"}}},"backgroundColor":"raft-bg-alt"} -->
<div class="wp-block-column is-vertically-aligned-center has-raft-bg-alt-background-color has-background" style="padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px"><!-- wp:image {"align":"center","sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"32px","right":"32px","bottom":"32px","left":"32px"}}},"backgroundColor":"ti-bg-alt"} -->
<div class="wp-block-column is-vertically-aligned-center has-ti-bg-alt-background-color has-background" style="padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px"><!-- wp:image {"align":"center","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="' . esc_url( $images[1] ) . '" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
Expand Down
12 changes: 6 additions & 6 deletions inc/patterns/call-to-action.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@
'title' => __( 'Call to action', 'raft' ),
'categories' => array( 'raft' ),
'content' => '
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"64px","bottom":"64px"},"blockGap":"40px","margin":{"top":"0px","bottom":"0px"}}},"backgroundColor":"raft-accent","textColor":"raft-fg-alt","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-raft-fg-alt-color has-raft-accent-background-color has-text-color has-background" style="margin-top:0px;margin-bottom:0px;padding-top:64px;padding-bottom:64px">
<!-- wp:heading {"textAlign":"center","textColor":"raft-fg-alt"} -->
<h2 class="has-text-align-center has-raft-fg-alt-color has-text-color">Lorem ipsum sit dolor!</h2>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"64px","bottom":"64px"},"blockGap":"40px","margin":{"top":"0px","bottom":"0px"}}},"backgroundColor":"ti-accent","textColor":"ti-fg-alt","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull has-ti-fg-alt-color has-ti-accent-background-color has-text-color has-background" style="margin-top:0px;margin-bottom:0px;padding-top:64px;padding-bottom:64px">
<!-- wp:heading {"textAlign":"center","textColor":"ti-fg-alt"} -->
<h2 class="has-text-align-center has-ti-fg-alt-color has-text-color">Lorem ipsum sit dolor!</h2>
<!-- /wp:heading -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"textColor":"raft-fg-alt","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-raft-fg-alt-color has-text-color">Lorem ipsum</a></div>
<!-- wp:button {"textColor":"ti-fg-alt","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-ti-fg-alt-color has-text-color">Lorem ipsum</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
Expand Down
4 changes: 2 additions & 2 deletions inc/patterns/content-columns-with-hero.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
'title' => __( 'Content columns with hero', 'raft' ),
'categories' => array( 'raft' ),
'content' => '
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"64px","bottom":"64px"},"margin":{"top":"0px","bottom":"0px"}}},"backgroundColor":"raft-bg-alt","layout":{"inherit":true,"type":"constrained"},"otterConditions":[]} -->
<div class="wp-block-group alignfull has-raft-bg-alt-background-color has-background" style="margin-top:0px;margin-bottom:0px;padding-top:64px;padding-bottom:64px"><!-- wp:group {"layout":{"inherit":false}} -->
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"64px","bottom":"64px"},"margin":{"top":"0px","bottom":"0px"}}},"backgroundColor":"ti-bg-alt","layout":{"inherit":true,"type":"constrained"},"otterConditions":[]} -->
<div class="wp-block-group alignfull has-ti-bg-alt-background-color has-background" style="margin-top:0px;margin-bottom:0px;padding-top:64px;padding-bottom:64px"><!-- wp:group {"layout":{"inherit":false}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center","fontSize":"huge"} -->
<h2 class="has-text-align-center has-huge-font-size">Lorem ipsum sit dolor</h2>
<!-- /wp:heading -->
Expand Down
4 changes: 2 additions & 2 deletions inc/patterns/cover-background.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
<img class="wp-block-cover__image-background" alt="" src="' . esc_url( $hero_illustration ) . '" data-object-fit="cover"/>
<div class="wp-block-cover__inner-container">

<!-- wp:group {"textColor":"raft-fg-alt","layout":{"inherit":true}} -->
<div class="wp-block-group has-raft-fg-alt-color has-text-color">
<!-- wp:group {"textColor":"ti-fg-alt","layout":{"inherit":true}} -->
<div class="wp-block-group has-ti-fg-alt-color has-text-color">

<!-- wp:heading {"fontSize":"huge"} -->
<h2 class="has-huge-font-size">' . esc_html( $strings['title'] ) . '</h2>
Expand Down
8 changes: 4 additions & 4 deletions inc/patterns/frequently-asked-questions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
*/

$column_markup = '
<!-- wp:column {"style":{"spacing":{"padding":{"top":"24px","right":"24px","bottom":"24px","left":"24px"}}},"backgroundColor":"raft-bg-alt"} -->
<div class="wp-block-column has-raft-bg-alt-background-color has-background" style="padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px">
<!-- wp:column {"style":{"spacing":{"padding":{"top":"24px","right":"24px","bottom":"24px","left":"24px"}}},"backgroundColor":"ti-bg-alt"} -->
<div class="wp-block-column has-ti-bg-alt-background-color has-background" style="padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px">

<!-- wp:heading {"level":3,"fontSize":"medium"} -->
<h3 class="has-medium-font-size">Lorem ipsum sit dolor</h3>
Expand Down Expand Up @@ -50,9 +50,9 @@

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"textColor":"raft-fg-alt"} -->
<!-- wp:button {"textColor":"ti-fg-alt"} -->
<div class="wp-block-button">
<a class="wp-block-button__link has-raft-fg-alt-color has-text-color">' . esc_html( $strings['button'] ) . '</a>
<a class="wp-block-button__link has-ti-fg-alt-color has-text-color">' . esc_html( $strings['button'] ) . '</a>
</div>
<!-- /wp:button -->
</div>
Expand Down
Loading
Loading