WP Updates

.eslintrc.js

@@ -19,7 +19,7 @@ const majorMinorRegExp = escapeRegExp( version.replace( /\.\d+$/, '' ) ) + '(\\.
 module.exports = {
 	root: true,
 	extends: [
-		'@wordpress/eslint-config',
+		'plugin:@wordpress/eslint-plugin/recommended',
 		'plugin:jest/recommended',
 	],
 	rules: {

CONTRIBUTING.md

@@ -166,9 +166,9 @@ Maintaining dozens of npm packages is difficult—it can be tough to keep track
 
 The developer who proposes a change (pull request) is responsible to choose the correct version increment (`major`, `minor`, or `patch`) according to the following guidelines:
 
-- Major version X (X.y.z | X > 0) should be changed with any backwards-incompatible/"breaking" change. This will usually occur at the final stage of deprecating and removing of a feature.
-- Minor version Y (x.Y.z | x > 0) should be changed when you add functionality or change functionality in a backwards-compatible manner. It must be incremented if any public API functionality is marked as deprecated.
-- Patch version Z (x.y.Z | x > 0) should be incremented when you make backwards-compatible bug fixes.
+- Major version X (X.y.z | X > 0) should be changed with any backward incompatible/"breaking" change. This will usually occur at the final stage of deprecating and removing of a feature.
+- Minor version Y (x.Y.z | x > 0) should be changed when you add functionality or change functionality in a backward compatible manner. It must be incremented if any public API functionality is marked as deprecated.
+- Patch version Z (x.y.Z | x > 0) should be incremented when you make backward compatible bug fixes.
 
 When in doubt, refer to [Semantic Versioning specification](https://semver.org/).
 

CONTRIBUTORS.md

@@ -121,3 +121,6 @@ This list is manually curated to include valuable contributions by volunteers th
 | @greatislander | @greatislander |
 | @sharazghouri | @sharaz |
 | @jakeparis | @jakeparis |
+| @designsimply | @designsimply |
+| @aldavigdis | @aldavigdis |
+| @miya0001 | @miyauchi |

README.md

@@ -2,14 +2,12 @@
 [![Build Status](https://img.shields.io/travis/WordPress/gutenberg/master.svg)](https://travis-ci.org/WordPress/gutenberg)
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
 
-Printing since 1440.
-
-![Gutenberg editing](https://cldup.com/H0oKBfpidk.png)
+![Screenshot of the Gutenberg Editor, editing a post in WordPress](https://cldup.com/H0oKBfpidk.png)
 
 This repo is the development hub for the <a href="https://make.wordpress.org/core/2017/01/04/focus-tech-and-design-leads/">editor focus in WordPress Core</a>. `Gutenberg` is the project name.
 
 ## Getting started
-- **Download:** If you want to use the latest release with your WordPress site, <a href="https://wordpress.org/plugins/gutenberg/">download the latest release from the WordPress.org plugins repository</a>. 
+- **Download:** If you want to use the latest release with your WordPress site, <a href="https://wordpress.org/plugins/gutenberg/">download the latest release from the WordPress.org plugins repository</a>.
 - **Discuss:** Conversations and discussions take place in <a href="https://wordpress.slack.com/messages/C02QB2JS7">`#core-editor` channel on the Making WordPress Slack</a>.
 - **Contribute:** Development of Gutenberg happens in this GitHub repo. Get started by <a href="https://github.com/WordPress/gutenberg/blob/master/CONTRIBUTING.md">reading the contributing guidelines</a>.
 - **Learn:** <a href="https://wordpress.org/gutenberg/">Discover more about the project on WordPress.org</a>.
@@ -46,7 +44,7 @@ Check out the <a href="https://github.com/WordPress/gutenberg/blob/master/docs/r
 
 ## Compatibility
 
-Posts are backwards compatible, and shortcodes will still work. We are continuously exploring how highly-tailored meta boxes can be accommodated, and are looking at solutions ranging from a plugin to disable Gutenberg to automatically detecting whether to load Gutenberg or not. While we want to make sure the new editing experience from writing to publishing is user-friendly, we’re committed to finding a good solution for highly-tailored existing sites.
+Posts are backward compatible, and shortcodes will still work. We are continuously exploring how highly-tailored meta boxes can be accommodated, and are looking at solutions ranging from a plugin to disable Gutenberg to automatically detecting whether to load Gutenberg or not. While we want to make sure the new editing experience from writing to publishing is user-friendly, we’re committed to finding a good solution for highly-tailored existing sites.
 
 ## The stages of Gutenberg
 

bin/install-wordpress.sh

@@ -77,5 +77,9 @@ fi
 echo -e $(status_message "Activating Gutenberg...")
 docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CLI plugin activate gutenberg >/dev/null
 
+# Make sure the uploads folder exist and we have permissions to add files there.
+docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER mkdir -p /var/www/html/wp-content/uploads
+docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER chmod -v 767 /var/www/html/wp-content/uploads
+
 # Install a dummy favicon to avoid 404 errors.
 docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER touch /var/www/html/favicon.ico

docs/contributors/history.md

@@ -1,19 +1,19 @@
 # History
 
 ## Survey
-There was a survey done: https://make.wordpress.org/core/2017/04/07/editor-experience-survey-results/
+There was a survey done: [https://make.wordpress.org/core/2017/04/07/editor-experience-survey-results/](https://make.wordpress.org/core/2017/04/07/editor-experience-survey-results/)
 
 ## Inspiration
 This includes a list of historical articles and influences on Gutenberg.
 
-- LivingDocs: https://beta.livingdocs.io/articles
-- Parrot: https://intenseminimalism.com/2017/parrot-an-integrated-site-builder-and-editor-concept-for-wordpress/
+- LivingDocs: [https://beta.livingdocs.io/articles](https://beta.livingdocs.io/articles)
+- Parrot: [https://intenseminimalism.com/2017/parrot-an-integrated-site-builder-and-editor-concept-for-wordpress/](https://intenseminimalism.com/2017/parrot-an-integrated-site-builder-and-editor-concept-for-wordpress/)
 - Apple Keynote
 - Slack
 - Google Sites v2
 
 ## Blog posts by the team
 
-- Gutenberg tag on make/core: updates and much more: https://make.wordpress.org/core/tag/gutenberg/
-- Suggested revised timeline: https://make.wordpress.org/core/2017/08/11/revised-suggested-roadmap-for-gutenberg-and-customization/
-- Discovering Gutenberg: https://make.wordpress.org/core/2017/08/08/discovering-gutenberg-and-next-steps/
+- Gutenberg tag on make/core: updates and much more: [https://make.wordpress.org/core/tag/gutenberg/](https://make.wordpress.org/core/tag/gutenberg/)
+- Suggested revised timeline: [https://make.wordpress.org/core/2017/08/11/revised-suggested-roadmap-for-gutenberg-and-customization/](https://make.wordpress.org/core/2017/08/11/revised-suggested-roadmap-for-gutenberg-and-customization/)
+- Discovering Gutenberg: [https://make.wordpress.org/core/2017/08/08/discovering-gutenberg-and-next-steps/](https://make.wordpress.org/core/2017/08/08/discovering-gutenberg-and-next-steps/)

docs/designers-developers/developers/README.md

@@ -6,7 +6,7 @@ Gutenberg is highly flexible, like most of WordPress. You can build custom block
 
 Gutenberg is about blocks, and the main extensibility API of Gutenberg is the Block API. It allows you to create your own static blocks, dynamic blocks rendered on the server and also blocks capable of saving data to Post Meta for more structured content.
 
-If you want to learn more about block creation, the [Blocks Tutorial](../../../docs/designers-developers/developers/tutorials/block-tutorial/intro.md) is the best place to start.
+If you want to learn more about block creation, the [Blocks Tutorial](../../../docs/designers-developers/developers/tutorials/block-tutorial/readme.md) is the best place to start.
 
 ## Extending Blocks
 
@@ -26,7 +26,7 @@ You can also filter certain aspects of the editor; this is documented on the [Ed
 
 **Porting PHP meta boxes to blocks and Gutenberg plugins is highly encouraged!**
 
-Discover how [Meta Box](../../../docs/designers-developers/developers/backwards-compatibility/meta-box.md) support works in Gutenberg.
+Discover how [Meta Box](../../../docs/designers-developers/developers/backward-compatibility/meta-box.md) support works in Gutenberg.
 
 ## Theme Support
 

docs/designers-developers/developers/backward-compatibility/README.md

@@ -0,0 +1 @@
+# Backward Compatibility

docs/designers-developers/developers/backwards-compatibility/deprecations.md → docs/designers-developers/developers/backward-compatibility/deprecations.md

@@ -1,6 +1,6 @@
 # Deprecations
 
-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.
+Gutenberg's deprecation policy is intended to support backward 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.5.0
 - `Dropdown.refresh()` has been deprecated as the contained `Popover` is now automatically refreshed.

docs/designers-developers/developers/backwards-compatibility/meta-box.md → docs/designers-developers/developers/backward-compatibility/meta-box.md

@@ -21,7 +21,7 @@ WordPress will fall back to the Classic editor, where the meta box will continue
 
 Explicitly setting `__block_editor_compatible_meta_box` to `true` will cause WordPress to stay in Gutenberg (assuming another meta box doesn't cause a fallback).
 
-After a meta box is converted to a block, it can be declared as existing for backwards compatibility:
+After a meta box is converted to a block, it can be declared as existing for backward compatibility:
 
 ```php
 add_meta_box( 'my-meta-box', 'My Meta Box', 'my_meta_box_callback',
@@ -32,7 +32,7 @@ add_meta_box( 'my-meta-box', 'My Meta Box', 'my_meta_box_callback',
 );
 ```
 
-When Gutenberg is used, this meta box will no longer be displayed in the meta box area, as it now only exists for backwards compatibility purposes. It will continue to display correctly in the Classic editor, should some other meta box cause a fallback.
+When Gutenberg is used, this meta box will no longer be displayed in the meta box area, as it now only exists for backward compatibility purposes. It will continue to display correctly in the Classic editor, should some other meta box cause a fallback.
 
 ### Meta Box Data Collection
 
@@ -42,7 +42,7 @@ See `lib/register.php gutenberg_trick_plugins_into_registering_meta_boxes()`
 
 `gutenberg_collect_meta_box_data()` is hooked in later on `admin_head`. It will run through the functions and hooks that `post.php` runs to register meta boxes; namely `add_meta_boxes`, `add_meta_boxes_{$post->post_type}`, and `do_meta_boxes`.
 
-A copy of the global `$wp_meta_boxes` is made then filtered through `apply_filters( 'filter_gutenberg_meta_boxes', $_meta_boxes_copy );`, which will strip out any core meta boxes, standard custom taxonomy meta boxes, and any meta boxes that have declared themselves as only existing for backwards compatibility purposes.
+A copy of the global `$wp_meta_boxes` is made then filtered through `apply_filters( 'filter_gutenberg_meta_boxes', $_meta_boxes_copy );`, which will strip out any core meta boxes, standard custom taxonomy meta boxes, and any meta boxes that have declared themselves as only existing for backward compatibility purposes.
 
 Then each location for this particular type of meta box is checked for whether it is active. If it is not empty a value of true is stored, if it is empty a value of false is stored. This meta box location data is then dispatched by the editor Redux store in `INITIALIZE_META_BOX_STATE`.
 
@@ -82,3 +82,5 @@ Most PHP meta boxes should continue to work in Gutenberg, but some meta boxes th
 - Plugins relying on selectors that target the post title, post content fields, and other metaboxes (of the old editor).
 - Plugins relying on TinyMCE's API because there's no longer a single TinyMCE instance to talk to in Gutenberg.
 - Plugins making updates to their DOM on "submit" or on "save".
+
+Please also note that if your plugin triggers a PHP warning or notice to be output on the page, this will cause the HTML document type (`<!DOCTYPE html>`) to be output incorrectly. This will cause the browser to render using "Quirks Mode", which is a compatibility layer that gets enabled when the browser doesn't know what type of document it is parsing. The block editor is not meant to work in this mode, but it can _appear_ to be working just fine. If you encounter issues such as *meta boxes overlaying the editor* or other layout issues, please check the raw page source of your document to see that the document type definition is the first thing output on the page. There will also be a warning in the JavaScript console, noting the issue.

docs/designers-developers/developers/block-api/README.md

@@ -4,8 +4,8 @@ Blocks are the fundamental element of the Gutenberg editor. They are the primary
 
 ## Registering a block
 
-All blocks must be registered before they can be used in the editor. You can learn about block registration, and the available options, in the [block registration](block-api/block-registration.md) documentation.
+All blocks must be registered before they can be used in the editor. You can learn about block registration, and the available options, in the [block registration](../../../../docs/designers-developers/developers/block-api/block-registration.md) documentation.
 
 ## Block `edit` and `save`
 
-The `edit` and `save` functions define the editor interface with which a user would interact, and the markup to be serialized back when a post is saved. They are the heart of how a block operates, so they are [covered separately](block-api/block-edit-save.md).
+The `edit` and `save` functions define the editor interface with which a user would interact, and the markup to be serialized back when a post is saved. They are the heart of how a block operates, so they are [covered separately](../../../../docs/designers-developers/developers/block-api/block-edit-save.md).

docs/designers-developers/developers/data/data-core-blocks.md

@@ -224,4 +224,13 @@ Returns an action object used to set block categories.
 
 *Parameters*
 
- * categories: Block categories.
+ * categories: Block categories.
+
+### updateCategory
+
+Returns an action object used to update a category.
+
+*Parameters*
+
+ * slug: Block category slug.
+ * category: Object containing the category properties that should be updated.

docs/designers-developers/developers/data/data-core-editor.md

@@ -411,6 +411,20 @@ Returns whether a block is valid or not.
 
 Is Valid.
 
+### getBlockAttributes
+
+Returns a block's attributes given its client ID, or null if no block exists with
+the client ID.
+
+*Parameters*
+
+ * state: Editor state.
+ * clientId: Block client ID.
+
+*Returns*
+
+Block attributes.
+
 ### getBlock
 
 Returns a block given its client ID. This is a parsed copy of the block,

docs/designers-developers/developers/filters/block-filters.md

@@ -113,10 +113,6 @@ wp.hooks.addFilter(
 );
 ```
 
-#### `blocks.isUnmodifiedDefaultBlock.attributes`
-
-Used internally by the default block (paragraph) to exclude the attributes from the check if the block was modified.
-
 #### `blocks.switchToBlockType.transformedBlock`
 
 Used to filters an individual transform result from block transformation. All of the original blocks are passed, since transformations are many-to-many, not one-to-one.
@@ -198,19 +194,13 @@ _Example:_
 ```js
 var el = wp.element.createElement;
 
-var withDataAlign = wp.compose.createHigherOrderComponent( function( BlockListBlock ) {
+var withClientIdClassName = wp.compose.createHigherOrderComponent( function( BlockListBlock ) {
 	return function( props ) {
 		var newProps = lodash.assign(
 			{},
 			props,
 			{
-				wrapperProps: lodash.assign(
-					{},
-					props.wrapperProps,
-					{
-						'data-align': props.block.attributes.align
-					}
-				)
+				classsName: "block-" + props.clientId,
 			}
 		);
 
@@ -219,27 +209,22 @@ var withDataAlign = wp.compose.createHigherOrderComponent( function( BlockListBl
 			newProps
 		);
 	};
-}, 'withAlign' );
+}, 'withClientIdClassName' );
 
-wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-data-align', withDataAlign );
+wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-name', withClientIdClassName );
 
 ```
 {% ESNext %}
 ```js
 const { createHigherOrderComponent } = wp.compose;
 
-const withDataAlign = createHigherOrderComponent( ( BlockListBlock ) => {
+const withClientIdClassName = createHigherOrderComponent( ( BlockListBlock ) => {
 	return ( props ) => {
-		const { align } = props.block.attributes;
-
-		let wrapperProps = props.wrapperProps;
-		wrapperProps = { ...wrapperProps, 'data-align': align };
-
-		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
+		return <BlockListBlock { ...props } className={ "block-" + props.clientId } />;
 	};
-}, 'withDataAlign' );
+}, 'withClientIdClassName' );
 
-wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-data-align', withDataAlign );
+wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-name', withClientIdClassName );
 ```
 
 {% end %}
@@ -329,12 +314,26 @@ function my_plugin_block_categories( $categories, $post ) {
 			array(
 				'slug' => 'my-category',
 				'title' => __( 'My category', 'my-plugin' ),
-				'icon'  => '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>',
+				'icon'  => 'wordpress',
 			),
 		)
 	);
 }
 add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );
 ```
 
-You can also display an icon with your block category by setting an `icon` attribute. The value can be the slug of a [WordPress Dashicon](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element.
+You can also display an icon with your block category by setting an `icon` attribute.The value can be the slug of a [WordPress Dashicon](https://developer.wordpress.org/resource/dashicons/).
+
+It is possible to set an SVG as the icon of the category if a custom icon is needed.To do so, the icon should be rendered and set on the frontend, so it can make use of WordPress SVG, allowing mobile compatibility and making the icon more accessible.
+
+To set an SVG icon for the category shown in the previous example, add the following example JavaScript code to the editor calling `wp.blocks.updateCategory` e.g:
+```js
+( function() {
+	var el = wp.element.createElement;
+	var SVG = wp.components.SVG;
+	var circle = el( 'circle', { cx: 10, cy: 10, r: 10, fill: 'red', stroke: 'blue', strokeWidth: '10' } );
+	var svgIcon = el( SVG, { width: 20, height: 20, viewBox: '0 0 20 20'}, circle);
+	wp.blocks.updateCategory( 'my-category', { icon: svgIcon } );
+} )();
+``` 
+