Basic example with JSX! (editor)
;
+ return Hello World, step 1 (from the editor).
;
},
save() {
- return Basic example with JSX! (front)
;
+ return Hello World, step 1 (from the frontend).
;
},
} );
```
{% end %}
-_By now you should be able to see `Hello editor` in the admin side and `Hello saved content` on the frontend side._
+_By now you should be able to see `Hello World, step 1 (from the editor).` in the admin side and `Hello World, step 1 (from the frontend).` on the frontend side._
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](/docs/designers-developers/developers/block-api/block-registration.md#icon-optional).
diff --git a/docs/designers-developers/developers/tutorials/javascript/extending-the-block-editor.md b/docs/designers-developers/developers/tutorials/javascript/extending-the-block-editor.md
index 8a451c3d72361f..19a18057187629 100644
--- a/docs/designers-developers/developers/tutorials/javascript/extending-the-block-editor.md
+++ b/docs/designers-developers/developers/tutorials/javascript/extending-the-block-editor.md
@@ -22,7 +22,7 @@ Plugin Name: Fancy Quote
function myguten_enqueue() {
wp_enqueue_script( 'myguten-script',
plugins_url( 'myguten.js', __FILE__ ),
- array( 'wp-blocks')
+ array( 'wp-blocks' )
);
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );
@@ -34,7 +34,9 @@ See [Packages](/docs/designers-developers/developers/packages.md) for list of av
After you have updated both JavaScript and PHP files, go to the block editor and create a new post.
-Add a quote block, and in the right sidebar under Styles, you will see your new Fancy Quote style listed. Click the Fancy Quote to select and apply that style to your quote block:
+Add a quote block, and in the right sidebar under Styles, you will see your new Fancy Quote style listed.
+
+Click the Fancy Quote to select and apply that style to your quote block:
@@ -42,7 +44,7 @@ Add a quote block, and in the right sidebar under Styles, you will see your new
Even if you Preview or Publish the post you will not see a visible change. However, if you look at the source, you will see the `is-style-fancy-quote` class name is now attached to your quote block.
-Let's add some style. Go ahead and create a `style.css` file with:
+Let's add some style. In your plugin folder, create a `style.css` file with:
```css
.is-style-fancy-quote {
@@ -59,7 +61,7 @@ function myguten_stylesheet() {
add_action( 'enqueue_block_assets', 'myguten_stylesheet' );
```
-Now when you view in the editor and published, you will see your Fancy Quote style, a delicious tomato color text:
+Now when you view in the editor and publish, you will see your Fancy Quote style, a delicious tomato color text:
diff --git a/docs/designers-developers/developers/tutorials/metabox/meta-block-2-register-meta.md b/docs/designers-developers/developers/tutorials/metabox/meta-block-2-register-meta.md
index 795bd722ece293..744e50dfae5341 100644
--- a/docs/designers-developers/developers/tutorials/metabox/meta-block-2-register-meta.md
+++ b/docs/designers-developers/developers/tutorials/metabox/meta-block-2-register-meta.md
@@ -2,7 +2,7 @@
A post meta field is a WordPress object used to store extra data about a post. You need to first register a new meta field prior to use. See Managing [Post Metadata](https://developer.wordpress.org/plugins/metadata/managing-post-metadata/) to learn more about post meta.
-When registering the field, note the `show_in_rest` parameter. This ensures the data will be included in the REST API, which the block editor uses to load and save meta data. See the [`register_meta`](https://developer.wordpress.org/reference/functions/register_meta/) function definition for extra information.
+When registering the field, note the `show_in_rest` parameter. This ensures the data will be included in the REST API, which the block editor uses to load and save meta data. See the [`register_post_meta`](https://developer.wordpress.org/reference/functions/register_post_meta/) function definition for extra information.
To register the field, create a PHP plugin file called `myguten-meta-block.php` including:
@@ -13,20 +13,20 @@ To register the field, create a PHP plugin file called `myguten-meta-block.php`
*/
// register custom meta tag field
-function myguten_register_meta() {
- register_meta( 'post', 'myguten_meta_block_field', array(
+function myguten_register_post_meta() {
+ register_post_meta( 'post', 'myguten_meta_block_field', array(
'show_in_rest' => true,
'single' => true,
'type' => 'string',
) );
}
-add_action( 'init', 'myguten_register_meta' );
+add_action( 'init', 'myguten_register_post_meta' );
```
-**Note:** If the meta key name starts with an underscore WordPress considers it a protected field. Editing this field requires passing a permission check, which is set as the `auth_callback` in the `register_meta` function. Here is an example:
+**Note:** If the meta key name starts with an underscore WordPress considers it a protected field. Editing this field requires passing a permission check, which is set as the `auth_callback` in the `register_post_meta` function. Here is an example:
```php
-register_meta( 'post', '_myguten_protected_key', array(
+register_post_meta( 'post', '_myguten_protected_key', array(
'show_in_rest' => true,
'single' => true,
'type' => 'string',
diff --git a/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md b/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md
index 0a173a539a82be..67bec79789d844 100644
--- a/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md
+++ b/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md
@@ -60,7 +60,6 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten
```
{% ESNext %}
```jsx
-
const { registerBlockType } = wp.blocks;
const { TextControl } = wp.components;
diff --git a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-3-register-meta.md b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-3-register-meta.md
index da1717c8817f2b..999194e972bae7 100644
--- a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-3-register-meta.md
+++ b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-3-register-meta.md
@@ -1,11 +1,11 @@
# Register the Meta Field
-To work with fields in the `post_meta` table, WordPress has a function called [register_meta](https://developer.wordpress.org/reference/functions/register_meta/). You're going to use it to register a new field called `sidebar_plugin_meta_block_field`, which will be a single string. Note that this field needs to be available through the [REST API](https://developer.wordpress.org/rest-api/) because that's how the block editor access data.
+To work with fields in the `post_meta` table, WordPress has a function called [register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/). You're going to use it to register a new field called `sidebar_plugin_meta_block_field`, which will be a single string. Note that this field needs to be available through the [REST API](https://developer.wordpress.org/rest-api/) because that's how the block editor access data.
Add this to the PHP code, within the `init` callback function:
```php
-register_meta( 'post', 'sidebar_plugin_meta_block_field', array(
+register_post_meta( 'post', 'sidebar_plugin_meta_block_field', array(
'show_in_rest' => true,
'single' => true,
'type' => 'string',
@@ -18,4 +18,4 @@ To make sure the field has been loaded, query the block editor [internal data st
wp.data.select( 'core/editor' ).getCurrentPost().meta;
```
-Before adding the `register_meta` function to the plugin, this code returns a void array, because WordPress hasn't been told to load any meta field yet. After registering the field, the same code will return an object containing the registered meta field you registered.
+Before adding the `register_post_meta` function to the plugin, this code returns a void array, because WordPress hasn't been told to load any meta field yet. After registering the field, the same code will return an object containing the registered meta field you registered.
diff --git a/docs/manifest-devhub.json b/docs/manifest-devhub.json
index f762d1422c454d..94f21727035536 100644
--- a/docs/manifest-devhub.json
+++ b/docs/manifest-devhub.json
@@ -899,12 +899,6 @@
"markdown_source": "../packages/components/src/select-control/README.md",
"parent": "components"
},
- {
- "title": "ServerSideRender",
- "slug": "server-side-render",
- "markdown_source": "../packages/components/src/server-side-render/README.md",
- "parent": "components"
- },
{
"title": "SlotFill",
"slug": "slot-fill",
@@ -1301,6 +1295,12 @@
"markdown_source": "../packages/list-reusable-blocks/README.md",
"parent": "packages"
},
+ {
+ "title": "@wordpress/media-utils",
+ "slug": "packages-media-utils",
+ "markdown_source": "../packages/media-utils/README.md",
+ "parent": "packages"
+ },
{
"title": "@wordpress/notices",
"slug": "packages-notices",
@@ -1355,6 +1355,12 @@
"markdown_source": "../packages/scripts/README.md",
"parent": "packages"
},
+ {
+ "title": "@wordpress/server-side-render",
+ "slug": "packages-server-side-render",
+ "markdown_source": "../packages/server-side-render/README.md",
+ "parent": "packages"
+ },
{
"title": "@wordpress/shortcode",
"slug": "packages-shortcode",
diff --git a/docs/manifest.json b/docs/manifest.json
index 6fbe894c39d69e..6cee0109f47498 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -449,6 +449,12 @@
"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/list-reusable-blocks/README.md",
"parent": "packages"
},
+ {
+ "title": "@wordpress/media-utils",
+ "slug": "packages-media-utils",
+ "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/media-utils/README.md",
+ "parent": "packages"
+ },
{
"title": "@wordpress/notices",
"slug": "packages-notices",
@@ -1337,4 +1343,4 @@
"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/contributors/outreach.md",
"parent": "contributors"
}
-]
\ No newline at end of file
+]
diff --git a/gutenberg.php b/gutenberg.php
index e1f216512fceac..ed0eb8e6c0f508 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -3,7 +3,7 @@
* Plugin Name: Gutenberg
* Plugin URI: https://github.com/WordPress/gutenberg
* Description: Printing since 1440. This is the development plugin for the new block editor in core.
- * Version: 5.8.0
+ * Version: 5.9.2
* Author: Gutenberg Team
* Text Domain: gutenberg
*
@@ -89,7 +89,7 @@ function gutenberg_wordpress_version_notice() {
*/
function gutenberg_build_files_notice() {
echo '';
- _e( 'Gutenberg development mode requires files to be built. Run npm install to install dependencies, npm run build to build the files or npm run dev to build the files and watch for changes. Read the contributing file for more information.', 'gutenberg' );
+ _e( 'Gutenberg development mode requires files to be built. Run npm install to install dependencies, npm run build to build the files or npm run dev to build the files and watch for changes. Read the contributing file for more information.', 'gutenberg' );
echo '
{ blockEdit }
;
+ }
+
+ // Disable reasons:
+ //
+ // jsx-a11y/mouse-events-have-key-events:
+ // - onMouseOver is explicitly handling hover effects
+ //
+ // jsx-a11y/no-static-element-interactions:
+ // - Each block can be selected by clicking on it
+
+ /* eslint-disable jsx-a11y/mouse-events-have-key-events, jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+
return (
-
+ { shouldRenderMovers && (
+
+
+ { isValid && blockEdit }
+ { isValid && mode === 'html' && (
+
+ { shouldShowMobileToolbar && (
+
+ { showInserterShortcuts && (
+
+ { getSaveElement( blockType, attributes ) }
+
,
+ ] }
+
+
- { shouldShowInsertionPoint && (
-
- );
- /* eslint-enable jsx-a11y/mouse-events-have-key-events, jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
- } }
-
+
+ ) }
+ { showEmptyBlockSideInserter && (
+ { blockEdit }
;
- }
-
- // Disable reasons:
- //
- // jsx-a11y/mouse-events-have-key-events:
- // - onMouseOver is explicitly handling hover effects
- //
- // jsx-a11y/no-static-element-interactions:
- // - Each block can be selected by clicking on it
-
- /* eslint-disable jsx-a11y/mouse-events-have-key-events, jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
-
- return (
-
- { shouldRenderMovers && (
-
-
- { isValid && blockEdit }
- { isValid && mode === 'html' && (
-
- { shouldShowMobileToolbar && (
-
-
- { showEmptyBlockSideInserter && (
- <>
-
- { getSaveElement( blockType, attributes ) }
-
,
- ] }
-
-
-
-
-
- ) }
-
+
+ ) }
+ 
+
Inspector Controls appear in the post settings sidebar when a block is being edited. The controls appear in both HTML and visual editing modes, and thus should contain settings that affect the entire block.
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index 07daa4d8f813eb..efad860f586e7a 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -175,14 +175,14 @@ export class MediaPlaceholder extends Component {
const isVideo = isOneType && 'video' === allowedTypes[ 0 ];
if ( instructions === undefined && mediaUpload ) {
- instructions = __( 'Drag a media file, upload a new one or select a file from your library.' );
+ instructions = __( 'Upload a media file or pick one from your media library.' );
if ( isAudio ) {
- instructions = __( 'Drag an audio, upload a new one or select a file from your library.' );
+ instructions = __( 'Upload an audio file, pick one from your media library, or add one with a URL.' );
} else if ( isImage ) {
- instructions = __( 'Drag an image, upload a new one or select a file from your library.' );
+ instructions = __( 'Upload an image file, pick one from your media library, or add one with a URL.' );
} else if ( isVideo ) {
- instructions = __( 'Drag a video, upload a new one or select a file from your library.' );
+ instructions = __( 'Upload a video file, pick one from your media library, or add one with a URL.' );
}
}
diff --git a/packages/block-editor/src/components/media-upload/test/index.native.js b/packages/block-editor/src/components/media-upload/test/index.native.js
new file mode 100644
index 00000000000000..72a2015277e4df
--- /dev/null
+++ b/packages/block-editor/src/components/media-upload/test/index.native.js
@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+import { TouchableWithoutFeedback } from 'react-native';
+import {
+ requestMediaPickFromMediaLibrary,
+ requestMediaPickFromDeviceLibrary,
+ requestMediaPickFromDeviceCamera,
+} from 'react-native-gutenberg-bridge';
+
+/**
+ * Internal dependencies
+ */
+import {
+ MediaUpload,
+ MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE,
+ MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_MEDIA,
+ MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY,
+ MEDIA_TYPE_IMAGE,
+ MEDIA_TYPE_VIDEO,
+ OPTION_TAKE_VIDEO,
+ OPTION_TAKE_PHOTO,
+} from '../index';
+
+jest.mock( 'react-native-gutenberg-bridge', () => (
+ {
+ requestMediaPickFromMediaLibrary: jest.fn(),
+ requestMediaPickFromDeviceLibrary: jest.fn(),
+ requestMediaPickFromDeviceCamera: jest.fn(),
+ }
+) );
+
+const MEDIA_URL = 'http://host.media.type';
+const MEDIA_ID = 123;
+
+describe( 'MediaUpload component', () => {
+ it( 'renders without crashing', () => {
+ const wrapper = shallow(
+ Hello Hello WorldWorld!
'; + expect( richText.willTrimSpaces( html ) ).toBe( false ); + } ); + } ); + + describe( 'Adds new line on Enter', () => { + let newValue; + const wrapper = shallow(tag to content after pressing Enter key', () => { + expect( newValue ).toEqual( '
' ); + } ); + } ); +} ); diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss index de6d71b9facea3..54c1128281b72b 100644 --- a/packages/block-editor/src/components/url-input/style.scss +++ b/packages/block-editor/src/components/url-input/style.scss @@ -43,6 +43,7 @@ $input-size: 300px; .block-editor-url-input__suggestions { max-height: 200px; transition: all 0.15s ease-in-out; + @include reduce-motion("transition"); padding: 4px 0; // To match the url-input width: input width + padding + 2 buttons. width: $input-size + 2; diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js index 2b9e7adfd9dd1c..3f21ed3ef3b0a2 100644 --- a/packages/block-editor/src/hooks/anchor.js +++ b/packages/block-editor/src/hooks/anchor.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { assign } from 'lodash'; +import { assign, has } from 'lodash'; /** * WordPress dependencies @@ -33,6 +33,10 @@ const ANCHOR_REGEX = /[\s#]/g; * @return {Object} Filtered block settings. */ export function addAttribute( settings ) { + // allow blocks to specify their own attribute definition with default values if needed. + if ( has( settings.attributes, [ 'anchor', 'type' ] ) ) { + return settings; + } if ( hasBlockSupport( settings, 'anchor' ) ) { // Use Lodash's assign to gracefully handle if attributes are undefined settings.attributes = assign( settings.attributes, { diff --git a/packages/block-editor/src/hooks/test/anchor.js b/packages/block-editor/src/hooks/test/anchor.js index 21a5c65be83cb0..d55a54fff332e2 100644 --- a/packages/block-editor/src/hooks/test/anchor.js +++ b/packages/block-editor/src/hooks/test/anchor.js @@ -39,6 +39,23 @@ describe( 'anchor', () => { expect( settings.attributes ).toHaveProperty( 'anchor' ); } ); + + it( 'should not override attributes defined in settings', () => { + const settings = registerBlockType( { + ...blockSettings, + supports: { + anchor: true, + }, + attributes: { + anchor: { + type: 'string', + default: 'testAnchor', + }, + }, + } ); + + expect( settings.attributes.anchor ).toEqual( { type: 'string', default: 'testAnchor' } ); + } ); } ); describe( 'addSaveProps', () => { diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 1d8827e2a33b49..d554e6e577a385 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -14,5 +14,5 @@ import './hooks'; export * from './components'; export * from './utils'; - +export { storeConfig } from './store'; export { SETTINGS_DEFAULTS } from './store/defaults'; diff --git a/packages/block-editor/src/store/index.js b/packages/block-editor/src/store/index.js index 485238f46f606d..bfc7766a508762 100644 --- a/packages/block-editor/src/store/index.js +++ b/packages/block-editor/src/store/index.js @@ -17,6 +17,13 @@ import controls from './controls'; */ const MODULE_KEY = 'core/block-editor'; +/** + * Block editor data store configuration. + * + * @see https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md#registerStore + * + * @type {Object} + */ export const storeConfig = { reducer, selectors, diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index b0576be7c47fdd..d33c0a1ec92767 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -1,3 +1,7 @@ +## ## 2.6.0 (2019-06-12) + +- Fixed an issue with creating upgraded embed blocks that are not registered ([#15883](https://github.com/WordPress/gutenberg/issues/15883)). + ## 2.5.0 (2019-05-21) - Add vertical alignment controls to Columns Block ([#13899](https://github.com/WordPress/gutenberg/pull/13899/)). diff --git a/packages/block-library/package.json b/packages/block-library/package.json index 4465a8dfefc496..f57f2988524cee 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-library", - "version": "2.5.0", + "version": "2.6.0", "description": "Block library for the WordPress editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -36,6 +36,7 @@ "@wordpress/html-entities": "file:../html-entities", "@wordpress/i18n": "file:../i18n", "@wordpress/keycodes": "file:../keycodes", + "@wordpress/server-side-render": "file:../server-side-render", "@wordpress/viewport": "file:../viewport", "classnames": "^2.2.5", "fast-average-color": "4.3.0", diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js index c67cdc912e5260..6909b70ccc4271 100644 --- a/packages/block-library/src/archives/edit.js +++ b/packages/block-library/src/archives/edit.js @@ -8,7 +8,7 @@ import { } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { InspectorControls } from '@wordpress/block-editor'; -import { ServerSideRender } from '@wordpress/editor'; +import ServerSideRender from '@wordpress/server-side-render'; export default function ArchivesEdit( { attributes, setAttributes } ) { const { showPostCounts, displayAsDropdown } = attributes; diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index 1545378ddc0c74..164b8c22c9a7ba 100644 --- a/packages/block-library/src/audio/edit.js +++ b/packages/block-library/src/audio/edit.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { getBlobByURL, isBlobURL } from '@wordpress/blob'; +import { compose } from '@wordpress/compose'; import { Disabled, IconButton, @@ -18,9 +19,9 @@ import { MediaPlaceholder, RichText, } from '@wordpress/block-editor'; -import { mediaUpload } from '@wordpress/editor'; import { Component } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; +import { withSelect } from '@wordpress/data'; /** * Internal dependencies @@ -45,10 +46,16 @@ class AudioEdit extends Component { this.toggleAttribute = this.toggleAttribute.bind( this ); this.onSelectURL = this.onSelectURL.bind( this ); + this.onUploadError = this.onUploadError.bind( this ); } componentDidMount() { - const { attributes, noticeOperations, setAttributes } = this.props; + const { + attributes, + mediaUpload, + noticeOperations, + setAttributes, + } = this.props; const { id, src = '' } = attributes; if ( ! id && isBlobURL( src ) ) { @@ -98,13 +105,19 @@ class AudioEdit extends Component { this.setState( { editing: false } ); } + onUploadError( message ) { + const { noticeOperations } = this.props; + noticeOperations.removeAllNotices(); + noticeOperations.createErrorNotice( message ); + } + getAutoplayHelp( checked ) { return checked ? __( 'Note: Autoplaying audio may cause usability issues for some visitors.' ) : null; } render() { const { autoplay, caption, loop, preload, src } = this.props.attributes; - const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props; + const { setAttributes, isSelected, className, noticeUI } = this.props; const { editing } = this.state; const switchToEditing = () => { this.setState( { editing: true } ); @@ -133,7 +146,7 @@ class AudioEdit extends Component { allowedTypes={ ALLOWED_MEDIA_TYPES } value={ this.props.attributes } notices={ noticeUI } - onError={ noticeOperations.createErrorNotice } + onError={ this.onUploadError } /> ); } @@ -200,5 +213,13 @@ class AudioEdit extends Component { /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ } } - -export default withNotices( AudioEdit ); +export default compose( [ + withSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); + const { __experimentalMediaUpload } = getSettings(); + return { + mediaUpload: __experimentalMediaUpload, + }; + } ), + withNotices, +] )( AudioEdit ); diff --git a/packages/block-library/src/block/edit-panel/style.scss b/packages/block-library/src/block/edit-panel/editor.scss similarity index 90% rename from packages/block-library/src/block/edit-panel/style.scss rename to packages/block-library/src/block/edit-panel/editor.scss index 6c11e19d5e227c..d5b5c81fd7e714 100644 --- a/packages/block-library/src/block/edit-panel/style.scss +++ b/packages/block-library/src/block/edit-panel/editor.scss @@ -11,6 +11,10 @@ margin: 0 (-$block-padding); padding: $grid-size $block-padding; + // Elevate the reusable blocks toolbar above the clickthrough overlay. + position: relative; + z-index: z-index(".block-editor-block-list__layout .reusable-block-edit-panel"); + // Use opacity to work in various editor styles. border: $border-width dashed $dark-opacity-light-500; border-bottom: none; diff --git a/packages/block-library/src/block/indicator/style.scss b/packages/block-library/src/block/indicator/editor.scss similarity index 100% rename from packages/block-library/src/block/indicator/style.scss rename to packages/block-library/src/block/indicator/editor.scss diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 6d3f279542e009..142f9b0a06835f 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -130,6 +130,10 @@ class ButtonEdit extends Component {
+
+ { __( 'Learn more about embeds' ) }
+
+
);
};
diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
index 4b9c1f4de7f0e3..78923aa24c5f6b 100644
--- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap
+++ b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
@@ -27,6 +27,11 @@ exports[`core/embed block edit matches snapshot 1`] = `
Embed URL
+
+ Paste a link to the content you want to display on your site.
+
@@ -45,6 +50,37 @@ exports[`core/embed block edit matches snapshot 1`] = `
Embed
+
`;
diff --git a/packages/block-library/src/embed/test/index.js b/packages/block-library/src/embed/test/index.js
index 3931ae7b581e18..5f01d8ff77ee84 100644
--- a/packages/block-library/src/embed/test/index.js
+++ b/packages/block-library/src/embed/test/index.js
@@ -3,11 +3,16 @@
*/
import { render } from 'enzyme';
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+
/**
* Internal dependencies
*/
import { getEmbedEditComponent } from '../edit';
-import { findBlock, getClassNames } from '../util';
+import { findBlock, getClassNames, createUpgradedEmbedBlock } from '../util';
describe( 'core/embed', () => {
test( 'block edit matches snapshot', () => {
@@ -44,4 +49,29 @@ describe( 'core/embed', () => {
const expected = 'lovely';
expect( getClassNames( html, 'lovely wp-embed-aspect-16-9 wp-has-aspect-ratio', false ) ).toEqual( expected );
} );
+
+ test( 'createUpgradedEmbedBlock bails early when block type does not exist', () => {
+ const youtubeURL = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
+
+ expect( createUpgradedEmbedBlock( { attributes: { url: youtubeURL } }, {} ) ).toBeUndefined();
+ } );
+
+ test( 'createUpgradedEmbedBlock returns a YouTube embed block when given a YouTube URL', () => {
+ const youtubeURL = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
+
+ registerBlockType(
+ 'core-embed/youtube',
+ {
+ title: 'YouTube',
+ category: 'embed',
+ }
+ );
+
+ const result = createUpgradedEmbedBlock( { attributes: { url: youtubeURL } }, {} );
+
+ unregisterBlockType( 'core-embed/youtube' );
+
+ expect( result ).not.toBeUndefined();
+ expect( result.name ).toBe( 'core-embed/youtube' );
+ } );
} );
diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js
index f52716f2cb96f2..80bcbed310e9a0 100644
--- a/packages/block-library/src/embed/util.js
+++ b/packages/block-library/src/embed/util.js
@@ -15,7 +15,7 @@ import memoize from 'memize';
* WordPress dependencies
*/
import { renderToString } from '@wordpress/element';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockType } from '@wordpress/blocks';
/**
* Returns true if any of the regular expressions match the URL.
@@ -82,6 +82,10 @@ export const createUpgradedEmbedBlock = ( props, attributesFromPreview ) => {
const matchingBlock = findBlock( url );
+ if ( ! getBlockType( matchingBlock ) ) {
+ return;
+ }
+
// WordPress blocks can work on multiple sites, and so don't have patterns,
// so if we're in a WordPress block, assume the user has chosen it for a WordPress URL.
if ( WORDPRESS_EMBED_BLOCK !== name && DEFAULT_EMBED_BLOCK !== matchingBlock ) {
diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
index efa93424a5a9e6..2ab0baaa08f8bf 100644
--- a/packages/block-library/src/file/edit.js
+++ b/packages/block-library/src/file/edit.js
@@ -27,7 +27,6 @@ import {
MediaPlaceholder,
RichText,
} from '@wordpress/block-editor';
-import { mediaUpload } from '@wordpress/editor';
import { Component } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
@@ -47,6 +46,7 @@ class FileEdit extends Component {
this.changeLinkDestinationOption = this.changeLinkDestinationOption.bind( this );
this.changeOpenInNewWindow = this.changeOpenInNewWindow.bind( this );
this.changeShowDownloadButton = this.changeShowDownloadButton.bind( this );
+ this.onUploadError = this.onUploadError.bind( this );
this.state = {
hasError: false,
@@ -55,7 +55,12 @@ class FileEdit extends Component {
}
componentDidMount() {
- const { attributes, noticeOperations, setAttributes } = this.props;
+ const {
+ attributes,
+ mediaUpload,
+ noticeOperations,
+ setAttributes,
+ } = this.props;
const { downloadButtonText, href } = attributes;
// Upload a file drag-and-dropped into the editor
@@ -100,6 +105,12 @@ class FileEdit extends Component {
}
}
+ onUploadError( message ) {
+ const { noticeOperations } = this.props;
+ noticeOperations.removeAllNotices();
+ noticeOperations.createErrorNotice( message );
+ }
+
confirmCopyURL() {
this.setState( { showCopyConfirmation: true } );
}
@@ -130,7 +141,6 @@ class FileEdit extends Component {
attributes,
setAttributes,
noticeUI,
- noticeOperations,
media,
} = this.props;
const {
@@ -151,11 +161,11 @@ class FileEdit extends Component {
icon={
-
-
+
+
) );
```
diff --git a/packages/components/src/icon/README.md b/packages/components/src/icon/README.md
index de36accebd3753..9fbf69609ccbcb 100644
--- a/packages/components/src/icon/README.md
+++ b/packages/components/src/icon/README.md
@@ -57,7 +57,7 @@ const MyIcon = () => (
## Props
-The component accepts the following props:
+The component accepts the following props. Any additional props are passed through to the underlying icon element.
### icon
@@ -74,11 +74,3 @@ The size (width and height) of the icon.
- Type: `Number`
- Required: No
- Default: `20` when a Dashicon is rendered, `24` for all other icons.
-
-### className
-
-An optional additional class name to apply to the rendered icon.
-
-- Type: `String`
-- Required: No
-- Default: `null`
diff --git a/packages/components/src/icon/index.js b/packages/components/src/icon/index.js
index f106f7c5615114..61a4fb0a2d6c47 100644
--- a/packages/components/src/icon/index.js
+++ b/packages/components/src/icon/index.js
@@ -8,13 +8,13 @@ import { cloneElement, createElement, Component, isValidElement } from '@wordpre
*/
import { Dashicon, SVG } from '../';
-function Icon( { icon = null, size, className } ) {
+function Icon( { icon = null, size, ...additionalProps } ) {
let iconSize;
if ( 'string' === typeof icon ) {
// Dashicons should be 20x20 by default
iconSize = size || 20;
- return
{ label &&
-
+
);
}
diff --git a/packages/components/src/menu-group/test/__snapshots__/index.js.snap b/packages/components/src/menu-group/test/__snapshots__/index.js.snap
index c33b2fcad917cd..4a0c0e751a2667 100644
--- a/packages/components/src/menu-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/menu-group/test/__snapshots__/index.js.snap
@@ -5,18 +5,19 @@ exports[`MenuGroup should match snapshot 1`] = `
className="components-menu-group"
>
- { label }
+
}
-
{ children }
-
+
My item
-
{ notices }
@@ -31,7 +31,7 @@ function Placeholder( { icon, children, label, instructions, className, notices,
{ label }
{ !! instructions && { instructions }
}
-
+
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 63938e69498e95..50e1da3d93af56 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -54,6 +54,11 @@
}
}
+.components-placeholder__fieldset.is-column-layout,
+.components-placeholder__fieldset.is-column-layout form {
+ flex-direction: column;
+}
+
.components-placeholder__input {
margin-right: 8px;
flex: 1 1 auto;
diff --git a/packages/components/src/primitives/block-quotation/index.native.js b/packages/components/src/primitives/block-quotation/index.native.js
index eea86435b5ebcd..abbafa09cae949 100644
--- a/packages/components/src/primitives/block-quotation/index.native.js
+++ b/packages/components/src/primitives/block-quotation/index.native.js
@@ -2,15 +2,28 @@
* External dependencies
*/
import { View } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { Children, cloneElement } from '@wordpress/element';
/**
* Internal dependencies
*/
import styles from './style.scss';
export const BlockQuotation = ( props ) => {
+ const newChildren = Children.map( props.children, ( child ) => {
+ if ( child && child.props.identifier === 'citation' ) {
+ return cloneElement( child, { style: styles.wpBlockQuoteCitation } );
+ }
+ if ( child && child.props.identifier === 'value' ) {
+ return cloneElement( child, { tagsToEliminate: [ 'div' ] } );
+ }
+ return child;
+ } );
return (
{ children }
{ label }
@@ -83,4 +88,4 @@ function Snackbar( {
);
}
-export default Snackbar;
+export default forwardRef( Snackbar );
diff --git a/packages/components/src/snackbar/list.js b/packages/components/src/snackbar/list.js
index c7cff210a138a3..b44aa8d24c93a3 100644
--- a/packages/components/src/snackbar/list.js
+++ b/packages/components/src/snackbar/list.js
@@ -3,6 +3,13 @@
*/
import classnames from 'classnames';
import { omit, noop } from 'lodash';
+import { useTransition, animated } from 'react-spring';
+
+/**
+ * WordPress dependencies
+ */
+import { useReducedMotion } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
/**
* Internal dependencies
@@ -20,20 +27,42 @@ import Snackbar from './';
* @return {Object} The rendered notices list.
*/
function SnackbarList( { notices, className, children, onRemove = noop } ) {
+ const isReducedMotion = useReducedMotion();
+ const [ refMap ] = useState( () => new WeakMap() );
+ const transitions = useTransition(
+ notices,
+ ( notice ) => notice.id,
+ {
+ from: { opacity: 0, height: 0 },
+ enter: ( item ) => async ( next ) => await next( { opacity: 1, height: refMap.get( item ).offsetHeight } ),
+ leave: () => async ( next ) => {
+ await next( { opacity: 0 } );
+ await next( { height: 0 } );
+ },
+ immediate: isReducedMotion,
+ }
+ );
+
className = classnames( 'components-snackbar-list', className );
- const removeNotice = ( id ) => () => onRemove( id );
+ const removeNotice = ( notice ) => () => onRemove( notice.id );
return (
# **useMediaQuery**
+
+Runs a media query and returns its value when it changes.
+
+_Parameters_
+
+- _query_ `string`: Media Query.
+
+_Returns_
+
+- `boolean`: return value of the media query.
+
+# **useReducedMotion**
+
+Hook returning whether the user has a preference for reduced motion.
+
+_Returns_
+
+- `boolean`: Reduced motion preference value.
+
# **withGlobalEvents**
Higher-order component creator which, given an object of DOM event types and
diff --git a/packages/compose/package.json b/packages/compose/package.json
index f04e6d753ce11b..57eac024c3f47a 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/compose",
- "version": "3.3.0",
+ "version": "3.4.0",
"description": "WordPress higher-order components (HOCs).",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/compose/src/if-condition/README.md b/packages/compose/src/higher-order/if-condition/README.md
similarity index 100%
rename from packages/compose/src/if-condition/README.md
rename to packages/compose/src/higher-order/if-condition/README.md
diff --git a/packages/compose/src/if-condition/index.js b/packages/compose/src/higher-order/if-condition/index.js
similarity index 86%
rename from packages/compose/src/if-condition/index.js
rename to packages/compose/src/higher-order/if-condition/index.js
index afc45c8e5be2f1..79d23b01ba4218 100644
--- a/packages/compose/src/if-condition/index.js
+++ b/packages/compose/src/higher-order/if-condition/index.js
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
-import createHigherOrderComponent from '../create-higher-order-component';
+import createHigherOrderComponent from '../../utils/create-higher-order-component';
/**
* Higher-order component creator, creating a new component which renders if
diff --git a/packages/compose/src/pure/index.js b/packages/compose/src/higher-order/pure/index.js
similarity index 93%
rename from packages/compose/src/pure/index.js
rename to packages/compose/src/higher-order/pure/index.js
index 16d0b19e9da705..e721fbb7964796 100644
--- a/packages/compose/src/pure/index.js
+++ b/packages/compose/src/higher-order/pure/index.js
@@ -7,7 +7,7 @@ import { Component } from '@wordpress/element';
/**
* Internal dependencies
*/
-import createHigherOrderComponent from '../create-higher-order-component';
+import createHigherOrderComponent from '../../utils/create-higher-order-component';
/**
* Given a component returns the enhanced component augmented with a component
diff --git a/packages/compose/src/pure/test/index.js b/packages/compose/src/higher-order/pure/test/index.js
similarity index 100%
rename from packages/compose/src/pure/test/index.js
rename to packages/compose/src/higher-order/pure/test/index.js
diff --git a/packages/compose/src/with-global-events/README.md b/packages/compose/src/higher-order/with-global-events/README.md
similarity index 100%
rename from packages/compose/src/with-global-events/README.md
rename to packages/compose/src/higher-order/with-global-events/README.md
diff --git a/packages/compose/src/with-global-events/index.js b/packages/compose/src/higher-order/with-global-events/index.js
similarity index 96%
rename from packages/compose/src/with-global-events/index.js
rename to packages/compose/src/higher-order/with-global-events/index.js
index bf32f27743232d..ac8aabd4639f6a 100644
--- a/packages/compose/src/with-global-events/index.js
+++ b/packages/compose/src/higher-order/with-global-events/index.js
@@ -11,7 +11,7 @@ import { Component, forwardRef } from '@wordpress/element';
/**
* Internal dependencies
*/
-import createHigherOrderComponent from '../create-higher-order-component';
+import createHigherOrderComponent from '../../utils/create-higher-order-component';
import Listener from './listener';
/**
diff --git a/packages/compose/src/with-global-events/listener.js b/packages/compose/src/higher-order/with-global-events/listener.js
similarity index 100%
rename from packages/compose/src/with-global-events/listener.js
rename to packages/compose/src/higher-order/with-global-events/listener.js
diff --git a/packages/compose/src/with-global-events/test/index.js b/packages/compose/src/higher-order/with-global-events/test/index.js
similarity index 100%
rename from packages/compose/src/with-global-events/test/index.js
rename to packages/compose/src/higher-order/with-global-events/test/index.js
diff --git a/packages/compose/src/with-global-events/test/listener.js b/packages/compose/src/higher-order/with-global-events/test/listener.js
similarity index 100%
rename from packages/compose/src/with-global-events/test/listener.js
rename to packages/compose/src/higher-order/with-global-events/test/listener.js
diff --git a/packages/compose/src/with-instance-id/README.md b/packages/compose/src/higher-order/with-instance-id/README.md
similarity index 100%
rename from packages/compose/src/with-instance-id/README.md
rename to packages/compose/src/higher-order/with-instance-id/README.md
diff --git a/packages/compose/src/with-instance-id/index.js b/packages/compose/src/higher-order/with-instance-id/index.js
similarity index 88%
rename from packages/compose/src/with-instance-id/index.js
rename to packages/compose/src/higher-order/with-instance-id/index.js
index 8bc363ddacba4d..53c09ec56f8882 100644
--- a/packages/compose/src/with-instance-id/index.js
+++ b/packages/compose/src/higher-order/with-instance-id/index.js
@@ -6,7 +6,7 @@ import { Component } from '@wordpress/element';
/**
* Internal dependencies
*/
-import createHigherOrderComponent from '../create-higher-order-component';
+import createHigherOrderComponent from '../../utils/create-higher-order-component';
/**
* A Higher Order Component used to be provide a unique instance ID by
diff --git a/packages/compose/src/with-instance-id/test/index.js b/packages/compose/src/higher-order/with-instance-id/test/index.js
similarity index 100%
rename from packages/compose/src/with-instance-id/test/index.js
rename to packages/compose/src/higher-order/with-instance-id/test/index.js
diff --git a/packages/compose/src/with-safe-timeout/README.md b/packages/compose/src/higher-order/with-safe-timeout/README.md
similarity index 100%
rename from packages/compose/src/with-safe-timeout/README.md
rename to packages/compose/src/higher-order/with-safe-timeout/README.md
diff --git a/packages/compose/src/with-safe-timeout/index.js b/packages/compose/src/higher-order/with-safe-timeout/index.js
similarity index 94%
rename from packages/compose/src/with-safe-timeout/index.js
rename to packages/compose/src/higher-order/with-safe-timeout/index.js
index 5fff43e7bb5dd9..910dd94fddc19d 100644
--- a/packages/compose/src/with-safe-timeout/index.js
+++ b/packages/compose/src/higher-order/with-safe-timeout/index.js
@@ -11,7 +11,7 @@ import { Component } from '@wordpress/element';
/**
* Internal dependencies
*/
-import createHigherOrderComponent from '../create-higher-order-component';
+import createHigherOrderComponent from '../../utils/create-higher-order-component';
/**
* A higher-order component used to provide and manage delayed function calls
diff --git a/packages/compose/src/with-state/README.md b/packages/compose/src/higher-order/with-state/README.md
similarity index 100%
rename from packages/compose/src/with-state/README.md
rename to packages/compose/src/higher-order/with-state/README.md
diff --git a/packages/compose/src/with-state/index.js b/packages/compose/src/higher-order/with-state/index.js
similarity index 90%
rename from packages/compose/src/with-state/index.js
rename to packages/compose/src/higher-order/with-state/index.js
index e1957482d8c8ee..19e639043bd28b 100644
--- a/packages/compose/src/with-state/index.js
+++ b/packages/compose/src/higher-order/with-state/index.js
@@ -6,7 +6,7 @@ import { Component } from '@wordpress/element';
/**
* Internal dependencies
*/
-import createHigherOrderComponent from '../create-higher-order-component';
+import createHigherOrderComponent from '../../utils/create-higher-order-component';
/**
* A Higher Order Component used to provide and manage internal component state
diff --git a/packages/compose/src/with-state/test/index.js b/packages/compose/src/higher-order/with-state/test/index.js
similarity index 100%
rename from packages/compose/src/with-state/test/index.js
rename to packages/compose/src/higher-order/with-state/test/index.js
diff --git a/packages/compose/src/hooks/use-media-query/index.js b/packages/compose/src/hooks/use-media-query/index.js
new file mode 100644
index 00000000000000..2571da9e23deae
--- /dev/null
+++ b/packages/compose/src/hooks/use-media-query/index.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Runs a media query and returns its value when it changes.
+ *
+ * @param {string} query Media Query.
+ * @return {boolean} return value of the media query.
+ */
+export default function useMediaQuery( query ) {
+ const [ match, setMatch ] = useState( false );
+ useEffect( () => {
+ const updateMatch = () => setMatch( window.matchMedia( query ).matches );
+ updateMatch();
+ const list = window.matchMedia( query );
+ list.addListener( updateMatch );
+ return () => {
+ list.removeListener( updateMatch );
+ };
+ }, [ query ] );
+
+ return match;
+}
diff --git a/packages/compose/src/hooks/use-reduced-motion/index.js b/packages/compose/src/hooks/use-reduced-motion/index.js
new file mode 100644
index 00000000000000..7b1e22792d37c5
--- /dev/null
+++ b/packages/compose/src/hooks/use-reduced-motion/index.js
@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import useMediaQuery from '../use-media-query';
+
+/**
+ * Hook returning whether the user has a preference for reduced motion.
+ *
+ * @return {boolean} Reduced motion preference value.
+ */
+const useReducedMotion =
+ process.env.FORCE_REDUCED_MOTION ?
+ () => true :
+ () => useMediaQuery( '(prefers-reduced-motion: reduce)' );
+
+export default useReducedMotion;
diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js
index 379ed6a4ab54de..9ea31b2d351aba 100644
--- a/packages/compose/src/index.js
+++ b/packages/compose/src/index.js
@@ -3,13 +3,8 @@
*/
import { flowRight } from 'lodash';
-export { default as createHigherOrderComponent } from './create-higher-order-component';
-export { default as ifCondition } from './if-condition';
-export { default as pure } from './pure';
-export { default as withGlobalEvents } from './with-global-events';
-export { default as withInstanceId } from './with-instance-id';
-export { default as withSafeTimeout } from './with-safe-timeout';
-export { default as withState } from './with-state';
+// Utils
+export { default as createHigherOrderComponent } from './utils/create-higher-order-component';
/**
* Composes multiple higher-order components into a single higher-order component. Performs right-to-left function
@@ -20,3 +15,15 @@ export { default as withState } from './with-state';
* @return {Function} Returns the new composite function.
*/
export { flowRight as compose };
+
+// Higher-order components
+export { default as ifCondition } from './higher-order/if-condition';
+export { default as pure } from './higher-order/pure';
+export { default as withGlobalEvents } from './higher-order/with-global-events';
+export { default as withInstanceId } from './higher-order/with-instance-id';
+export { default as withSafeTimeout } from './higher-order/with-safe-timeout';
+export { default as withState } from './higher-order/with-state';
+
+// Hooks
+export { default as useMediaQuery } from './hooks/use-media-query';
+export { default as useReducedMotion } from './hooks/use-reduced-motion';
diff --git a/packages/compose/src/create-higher-order-component/index.js b/packages/compose/src/utils/create-higher-order-component/index.js
similarity index 100%
rename from packages/compose/src/create-higher-order-component/index.js
rename to packages/compose/src/utils/create-higher-order-component/index.js
diff --git a/packages/compose/src/create-higher-order-component/test/index.js b/packages/compose/src/utils/create-higher-order-component/test/index.js
similarity index 100%
rename from packages/compose/src/create-higher-order-component/test/index.js
rename to packages/compose/src/utils/create-higher-order-component/test/index.js
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index 96b18edd614019..55f219865f0e69 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/core-data",
- "version": "2.3.0",
+ "version": "2.4.0",
"description": "Access to and manipulation of core WordPress entities.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/custom-templated-path-webpack-plugin/CHANGELOG.md b/packages/custom-templated-path-webpack-plugin/CHANGELOG.md
index 7b34a52f1071ad..d5bb664a3bfe58 100644
--- a/packages/custom-templated-path-webpack-plugin/CHANGELOG.md
+++ b/packages/custom-templated-path-webpack-plugin/CHANGELOG.md
@@ -1,4 +1,4 @@
-## Master
+## 1.4.0 (2019-06-12)
### Bug Fixes
diff --git a/packages/custom-templated-path-webpack-plugin/package.json b/packages/custom-templated-path-webpack-plugin/package.json
index b861d700441de3..463e59991aa46b 100644
--- a/packages/custom-templated-path-webpack-plugin/package.json
+++ b/packages/custom-templated-path-webpack-plugin/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/custom-templated-path-webpack-plugin",
- "version": "1.3.0",
+ "version": "1.4.0",
"description": "Webpack plugin for creating custom path template tags.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
@@ -24,6 +24,7 @@
"files": [
"index.js"
],
+ "main": "index.js",
"dependencies": {
"escape-string-regexp": "^1.0.5"
},
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index 9ffbf80cd5165e..e54574c9eec93b 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/data-controls",
- "version": "1.0.0-beta.1",
+ "version": "1.0.0",
"description": "A set of common controls for the @wordpress/data api.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md
index 391d68abe4c463..a7a342725906e2 100644
--- a/packages/data/CHANGELOG.md
+++ b/packages/data/CHANGELOG.md
@@ -1,12 +1,14 @@
-## Master
+## 4.6.0 (2019-06-12)
### New Feature
- Expose `useSelect` hook for usage in functional components. ([#15737](https://github.com/WordPress/gutenberg/pull/15737))
+- Expose `useDispatch` hook for usage in functional components. ([#15896](https://github.com/WordPress/gutenberg/pull/15896))
### Enhancements
- `withSelect` internally uses the new `useSelect` hook. ([#15737](https://github.com/WordPress/gutenberg/pull/15737). **Note:** This _could_ impact performance of code using `withSelect` in edge-cases. To avoid impact, memoize passed in `mapSelectToProps` callbacks or implement `useSelect` directly with dependencies.
+- `withDispatch` internally uses a new `useDispatchWithMap` hook (an internal only api) ([#15896](https://github.com/WordPress/gutenberg/pull/15896))
## 4.5.0 (2019-05-21)
diff --git a/packages/data/README.md b/packages/data/README.md
index a5bdfd30a5c375..e126a85781e4a6 100644
--- a/packages/data/README.md
+++ b/packages/data/README.md
@@ -358,7 +358,15 @@ _Returns_
# **plugins**
-Undocumented declaration.
+Object of available plugins to use with a registry.
+
+_Related_
+
+- [use](#use)
+
+_Type_
+
+- `Object`
# **registerGenericStore**
@@ -470,7 +478,59 @@ _Parameters_
# **use**
-Undocumented declaration.
+Extends a registry to inherit functionality provided by a given plugin. A
+plugin is an object with properties aligning to that of a registry, merged
+to extend the default registry behavior.
+
+_Parameters_
+
+- _plugin_ `Object`: Plugin object.
+
+# **useDispatch**
+
+A custom react hook returning the current registry dispatch actions creators.
+
+Note: The component using this hook must be within the context of a
+RegistryProvider.
+
+_Usage_
+
+This illustrates a pattern where you may need to retrieve dynamic data from
+the server via the `useSelect` hook to use in combination with the dispatch
+action.
+
+```jsx
+const { useDispatch, useSelect } = wp.data;
+const { useCallback } = wp.element;
+
+function Button( { onClick, children } ) {
+ return
+}
+
+const SaleButton = ( { children } ) => {
+ const { stockNumber } = useSelect(
+ ( select ) => select( 'my-shop' ).getStockNumber()
+ );
+ const { startSale } = useDispatch( 'my-shop' );
+ const onClick = useCallback( () => {
+ const discountPercent = stockNumber > 50 ? 10: 20;
+ startSale( discountPercent );
+ }, [ stockNumber ] );
+ return
+}
+
+// Rendered somewhere in the application:
+//
+// Start Sale!
+```
+
+_Parameters_
+
+- _storeName_ `[string]`: Optionally provide the name of the store from which to retrieve action creators. If not provided, the registry.dispatch function is returned instead.
+
+_Returns_
+
+- `Function`: A custom react hook.
# **useRegistry**
@@ -559,53 +619,64 @@ _Returns_
# **withDispatch**
-Higher-order component used to add dispatch props using registered action creators.
+Higher-order component used to add dispatch props using registered action
+creators.
_Usage_
```jsx
function Button( { onClick, children } ) {
- return ;
+ return ;
}
const { withDispatch } = wp.data;
const SaleButton = withDispatch( ( dispatch, ownProps ) => {
- const { startSale } = dispatch( 'my-shop' );
- const { discountPercent } = ownProps;
-
- return {
- onClick() {
- startSale( discountPercent );
- },
- };
+ const { startSale } = dispatch( 'my-shop' );
+ const { discountPercent } = ownProps;
+
+ return {
+ onClick() {
+ startSale( discountPercent );
+ },
+ };
} )( Button );
// Rendered in the application:
//
-// Start Sale!
+// Start Sale!
```
-In the majority of cases, it will be sufficient to use only two first params passed to `mapDispatchToProps` as illustrated in the previous example. However, there might be some very advanced use cases where using the `registry` object might be used as a tool to optimize the performance of your component. Using `select` function from the registry might be useful when you need to fetch some dynamic data from the store at the time when the event is fired, but at the same time, you never use it to render your component. In such scenario, you can avoid using the `withSelect` higher order component to compute such prop, which might lead to unnecessary re-renders of your component caused by its frequent value change. Keep in mind, that `mapDispatchToProps` must return an object with functions only.
+In the majority of cases, it will be sufficient to use only two first params
+passed to `mapDispatchToProps` as illustrated in the previous example.
+However, there might be some very advanced use cases where using the
+`registry` object might be used as a tool to optimize the performance of
+your component. Using `select` function from the registry might be useful
+when you need to fetch some dynamic data from the store at the time when the
+event is fired, but at the same time, you never use it to render your
+component. In such scenario, you can avoid using the `withSelect` higher
+order component to compute such prop, which might lead to unnecessary
+re-renders of your component caused by its frequent value change.
+Keep in mind, that `mapDispatchToProps` must return an object with functions
+only.
```jsx
function Button( { onClick, children } ) {
- return ;
+ return ;
}
const { withDispatch } = wp.data;
const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {
- // Stock number changes frequently.
- const { getStockNumber } = select( 'my-shop' );
- const { startSale } = dispatch( 'my-shop' );
-
- return {
- onClick() {
- const dicountPercent = getStockNumber() > 50 ? 10 : 20;
- startSale( discountPercent );
- },
- };
+ // Stock number changes frequently.
+ const { getStockNumber } = select( 'my-shop' );
+ const { startSale } = dispatch( 'my-shop' );
+ return {
+ onClick() {
+ const discountPercent = getStockNumber() > 50 ? 10 : 20;
+ startSale( discountPercent );
+ },
+ };
} )( Button );
// Rendered in the application:
@@ -613,11 +684,13 @@ const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {
// Start Sale!
```
-_Note:_ It is important that the `mapDispatchToProps` function always returns an object with the same keys. For example, it should not contain conditions under which a different value would be returned.
+_Note:_ It is important that the `mapDispatchToProps` function always
+returns an object with the same keys. For example, it should not contain
+conditions under which a different value would be returned.
_Parameters_
-- _mapDispatchToProps_ `Object`: Object of prop names where value is a dispatch-bound action creator, or a function to be called with the component's props and returning an action creator.
+- _mapDispatchToProps_ `Function`: A function of returning an object of prop names where value is a dispatch-bound action creator, or a function to be called with the component's props and returning an action creator.
_Returns_
diff --git a/packages/data/package.json b/packages/data/package.json
index d0f2d74f354fc6..30d331281569c7 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/data",
- "version": "4.5.0",
+ "version": "4.6.0",
"description": "Data module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/data/src/components/use-dispatch/index.js b/packages/data/src/components/use-dispatch/index.js
new file mode 100644
index 00000000000000..f4f4fed37d38ca
--- /dev/null
+++ b/packages/data/src/components/use-dispatch/index.js
@@ -0,0 +1,2 @@
+export { default as useDispatch } from './use-dispatch';
+export { default as useDispatchWithMap } from './use-dispatch-with-map';
diff --git a/packages/data/src/components/use-dispatch/test/use-dispatch.js b/packages/data/src/components/use-dispatch/test/use-dispatch.js
new file mode 100644
index 00000000000000..8770d04144b06d
--- /dev/null
+++ b/packages/data/src/components/use-dispatch/test/use-dispatch.js
@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import TestRenderer, { act } from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import useDispatch from '../use-dispatch';
+import { createRegistry } from '../../../registry';
+import { RegistryProvider } from '../../registry-provider';
+
+describe( 'useDispatch', () => {
+ let registry;
+ beforeEach( () => {
+ registry = createRegistry();
+ } );
+
+ it( 'returns dispatch function from store with no store name provided', () => {
+ registry.registerStore( 'demoStore', {
+ reducer: ( state ) => state,
+ actions: {
+ foo: () => 'bar',
+ },
+ } );
+ const TestComponent = () => {
+ return ;
+ };
+ const Component = () => {
+ const dispatch = useDispatch();
+ return
+
+ );
+ } );
+
+ const testInstance = testRenderer.root;
+
+ expect( testInstance.findByType( TestComponent ).props.dispatch )
+ .toBe( registry.dispatch );
+ } );
+ it( 'returns expected action creators from store for given storeName', () => {
+ const noop = () => ( { type: '__INERT__' } );
+ const testAction = jest.fn().mockImplementation( noop );
+ registry.registerStore( 'demoStore', {
+ reducer: ( state ) => state,
+ actions: {
+ foo: testAction,
+ },
+ } );
+ const TestComponent = () => {
+ const { foo } = useDispatch( 'demoStore' );
+ return ;
+ };
+
+ let testRenderer;
+
+ act( () => {
+ testRenderer = TestRenderer.create(
+
+
+ );
+ } );
+
+ const testInstance = testRenderer.root;
+
+ act( () => {
+ testInstance.findByType( 'button' ).props.onClick();
+ } );
+
+ expect( testAction ).toHaveBeenCalledTimes( 1 );
+ } );
+ it( 'returns dispatch from correct registry if registries change', () => {
+ const reducer = ( state ) => state;
+ const noop = () => ( { type: '__INERT__' } );
+ const firstRegistryAction = jest.fn().mockImplementation( noop );
+ const secondRegistryAction = jest.fn().mockImplementation( noop );
+
+ const firstRegistry = registry;
+ firstRegistry.registerStore( 'demo', {
+ reducer,
+ actions: {
+ noop: firstRegistryAction,
+ },
+ } );
+
+ const TestComponent = () => {
+ const dispatch = useDispatch();
+ return
{ children }
- { notices.map( ( notice ) => (
-
- { notice.content }
-
+ { transitions.map( ( { item: notice, key, props: style } ) => (
+
+
) ) }
);
diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index 40e8f75837ae6b..4357685ffa0cbd 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -8,7 +8,7 @@
padding: 16px 24px;
width: 100%;
max-width: 600px;
- margin: 8px 0 0;
+ cursor: pointer;
@include break-small() {
width: fit-content;
@@ -55,3 +55,8 @@
z-index: z-index(".components-snackbar-list");
width: 100%;
}
+
+.components-snackbar-list__notice-container {
+ position: relative;
+ padding-top: 8px;
+}
diff --git a/packages/components/src/tab-panel/README.md b/packages/components/src/tab-panel/README.md
index 89c6b095722505..def626516b3a39 100644
--- a/packages/components/src/tab-panel/README.md
+++ b/packages/components/src/tab-panel/README.md
@@ -114,15 +114,15 @@ The function called when a tab has been selected. It is passed the `tabName` as
#### tabs
-A list of tabs where each tab is defined by an object with the following fields:
+An array of objects containing the following properties:
-1. name: String. Defines the key for the tab
-2. title: String. Defines the translated text for the tab
-3. className: String. Defines the class to put on the tab.
+- `name`: `(string)` Defines the key for the tab.
+- `title`:`(string)` Defines the translated text for the tab.
+- `className`:`(string)` Optional. Defines the class to put on the tab.
-Other fields may be added to the object and accessed from the child function if desired.
+>> **Note:** Other fields may be added to the object and accessed from the child function if desired.
-- Type: Array
+- Type: `Array`
- Required: Yes
#### activeClass
diff --git a/packages/components/src/tab-panel/index.js b/packages/components/src/tab-panel/index.js
index 5558272f2ffc4a..71f4683bcbef80 100644
--- a/packages/components/src/tab-panel/index.js
+++ b/packages/components/src/tab-panel/index.js
@@ -1,6 +1,7 @@
/**
* External dependencies
*/
+import classnames from 'classnames';
import { partial, noop, find } from 'lodash';
/**
@@ -74,7 +75,7 @@ class TabPanel extends Component {
className="components-tab-panel__tabs"
>
{ tabs.map( ( tab ) => (
- ref && refMap.set( notice, ref ) }
+ >
+
+ { notice.content }
+
+
+