-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Allow styles to be changed dynamically through editor settings (#52767)
- Loading branch information
1 parent
c98607b
commit cb35dee
Showing
4 changed files
with
175 additions
and
45 deletions.
There are no files selected for viewing
19 changes: 19 additions & 0 deletions
19
packages/e2e-tests/plugins/iframed-enqueue-block-editor-settings.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <?php | ||
| /** | ||
| * Plugin Name: Gutenberg Test Iframed enqueue block editor settings | ||
| * Plugin URI: https://github.com/WordPress/gutenberg | ||
| * Author: Gutenberg Team | ||
| * | ||
| * @package gutenberg-test-iframed-iframed-enqueue-block-editor-settings | ||
| */ | ||
|
|
||
| add_action( | ||
| 'block_editor_settings_all', | ||
| function( $settings ) { | ||
| $settings['styles'][] = array( | ||
| 'css' => 'p { border: 1px solid red }', | ||
| '__unstableType' => 'plugin', | ||
| ); | ||
| return $settings; | ||
| } | ||
| ); |
108 changes: 108 additions & 0 deletions
108
packages/e2e-tests/specs/editor/plugins/iframed-enqueue-block-editor-settings.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| activatePlugin, | ||
| createNewPost, | ||
| deactivatePlugin, | ||
| canvas, | ||
| activateTheme, | ||
| } from '@wordpress/e2e-test-utils'; | ||
|
|
||
| async function getComputedStyle( context, selector, property ) { | ||
| return await context.evaluate( | ||
| ( sel, prop ) => | ||
| window.getComputedStyle( document.querySelector( sel ) )[ prop ], | ||
| selector, | ||
| property | ||
| ); | ||
| } | ||
|
|
||
| describe( 'iframed block editor settings styles', () => { | ||
| beforeEach( async () => { | ||
| // Activate the empty theme (block based theme), which is iframed. | ||
| await activateTheme( 'emptytheme' ); | ||
| await activatePlugin( | ||
| 'gutenberg-test-iframed-enqueue-block-editor-settings' | ||
| ); | ||
| await createNewPost(); | ||
| } ); | ||
|
|
||
| afterEach( async () => { | ||
| await deactivatePlugin( | ||
| 'gutenberg-test-iframed-enqueue-block-editor-settings' | ||
| ); | ||
| await activateTheme( 'twentytwentyone' ); | ||
| } ); | ||
|
|
||
| it( 'should load styles added through block editor settings', async () => { | ||
| await page.waitForSelector( 'iframe[name="editor-canvas"]' ); | ||
| // Expect a red border (added in PHP). | ||
| expect( await getComputedStyle( canvas(), 'p', 'border-color' ) ).toBe( | ||
| 'rgb(255, 0, 0)' | ||
| ); | ||
|
|
||
| await page.evaluate( () => { | ||
| const settings = window.wp.data | ||
| .select( 'core/editor' ) | ||
| .getEditorSettings(); | ||
| wp.data.dispatch( 'core/editor' ).updateEditorSettings( { | ||
| ...settings, | ||
| styles: [ | ||
| ...settings.styles, | ||
| { | ||
| css: 'p { border-width: 2px; }', | ||
| __unstableType: 'plugin', | ||
| }, | ||
| ], | ||
| } ); | ||
| } ); | ||
|
|
||
| // Expect a 2px border (added in JS). | ||
| expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe( | ||
| '2px' | ||
| ); | ||
| } ); | ||
|
|
||
| it( 'should load theme styles added through block editor settings', async () => { | ||
| await page.waitForSelector( 'iframe[name="editor-canvas"]' ); | ||
|
|
||
| await page.evaluate( () => { | ||
| // Make sure that theme styles are added even if the theme styles | ||
| // preference is off. | ||
| window.wp.data | ||
| .dispatch( 'core/edit-post' ) | ||
| .toggleFeature( 'themeStyles' ); | ||
| const settings = window.wp.data | ||
| .select( 'core/editor' ) | ||
| .getEditorSettings(); | ||
| wp.data.dispatch( 'core/editor' ).updateEditorSettings( { | ||
| ...settings, | ||
| styles: [ | ||
| ...settings.styles, | ||
| { | ||
| css: 'p { border-width: 2px; }', | ||
| __unstableType: 'theme', | ||
| }, | ||
| ], | ||
| } ); | ||
| } ); | ||
|
|
||
| // Expect a 1px border because theme styles are disabled. | ||
| expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe( | ||
| '1px' | ||
| ); | ||
|
|
||
| await page.evaluate( () => { | ||
| // Now enable theme styles. | ||
| window.wp.data | ||
| .dispatch( 'core/edit-post' ) | ||
| .toggleFeature( 'themeStyles' ); | ||
| } ); | ||
|
|
||
| // Expect a 2px border because theme styles are enabled. | ||
| expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe( | ||
| '2px' | ||
| ); | ||
| } ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters