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

* 'master' of https://github.com/WordPress/gutenberg: (69 commits)
  fix: Show permalink editor in editor (WordPress#7494)
  Fix text wrapping in Firefox. (WordPress#7472)
  Try another approach to fixing the sibling inserter in Firefox (WordPress#7530)
  fix: Improve "add block" text in NUX onboarding (WordPress#7511)
  Implement core style of including revisions data on Post response (WordPress#7495)
  Testing: Add e2e test for PluginPostStatusInfo (WordPress#7284)
  Add end 2 end test for sidebar behaviours on mobile and desktop. (WordPress#6877)
  Only save metaboxes when it's not an autosave (WordPress#7502)
  Fix broken links in documentation (WordPress#7532)
  Remove post type 'viewable' compatibility shim (WordPress#7496)
  Fix typo. (WordPress#7528)
  Blocks: Remove wrapping div from paragraph block (WordPress#7477)
  fix: change import for InnerBlocks (WordPress#7484)
  Polish library just a teeeeensy bit (WordPress#7522)
  feat: Add snapshot update script (WordPress#7514)
  Display server error message when one exists (WordPress#7434)
  Fix issues with gallery in IE11. (WordPress#7465)
  Polish region focus style (WordPress#7459)
  Fix IE11 formatting toolbar visibility (WordPress#7413)
  Update plugin version to 3.1. (WordPress#7402)
  ...

CONTRIBUTORS.md

@@ -98,4 +98,5 @@ This list is manually curated to include valuable contributions by volunteers th
 | @nfmohit-wpmudev |
 | @noisysocks | @noisysocks |
 | @omarreiss | @omarreiss |
-| @hedgefield | @hedgefield |
+| @hedgefield | @hedgefield |
+| @hideokamoto | @hideokamoto |

README.md

@@ -36,7 +36,7 @@ Blocks are the unifying evolution of what is now covered, in different ways, by
 
 Imagine a custom “employee” block that a client can drag to an About page to automatically display a picture, name, and bio. A whole universe of plugins that all extend WordPress in the same way. Simplified menus and widgets. Users who can instantly understand and use WordPress  -- and 90% of plugins. This will allow you to easily compose beautiful posts like <a href="http://moc.co/sandbox/example-post/">this example</a>.
 
-Check out the <a href="https://github.com/WordPress/gutenberg/blob/master/docs/faq.md">FAQ</a> for answers to the most common questions about the project.
+Check out the <a href="https://github.com/WordPress/gutenberg/blob/master/docs/reference/faq.md">FAQ</a> for answers to the most common questions about the project.
 
 ## Compatibility
 

blocks/api/registration.js

@@ -149,15 +149,6 @@ export function registerBlockType( name, settings ) {
 		return;
 	}
 
-	if ( 'isPrivate' in settings ) {
-		deprecated( 'isPrivate', {
-			version: '3.1',
-			alternative: 'supports.inserter',
-			plugin: 'Gutenberg',
-		} );
-		set( settings, [ 'supports', 'inserter' ], ! settings.isPrivate );
-	}
-
 	if ( 'useOnce' in settings ) {
 		deprecated( 'useOnce', {
 			version: '3.3',

blocks/api/serializer.js

@@ -164,12 +164,29 @@ export function getCommentAttributes( allAttributes, blockType ) {
 	return attributes;
 }
 
-export function serializeAttributes( attrs ) {
-	return JSON.stringify( attrs )
-		.replace( /--/g, '\\u002d\\u002d' ) // don't break HTML comments
-		.replace( /</g, '\\u003c' ) // don't break standard-non-compliant tools
-		.replace( />/g, '\\u003e' ) // ibid
-		.replace( /&/g, '\\u0026' ); // ibid
+/**
+ * Given an attributes object, returns a string in the serialized attributes
+ * format prepared for post content.
+ *
+ * @param {Object} attributes Attributes object.
+ *
+ * @return {string} Serialized attributes.
+ */
+export function serializeAttributes( attributes ) {
+	return JSON.stringify( attributes )
+		// Don't break HTML comments.
+		.replace( /--/g, '\\u002d\\u002d' )
+
+		// Don't break non-standard-compliant tools.
+		.replace( /</g, '\\u003c' )
+		.replace( />/g, '\\u003e' )
+		.replace( /&/g, '\\u0026' )
+
+		// Bypass server stripslashes behavior which would unescape stringify's
+		// escaping of quotation mark.
+		//
+		// See: https://developer.wordpress.org/reference/functions/wp_kses_stripslashes/
+		.replace( /\\"/g, '\\u0022' );
 }
 
 /**

blocks/api/test/parser.js

@@ -16,6 +16,8 @@ import {
 	getBlockTypes,
 	setUnknownTypeHandlerName,
 } from '../registration';
+import { createBlock } from '../factory';
+import serialize from '../serializer';
 
 describe( 'block parser', () => {
 	const defaultBlockSettings = {
@@ -571,5 +573,24 @@ describe( 'block parser', () => {
 				'core/test-block', 'core/void-block',
 			] );
 		} );
+
+		it( 'should parse with unicode escaped returned to original representation', () => {
+			registerBlockType( 'core/code', {
+				category: 'common',
+				title: 'Code Block',
+				attributes: {
+					content: {
+						type: 'string',
+					},
+				},
+				save: ( { attributes } ) => attributes.content,
+			} );
+
+			const content = '$foo = "My \"escaped\" text.";';
+			const block = createBlock( 'core/code', { content } );
+			const serialized = serialize( block );
+			const parsed = parse( serialized );
+			expect( parsed[ 0 ].attributes.content ).toBe( content );
+		} );
 	} );
 } );

blocks/api/test/serializer.js

@@ -130,15 +130,22 @@ describe( 'block serializer', () => {
 		it( 'should not break HTML comments', () => {
 			expect( serializeAttributes( { a: '-- and --' } ) ).toBe( '{"a":"\\u002d\\u002d and \\u002d\\u002d"}' );
 		} );
+
 		it( 'should not break standard-non-compliant tools for "<"', () => {
 			expect( serializeAttributes( { a: '< and <' } ) ).toBe( '{"a":"\\u003c and \\u003c"}' );
 		} );
+
 		it( 'should not break standard-non-compliant tools for ">"', () => {
 			expect( serializeAttributes( { a: '> and >' } ) ).toBe( '{"a":"\\u003e and \\u003e"}' );
 		} );
+
 		it( 'should not break standard-non-compliant tools for "&"', () => {
 			expect( serializeAttributes( { a: '& and &' } ) ).toBe( '{"a":"\\u0026 and \\u0026"}' );
 		} );
+
+		it( 'should replace quotation marks', () => {
+			expect( serializeAttributes( { a: '" and "' } ) ).toBe( '{"a":"\\u0022 and \\u0022"}' );
+		} );
 	} );
 
 	describe( 'getCommentDelimitedContent()', () => {

blocks/deprecated-hooks.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { includes } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addAction, addFilter } from '@wordpress/hooks';
+import deprecated from '@wordpress/deprecated';
+
+const forwardDeprecatedHooks = ( oldHookName, ...args ) => {
+	const deprecatedHooks = [
+		'blocks.Autocomplete.completers',
+		'blocks.BlockEdit',
+		'blocks.BlockListBlock',
+		'blocks.MediaUpload',
+	];
+	if ( includes( deprecatedHooks, oldHookName ) ) {
+		const newHookName = oldHookName.replace( 'blocks.', 'editor.' );
+		deprecated( `${ oldHookName } filter`, {
+			version: '3.3',
+			alternative: newHookName,
+		} );
+		addFilter( newHookName, ...args );
+	}
+};
+
+addAction( 'hookAdded', 'core/editor/deprecated', forwardDeprecatedHooks );

blocks/index.js

@@ -7,5 +7,6 @@
 //
 // Blocks are inferred from the HTML source of a post through a parsing mechanism
 // and then stored as objects in state, from which it is then rendered for editing.
+import './deprecated-hooks';
 import './store';
 export * from './api';

components/autocomplete/index.js

@@ -348,10 +348,22 @@ export class Autocomplete extends Component {
 		/*
 		 * We support both synchronous and asynchronous retrieval of completer options
 		 * but internally treat all as async so we maintain a single, consistent code path.
+		 *
+		 * Because networks can be slow, and the internet is wonderfully unpredictable,
+		 * we don't want two promises updating the state at once. This ensures that only
+		 * the most recent promise will act on `optionsData`. This doesn't use the state
+		 * because `setState` is batched, and so there's no guarantee that setting
+		 * `activePromise` in the state would result in it actually being in `this.state`
+		 * before the promise resolves and we check to see if this is the active promise or not.
 		 */
-		Promise.resolve(
+		const promise = this.activePromise = Promise.resolve(
 			typeof options === 'function' ? options( query ) : options
 		).then( ( optionsData ) => {
+			if ( promise !== this.activePromise ) {
+				// Another promise has become active since this one was asked to resolve, so do nothing,
+				// or else we might end triggering a race condition updating the state.
+				return;
+			}
 			const keyedOptions = optionsData.map( ( optionData, optionIndex ) => ( {
 				key: `${ completer.idx }-${ optionIndex }`,
 				value: optionData,

components/button/index.js

@@ -24,6 +24,7 @@ export function Button( props, ref ) {
 		isBusy,
 		isDefault,
 		isLink,
+		isDestructive,
 		className,
 		disabled,
 		focus,
@@ -39,6 +40,7 @@ export function Button( props, ref ) {
 		'is-toggled': isToggled,
 		'is-busy': isBusy,
 		'is-link': isLink,
+		'is-destructive': isDestructive,
 	} );
 
 	const tag = href !== undefined && ! disabled ? 'a' : 'button';

components/button/style.scss

@@ -54,7 +54,6 @@
 			background: #f7f7f7 !important;
 			box-shadow: none !important;
 			text-shadow: 0 1px 0 #fff !important;
-			cursor: default;
 			-webkit-transform: none !important;
 			transform: none !important;
 		}
@@ -98,7 +97,6 @@
 			border-color: color( theme( button ) shade( 20% ) ) !important;
 			box-shadow: none !important;
 			text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
-			cursor: default;
 		}
 
 		&.is-busy,
@@ -124,7 +122,6 @@
 		border-radius: 0;
 		background: none;
 		outline: none;
-		cursor: pointer;
 		text-align: left;
 		/* Mimics the default link style in common.css */
 		color: #0073aa;
@@ -145,18 +142,21 @@
 		}
 	}
 
+	/* Link buttons that are red to indicate destructive behavior. */
+	&.is-link.is-destructive {
+		color: $alert-red;
+	}
+
 	&:active {
 		color: currentColor;
 	}
 
-	&:disabled {
+	&:disabled,
+	&[disabled] {
+		cursor: default;
 		opacity: 0.3;
 	}
 
-	&:not( :disabled ):not( [aria-disabled="true"] ) {
-		cursor: pointer;
-	}
-
 	&:not( :disabled ):not( [aria-disabled="true"] ):focus {
 		@include button-style__focus-active;
 	}

components/color-palette/index.js

@@ -31,13 +31,21 @@ export default function ColorPalette( { colors, disableCustomColors = false, val
 
 				return (
 					<div key={ color } className="components-color-palette__item-wrapper">
-						<Tooltip text={ name || sprintf( __( 'Color code: %s' ), color ) }>
+						<Tooltip
+							text={ name ||
+								// translators: %s: color hex code e.g: "#f00".
+								sprintf( __( 'Color code: %s' ), color )
+							}>
 							<button
 								type="button"
 								className={ className }
 								style={ style }
 								onClick={ applyOrUnset( color ) }
-								aria-label={ name ? sprintf( __( 'Color: %s' ), name ) : sprintf( __( 'Color code: %s' ), color ) }
+								aria-label={ name ?
+									// translators: %s: The name of the color e.g: "vivid red".
+									sprintf( __( 'Color: %s' ), name ) :
+									// translators: %s: color hex code e.g: "#f00".
+									sprintf( __( 'Color code: %s' ), color ) }
 								aria-pressed={ value === color }
 							/>
 						</Tooltip>

components/date-time/time.js

@@ -39,13 +39,13 @@ class TimePicker extends Component {
 		this.syncState( this.props );
 	}
 
-	componentWillReceiveProps( nextProps ) {
-		const { currentTime, is12Hour } = nextProps;
+	componentDidUpdate( prevProps ) {
+		const { currentTime, is12Hour } = this.props;
 		if (
-			currentTime !== this.props.currentTime ||
-			is12Hour !== this.props.is12Hour
+			currentTime !== prevProps.currentTime ||
+			is12Hour !== prevProps.is12Hour
 		) {
-			this.syncState( nextProps );
+			this.syncState( this.props );
 		}
 	}
 

components/dropdown/index.js

@@ -28,10 +28,10 @@ class Dropdown extends Component {
 		}
 	}
 
-	componentWillUpdate( nextProps, nextState ) {
-		const { isOpen } = nextState;
-		const { onToggle } = nextProps;
-		if ( this.state.isOpen !== isOpen && onToggle ) {
+	componentDidUpdate( prevProps, prevState ) {
+		const { isOpen } = this.state;
+		const { onToggle } = this.props;
+		if ( prevState.isOpen !== isOpen && onToggle ) {
 			onToggle( isOpen );
 		}
 	}

components/form-token-field/index.js

@@ -57,13 +57,15 @@ class FormTokenField extends Component {
 		}
 	}
 
-	componentWillReceiveProps( nextProps ) {
-		if ( nextProps.disabled && this.state.isActive ) {
-			this.setState( {
-				isActive: false,
-				incompleteTokenValue: '',
-			} );
+	static getDerivedStateFromProps( props, state ) {
+		if ( ! props.disabled || ! state.isActive ) {
+			return null;
 		}
+
+		return {
+			isActive: false,
+			incompleteTokenValue: '',
+		};
 	}
 
 	bindInput( ref ) {
@@ -515,7 +517,6 @@ class FormTokenField extends Component {
 		} );
 
 		let tokenFieldProps = {
-			ref: 'main',
 			className: classes,
 			tabIndex: '-1',
 		};

components/higher-order/navigate-regions/style.scss

@@ -7,6 +7,7 @@
 		left: 0;
 		right: 0;
 		pointer-events: none;
-		border: 4px solid $blue-medium-400;
+		outline: 4px solid transparent; // Shown in Windows High Contrast mode.
+		@include region_focus( .1s );
 	}
 }