1
+ + + +2
+" +`; + exports[`adding blocks should navigate empty paragraph 1`] = ` "1
diff --git a/packages/e2e-tests/specs/change-detection.test.js b/packages/e2e-tests/specs/change-detection.test.js index 0e529a95ca512..7c9dab21d4d79 100644 --- a/packages/e2e-tests/specs/change-detection.test.js +++ b/packages/e2e-tests/specs/change-detection.test.js @@ -288,4 +288,21 @@ describe( 'Change detection', () => { await assertIsDirty( true ); } ); + + it( 'should not prompt when receiving reusable blocks', async () => { + // Regression Test: Verify that non-modifying behaviors does not incur + // dirtiness. Previously, this could occur as a result of either (a) + // selecting a block, (b) opening the inserter, or (c) editing a post + // which contained a reusable block. The root issue was changes in + // block editor state as a result of reusable blocks data having been + // received, reflected here in this test. + // + // TODO: This should be considered a temporary test, existing only so + // long as the experimental reusable blocks fetching data flow exists. + // + // See: https://github.com/WordPress/gutenberg/issues/14766 + await page.evaluate( () => window.wp.data.dispatch( 'core/editor' ).__experimentalReceiveReusableBlocks( [] ) ); + + await assertIsDirty( false ); + } ); } ); diff --git a/packages/e2e-tests/specs/preview.test.js b/packages/e2e-tests/specs/preview.test.js index 8488ffe1ec1e3..3379801446cbd 100644 --- a/packages/e2e-tests/specs/preview.test.js +++ b/packages/e2e-tests/specs/preview.test.js @@ -12,47 +12,79 @@ import { createURL, publishPost, saveDraft, + clickOnMoreMenuItem, + pressKeyWithModifier, } from '@wordpress/e2e-test-utils'; -describe( 'Preview', () => { - beforeEach( async () => { - await createNewPost(); - } ); +async function openPreviewPage( editorPage ) { + let openTabs = await browser.pages(); + const expectedTabsCount = openTabs.length + 1; + await editorPage.click( '.editor-post-preview' ); - async function openPreviewPage( editorPage ) { - let openTabs = await browser.pages(); - const expectedTabsCount = openTabs.length + 1; - await editorPage.click( '.editor-post-preview' ); - - // Wait for the new tab to open. - while ( openTabs.length < expectedTabsCount ) { - await editorPage.waitFor( 1 ); - openTabs = await browser.pages(); - } - - const previewPage = last( openTabs ); - // Wait for the preview to load. We can't do interstitial detection here, - // because it might load too quickly for us to pick up, so we wait for - // the preview to load by waiting for the title to appear. - await previewPage.waitForSelector( '.entry-title' ); - return previewPage; + // Wait for the new tab to open. + while ( openTabs.length < expectedTabsCount ) { + await editorPage.waitFor( 1 ); + openTabs = await browser.pages(); } - /** - * Given a Puppeteer Page instance for a preview window, clicks Preview, and - * awaits the window navigation. - * - * @param {puppeteer.Page} previewPage Page on which to await navigation. - * - * @return {Promise} Promise resolving once navigation completes. - */ - async function waitForPreviewNavigation( previewPage ) { - const navigationCompleted = previewPage.waitForNavigation(); - await page.click( '.editor-post-preview' ); - return navigationCompleted; + const previewPage = last( openTabs ); + // Wait for the preview to load. We can't do interstitial detection here, + // because it might load too quickly for us to pick up, so we wait for + // the preview to load by waiting for the title to appear. + await previewPage.waitForSelector( '.entry-title' ); + return previewPage; +} + +/** + * Given a Puppeteer Page instance for a preview window, clicks Preview, and + * awaits the window navigation. + * + * @param {puppeteer.Page} previewPage Page on which to await navigation. + * + * @return {Promise} Promise resolving once navigation completes. + */ +async function waitForPreviewNavigation( previewPage ) { + const navigationCompleted = previewPage.waitForNavigation(); + await page.click( '.editor-post-preview' ); + return navigationCompleted; +} + +/** + * Enables or disables the custom fields option. + * + * Note that this is implemented separately from the `toggleScreenOptions` + * utility, since the custom fields option triggers a page reload and requires + * extra async logic to wait for navigation to complete. + * + * @param {boolean} shouldBeChecked If true, turns the option on. If false, off. + */ +async function toggleCustomFieldsOption( shouldBeChecked ) { + const checkboxXPath = '//*[contains(@class, "edit-post-options-modal")]//label[contains(text(), "Custom Fields")]'; + await clickOnMoreMenuItem( 'Options' ); + await page.waitForXPath( checkboxXPath ); + const [ checkboxHandle ] = await page.$x( checkboxXPath ); + + const isChecked = await page.evaluate( + ( element ) => element.control.checked, + checkboxHandle + ); + + if ( isChecked !== shouldBeChecked ) { + const navigationCompleted = page.waitForNavigation(); + await checkboxHandle.click(); + await navigationCompleted; + return; } - it( 'Should open a preview window for a new post', async () => { + await page.click( '.edit-post-options-modal button[aria-label="Close dialog"]' ); +} + +describe( 'Preview', () => { + beforeEach( async () => { + await createNewPost(); + } ); + + it( 'should open a preview window for a new post', async () => { const editorPage = page; // Disabled until content present. @@ -129,7 +161,7 @@ describe( 'Preview', () => { await previewPage.close(); } ); - it( 'Should not revert title during a preview right after a save draft', async () => { + it( 'should not revert title during a preview right after a save draft', async () => { const editorPage = page; // Type aaaaa in the title filed. @@ -166,3 +198,61 @@ describe( 'Preview', () => { await previewPage.close(); } ); } ); + +describe( 'Preview with Custom Fields enabled', async () => { + beforeEach( async () => { + await createNewPost(); + await toggleCustomFieldsOption( true ); + } ); + + afterEach( async () => { + await toggleCustomFieldsOption( false ); + } ); + + // Catch regressions of https://github.com/WordPress/gutenberg/issues/12617 + it( 'displays edits to the post title and content in the preview', async () => { + const editorPage = page; + + // Add an initial title and content. + await editorPage.type( '.editor-post-title__input', 'title 1' ); + await editorPage.keyboard.press( 'Tab' ); + await editorPage.keyboard.type( 'content 1' ); + + // Publish the post and then close the publish panel. + await publishPost(); + await page.waitForSelector( '.editor-post-publish-panel' ); + await page.click( '.editor-post-publish-panel__header button' ); + + // Open the preview page. + const previewPage = await openPreviewPage( editorPage ); + + // Check the title and preview match. + let previewTitle = await previewPage.$eval( '.entry-title', ( node ) => node.textContent ); + expect( previewTitle ).toBe( 'title 1' ); + let previewContent = await previewPage.$eval( '.entry-content p', ( node ) => node.textContent ); + expect( previewContent ).toBe( 'content 1' ); + + // Return to editor and modify the title and content. + await editorPage.bringToFront(); + await editorPage.click( '.editor-post-title__input' ); + await pressKeyWithModifier( 'shift', 'Home' ); + await editorPage.keyboard.press( 'Delete' ); + await editorPage.keyboard.type( 'title 2' ); + await editorPage.keyboard.press( 'Tab' ); + await pressKeyWithModifier( 'shift', 'Home' ); + await editorPage.keyboard.press( 'Delete' ); + await editorPage.keyboard.type( 'content 2' ); + + // Open the preview page. + await waitForPreviewNavigation( previewPage ); + + // Title in preview should match input. + previewTitle = await previewPage.$eval( '.entry-title', ( node ) => node.textContent ); + expect( previewTitle ).toBe( 'title 2' ); + previewContent = await previewPage.$eval( '.entry-content p', ( node ) => node.textContent ); + expect( previewContent ).toBe( 'content 2' ); + + // Make sure the editor is active for the afterEach function. + await editorPage.bringToFront(); + } ); +} ); diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js index c186507a7cdef..c3c4d477e1378 100644 --- a/packages/e2e-tests/specs/writing-flow.test.js +++ b/packages/e2e-tests/specs/writing-flow.test.js @@ -310,4 +310,21 @@ describe( 'adding blocks', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + + it( 'should navigate contenteditable with padding', async () => { + await clickBlockAppender(); + await page.keyboard.press( 'Enter' ); + await page.evaluate( () => { + document.activeElement.style.paddingTop = '100px'; + } ); + await page.keyboard.press( 'ArrowUp' ); + await page.keyboard.type( '1' ); + await page.evaluate( () => { + document.activeElement.style.paddingBottom = '100px'; + } ); + await page.keyboard.press( 'ArrowDown' ); + await page.keyboard.type( '2' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); } ); diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 6676d35676b7d..2cebe45d53f7c 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -68,26 +68,17 @@ // Header toggle buttons. &.is-toggled { color: $white; - } - - // Put the gray background on a separate layer, so as to match the size of the publish button (34px). - &.is-toggled::before { - content: ""; - border-radius: $radius-round-rectangle; - position: absolute; - z-index: -1; background: $dark-gray-500; - top: 1px; - right: 1px; - bottom: 1px; - left: 1px; + margin: 1px; + padding: 7px; } + // The !important in this ruleset need to override the pile of :not() selectors used in the icon-button. &.is-toggled:hover, &.is-toggled:focus { - box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white; - color: $white; - background: $dark-gray-500; + box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white !important; + color: $white !important; + background: $dark-gray-500 !important; } // Make editor header bar buttons bigger to match IconButtons. diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js index 22f160b7727d8..5c6037c0467f4 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js @@ -18,7 +18,6 @@ const { ctrl, alt, ctrlShift, - shiftAlt, } = displayShortcutList; const globalShortcuts = { @@ -60,11 +59,11 @@ const globalShortcuts = { ariaLabel: shortcutAriaLabel.ctrlShift( '`' ), }, { - keyCombination: shiftAlt( 'n' ), + keyCombination: access( 'n' ), description: __( 'Navigate to the next part of the editor (alternative).' ), }, { - keyCombination: shiftAlt( 'p' ), + keyCombination: access( 'p' ), description: __( 'Navigate to the previous part of the editor (alternative).' ), }, { diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index e925344dc9e3a..d7f3eacd2a23d 100644 --- a/packages/edit-post/src/components/text-editor/style.scss +++ b/packages/edit-post/src/components/text-editor/style.scss @@ -34,6 +34,13 @@ padding: $block-padding; } + // Hide the thick left border in the code editor. + &:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) .editor-post-title__input:hover, + &:not(.is-focus-mode):not(.has-fixed-toolbar).is-selected .editor-post-title__input { + box-shadow: none; + border-left-width: $border-width; + } + textarea:hover, &.is-selected textarea { box-shadow: 0 0 0 $border-width $light-gray-500; @@ -41,9 +48,12 @@ } .editor-post-permalink { - left: 0; - right: 0; margin-top: -6px; + + // Hide the thick left border in the code editor. + box-shadow: none; + border: none; + outline: $border-width solid $light-gray-800; } @include break-small() { diff --git a/packages/edit-post/src/store/effects.js b/packages/edit-post/src/store/effects.js index 673025c3fae51..4897b75b2060f 100644 --- a/packages/edit-post/src/store/effects.js +++ b/packages/edit-post/src/store/effects.js @@ -45,26 +45,22 @@ const effects = { let wasSavingPost = select( 'core/editor' ).isSavingPost(); let wasAutosavingPost = select( 'core/editor' ).isAutosavingPost(); - let wasPreviewingPost = select( 'core/editor' ).isPreviewingPost(); // Save metaboxes when performing a full save on the post. subscribe( () => { const isSavingPost = select( 'core/editor' ).isSavingPost(); const isAutosavingPost = select( 'core/editor' ).isAutosavingPost(); - const isPreviewingPost = select( 'core/editor' ).isPreviewingPost(); const hasActiveMetaBoxes = select( 'core/edit-post' ).hasMetaBoxes(); // Save metaboxes on save completion, except for autosaves that are not a post preview. const shouldTriggerMetaboxesSave = ( hasActiveMetaBoxes && ( - ( wasSavingPost && ! isSavingPost && ! wasAutosavingPost ) || - ( wasAutosavingPost && wasPreviewingPost && ! isPreviewingPost ) + ( wasSavingPost && ! isSavingPost && ! wasAutosavingPost ) ) ); // Save current state for next inspection. wasSavingPost = isSavingPost; wasAutosavingPost = isAutosavingPost; - wasPreviewingPost = isPreviewingPost; if ( shouldTriggerMetaboxesSave ) { store.dispatch( requestMetaBoxUpdates() ); diff --git a/packages/editor/src/components/autocompleters/style.scss b/packages/editor/src/components/autocompleters/style.scss index a173c1f0b5e36..d41748a13d27e 100644 --- a/packages/editor/src/components/autocompleters/style.scss +++ b/packages/editor/src/components/autocompleters/style.scss @@ -1,12 +1,11 @@ - -.block-editor-autocompleters__block { - .block-editor-block-icon { +.editor-autocompleters__block { + .editor-block-icon { margin-right: 8px; } } -.block-editor-autocompleters__user { - .block-editor-autocompleters__user-avatar { +.editor-autocompleters__user { + .editor-autocompleters__user-avatar { margin-right: 8px; flex-grow: 0; flex-shrink: 0; @@ -14,7 +13,7 @@ width: 24px; // avoid jarring resize by seting the size upfront height: 24px; } - .block-editor-autocompleters__user-name { + .editor-autocompleters__user-name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -22,7 +21,7 @@ flex-shrink: 0; flex-grow: 1; } - .block-editor-autocompleters__user-slug { + .editor-autocompleters__user-slug { margin-left: 8px; color: $dark-gray-100; white-space: nowrap; @@ -32,7 +31,7 @@ flex-grow: 0; flex-shrink: 0; } - &:hover .block-editor-autocompleters__user-slug { + &:hover .editor-autocompleters__user-slug { color: $blue-medium-300; } } diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js index 0433941fa4b25..2e2bc942de76b 100644 --- a/packages/format-library/src/image/index.js +++ b/packages/format-library/src/image/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { Path, SVG, TextControl, Popover, IconButton, PositionedAtSelection } from '@wordpress/components'; +import { Path, SVG, TextControl, Popover, IconButton, __unstablePositionedAtSelection } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; import { insertObject } from '@wordpress/rich-text'; @@ -113,7 +113,7 @@ export const image = { return null; } } /> } - { isObjectActive &&