Text change for the block change tooltip

assets/stylesheets/_variables.scss

@@ -52,6 +52,7 @@ $resize-handler-size: 16px;
 $resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
 
 // Blocks
+$block-left-border-width: $border-width * 3;
 $block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
 $block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: 28px; // Width of the movers/drag handle UI.

assets/stylesheets/_z-index.scss

@@ -3,37 +3,38 @@
 // value is designed to work with).
 
 $z-layers: (
-	".editor-block-list__block-edit::before": 0,
-	".editor-block-switcher__arrow": 1,
-	".editor-block-list__block {core/image aligned wide or fullwide}": 20,
+	".block-editor-block-list__block-edit::before": 0,
+	".block-editor-block-switcher__arrow": 1,
+	".block-editor-block-list__block {core/image aligned wide or fullwide}": 20,
 	".block-library-classic__toolbar": 10,
-	".editor-block-list__layout .reusable-block-indicator": 1,
-	".editor-block-list__breadcrumb": 2,
+	".block-editor-block-list__layout .reusable-block-indicator": 1,
+	".block-editor-block-list__breadcrumb": 2,
+	".editor-inner-blocks .block-editor-block-list__breadcrumb": 22,
 	".components-form-toggle__input": 1,
 	".components-panel__header.edit-post-sidebar__panel-tabs": -1,
 	".edit-post-sidebar .components-panel": -2,
-	".editor-inserter__tabs": 1,
-	".editor-inserter__tab.is-active": 1,
+	".block-editor-inserter__tabs": 1,
+	".block-editor-inserter__tab.is-active": 1,
 	".components-panel__header": 1,
 	".components-modal__header": 10,
 	".edit-post-meta-boxes-area.is-loading::before": 1,
 	".edit-post-meta-boxes-area .spinner": 5,
-	".editor-block-contextual-toolbar": 21,
+	".block-editor-block-contextual-toolbar": 21,
 	".components-popover__close": 5,
-	".editor-block-list__insertion-point": 6,
-	".editor-inserter-with-shortcuts": 5,
-	".editor-warning": 5,
+	".block-editor-block-list__insertion-point": 6,
+	".block-editor-inserter-with-shortcuts": 5,
+	".block-editor-warning": 5,
 	".block-library-gallery-item__inline-menu": 20,
-	".editor-url-input__suggestions": 30,
+	".block-editor-url-input__suggestions": 30,
 	".edit-post-header": 30,
-	".block-library-button__inline-link .editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
+	".block-library-button__inline-link .block-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__inner-container": 1, // InnerBlocks area inside cover image block
 	".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,
+	".block-editor-block-mover__control": 1,
 
 	// Active pill button
 	".components-button.is-button {:focus or .is-primary}": 1,
@@ -43,22 +44,22 @@ $z-layers: (
 
 	// Should have higher index than the inset/underlay used for dragging
 	".components-placeholder__fieldset": 1,
-	".editor-block-list__block-edit .reusable-block-edit-panel *": 1,
+	".block-editor-block-list__block-edit .reusable-block-edit-panel *": 1,
 
 	// Show drop zone above most standard content, but below any overlays
 	".components-drop-zone": 100,
 	".components-drop-zone__content": 110,
 
 	// The block mover, particularly in nested contexts,
 	// should overlap most block content.
-	".editor-block-list__block.is-{selected,hovered} .editor-block-mover": 80,
+	".block-editor-block-list__block.is-{selected,hovered} .block-editor-block-mover": 80,
 
 	// The block mover for floats should overlap the controls of adjacent blocks.
-	".editor-block-list__block {core/image aligned left or right}": 81,
+	".block-editor-block-list__block {core/image aligned left or right}": 81,
 
 	// Small screen inner blocks overlay must be displayed above drop zone,
 	// settings menu, and movers.
-	".editor-inner-blocks__small-screen-overlay:after": 120,
+	".block-editor-inner-blocks__small-screen-overlay:after": 120,
 
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }

bin/packages/build.js

@@ -164,9 +164,7 @@ function buildScssFile( styleFile ) {
 function buildJsFileFor( file, silent, environment ) {
 	const buildDir = BUILD_DIR[ environment ];
 	const destPath = getBuildPath( file, buildDir );
-	const babelOptions = getBabelConfig( environment );
-	babelOptions.sourceMaps = true;
-	babelOptions.sourceFileName = file;
+	const babelOptions = getBabelConfig( environment, file.replace( PACKAGES_DIR, '@wordpress' ) );
 
 	mkdirp.sync( path.dirname( destPath ) );
 	const transformed = babel.transformFileSync( file, babelOptions );

bin/packages/get-babel-config.js

@@ -1,64 +1,38 @@
-/**
- * External dependencies
- */
-const { get, map } = require( 'lodash' );
-const babel = require( '@babel/core' );
-
-/**
- * WordPress dependencies
- */
-const { options: babelDefaultConfig } = babel.loadPartialConfig( {
-	configFile: '@wordpress/babel-preset-default',
-} );
-const { plugins, presets } = babelDefaultConfig;
-
-const overrideOptions = ( target, targetName, options ) => {
-	if ( get( target, [ 'file', 'request' ] ) === targetName ) {
-		return [ targetName, Object.assign(
-			{},
-			target.options,
-			options
-		) ];
+module.exports = function( environment = '', file ) {
+	/*
+	 * Specific options to be passed using the caller config option:
+	 * https://babeljs.io/docs/en/options#caller
+	 *
+	 * The caller options can only be 'boolean', 'string', or 'number' by design:
+	 * https://github.com/babel/babel/blob/bd0c62dc0c30cf16a4d4ef0ddf21d386f673815c/packages/babel-core/src/config/validation/option-assertions.js#L122
+	 */
+	const callerOpts = { caller: {
+		name: `WP_BUILD_${ environment.toUpperCase() }`,
+	} };
+	switch ( environment ) {
+		case 'main':
+			// to be merged as a presetEnv option
+			callerOpts.caller.modules = 'commonjs';
+			break;
+		case 'module':
+			// to be merged as a presetEnv option
+			callerOpts.caller.modules = false;
+			// to be merged as a pluginTransformRuntime option
+			callerOpts.caller.useESModules = true;
+			break;
+		default:
+			// preventing measure, this shouldn't happen ever
+			delete callerOpts.caller;
 	}
-	return target;
-};
 
-const babelConfigs = {
-	main: Object.assign(
-		{},
-		babelDefaultConfig,
-		{
-			plugins,
-			presets: map(
-				presets,
-				( preset ) => overrideOptions( preset, '@babel/preset-env', {
-					modules: 'commonjs',
-				} )
-			),
-		}
-	),
-	module: Object.assign(
-		{},
-		babelDefaultConfig,
-		{
-			plugins: map(
-				plugins,
-				( plugin ) => overrideOptions( plugin, '@babel/plugin-transform-runtime', {
-					useESModules: true,
-				} )
-			),
-			presets: map(
-				presets,
-				( preset ) => overrideOptions( preset, '@babel/preset-env', {
-					modules: false,
-				} )
-			),
-		}
-	),
-};
-
-function getBabelConfig( environment ) {
-	return babelConfigs[ environment ];
-}
+	// Sourcemaps options
+	const sourceMapsOpts = {
+		sourceMaps: true,
+		sourceFileName: file,
+	};
 
-module.exports = getBabelConfig;
+	return {
+		...callerOpts,
+		...sourceMapsOpts,
+	};
+};

docs/contributors/release.md

@@ -188,17 +188,17 @@ If you don't have access to [make.wordpress.org/core](https://make.wordpress.org
 The Gutenberg repository mirrors the [WordPress SVN repository](https://make.wordpress.org/core/handbook/about/release-cycle/) in terms of branching for each SVN branch, a corresponding Gutenberg `wp/*` branch is created:
 
  - The `wp/trunk` branch contains all the packages that are published and used in the `trunk` branch of WordPress.
- - A Gutenberg branch targetting a specific WordPress major release (including its further minor increments) is created (example `wp/5.2`) based on the `wp/trunk` Gutenberg branch when the WordPress `trunk` branch is marked as "feature-freezed". (This usually happens when the first `beta` of the next WordPress major version is released).
+ - A Gutenberg branch targeting a specific WordPress major release (including its further minor increments) is created (example `wp/5.2`) based on the `wp/trunk` Gutenberg branch when the WordPress `trunk` branch is marked as "feature-freezed". (This usually happens when the first `beta` of the next WordPress major version is released).
 
 ### Synchronizing WordPress Trunk
 
 For each Gutenberg plugin release, WordPress trunk should be synchronized with this release. This involves the following steps:
 
 **Note:** The WordPress `trunk` branch can be closed or in "feature-freeze" mode. Usually, this happens between the first `beta` and the first `RC` of the WordPress release cycle. During this period, the Gutenberg plugin releases should not be synchronized with WordPress Core.
 
-1. Ensure the WordPress `trunk` branch is open for enhancements. 
+1. Ensure the WordPress `trunk` branch is open for enhancements.
 2. Check out the last published Gutenberg release branch `git checkout release/x.x`
-3. Create a Pull Request from this branch targetting `wp/trunk`.
+3. Create a Pull Request from this branch targeting `wp/trunk`.
 4. Merge the Pull Request using the "Rebase and Merge" button to keep the history of the commits.
 
 Now, the branch is ready to be used to publish the npm packages.
@@ -208,7 +208,7 @@ Now, the branch is ready to be used to publish the npm packages.
 3. Update the `CHANGELOG.md` files of the published packages with the new released versions and commit to the `wp/trunk` branch.
 4. Cherry-pick the "Publish" (created by Lerna) and the CHANGELOG update commits into the `master` branch of Gutenberg.
 
-Now, the npm packages should be ready and a patch can be created and commited into WordPress `trunk`.
+Now, the npm packages should be ready and a patch can be created and committed into WordPress `trunk`.
 
 
 ### Minor WordPress Releases
@@ -220,20 +220,20 @@ The following workflow is needed when bug fixes or security releases need to be
 
 1. Cherry-pick
 2. Check out the last published Gutenberg release branch `git checkout release/x.x`
-3. Create a Pull Request from this branch targetting the WordPress related major branch (Example `wp/5.2`).
+3. Create a Pull Request from this branch targeting the WordPress related major branch (Example `wp/5.2`).
 4. Merge the Pull Request using the "Rebase and Merge" button to keep the history of the commits.
 
 Now, the branch is ready to be used to publish the npm packages.
 
 1. Check out the WordPress branch used before (Example `wp/5.2`).
 2. Run the [package release process] but when asked for the version numbers to choose for each package, (assuming the package versions are written using this format `major.minor.patch`) make sure to bump only the `patch` version number. For example, if the last published package version for this WordPress branch was `5.6.0`, choose `5.6.1` as a version.
 
-**Note:** For WordPress `5.0` and WordPress `5.1`, a different release process was used. This means that when choosing npm package versions targetting these two releases, you won't be able to use the next `patch` version number as it may have been already used. You should use the "metadata" modifier for these. For example, if the last published package version for this WordPress branch was `5.6.1`, choose `5.6.1+patch.1` as a version.
+**Note:** For WordPress `5.0` and WordPress `5.1`, a different release process was used. This means that when choosing npm package versions targeting these two releases, you won't be able to use the next `patch` version number as it may have been already used. You should use the "metadata" modifier for these. For example, if the last published package version for this WordPress branch was `5.6.1`, choose `5.6.1+patch.1` as a version.
 
 3. Update the `CHANGELOG.md` files of the published packages with the new released versions and commit to the corresponding branch (Example `wp/5.2`).
 4. Cherry-pick the CHANGELOG update commits into the `master` branch of Gutenberg.
 
-Now, the npm packages should be ready and a patch can be created and commited into the corresponding WordPress SVN branch.
+Now, the npm packages should be ready and a patch can be created and committed into the corresponding WordPress SVN branch.
 
 ---------
 

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

@@ -2,6 +2,17 @@
 
 The Gutenberg project'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.
 
+## 5.5.0
+
+- The PHP function `gutenberg_init` has been removed.
+- The PHP function `is_gutenberg_page` has been removed. Use [`WP_Screen::is_block_editor`](https://developer.wordpress.org/reference/classes/wp_screen/is_block_editor/) instead.
+- The PHP function `the_gutenberg_project` has been removed.
+- The PHP function `gutenberg_default_post_format_template` has been removed.
+- The PHP function `gutenberg_get_available_image_sizes` has been removed.
+- The PHP function `gutenberg_get_autosave_newer_than_post_save` has been removed.
+- The PHP function `gutenberg_default_post_format_template` has been removed.
+- The PHP function `gutenberg_editor_scripts_and_styles` has been removed.
+
 ## 5.4.0
 
 - The PHP function `gutenberg_load_plugin_textdomain` has been removed.

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

@@ -129,6 +129,21 @@ Returns true if the block defines support for a feature, or false otherwise.
 
 Whether block supports feature.
 
+### isMatchingSearchTerm
+
+Returns true if the block type by the given name or object value matches a
+search term, or false otherwise.
+
+*Parameters*
+
+ * state: Blocks state.
+ * nameOrType: Block name or type object.
+ * searchTerm: Search term by which to filter.
+
+*Returns*
+
+Wheter block type matches search term.
+
 ### hasChildBlocks
 
 Returns a boolean indicating if a block has child blocks or not.

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

@@ -339,6 +339,24 @@ Returns an action object used to toggle a plugin name flag.
 
  * pluginName: Plugin name.
 
+### hideBlockTypes
+
+Returns an action object used in signalling that block types by the given
+name(s) should be hidden.
+
+*Parameters*
+
+ * blockNames: Names of block types to hide.
+
+### showBlockTypes
+
+Returns an action object used in signalling that block types by the given
+name(s) should be shown.
+
+*Parameters*
+
+ * blockNames: Names of block types to show.
+
 ### setAvailableMetaBoxesPerLocation
 
 Returns an action object used in signaling

docs/designers-developers/developers/tutorials/format-api/1-register-format.md

@@ -39,9 +39,9 @@ Then add a new file named `my-custom-format.js` with the following contents:
 } )( window.wp );
 ```
 
-Make that plugin available in your WordPress setup and activate it. Then, load a new page/post. 
+Make that plugin available in your WordPress setup and activate it. Then, load a new page/post.
 
-The list of available format types is maintained in the `core/rich-text` store. You can query the store to check that your custom format is now avaliable. To do so, run this code in your browser's console:
+The list of available format types is maintained in the `core/rich-text` store. You can query the store to check that your custom format is now available. To do so, run this code in your browser's console:
 
 	wp.data.select( 'core/rich-text' ).getFormatTypes();
 

docs/designers-developers/developers/tutorials/format-api/2-toolbar-button.md

@@ -1,6 +1,6 @@
 # Add a Button to the Toolbar
 
-Now that the format is avaible, the next step is to surface it to the UI. You can make use of the [`RichTextToolbarButton`](/packages/editor/src/components/rich-text/README.md#RichTextToolbarButton) component to extend the format toolbar.
+Now that the format is available, the next step is to surface it to the UI. You can make use of the [`RichTextToolbarButton`](/packages/editor/src/components/rich-text/README.md#RichTextToolbarButton) component to extend the format toolbar.
 
 Paste this code in `my-custom-format.js`:
 
@@ -68,7 +68,7 @@ The following sample code renders the previously shown button only on paragraph
 			return (
 				props.selectedBlock &&
 				props.selectedBlock.name === 'core/paragraph'
-			); 
+			);
 		} )
 	)( MyCustomButton );
 

docs/designers-developers/developers/tutorials/javascript/loading-javascript.md

@@ -30,7 +30,7 @@ If your code is registered and enqueued correctly, you should see a message in y
 
 ![Console Log Message Success](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/assets/js-tutorial-console-log-success.png)
 
-**Note for Theme Developers:**  The above method of enqueing is used for plugins. If you are extending the block editor for your theme there is a minor difference, you will use the `get_template_directory_uri()` function instead of `plugins_url()`. So for a theme, the enqueue example is:
+**Note for Theme Developers:**  The above method of enqueuing is used for plugins. If you are extending the block editor for your theme there is a minor difference, you will use the `get_template_directory_uri()` function instead of `plugins_url()`. So for a theme, the enqueue example is:
 
 ```php
 function myguten_enqueue() {

docs/designers-developers/developers/tutorials/javascript/scope-your-code.md

@@ -28,7 +28,7 @@ This behavior can be problematic, and is the reason we need to scope the code. B
 
 ## Scoping Code Within a Function
 
-In JavaScript, you can scope your code by writing it within a function. Functions have "local scope", or a scope that is specific only to that function. Aditionally, in JavaScript you can write anonymous functions, functions without a name, which will also prevent your function name from being overridden in the global scope.
+In JavaScript, you can scope your code by writing it within a function. Functions have "local scope", or a scope that is specific only to that function. Additionally, in JavaScript you can write anonymous functions, functions without a name, which will also prevent your function name from being overridden in the global scope.
 
 Taking advantage of these two JavaScript features, `first.js` could be scoped as: