Merge branch 'master' into update-adds-default-alt-values-for-WordPre…

…ss#1520

.eslintrc.js

@@ -169,6 +169,21 @@ module.exports = {
 				message: 'Do not use Math.random() to generate unique IDs; use withInstanceId instead. (If you’re not generating unique IDs: ignore this message.)',
 			},
 		],
+		'react/forbid-elements': [ 'error', {
+			forbid: [
+				[ 'circle', 'Circle' ],
+				[ 'g', 'G' ],
+				[ 'path', 'Path' ],
+				[ 'polygon', 'Polygon' ],
+				[ 'rect', 'Rect' ],
+				[ 'svg', 'SVG' ],
+			].map( ( [ element, componentName ] ) => {
+				return {
+					element,
+					message: `use cross-platform <${ componentName }> component instead.`,
+				};
+			} ),
+		} ],
 	},
 	overrides: [
 		{

CONTRIBUTING.md

@@ -244,7 +244,7 @@ If you'd like to contribute to the design or front-end, feel free to contribute
 
 Documentation is automatically synced from master to the [Gutenberg Documentation Website](https://wordpress.org/gutenberg/handbook/) every 15 minutes.
 
-To add a new documentation page, you'll have to create a Markdown file in the [docs](https://github.com/WordPress/gutenberg/tree/master/docs) folder and add an item to the [manifest file](https://github.com/WordPress/gutenberg/blob/master/docs/root-manifest.json).
+To add a new documentation page, you'll have to create a Markdown file in the [docs](https://github.com/WordPress/gutenberg/tree/master/docs) folder and add an item to the [root-manifest.json](https://github.com/WordPress/gutenberg/blob/master/docs/root-manifest.json).
 
 ### `@wordpress/component`
 

assets/stylesheets/_breakpoints.scss

@@ -5,6 +5,8 @@
 // Most used breakpoints
 $break-huge: 1440px;
 $break-wide: 1280px;
+$break-xlarge: 1080px;
+$break-large: 960px;	// admin sidebar auto folds
 $break-large: 960px;	// admin sidebar auto folds
 $break-medium: 782px;	// adminbar goes big
 $break-small: 600px;

assets/stylesheets/_mixins.scss

@@ -14,6 +14,12 @@
 	}
 }
 
+@mixin break-xlarge() {
+	@media (min-width: #{ ($break-xlarge) }) {
+		@content;
+	}
+}
+
 @mixin break-large() {
 	@media (min-width: #{ ($break-large) }) {
 		@content;

assets/stylesheets/_z-index.scss

@@ -29,6 +29,8 @@ $z-layers: (
 	".edit-post-header": 30,
 	".block-library-button__inline-link .editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
 	".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
+	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
+	".wp-block-cover__video-background": 0, // Video background inside cover block.
 
 	// Side UI active buttons
 	".editor-block-mover__control": 1,
@@ -80,7 +82,7 @@ $z-layers: (
 	".components-popover:not(.is-mobile).is-bottom": 99990,
 
 	// Shows above edit post sidebar; Specificity needs to be higher than 3 classes.
-	".gutenberg__editor .components-popover.components-color-palette__picker.is-bottom": 100001,
+	".block-editor__container .components-popover.components-color-palette__picker.is-bottom": 100001,
 
 	".components-autocomplete__results": 1000000,
 

docs/block-api/deprecated-blocks.md

@@ -112,7 +112,7 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 	},
 
 	save: function( props ) {
-		return el( 'div', {}, props.attributes.text );
+		return el( 'div', {}, props.attributes.content );
 	},
 
 	deprecated: [
@@ -153,7 +153,7 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 	},
 
 	save( props ) {
-		return <div>{ props.attributes.text }</div>;
+		return <div>{ props.attributes.content }</div>;
 	},
 
 	deprecated: [

docs/blocks/creating-dynamic-blocks.md

@@ -23,7 +23,12 @@ registerBlockType( 'my-plugin/latest-post', {
 			posts: select( 'core' ).getEntityRecords( 'postType', 'post' )
 		};
 	} )( function( props ) {
-		if ( props.posts && props.posts.length === 0 ) {
+
+		if ( ! props.posts ) {
+			return "Loading...";
+		}
+
+		if ( props.posts.length === 0 ) {
 			return "No posts";
 		}
 		var className = props.className;
@@ -59,10 +64,16 @@ registerBlockType( 'my-plugin/latest-post', {
 			posts: select( 'core' ).getEntityRecords( 'postType', 'post' )
 		};
 	} )( ( { posts, className } ) => {
+
+		if ( ! posts ) {
+			return "Loading...";
+		}
+
 		if ( posts && posts.length === 0 ) {
 			return "No posts";
 		}
-		var post = posts[ 0 ];
+
+		let post = posts[ 0 ];
 
 		return <a className={ className } href={ post.link }>
 			{ post.title.rendered }

docs/blocks/writing-your-first-block-type.md

@@ -80,7 +80,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-01', {
 ```
 {% end %}
 
-Once a block is registered, you should immediately see that it becomes available as an option in the editor inserter dialog, using values from `title`, `icon`, and `category` to organize its display. You can choose an icon from any included in the built-in [Dashicons icon set](https://developer.wordpress.org/resource/dashicons/), or provide your own by assigning the value of `icon` as a [WordPress Element](https://github.com/WordPress/gutenberg/tree/master/packages/element) element or component.
+Once a block is registered, you should immediately see that it becomes available as an option in the editor inserter dialog, using values from `title`, `icon`, and `category` to organize its display. You can choose an icon from any included in the built-in [Dashicons icon set](https://developer.wordpress.org/resource/dashicons/), or provide a [custom svg element](https://wordpress.org/gutenberg/handbook/block-api/#icon-optional).
 
 A block name must be prefixed with a namespace specific to your plugin. This helps prevent conflicts when more than one plugin registers a block with the same name.
 

docs/data/data-core-edit-post.md

@@ -195,6 +195,19 @@ Returns an array of active meta box locations.
 
 Active meta box locations.
 
+### isMetaBoxLocationVisible
+
+Returns true if a metabox location is active and visible
+
+*Parameters*
+
+ * state: Post editor state.
+ * location: Meta box location to test.
+
+*Returns*
+
+Whether the meta box location is active and visible.
+
 ### isMetaBoxLocationActive
 
 Returns true if there is an active meta box in the given location, or false
@@ -209,6 +222,31 @@ otherwise.
 
 Whether the meta box location is active.
 
+### getMetaBoxesPerLocation
+
+Returns the list of all the available meta boxes for a given location.
+
+*Parameters*
+
+ * state: Global application state.
+ * location: Meta box location to test.
+
+*Returns*
+
+List of meta boxes.
+
+### getAllMetaBoxes
+
+Returns the list of all the available meta boxes.
+
+*Parameters*
+
+ * state: Global application state.
+
+*Returns*
+
+List of meta boxes.
+
 ### getMetaBox
 
 Returns the state of legacy meta boxes.
@@ -326,30 +364,14 @@ Returns an action object used to toggle a plugin name flag.
 
  * pluginName: Plugin name.
 
-### initializeMetaBoxState
-
-Returns an action object used to check the state of meta boxes at a location.
-
-This should only be fired once to initialize meta box state. If a meta box
-area is empty, this will set the store state to indicate that React should
-not render the meta box area.
-
-Example: metaBoxes = { side: true, normal: false }.
-
-This indicates that the sidebar has a meta box but the normal area does not.
-
-*Parameters*
-
- * metaBoxes: Whether meta box locations are active.
-
-### setActiveMetaBoxLocations
+### setAvailableMetaBoxesPerLocation
 
-Returns an action object used in signaling that the active meta box
-locations have changed.
+Returns an action object used in signaling
+what Meta boxes are available in which location.
 
 *Parameters*
 
- * locations: New active meta box locations.
+ * metaBoxesPerLocation: Meta boxes per location.
 
 ### requestMetaBoxUpdates
 

docs/data/data-core-editor.md

@@ -1545,10 +1545,6 @@ Returns an action object resetting the template validity.
 
  * isValid: template validity flag.
 
-### checkTemplateValidity
-
-Returns an action object to check the template validity.
-
 ### synchronizeTemplate
 
 Returns an action object synchronize the template with the list of blocks

docs/extensibility/theme-support.md

@@ -45,7 +45,7 @@ Some blocks such as the image block have the possibility to define a "wide" or "
 add_theme_support( 'align-wide' );
 ```
 
-For more information about this function, see [the developer docs on `add_theme_support()`](https://developer.wordpress.org/reference/functions/add_theme_support/). 
+For more information about this function, see [the developer docs on `add_theme_support()`](https://developer.wordpress.org/reference/functions/add_theme_support/).
 
 ### Wide Alignments and Floats
 
@@ -238,7 +238,7 @@ You can style the editor like any other webpage. Here's how to change the backgr
 
 ```css
 /* Add this to your `style-editor.css` file */
-body.gutenberg-editor-page {
+body.block-editor-page {
 	background-color: #d3ebf3;
 	color: #00005d;
 }
@@ -250,19 +250,19 @@ To change the main column width of the editor, add the following CSS to `style-e
 
 ```css
 /* Main column width */
-body.gutenberg-editor-page .editor-post-title__block,
-body.gutenberg-editor-page .editor-default-block-appender,
-body.gutenberg-editor-page .editor-block-list__block {
+body.block-editor-page .editor-post-title__block,
+body.block-editor-page .editor-default-block-appender,
+body.block-editor-page .editor-block-list__block {
 	max-width: 720px;
 }
 
 /* Width of "wide" blocks */
-body.gutenberg-editor-page .editor-block-list__block[data-align="wide"] {
+body.block-editor-page .editor-block-list__block[data-align="wide"] {
 	max-width: 1080px;
 }
 
 /* Width of "full-wide" blocks */
-body.gutenberg-editor-page .editor-block-list__block[data-align="full"] {
+body.block-editor-page .editor-block-list__block[data-align="full"] {
 	max-width: none;
 }
 ```
@@ -278,3 +278,19 @@ Core blocks include default styles. The styles are enqueued for editing but are
 ```php
 add_theme_support( 'wp-block-styles' );
 ```
+
+## Responsive embedded content
+
+The embed blocks automatically apply styles to embedded content to reflect the aspect ratio of content that is embedded in an iFrame. A block styled with the aspect ratio responsive styles would look like:
+
+```html
+<figure class="wp-embed-aspect-16-9 wp-has-aspect-ratio">
+   ...
+</figure>
+```
+
+To make the content resize and keep its aspect ratio, the `<body>` element needs the `wp-embed-responsive` class. This is not set by default, and requires the theme to opt in to the `responsive-embeds` feature:
+
+```php
+add_theme_support( 'responsive-embeds' );
+```

docs/manifest.json

@@ -581,6 +581,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/color-palette/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "ColorPicker",
+		"slug": "color-picker",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/color-picker/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Dashicon",
 		"slug": "dashicon",

docs/reference/deprecated.md

@@ -1,16 +1,22 @@
 Gutenberg's deprecation policy is intended to support backwards-compatibility for releases, when possible. The current deprecations are listed below and are grouped by _the version at which they will be removed completely_. If your plugin depends on these behaviors, you must update to the recommended alternative before the noted version.
 
+# 4.4.0
+ - `wp.date.getSettings` has been removed. Please use `wp.date.__experimentalGetSettings` instead.
+
 # 4.3.0
 
 - `isEditorSidebarPanelOpened` selector (`core/edit-post`) has been removed. Please use `isEditorPanelEnabled` instead.
 - `toggleGeneralSidebarEditorPanel` action (`core/edit-post`) has been removed. Please use `toggleEditorPanelOpened` instead.
+- `wp.components.PanelColor` component has been removed. Please use `wp.editor.PanelColorSettings` instead.
+- `wp.editor.PanelColor` component has been removed. Please use `wp.editor.PanelColorSettings` instead.
 
 ## 4.2.0
 
 - Writing resolvers as async generators has been removed. Use the controls plugin instead.
 - `wp.components.AccessibleSVG` component has been removed. Please use `wp.components.SVG` instead.
 - The `wp.editor.UnsavedChangesWarning` component no longer accepts a `forceIsDirty` prop.
-- `initializeMetaBoxState` action (`core/edit-post`) has been removed. Use `setActiveMetaBoxLocations` action (`core/edit-post`) instead.
+- `setActiveMetaBoxLocations` action (`core/edit-post`) has been removed.
+- `initializeMetaBoxState` action (`core/edit-post`) has been removed.
 - `wp.editPost.initializeEditor` no longer returns an object. Use the `setActiveMetaBoxLocations` action (`core/edit-post`) in place of the existing object's `initializeMetaBoxes` function.
 - `setMetaBoxSavedData` action (`core/edit-post`) has been removed.
 - `getMetaBoxes` selector (`core/edit-post`) has been removed. Use `getActiveMetaBoxLocations` selector (`core/edit-post`) instead.

docs/reference/release.md

@@ -47,7 +47,7 @@ Creating a release candidate involves:
 1. [Create a new release on GitHub](https://github.com/WordPress/gutenberg/releases/new).
 2. If you were releasing the `5.0.0` release candidate, label it `v5.0.0-rc.1`.
 3. The GitHub release screen should look like this:
-[![GitHub Release Screenshot](https://raw.githubusercontent.com/WordPress/gutenberg/docs/more-release-docs-tweaks/docs/reference/release-screenshot.png)](https://raw.githubusercontent.com/WordPress/gutenberg/docs/more-release-docs-tweaks/docs/reference/release-screenshot.png)
+[![GitHub Release Screenshot](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/reference/release-screenshot.png)](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/reference/release-screenshot.png)
 4. Creative emojis related to a key feature in this release are encouraged. Emojis are fun!
 5. Publish the release.