Skip to content

Global Styles: Save and Delete functionality for user variations #46952

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

Closed
wants to merge 14 commits into from
Closed

Global Styles: Save and Delete functionality for user variations #46952

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
15c9e21
WIP: Saving custom variations
ribaricplusplus Jan 8, 2023
a1bd05d
WIP: Saving custom variations
ribaricplusplus Jan 8, 2023
cb0a333
WIP: Saving styles
ribaricplusplus Jan 9, 2023
854a80f
WIP: Saving styles
ribaricplusplus Jan 10, 2023
fe7805d
WIP: Saving styles
ribaricplusplus Jan 10, 2023
b4278d2
Fix unit test
ribaricplusplus Jan 10, 2023
3553b3b
WIP: Saving styles
ribaricplusplus Jan 10, 2023
d40d298
Add unit test
ribaricplusplus Jan 10, 2023
988ca70
Add unit test
ribaricplusplus Jan 10, 2023
da5a0e0
WIP: Saving styles
ribaricplusplus Jan 10, 2023
975326c
WIP: Saving styles
ribaricplusplus Jan 10, 2023
b3b1c6d
Add e2e tests
ribaricplusplus Jan 11, 2023
da15655
Global styles variations PHP changes
ribaricplusplus Jan 11, 2023
ce56414
Merge branch 'rpp-php-changes' into ribaricplusplus
ribaricplusplus Jan 11, 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
Prev Previous commit
Next Next commit
Add e2e tests
  • Loading branch information
@ribaricplusplus
ribaricplusplus committed Jan 11, 2023
commit b3b1c6dbbf5c48a6e485055dfdbad426352520d2
32 changes: 32 additions & 0 deletions packages/e2e-tests/plugins/global-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<?php
/**
* Plugin Name: Gutenberg Test Plugin, Global Styles
* Plugin URI: https://github.com/WordPress/gutenberg
* Author: Gutenberg Team
*
* @package gutenberg-test-plugin-global-styles
*/

/**
* Add REST endpoint.
*/
function gutenberg_add_delete_all_global_styles_endpoint() {
register_rest_route(
'wp/v2',
'/delete-all-global-styles',
array(
array(
'methods' => WP_REST_Server::DELETABLE,
'callback' => function() {
global $wpdb;
$gs_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
// phpcs:ignore WordPress.DB.PreparedSQL.InterpolatedNotPrepared
$wpdb->get_results( "DELETE FROM {$wpdb->posts} WHERE post_type = 'wp_global_styles' AND id != {$gs_id}" );
return rest_ensure_response( array( 'deleted' => true ) );
},
'permission_callback' => '__return_true',
),
)
);
}
add_action( 'rest_api_init', 'gutenberg_add_delete_all_global_styles_endpoint' );
119 changes: 117 additions & 2 deletions test/e2e/specs/site-editor/style-variations.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.use( {
siteEditorStyleVariations: async ( { page }, use ) => {
await use( new SiteEditorStyleVariations( { page } ) );
siteEditorStyleVariations: async ( { page, requestUtils }, use ) => {
await use( new SiteEditorStyleVariations( { page, requestUtils } ) );
},
} );

Expand All @@ -14,19 +14,34 @@ test.describe( 'Global styles variations', () => {
await requestUtils.activateTheme(
'gutenberg-test-themes/style-variations'
);
await requestUtils.activatePlugin(
'gutenberg-test-plugin-global-styles'
);
await requestUtils.deleteAllTemplates( 'wp_template' );
await requestUtils.deleteAllTemplates( 'wp_template_part' );
// Delete all user global styles
await requestUtils.rest( {
method: 'DELETE',
path: '/wp/v2/delete-all-global-styles',
} );
} );

test.afterEach( async ( { requestUtils } ) => {
await Promise.all( [
requestUtils.deleteAllTemplates( 'wp_template' ),
requestUtils.deleteAllTemplates( 'wp_template_part' ),
requestUtils.rest( {
method: 'DELETE',
path: '/wp/v2/delete-all-global-styles',
} ),
] );
} );

test.afterAll( async ( { requestUtils } ) => {
await requestUtils.activateTheme( 'twentytwentyone' );
await requestUtils.deactivatePlugin(
'gutenberg-test-plugin-global-styles'
);
} );

test( 'should have three variations available with the first one being active', async ( {
Expand Down Expand Up @@ -210,6 +225,106 @@ test.describe( 'Global styles variations', () => {
'rgb(255, 239, 11)'
);
} );

test( 'can create custom style variations', async ( {
admin,
page,
siteEditorStyleVariations,
siteEditor,
} ) => {
await admin.visitSiteEditor( {
postId: 'gutenberg-test-themes/style-variations//index',
postType: 'wp_template',
} );
await siteEditor.enterEditMode();

// Assert no custom styles yet.
await siteEditorStyleVariations.browseStyles();
await page.getByText( 'No custom styles yet.' ).click();

// Change background color
await page
.getByRole( 'button', { name: 'Navigate to the previous view' } )
.click();
await page.getByRole( 'button', { name: 'Colors styles' } ).click();
await page
.getByRole( 'button', { name: 'Colors background styles' } )
.click();
await page
.getByRole( 'button', { name: 'Color: Cyan bluish gray' } )
.click();

// Create new style
await page
.getByRole( 'button', { name: 'Navigate to the previous view' } )
.click();
await page
.getByRole( 'button', { name: 'Navigate to the previous view' } )
.click();
await page.getByRole( 'button', { name: 'Browse styles' } ).click();
await page
.locator(
'.components-card__body > .components-flex > .components-button'
)
.click();
await page.getByLabel( 'Style name' ).click();
await page.getByLabel( 'Style name' ).fill( 'My custom style' );
await page.getByRole( 'button', { name: 'Create' } ).click();

// Check that the new style exists
await page.getByRole( 'button', { name: 'My custom style' } ).click();
} );

test( 'can delete custom style variations', async ( {
admin,
page,
siteEditorStyleVariations,
siteEditor,
} ) => {
await admin.visitSiteEditor( {
postId: 'gutenberg-test-themes/style-variations//index',
postType: 'wp_template',
} );
await siteEditor.enterEditMode();
await siteEditorStyleVariations.disableWelcomeGuide();

// Change background color
await page.getByRole( 'button', { name: 'Styles' } ).click();
await page.getByRole( 'button', { name: 'Colors styles' } ).click();
await page
.getByRole( 'button', { name: 'Colors background styles' } )
.click();
await page
.getByRole( 'button', { name: 'Color: Cyan bluish gray' } )
.click();

// Create new style
await page
.getByRole( 'button', { name: 'Navigate to the previous view' } )
.click();
await page
.getByRole( 'button', { name: 'Navigate to the previous view' } )
.click();
await page.getByRole( 'button', { name: 'Browse styles' } ).click();
await page
.locator(
'.components-card__body > .components-flex > .components-button'
)
.click();
await page.getByLabel( 'Style name' ).click();
await page.getByLabel( 'Style name' ).fill( 'My custom style' );
await page.getByRole( 'button', { name: 'Create' } ).click();

// Delete the style
await page
.getByRole( 'button', { name: 'My custom style' } )
.getByRole( 'button', { name: 'Options' } )
.click();
await page.getByRole( 'menuitem', { name: 'Delete style' } ).click();

// Check that there are no custom styles
await page.getByText( 'No custom styles yet.' ).click();
} );
} );

class SiteEditorStyleVariations {
Expand Down