);
}
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 777cb54933a80..48b5506e452f2 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -67,6 +67,7 @@ function BlockListBlock( {
mode,
isFocusMode,
hasFixedToolbar,
+ moverDirection,
isLocked,
clientId,
rootClientId,
@@ -450,6 +451,20 @@ function BlockListBlock( {
};
}
const blockElementId = `block-${ clientId }`;
+ const blockMover = (
+
+ );
// We wrap the BlockEdit component in a div that hides it when editing in
// HTML mode. This allows us to render all of the ancillary pieces
@@ -511,22 +526,18 @@ function BlockListBlock( {
rootClientId={ rootClientId }
/>
{ isFirstMultiSelected && (
-
+
) }
-
"`;
diff --git a/packages/block-editor/src/components/link-control/test/fixtures/index.js b/packages/block-editor/src/components/link-control/test/fixtures/index.js
new file mode 100644
index 0000000000000..fc974749c982b
--- /dev/null
+++ b/packages/block-editor/src/components/link-control/test/fixtures/index.js
@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { uniqueId } from 'lodash';
+
+export const fauxEntitySuggestions = [
+ {
+ id: uniqueId(),
+ title: 'Hello Page',
+ type: 'Page',
+ info: '2 days ago',
+ url: `?p=${ uniqueId() }`,
+ },
+ {
+ id: uniqueId(),
+ title: 'Hello Post',
+ type: 'Post',
+ info: '19 days ago',
+ url: `?p=${ uniqueId() }`,
+ },
+ {
+ id: uniqueId(),
+ title: 'Hello Another One',
+ type: 'Page',
+ info: '19 days ago',
+ url: `?p=${ uniqueId() }`,
+ },
+ {
+ id: uniqueId(),
+ title: 'This is another Post with a much longer title just to be really annoying and to try and break the UI',
+ type: 'Post',
+ info: '1 month ago',
+ url: `?p=${ uniqueId() }`,
+ },
+];
+
+// export const fetchFauxEntitySuggestions = async () => fauxEntitySuggestions;
+
+export const fetchFauxEntitySuggestions = () => {
+ return Promise.resolve( fauxEntitySuggestions );
+};
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
new file mode 100644
index 0000000000000..d6dc506c7687b
--- /dev/null
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -0,0 +1,527 @@
+/**
+ * External dependencies
+ */
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act, Simulate } from 'react-dom/test-utils';
+import { first, last, nth } from 'lodash';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { UP, DOWN, ENTER } from '@wordpress/keycodes';
+/**
+ * Internal dependencies
+ */
+import LinkControl from '../index';
+import { fauxEntitySuggestions, fetchFauxEntitySuggestions } from './fixtures';
+
+function eventLoopTick() {
+ return new Promise( ( resolve ) => setImmediate( resolve ) );
+}
+
+let container = null;
+
+beforeEach( () => {
+ // setup a DOM element as a render target
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
+} );
+
+afterEach( () => {
+ // cleanup on exiting
+ unmountComponentAtNode( container );
+ container.remove();
+ container = null;
+} );
+
+describe( 'Basic rendering', () => {
+ it( 'should display with required props', () => {
+ act( () => {
+ render(
+ , container
+ );
+ } );
+
+ // Search Input UI
+ const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+
+ // expect( searchInputLabel ).not.toBeNull();
+ expect( searchInput ).not.toBeNull();
+
+ expect( container.innerHTML ).toMatchSnapshot();
+ } );
+} );
+
+describe( 'Searching for a link', () => {
+ it( 'should display loading UI when input is valid but search results have yet to be returned', async () => {
+ const searchTerm = 'Hello';
+
+ let resolver;
+
+ const fauxRequest = () => new Promise( ( resolve ) => {
+ resolver = resolve;
+ } );
+
+ act( () => {
+ render(
+ , container
+ );
+ } );
+
+ // Search Input UI
+ const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+
+ // Simulate searching for a term
+ act( () => {
+ Simulate.change( searchInput, { target: { value: searchTerm } } );
+ } );
+
+ // fetchFauxEntitySuggestions resolves on next "tick" of event loop
+ await eventLoopTick();
+
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ const searchResultElements = container.querySelectorAll( '[role="menu"] button[role="menuitem"]' );
+
+ let loadingUI = container.querySelector( '.components-spinner' );
+
+ expect( searchResultElements ).toHaveLength( 0 );
+
+ expect( loadingUI ).not.toBeNull();
+
+ act( () => {
+ resolver( fauxEntitySuggestions );
+ } );
+
+ await eventLoopTick();
+
+ loadingUI = container.querySelector( '.components-spinner' );
+
+ expect( loadingUI ).toBeNull();
+ } );
+
+ it( 'should display only search suggestions when current input value is not URL-like', async ( ) => {
+ const searchTerm = 'Hello world';
+ const firstFauxSuggestion = first( fauxEntitySuggestions );
+
+ act( () => {
+ render(
+ , container
+ );
+ } );
+
+ // Search Input UI
+ const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+
+ // Simulate searching for a term
+ act( () => {
+ Simulate.change( searchInput, { target: { value: searchTerm } } );
+ } );
+
+ // fetchFauxEntitySuggestions resolves on next "tick" of event loop
+ await eventLoopTick();
+
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ const searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
+ const firstSearchResultItemHTML = first( searchResultElements ).innerHTML;
+ const lastSearchResultItemHTML = last( searchResultElements ).innerHTML;
+
+ expect( searchResultElements ).toHaveLength( fauxEntitySuggestions.length );
+
+ // Sanity check that a search suggestion shows up corresponding to the data
+ expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( firstFauxSuggestion.title ) );
+ expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( firstFauxSuggestion.type ) );
+
+ // The fallback URL suggestion should not be shown when input is not URL-like
+ expect( lastSearchResultItemHTML ).not.toEqual( expect.stringContaining( 'URL' ) );
+ } );
+
+ it.each( [
+ [ 'couldbeurlorentitysearchterm' ],
+ [ 'ThisCouldAlsoBeAValidURL' ],
+ ] )( 'should display a URL suggestion as a default fallback for the search term "%s" which could potentially be a valid url.', async ( searchTerm ) => {
+ act( () => {
+ render(
+ , container
+ );
+ } );
+
+ // Search Input UI
+ const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+
+ // Simulate searching for a term
+ act( () => {
+ Simulate.change( searchInput, { target: { value: searchTerm } } );
+ } );
+
+ // fetchFauxEntitySuggestions resolves on next "tick" of event loop
+ await eventLoopTick();
+
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ const searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
+ const lastSearchResultItemHTML = last( searchResultElements ).innerHTML;
+ const additionalDefaultFallbackURLSuggestionLength = 1;
+
+ // We should see a search result for each of the expect search suggestions
+ // plus 1 additional one for the fallback URL suggestion
+ expect( searchResultElements ).toHaveLength( fauxEntitySuggestions.length + additionalDefaultFallbackURLSuggestionLength );
+
+ // The last item should be a URL search suggestion
+ expect( lastSearchResultItemHTML ).toEqual( expect.stringContaining( searchTerm ) );
+ expect( lastSearchResultItemHTML ).toEqual( expect.stringContaining( 'URL' ) );
+ expect( lastSearchResultItemHTML ).toEqual( expect.stringContaining( 'Press ENTER to add this link' ) );
+ } );
+
+ it( 'should reset the input field and the search results when search term is cleared or reset', async ( ) => {
+ const searchTerm = 'Hello world';
+
+ act( () => {
+ render(
+ , container
+ );
+ } );
+
+ let searchResultElements;
+ let searchInput;
+
+ // Search Input UI
+ searchInput = container.querySelector( 'input[aria-label="URL"]' );
+
+ // Simulate searching for a term
+ act( () => {
+ Simulate.change( searchInput, { target: { value: searchTerm } } );
+ } );
+
+ // fetchFauxEntitySuggestions resolves on next "tick" of event loop
+ await eventLoopTick();
+
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
+
+ // Check we have definitely rendered some suggestions
+ expect( searchResultElements ).toHaveLength( fauxEntitySuggestions.length );
+
+ // Grab the reset button now it's available
+ const resetUI = container.querySelector( '[aria-label="Reset"]' );
+
+ act( () => {
+ Simulate.click( resetUI );
+ } );
+
+ await eventLoopTick();
+
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
+ searchInput = container.querySelector( 'input[aria-label="URL"]' );
+
+ expect( searchInput.value ).toBe( '' );
+ expect( searchResultElements ).toHaveLength( 0 );
+ } );
+} );
+
+describe( 'Manual link entry', () => {
+ it.each( [
+ [ 'https://make.wordpress.org' ], // explicit https
+ [ 'http://make.wordpress.org' ], // explicit http
+ [ 'www.wordpress.org' ], // usage of "www"
+ ] )( 'should display a single suggestion result when the current input value is URL-like (eg: %s)', async ( searchTerm ) => {
+ act( () => {
+ render(
+ , container
+ );
+ } );
+
+ // Search Input UI
+ const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+
+ // Simulate searching for a term
+ act( () => {
+ Simulate.change( searchInput, { target: { value: searchTerm } } );
+ } );
+
+ // fetchFauxEntitySuggestions resolves on next "tick" of event loop
+ await eventLoopTick();
+
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ const searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
+ const firstSearchResultItemHTML = searchResultElements[ 0 ].innerHTML;
+ const expectedResultsLength = 1;
+
+ expect( searchResultElements ).toHaveLength( expectedResultsLength );
+ expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( searchTerm ) );
+ expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( 'URL' ) );
+ expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( 'Press ENTER to add this link' ) );
+ } );
+
+ describe( 'Alternative link protocols and formats', () => {
+ it.each( [
+ [ 'mailto:example123456@wordpress.org', 'mailto' ],
+ [ 'tel:example123456@wordpress.org', 'tel' ],
+ [ '#internal-anchor', 'internal' ],
+ ] )( 'should recognise "%s" as a %s link and handle as manual entry by displaying a single suggestion', async ( searchTerm, searchType ) => {
+ act( () => {
+ render(
+ , container
+ );
+ } );
+
+ // Search Input UI
+ const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+
+ // Simulate searching for a term
+ act( () => {
+ Simulate.change( searchInput, { target: { value: searchTerm } } );
+ } );
+
+ // fetchFauxEntitySuggestions resolves on next "tick" of event loop
+ await eventLoopTick();
+
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ const searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
+ const firstSearchResultItemHTML = searchResultElements[ 0 ].innerHTML;
+ const expectedResultsLength = 1;
+
+ expect( searchResultElements ).toHaveLength( expectedResultsLength );
+ expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( searchTerm ) );
+ expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( searchType ) );
+ expect( firstSearchResultItemHTML ).toEqual( expect.stringContaining( 'Press ENTER to add this link' ) );
+ } );
+ } );
+} );
+
+describe( 'Selecting links', () => {
+ it( 'should display a selected link corresponding to the provided "currentLink" prop', () => {
+ const selectedLink = first( fauxEntitySuggestions );
+
+ const LinkControlConsumer = () => {
+ const [ link ] = useState( selectedLink );
+
+ return (
+
+ );
+ };
+
+ act( () => {
+ render(
+ , container
+ );
+ } );
+
+ // TODO: select by aria role or visible text
+ const currentLink = container.querySelector( '.block-editor-link-control__search-item.is-current' );
+ const currentLinkHTML = currentLink.innerHTML;
+ const currentLinkAnchor = currentLink.querySelector( `[href="${ selectedLink.url }"]` );
+
+ expect( currentLinkHTML ).toEqual( expect.stringContaining( selectedLink.title ) );
+ expect( currentLinkHTML ).toEqual( expect.stringContaining( selectedLink.type ) );
+ expect( currentLinkHTML ).toEqual( expect.stringContaining( 'Change' ) );
+ expect( currentLinkAnchor ).not.toBeNull();
+ } );
+
+ it( 'should remove currently selected link and (re)display search UI when "Change" button is clicked', () => {
+ const selectedLink = first( fauxEntitySuggestions );
+
+ const LinkControlConsumer = () => {
+ const [ link, setLink ] = useState( selectedLink );
+
+ return (
+ setLink( suggestion ) }
+ fetchSearchSuggestions={ fetchFauxEntitySuggestions }
+ />
+ );
+ };
+
+ act( () => {
+ render(
+ , container
+ );
+ } );
+
+ // TODO: select by aria role or visible text
+ let currentLink = container.querySelector( '.block-editor-link-control__search-item.is-current' );
+
+ const currentLinkBtn = currentLink.querySelector( 'button' );
+
+ // Simulate searching for a term
+ act( () => {
+ Simulate.click( currentLinkBtn );
+ } );
+
+ const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+ currentLink = container.querySelector( '.block-editor-link-control__search-item.is-current' );
+
+ // We should be back to showing the search input
+ expect( searchInput ).not.toBeNull();
+ expect( currentLink ).toBeNull();
+ } );
+
+ describe( 'Selection using mouse click', () => {
+ it.each( [
+ [ 'entity', 'hello world', first( fauxEntitySuggestions ) ], // entity search
+ [ 'url', 'https://www.wordpress.org', {
+ id: '1',
+ title: 'https://www.wordpress.org',
+ url: 'https://www.wordpress.org',
+ type: 'URL',
+ } ], // url
+ ] )( 'should display a current selected link UI when a %s suggestion for the search "%s" is clicked', async ( type, searchTerm, selectedLink ) => {
+ const LinkControlConsumer = () => {
+ const [ link, setLink ] = useState( null );
+
+ return (
+ setLink( suggestion ) }
+ fetchSearchSuggestions={ fetchFauxEntitySuggestions }
+ />
+ );
+ };
+
+ act( () => {
+ render(
+ , container
+ );
+ } );
+
+ // Search Input UI
+ const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+
+ // Simulate searching for a term
+ act( () => {
+ Simulate.change( searchInput, { target: { value: searchTerm } } );
+ } );
+
+ // fetchFauxEntitySuggestions resolves on next "tick" of event loop
+ await eventLoopTick();
+
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ const searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
+
+ const firstSearchSuggestion = first( searchResultElements );
+
+ // Simulate selecting the first of the search suggestions
+ act( () => {
+ Simulate.click( firstSearchSuggestion );
+ } );
+
+ const currentLink = container.querySelector( '.block-editor-link-control__search-item.is-current' );
+ const currentLinkHTML = currentLink.innerHTML;
+ const currentLinkAnchor = currentLink.querySelector( `[href="${ selectedLink.url }"]` );
+
+ // Check that this suggestion is now shown as selected
+ expect( currentLinkHTML ).toEqual( expect.stringContaining( selectedLink.title ) );
+ expect( currentLinkHTML ).toEqual( expect.stringContaining( 'Change' ) );
+ expect( currentLinkAnchor ).not.toBeNull();
+ } );
+ } );
+
+ describe( 'Selection using keyboard', () => {
+ it.each( [
+ [ 'entity', 'hello world', first( fauxEntitySuggestions ) ], // entity search
+ [ 'url', 'https://www.wordpress.org', {
+ id: '1',
+ title: 'https://www.wordpress.org',
+ url: 'https://www.wordpress.org',
+ type: 'URL',
+ } ], // url
+ ] )( 'should display a current selected link UI when an %s suggestion for the search "%s" is selected using the keyboard', async ( type, searchTerm, selectedLink ) => {
+ const LinkControlConsumer = () => {
+ const [ link, setLink ] = useState( null );
+
+ return (
+ setLink( suggestion ) }
+ fetchSearchSuggestions={ fetchFauxEntitySuggestions }
+ />
+ );
+ };
+
+ act( () => {
+ render(
+ , container
+ );
+ } );
+
+ // Search Input UI
+ const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+
+ // Simulate searching for a term
+ act( () => {
+ Simulate.change( searchInput, { target: { value: searchTerm } } );
+ } );
+
+ //fetchFauxEntitySuggestions resolves on next "tick" of event loop
+ await eventLoopTick();
+
+ // Step down into the search results, highlighting the first result item
+ act( () => {
+ Simulate.keyDown( searchInput, { keyCode: DOWN } );
+ } );
+
+ // TODO: select these by aria relationship to autocomplete rather than arbitary selector.
+ const searchResultElements = container.querySelectorAll( '[role="listbox"] [role="option"]' );
+ const firstSearchSuggestion = first( searchResultElements );
+ const secondSearchSuggestion = nth( searchResultElements, 1 );
+
+ let selectedSearchResultElement = container.querySelector( '[role="option"][aria-selected="true"]' );
+
+ // We should have highlighted the first item using the keyboard
+ expect( selectedSearchResultElement ).toEqual( firstSearchSuggestion );
+
+ // Only entity searches contain more than 1 suggestion
+ if ( type === 'entity' ) {
+ // Check we can go down again using the down arrow
+ act( () => {
+ Simulate.keyDown( searchInput, { keyCode: DOWN } );
+ } );
+
+ selectedSearchResultElement = container.querySelector( '[role="option"][aria-selected="true"]' );
+
+ // We should have highlighted the first item using the keyboard
+ expect( selectedSearchResultElement ).toEqual( secondSearchSuggestion );
+
+ // Check we can go back up via up arrow
+ act( () => {
+ Simulate.keyDown( searchInput, { keyCode: UP } );
+ } );
+
+ selectedSearchResultElement = container.querySelector( '[role="option"][aria-selected="true"]' );
+
+ // We should be back to highlighting the first search result again
+ expect( selectedSearchResultElement ).toEqual( firstSearchSuggestion );
+ }
+
+ // Commit the selected item as the current link
+ act( () => {
+ Simulate.keyDown( searchInput, { keyCode: ENTER } );
+ } );
+
+ // Check that the suggestion selected via is now shown as selected
+ const currentLink = container.querySelector( '.block-editor-link-control__search-item.is-current' );
+ const currentLinkHTML = currentLink.innerHTML;
+ const currentLinkAnchor = currentLink.querySelector( `[href="${ selectedLink.url }"]` );
+
+ expect( currentLinkHTML ).toEqual( expect.stringContaining( selectedLink.title ) );
+ expect( currentLinkHTML ).toEqual( expect.stringContaining( 'Change' ) );
+ expect( currentLinkAnchor ).not.toBeNull();
+ } );
+ } );
+} );
diff --git a/packages/block-editor/src/components/link-control/text-highlight.js b/packages/block-editor/src/components/link-control/text-highlight.js
new file mode 100644
index 0000000000000..dc7b35a3d6d2b
--- /dev/null
+++ b/packages/block-editor/src/components/link-control/text-highlight.js
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { escapeRegExp } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+ Fragment,
+} from '@wordpress/element';
+
+const TextHighlight = ( { text = '', highlight = '' } ) => {
+ if ( ! highlight.trim() ) {
+ return text;
+ }
+
+ const regex = new RegExp( `(${ escapeRegExp( highlight ) })`, 'gi' );
+ const parts = text.split( regex );
+ return (
+
+ { parts.filter( ( part ) => part ).map( ( part, i ) => (
+ regex.test( part ) ? { part } : { part }
+ ) ) }
+
+ );
+};
+
+export default TextHighlight;
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index d142d6d6c7000..d4e98de6179b1 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -429,7 +429,7 @@ const applyWithSelect = withSelect( ( select ) => {
const { getSettings } = select( 'core/block-editor' );
return {
- mediaUpload: getSettings().__experimentalMediaUpload,
+ mediaUpload: getSettings().mediaUpload,
};
} );
diff --git a/packages/block-editor/src/components/media-upload/check.js b/packages/block-editor/src/components/media-upload/check.js
index 6f2903be5b1e1..c1fb3398020f4 100644
--- a/packages/block-editor/src/components/media-upload/check.js
+++ b/packages/block-editor/src/components/media-upload/check.js
@@ -14,6 +14,6 @@ export default withSelect( ( select ) => {
const { getSettings } = select( 'core/block-editor' );
return {
- hasUploadPermissions: !! getSettings().__experimentalMediaUpload,
+ hasUploadPermissions: !! getSettings().mediaUpload,
};
} )( MediaUploadCheck );
diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js
index 77f125fb35f91..2e1c3a9fcd801 100644
--- a/packages/block-editor/src/components/media-upload/index.native.js
+++ b/packages/block-editor/src/components/media-upload/index.native.js
@@ -6,6 +6,8 @@ import {
requestMediaPickFromMediaLibrary,
requestMediaPickFromDeviceLibrary,
requestMediaPickFromDeviceCamera,
+ getOtherMediaOptions,
+ requestOtherMediaPickFrom,
} from 'react-native-gutenberg-bridge';
/**
@@ -31,7 +33,27 @@ export class MediaUpload extends React.Component {
this.onPickerPresent = this.onPickerPresent.bind( this );
this.onPickerChange = this.onPickerChange.bind( this );
this.onPickerSelect = this.onPickerSelect.bind( this );
+
+ this.state = {
+ otherMediaOptions: undefined,
+ };
+ }
+
+ componentDidMount() {
+ const { allowedTypes = [] } = this.props;
+ getOtherMediaOptions( allowedTypes, ( otherMediaOptions ) => {
+ const otherMediaOptionsWithIcons = otherMediaOptions.map( ( option ) => {
+ return {
+ icon: this.getChooseFromDeviceIcon(),
+ value: option.value,
+ label: option.label,
+ };
+ } );
+
+ this.setState( { otherMediaOptions: otherMediaOptionsWithIcons } );
+ } );
}
+
getTakeMediaLabel() {
const { allowedTypes = [] } = this.props;
@@ -98,11 +120,22 @@ export class MediaUpload extends React.Component {
this.onPickerSelect( requestMediaPickFromDeviceCamera );
} else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY ) {
this.onPickerSelect( requestMediaPickFromMediaLibrary );
+ } else {
+ const { onSelect, multiple = false } = this.props;
+ requestOtherMediaPickFrom( value, multiple, ( media ) => {
+ if ( ( multiple && media ) || ( media && media.id ) ) {
+ onSelect( media );
+ }
+ } );
}
}
render() {
- const mediaOptions = this.getMediaOptionsItems();
+ let mediaOptions = this.getMediaOptionsItems();
+
+ if ( this.state.otherMediaOptions ) {
+ mediaOptions = [ ...mediaOptions, ...this.state.otherMediaOptions ];
+ }
const getMediaOptions = () => (
` component passing the required props plus:
+
+1. a `renderDefaultControl` function which renders an interface control.
+2. an boolean state for `isResponsive` (see "Props" below).
+3. a handler function for `onIsResponsiveChange` (see "Props" below).
+
+
+By default the default control will be used to render the default (ie: "All") setting _as well as_ the per-viewport responsive settings.
+
+```jsx
+import { registerBlockType } from '@wordpress/blocks';
+import {
+ InspectorControls,
+ ResponsiveBlockControl,
+} from '@wordpress/block-editor';
+
+import { useState } from '@wordpress/element';
+
+import {
+ DimensionControl,
+} from '@wordpress/components';
+
+registerBlockType( 'my-plugin/my-block', {
+ // ...
+
+ edit( { attributes, setAttributes } ) {
+
+ const [ isResponsive, setIsResponsive ] = useState( false );
+
+ // Used for example purposes only
+ const sizeOptions = [
+ {
+ label: 'Small',
+ value: 'small',
+ },
+ {
+ label: 'Medium',
+ value: 'medium',
+ },
+ {
+ label: 'Large',
+ value: 'large',
+ },
+ ];
+
+ const { paddingSize } = attributes;
+
+
+ // Your custom control can be anything you'd like to use.
+ // You are not restricted to `DimensionControl`s, but this
+ // makes life easier if dealing with standard CSS values.
+ // see `packages/components/src/dimension-control/README.md`
+ const paddingControl = ( labelComponent, viewport ) => {
+ return (
+
+ );
+ };
+
+ return (
+ <>
+
+ {
+ setIsResponsive( ! isResponsive );
+ } }
+ />
+
+
+ // your Block here
+
+
+ );
+ }
+} );
+```
+
+## Props
+
+### `title`
+* **Type:** `String`
+* **Default:** `undefined`
+* **Required:** `true`
+
+The title of the control group used in the `fieldset`'s `legend` element to label the _entire_ set of controls.
+
+### `property`
+* **Type:** `String`
+* **Default:** `undefined`
+* **Required:** `true`
+
+Used to build accessible labels and ARIA roles for the control group. Should represent the layout property which the component controls (eg: `padding`, `margin`...etc).
+
+### `isResponsive`
+* **Type:** `Boolean`
+* **Default:** `false` )
+* **Required:** `false`
+
+Determines whether the component displays the default or responsive controls. Updates the state of the toggle control. See also `onIsResponsiveChange` below.
+
+### `onIsResponsiveChange`
+* **Type:** `Function`
+* **Default:** `undefined`
+* **Required:** `true`
+
+A callback function invoked when the component's toggle value is changed between responsive and non-responsive mode. Should be used to update the value of the `isResponsive` prop to reflect the current state of the toggle control.
+
+### `renderDefaultControl`
+* **Type:** `Function`
+* **Default:** `undefined`
+* **Required:** `true`
+* **Args:**
+ - **labelComponent:** (`Function`) - a rendered `ResponsiveBlockControlLabel` component for your control.
+ - **viewport:** (`Object`) - an object representing viewport attributes for your control.
+
+A render function (prop) used to render the control for which you would like to display per viewport settings.
+
+For example, if you have a `SelectControl` which controls padding size, then pass this component as `renderDefaultControl` and it will be used to render both default and "responsive" controls for "padding".
+
+The component you return from this function will be used to render the control displayed for the (default) "All" state and (if the `renderResponsiveControls` is not provided) the individual responsive controls when in "responsive" mode.
+
+It is passed a pre-created, accessible `