Merge branch 'master' of https://github.com/WordPress/gutenberg into …

…rnmobile/887-History-stack-is-not-empty-on-a-fresh-start-of-the-editor * 'master' of https://github.com/WordPress/gutenberg: Avoid running hasMetaBoxes on each subscribe (#15041) Avoid passing down isFirst and isLast props (#15043) Add "Roadmap" document with an overview of projects in consideration. (#14907) Testing: Update tests to use Escape press to activate block toolbar (#15063) Testing: Skip unreliable end-to-end tests (#15059)
WordPress · Apr 19, 2019 · 19a3870 · 19a3870
2 parents 7b08aa3 + 3f1964c
commit 19a3870
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 48 deletions.
diff --git a/docs/roadmap.md b/docs/roadmap.md
@@ -0,0 +1,31 @@
+# Upcoming Projects & Roadmap
+
+_Complementary to [Phase 2 Scope](https://github.com/WordPress/gutenberg/issues/13113)._
+
+This document outlines some of the features currently in development or being considered for the project. It should not be confused with the product roadmap for WordPress itself, even if some areas naturally overlap. The main purpose of it is to give visibility to some of the key problems remaining to be solved and as an invitation for those wanting to collaborate on some of the more complex issues to learn about what needs help.
+
+Gutenberg is already in use by millions of sites through WordPress, so in order to make substantial changes to the design or updating specifications it is advisable to consider a discussion process ("Request for Comments") showing both an understanding of the impact, both positives and negatives, trade offs and opportunities.
+
+## Projects
+
+- **Block Registry** — define an entry point for block identification. ([See active RFC](https://github.com/WordPress/gutenberg/pull/13693).)
+- **Live Component Library** — a place to visualize and interact with the UI components and block tools included in the packages.
+- **Modular Editor** — allow loading the block editor in several contexts without a dependency to a post object. (Ongoing [pending tasks](https://github.com/WordPress/gutenberg/issues/14043).)
+- **Better Validation** — continue to refine the mechanisms used in validating editor content. (See in depth overview at [#11440](https://github.com/WordPress/gutenberg/issues/11440) and [#7604](https://github.com/WordPress/gutenberg/issues/7604).)
+- **Block Areas** — build support for areas of blocks that fall outside the content (including relationship with templates, registration, storage, and so on). ([See overview](https://github.com/WordPress/gutenberg/issues/13489).)
+- **Multi-Block Editing** — allow modifying attributes of multiple blocks of the same kind at once.
+- **Rich Text Roadmap** — continue to develop the capabilities of the rich text package. ([See overview](https://github.com/WordPress/gutenberg/issues/13778).)
+- **Common Block Functionality** — coalesce into a preferred mechanism for creating and sharing chunks of functionality (block alignment, color tools, etc) across blocks with a simple and intuitive code interface. (Suggested exploration: React Hooks.)
+- **Responsive Images** — propose mechanisms for handling flexible image sources that can be optimized for loading and takes into account their placement on a page (within main content, a column, sidebar, etc).
+- **Async Loading** — propose a strategy for loading block code only when necessary in the editor without overhead for the developer or disrupting the user experience.
+- **Styles** — continue to develop the mechanisms for managing block style variations and other styling solutions. (See overview at [#7551](https://github.com/WordPress/gutenberg/issues/7551) and [#9534](https://github.com/WordPress/gutenberg/issues/9534).)
+- **Bundling Front-end Assets** — explore ways in which front-end styles for blocks could be assembled based on which blocks are used in a given page response. ([See overview](https://github.com/WordPress/gutenberg/issues/5445).)
+- **Transforms API** — improve the transform API to allow advanced use-cases: support for async-transforms, access to the block editor settings and bring consistency between the different types of transforms. ([See related issue](https://github.com/WordPress/gutenberg/issues/14755).)
+
+## Timeline
+
+The projects outlined above indicate areas of interest but not necessarily development priorities. Sometimes, a product need will accelerate a resolution (as is the case of the block registry), other times community interest might be the driving force.
+
+- 2019 Q1: Block Registry — First phase. Required for plugin directory "meta" project.
+- 2019 Q2: Modular Editor — Requirement for most of phase 2.
+- 2019 Q3: Block Areas.
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -363,8 +363,6 @@ export class BlockListBlock extends Component {
 						isFocusMode,
 						hasFixedToolbar,
 						isLocked,
-						isFirst,
-						isLast,
 						clientId,
 						rootClientId,
 						isSelected,
@@ -527,8 +525,6 @@ export class BlockListBlock extends Component {
 									<BlockMover
 										clientIds={ clientId }
 										blockElementId={ blockElementId }
-										isFirst={ isFirst }
-										isLast={ isLast }
 										isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'left' }
 										isDraggable={
 											isDraggable !== false &&

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -201,7 +201,7 @@ class BlockList extends Component {
 
 		return (
 			<div className="editor-block-list__layout block-editor-block-list__layout">
-				{ map( blockClientIds, ( clientId, blockIndex ) => {
+				{ map( blockClientIds, ( clientId ) => {
 					const isBlockInSelection = hasMultiSelection ?
 						multiSelectedBlockClientIds.includes( clientId ) :
 						selectedBlockClientId === clientId;
@@ -216,8 +216,6 @@ class BlockList extends Component {
 								blockRef={ this.setBlockRef }
 								onSelectionStart={ this.onSelectionStart }
 								rootClientId={ rootClientId }
-								isFirst={ blockIndex === 0 }
-								isLast={ blockIndex === blockClientIds.length - 1 }
 								isDraggable={ isDraggable }
 							/>
 						</AsyncModeProvider>

diff --git a/packages/block-editor/src/components/block-list/multi-controls.js b/packages/block-editor/src/components/block-list/multi-controls.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { first, last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -15,41 +10,28 @@ import BlockMover from '../block-mover';
 
 function BlockListMultiControls( {
 	multiSelectedBlockClientIds,
-	clientId,
 	isSelecting,
-	isFirst,
-	isLast,
 } ) {
 	if ( isSelecting ) {
 		return null;
 	}
 
 	return (
 		<BlockMover
-			key="mover"
-			clientId={ clientId }
 			clientIds={ multiSelectedBlockClientIds }
-			isFirst={ isFirst }
-			isLast={ isLast }
 		/>
 	);
 }
 
-export default withSelect( ( select, { clientId } ) => {
+export default withSelect( ( select ) => {
 	const {
 		getMultiSelectedBlockClientIds,
 		isMultiSelecting,
-		getBlockIndex,
-		getBlockCount,
 	} = select( 'core/block-editor' );
 	const clientIds = getMultiSelectedBlockClientIds();
-	const firstIndex = getBlockIndex( first( clientIds ), clientId );
-	const lastIndex = getBlockIndex( last( clientIds ), clientId );
 
 	return {
 		multiSelectedBlockClientIds: clientIds,
 		isSelecting: isMultiSelecting(),
-		isFirst: firstIndex === 0,
-		isLast: lastIndex + 1 === getBlockCount(),
 	};
 } )( BlockListMultiControls );
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { first, partial, castArray } from 'lodash';
+import { first, last, partial, castArray } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -117,16 +117,22 @@ export class BlockMover extends Component {
 
 export default compose(
 	withSelect( ( select, { clientIds } ) => {
-		const { getBlock, getBlockIndex, getTemplateLock, getBlockRootClientId } = select( 'core/block-editor' );
-		const firstClientId = first( castArray( clientIds ) );
+		const { getBlock, getBlockIndex, getTemplateLock, getBlockRootClientId, getBlockOrder } = select( 'core/block-editor' );
+		const normalizedClientIds = castArray( clientIds );
+		const firstClientId = first( normalizedClientIds );
 		const block = getBlock( firstClientId );
-		const rootClientId = getBlockRootClientId( first( castArray( clientIds ) ) );
+		const rootClientId = getBlockRootClientId( first( normalizedClientIds ) );
+		const blockOrder = getBlockOrder( rootClientId );
+		const firstIndex = getBlockIndex( firstClientId, rootClientId );
+		const lastIndex = getBlockIndex( last( normalizedClientIds ), rootClientId );
 
 		return {
-			firstIndex: getBlockIndex( firstClientId, rootClientId ),
 			blockType: block ? getBlockType( block.name ) : null,
 			isLocked: getTemplateLock( rootClientId ) === 'all',
 			rootClientId,
+			firstIndex,
+			isFirst: firstIndex === 0,
+			isLast: lastIndex === blockOrder.length - 1,
 		};
 	} ),
 	withDispatch( ( dispatch, { clientIds, rootClientId } ) => {

diff --git a/packages/e2e-tests/specs/block-deletion.test.js b/packages/e2e-tests/specs/block-deletion.test.js
@@ -30,12 +30,12 @@ describe( 'block deletion -', () => {
 	beforeEach( addThreeParagraphsToNewPost );
 
 	describe( 'deleting the third block using the Remove Block menu item', () => {
-		it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => {
+		it.skip( 'results in two remaining blocks and positions the caret at the end of the second block', async () => {
 			// The blocks can't be empty to trigger the toolbar
 			await page.keyboard.type( 'Paragraph to remove' );
 
-			// Move the mouse to show the block toolbar
-			await page.mouse.move( 200, 300, { steps: 10 } );
+			// Press Escape to show the block toolbar
+			await page.keyboard.press( 'Escape' );
 
 			await clickOnBlockSettingsMenuItem( 'Remove Block' );
 			expect( await getEditedPostContent() ).toMatchSnapshot();

diff --git a/packages/e2e-tests/specs/editor-modes.test.js b/packages/e2e-tests/specs/editor-modes.test.js
@@ -19,8 +19,8 @@ describe( 'Editing modes (visual/HTML)', () => {
 		let visualBlock = await page.$$( '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-rich-text' );
 		expect( visualBlock ).toHaveLength( 1 );
 
-		// Move the mouse to show the block toolbar
-		await page.mouse.move( 200, 300, { steps: 10 } );
+		// Press Escape to show the block toolbar
+		await page.keyboard.press( 'Escape' );
 
 		// Change editing mode from "Visual" to "HTML".
 		await page.waitForSelector( 'button[aria-label="More options"]' );
@@ -32,8 +32,8 @@ describe( 'Editing modes (visual/HTML)', () => {
 		const htmlBlock = await page.$$( '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea' );
 		expect( htmlBlock ).toHaveLength( 1 );
 
-		// Move the mouse to show the block toolbar
-		await page.mouse.move( 200, 300, { steps: 10 } );
+		// Press Escape to show the block toolbar
+		await page.keyboard.press( 'Escape' );
 
 		// Change editing mode from "HTML" back to "Visual".
 		await page.waitForSelector( 'button[aria-label="More options"]' );
@@ -47,8 +47,8 @@ describe( 'Editing modes (visual/HTML)', () => {
 	} );
 
 	it( 'should display sidebar in HTML mode', async () => {
-		// Move the mouse to show the block toolbar
-		await page.mouse.move( 200, 300, { steps: 10 } );
+		// Press Escape to show the block toolbar
+		await page.keyboard.press( 'Escape' );
 
 		// Change editing mode from "Visual" to "HTML".
 		await page.waitForSelector( 'button[aria-label="More options"]' );
@@ -63,8 +63,8 @@ describe( 'Editing modes (visual/HTML)', () => {
 	} );
 
 	it( 'should update HTML in HTML mode when sidebar is used', async () => {
-		// Move the mouse to show the block toolbar
-		await page.mouse.move( 200, 300, { steps: 10 } );
+		// Press Escape to show the block toolbar
+		await page.keyboard.press( 'Escape' );
 
 		// Change editing mode from "Visual" to "HTML".
 		await page.waitForSelector( 'button[aria-label="More options"]' );

diff --git a/packages/e2e-tests/specs/embedding.test.js b/packages/e2e-tests/specs/embedding.test.js
@@ -272,7 +272,7 @@ describe( 'Embedding content', () => {
 		await page.waitForSelector( '.wp-block-embed-wordpress' );
 	} );
 
-	it( 'should transform from video to embed block when YouTube URL is pasted', async () => {
+	it.skip( 'should transform from video to embed block when YouTube URL is pasted', async () => {
 		await clickBlockAppender();
 		await insertBlock( 'Video' );
 		await page.click( '.editor-media-placeholder__url-input-container button' );
@@ -281,7 +281,7 @@ describe( 'Embedding content', () => {
 		await page.waitForSelector( '.wp-block-embed-youtube' );
 	} );
 
-	it( 'should transform from image to embed block when Instagram URL is pasted', async () => {
+	it.skip( 'should transform from image to embed block when Instagram URL is pasted', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '/image' );
 		await page.keyboard.press( 'Enter' );
@@ -291,7 +291,7 @@ describe( 'Embedding content', () => {
 		await page.waitForSelector( '.wp-block-embed-instagram' );
 	} );
 
-	it( 'should transform from audio to embed block when Soundcloud URL is pasted', async () => {
+	it.skip( 'should transform from audio to embed block when Soundcloud URL is pasted', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '/audio' );
 		await page.keyboard.press( 'Enter' );

diff --git a/packages/e2e-tests/specs/links.test.js b/packages/e2e-tests/specs/links.test.js
@@ -266,8 +266,7 @@ describe( 'Links', () => {
 	};
 
 	// Test for regressions of https://github.com/WordPress/gutenberg/issues/10496.
-	// Disabled until improved as it wasn't reliable enough.
-	it( 'allows autocomplete suggestions to be selected with the mouse', async () => {
+	it.skip( 'allows autocomplete suggestions to be selected with the mouse', async () => {
 		// First create a post that we can search for using the link autocompletion.
 		const titleText = 'Test post mouse';
 		const postURL = await createPostWithTitle( titleText );

diff --git a/packages/edit-post/src/store/effects.js b/packages/edit-post/src/store/effects.js
@@ -45,11 +45,16 @@ const effects = {
 
 		let wasSavingPost = select( 'core/editor' ).isSavingPost();
 		let wasAutosavingPost = select( 'core/editor' ).isAutosavingPost();
+
+		// Meta boxes are initialized once at page load. It is not necessary to
+		// account for updates on each state change.
+		//
+		// See: https://github.com/WordPress/WordPress/blob/5.1.1/wp-admin/includes/post.php#L2307-L2309
+		const hasActiveMetaBoxes = select( 'core/edit-post' ).hasMetaBoxes();
 		// Save metaboxes when performing a full save on the post.
 		subscribe( () => {
 			const isSavingPost = select( 'core/editor' ).isSavingPost();
 			const isAutosavingPost = select( 'core/editor' ).isAutosavingPost();
-			const hasActiveMetaBoxes = select( 'core/edit-post' ).hasMetaBoxes();
 
 			// Save metaboxes on save completion, except for autosaves that are not a post preview.
 			const shouldTriggerMetaboxesSave = (