From 8ba73c3afad086c958d143f684c98cba7b1a6013 Mon Sep 17 00:00:00 2001 From: epiqueras Date: Tue, 26 Nov 2019 09:09:35 -0800 Subject: [PATCH 1/3] E2E Tests: Fix theme colors and font sizes. --- .../e2e-tests/mu-plugins/normalize-theme.php | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 packages/e2e-tests/mu-plugins/normalize-theme.php diff --git a/packages/e2e-tests/mu-plugins/normalize-theme.php b/packages/e2e-tests/mu-plugins/normalize-theme.php new file mode 100644 index 0000000000000..4f9d570d27cd4 --- /dev/null +++ b/packages/e2e-tests/mu-plugins/normalize-theme.php @@ -0,0 +1,76 @@ + __( 'Accent Color', 'gutenberg' ), + 'slug' => 'accent', + 'color' => '#cd2653', + ), + array( + 'name' => __( 'Primary', 'gutenberg' ), + 'slug' => 'primary', + 'color' => '#0073a8', + ), + array( + 'name' => __( 'Secondary', 'gutenberg' ), + 'slug' => 'secondary', + 'color' => '#005075', + ), + array( + 'name' => __( 'Subtle Background', 'gutenberg' ), + 'slug' => 'subtle-background', + 'color' => '#dcd7ca', + ), + array( + 'name' => __( 'Background Color', 'gutenberg' ), + 'slug' => 'background', + 'color' => '#' . 'f5efe0', + ), + ) + ); + + add_theme_support( + 'editor-font-sizes', + array( + array( + 'name' => _x( 'Small', 'Name of the small font size in the block editor', 'gutenberg' ), + 'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', 'gutenberg' ), + 'size' => 18, + 'slug' => 'small', + ), + array( + 'name' => _x( 'Regular', 'Name of the regular font size in the block editor', 'gutenberg' ), + 'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'gutenberg' ), + 'size' => 21, + 'slug' => 'normal', + ), + array( + 'name' => _x( 'Large', 'Name of the large font size in the block editor', 'gutenberg' ), + 'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', 'gutenberg' ), + 'size' => 26.25, + 'slug' => 'large', + ), + array( + 'name' => _x( 'Larger', 'Name of the larger font size in the block editor', 'gutenberg' ), + 'shortName' => _x( 'XL', 'Short name of the larger font size in the block editor.', 'gutenberg' ), + 'size' => 32, + 'slug' => 'larger', + ), + ) + ); +} +add_action( 'init', 'normalize_theme_init' ); From 976ebacc3c8816e0c494ff82de0278b8d7f32b2d Mon Sep 17 00:00:00 2001 From: epiqueras Date: Tue, 3 Dec 2019 14:20:57 -0800 Subject: [PATCH 2/3] Normalize Theme: Remove theme supports instead of overwriting them. --- .../e2e-tests/mu-plugins/normalize-theme.php | 62 +------------------ 1 file changed, 2 insertions(+), 60 deletions(-) diff --git a/packages/e2e-tests/mu-plugins/normalize-theme.php b/packages/e2e-tests/mu-plugins/normalize-theme.php index 4f9d570d27cd4..2adc386a0d6bb 100644 --- a/packages/e2e-tests/mu-plugins/normalize-theme.php +++ b/packages/e2e-tests/mu-plugins/normalize-theme.php @@ -12,65 +12,7 @@ * are consistent across different themes. */ function normalize_theme_init() { - add_theme_support( - 'editor-color-palette', - array( - array( - 'name' => __( 'Accent Color', 'gutenberg' ), - 'slug' => 'accent', - 'color' => '#cd2653', - ), - array( - 'name' => __( 'Primary', 'gutenberg' ), - 'slug' => 'primary', - 'color' => '#0073a8', - ), - array( - 'name' => __( 'Secondary', 'gutenberg' ), - 'slug' => 'secondary', - 'color' => '#005075', - ), - array( - 'name' => __( 'Subtle Background', 'gutenberg' ), - 'slug' => 'subtle-background', - 'color' => '#dcd7ca', - ), - array( - 'name' => __( 'Background Color', 'gutenberg' ), - 'slug' => 'background', - 'color' => '#' . 'f5efe0', - ), - ) - ); - - add_theme_support( - 'editor-font-sizes', - array( - array( - 'name' => _x( 'Small', 'Name of the small font size in the block editor', 'gutenberg' ), - 'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', 'gutenberg' ), - 'size' => 18, - 'slug' => 'small', - ), - array( - 'name' => _x( 'Regular', 'Name of the regular font size in the block editor', 'gutenberg' ), - 'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'gutenberg' ), - 'size' => 21, - 'slug' => 'normal', - ), - array( - 'name' => _x( 'Large', 'Name of the large font size in the block editor', 'gutenberg' ), - 'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', 'gutenberg' ), - 'size' => 26.25, - 'slug' => 'large', - ), - array( - 'name' => _x( 'Larger', 'Name of the larger font size in the block editor', 'gutenberg' ), - 'shortName' => _x( 'XL', 'Short name of the larger font size in the block editor.', 'gutenberg' ), - 'size' => 32, - 'slug' => 'larger', - ), - ) - ); + remove_theme_support( 'editor-color-palette' ); + remove_theme_support( 'editor-font-sizes' ); } add_action( 'init', 'normalize_theme_init' ); From e5f930966455ba8fe054647806aaca355df2fe3f Mon Sep 17 00:00:00 2001 From: epiqueras Date: Wed, 4 Dec 2019 09:55:45 -0800 Subject: [PATCH 3/3] E2E Tests: Update to expect editor defaults for colors and font sizes. --- .../editor/blocks/__snapshots__/heading.test.js.snap | 4 ++-- packages/e2e-tests/specs/editor/blocks/heading.test.js | 8 ++++---- .../e2e-tests/specs/editor/various/editor-modes.test.js | 2 +- .../specs/editor/various/font-size-picker.test.js | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap index d33845c007117..7e583c75cc68e 100644 --- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap +++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap @@ -19,8 +19,8 @@ exports[`Heading it should correctly apply custom colors 1`] = ` `; exports[`Heading it should correctly apply named colors 1`] = ` -" -

Heading

+" +

Heading

" `; diff --git a/packages/e2e-tests/specs/editor/blocks/heading.test.js b/packages/e2e-tests/specs/editor/blocks/heading.test.js index c6936dc8238ed..e58d11e1343d0 100644 --- a/packages/e2e-tests/specs/editor/blocks/heading.test.js +++ b/packages/e2e-tests/specs/editor/blocks/heading.test.js @@ -77,11 +77,11 @@ describe( 'Heading', () => { const [ colorPanelToggle ] = await page.$x( COLOR_PANEL_TOGGLE_X_SELECTOR ); await colorPanelToggle.click(); - const accentColorButtonSelector = `${ TEXT_COLOR_UI_X_SELECTOR }//button[@aria-label='Color: Accent Color']`; - const [ accentColorButton ] = await page.$x( accentColorButtonSelector ); - await accentColorButton.click(); + const colorButtonSelector = `${ TEXT_COLOR_UI_X_SELECTOR }//button[@aria-label='Color: Very dark gray']`; + const [ colorButton ] = await page.$x( colorButtonSelector ); + await colorButton.click(); await page.click( '[data-type="core/heading"] h2' ); - await page.waitForXPath( `${ accentColorButtonSelector }[@aria-pressed='true']` ); + await page.waitForXPath( `${ colorButtonSelector }[@aria-pressed='true']` ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); } ); diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js index 7da2ba9aa6788..17cd734cc648e 100644 --- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js +++ b/packages/e2e-tests/specs/editor/various/editor-modes.test.js @@ -79,7 +79,7 @@ describe( 'Editing modes (visual/HTML)', () => { // Change the font size using the sidebar. await page.click( '.components-font-size-picker__select' ); - await page.click( '.components-custom-select__item:nth-child(3)' ); + await page.click( '.components-custom-select__item:nth-child(4)' ); // Make sure the HTML content updated. htmlBlockContent = await page.$eval( '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea', ( node ) => node.textContent ); diff --git a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js b/packages/e2e-tests/specs/editor/various/font-size-picker.test.js index 2ced30454e746..8285d52dfb907 100644 --- a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js +++ b/packages/e2e-tests/specs/editor/various/font-size-picker.test.js @@ -18,7 +18,7 @@ describe( 'Font Size Picker', () => { await clickBlockAppender(); await page.keyboard.type( 'Paragraph to be made "large"' ); await page.click( '.components-font-size-picker__select' ); - await page.click( '.components-custom-select__item:nth-child(3)' ); + await page.click( '.components-custom-select__item:nth-child(4)' ); // Ensure content matches snapshot. const content = await getEditedPostContent(); @@ -31,8 +31,8 @@ describe( 'Font Size Picker', () => { await page.keyboard.type( 'Paragraph to be made "small"' ); await page.click( '.blocks-font-size .components-range-control__number' ); - // This should be the "small" font-size of the current theme. - await page.keyboard.type( '18' ); + // This should be the "small" font-size of the editor defaults. + await page.keyboard.type( '13' ); // Ensure content matches snapshot. const content = await getEditedPostContent();