Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update recommended themes for Customize Your Store (#40650) 

* Update theme properties

* Fix theme array properties

* Update filtered urls to use admin_url() instead of home_url()

home_url() is used for front-end requests; admin_url() should be used for wp-admin urls

* Remove "valid" theme check

* Slight tweak to the color palette values

The theme showcase actually uses some more complex logic to pick two out of the 5 colors to represent the theme. We could probably manually copy these as two values instead of what I'm doing here.

* Removed unused color palette values

Really this is probably the simpler approach. Might revisit this later. Also added a total_palettes value so we can track that and show "+X" in the theme preview

* Add extra palettes number

If there are more than 4 palettes, we'll show the number of extras as we do in the WP.com theme showcase.

* Tighten gap between theme name and type

There was too large of a bottom margin on the theme info div.

* Add changefile(s) from automation for the following project(s): woocommerce

* Fix lint

* Remove allowed_theme check from activate_theme api

* Fix tests

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
This commit is contained in:
Chris Runnells 2023-10-08 21:45:04 -10:00 committed by GitHub
parent b436d40be3
commit e14086eef1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 85 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
plugins/woocommerce-admin/client/customize-store/intro/color-palettes.tsx
View File

@ -5,9 +5,17 @@ import { ColorPalette } from './types';
export const ColorPalettes = ( {
colorPalettes,
totalPalettes,
}: {
colorPalettes: ColorPalette[];
totalPalettes: number;
} ) => {
let extra = null;
if ( totalPalettes > 4 ) {
extra = <li className="more_palettes">+{ totalPalettes - 4 }</li>;
}
return (
<ul className="theme-card__color-palettes">
{ colorPalettes.map( ( colorPalette ) => (
@ -28,6 +36,7 @@ export const ColorPalettes = ( {
} }
></li>
) ) }
{ extra }
</ul>
);
};

1
plugins/woocommerce-admin/client/customize-store/intro/index.tsx
View File

@ -185,6 +185,7 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
thumbnail_url={ theme.thumbnail_url }
name={ theme.name }
color_palettes={ theme.color_palettes }
total_palettes={ theme.total_palettes }
link_url={ theme?.link_url }
is_active={ theme.is_active }
/>

12
plugins/woocommerce-admin/client/customize-store/intro/intro.scss
View File

@ -174,24 +174,34 @@
}
.theme-card__info {
margin: 24px 0 14px 0;
margin: 24px 0 8px 0;
display: flex;
.theme-card__color-palettes {
margin-left: auto;
}
}
.theme-card__color-palettes {
display: flex;
margin: 0 0 0 auto;
padding: 0;
gap: 5px;
li {
width: 20px;
height: 20px;
box-shadow: inset 0 0 0 1px #0003;
border-radius: 50%;
margin-bottom: 0;
&.more_palettes {
box-shadow: none;
font-size: 11px;
text-align: center;
}
}
}
.theme-card__active {
border-radius: 100px;
background: rgba(56, 88, 233, 0.2);

6
plugins/woocommerce-admin/client/customize-store/intro/theme-card.tsx
View File

@ -16,6 +16,7 @@ export const ThemeCard = ( {
thumbnail_url,
name,
color_palettes = [],
total_palettes = 0,
link_url = '',
is_active = false,
}: TypeThemeCard ) => {
@ -33,7 +34,10 @@ export const ThemeCard = ( {
<div className="theme-card__info">
<h2 className="theme-card__title">{ name }</h2>
{ color_palettes && (
<ColorPalettes colorPalettes={ color_palettes } />
<ColorPalettes
colorPalettes={ color_palettes }
totalPalettes={ total_palettes }
/>
) }
</div>
<div>

1
plugins/woocommerce-admin/client/customize-store/intro/types.ts
View File

@ -14,4 +14,5 @@ export type ThemeCard = {
is_active: boolean;
link_url?: string;
color_palettes: ColorPalette[];
total_palettes: number;
};

4
plugins/woocommerce/changelog/update-cys-intro-themes Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Minor improvements to the recommended themes in the Customize Your Store task

68
plugins/woocommerce/src/Admin/API/OnboardingThemes.php
View File

@ -106,12 +106,7 @@ class OnboardingThemes extends \WC_REST_Data_Controller {
* @return WP_Error|array Theme installation status.
*/
public function install_theme( $request ) {
$allowed_themes = Themes::get_allowed_themes();
$theme = sanitize_text_field( $request['theme'] );
if ( ! in_array( $theme, $allowed_themes, true ) ) {
return new \WP_Error( 'woocommerce_rest_invalid_theme', __( 'Invalid theme.', 'woocommerce' ), 404 );
}
$theme = sanitize_text_field( $request['theme'] );
$installed_themes = wp_get_themes();
@ -180,11 +175,7 @@ class OnboardingThemes extends \WC_REST_Data_Controller {
* @return WP_Error|array Theme activation status.
*/
public function activate_theme( $request ) {
$allowed_themes = Themes::get_allowed_themes();
$theme = sanitize_text_field( $request['theme'] );
if ( ! in_array( $theme, $allowed_themes, true ) ) {
return new \WP_Error( 'woocommerce_rest_invalid_theme', __( 'Invalid theme.', 'woocommerce' ), 404 );
}
$theme = sanitize_text_field( $request['theme'] );
require_once ABSPATH . 'wp-admin/includes/theme.php';
@ -265,6 +256,7 @@ class OnboardingThemes extends \WC_REST_Data_Controller {
'name' => 'Tsubaki',
'price' => 'Free',
'color_palettes' => array(),
'total_palettes' => 0,
'slug' => 'tsubaki',
'is_active' => false,
'thumbnail_url' => 'https://i0.wp.com/s2.wp.com/wp-content/themes/premium/tsubaki/screenshot.png',
@ -274,24 +266,70 @@ class OnboardingThemes extends \WC_REST_Data_Controller {
'name' => 'Tazza',
'price' => 'Free',
'color_palettes' => array(),
'total_palettes' => 0,
'slug' => 'tazza',
'is_active' => false,
'thumbnail_url' => 'https://i0.wp.com/s2.wp.com/wp-content/themes/premium/tazza/screenshot.png',
'link_url' => 'https://wordpress.com/theme/tazza/',
'total_palettes' => 0,
),
array(
'name' => 'Amulet',
'price' => 'Free',
'color_palettes' => array(),
'color_palettes' => array(
array(
'title' => 'Default',
'primary' => '#FEFBF3',
'secondary' => '#7F7E7A',
),
array(
'title' => 'Brown Sugar',
'primary' => '#EFEBE0',
'secondary' => '#AC6239',
),
array(
'title' => 'Midnight',
'primary' => '#161514',
'secondary' => '#AFADA7',
),
array(
'title' => 'Olive',
'primary' => '#FEFBF3',
'secondary' => '#7F7E7A',
),
),
'total_palettes' => 5,
'slug' => 'amulet',
'is_active' => false,
'thumbnail_url' => 'https://i0.wp.com/s2.wp.com/wp-content/themes/premium/amulet/screenshot.png',
'link_url' => 'https://wordpress.com/theme/tsubaki/',
'link_url' => 'https://wordpress.com/theme/amulet/',
),
array(
'name' => 'Zaino',
'price' => 'Free',
'color_palettes' => array(),
'color_palettes' => array(
array(
'title' => 'Default',
'primary' => '#202124',
'secondary' => '#E3CBC0',
),
array(
'title' => 'Aubergine',
'primary' => '#1B1031',
'secondary' => '#E1746D',
),
array(
'title' => 'Block out',
'primary' => '#FF5252',
'secondary' => '#252525',
),
array(
'title' => 'Canary',
'primary' => '#FDFF85',
'secondary' => '#353535',
),
),
'total_palettes' => 11,
'slug' => 'zaino',
'is_active' => false,
'thumbnail_url' => 'https://i0.wp.com/s2.wp.com/wp-content/themes/premium/zaino/screenshot.png',
@ -317,7 +355,7 @@ class OnboardingThemes extends \WC_REST_Data_Controller {
'themes' => $filtered_themes,
'_links' => array(
'browse_all' => array(
'href' => home_url( '/wp-admin/themes.php' ),
'href' => admin_url( 'themes.php' ),
),
),
);

2
plugins/woocommerce/tests/legacy/unit-tests/woocommerce-admin/api/onboarding-themes.php
View File

@ -78,7 +78,7 @@ class WC_Admin_Tests_API_Onboarding_Themes extends WC_REST_Unit_Test_Case {
$response = $this->server->dispatch( $request );
$data = $response->get_data();
$this->assertEquals( 'woocommerce_rest_invalid_theme', $data['code'] );
$this->assertEquals( 'woocommerce_rest_theme_install', $data['code'] );
}
/**