diff --git a/blocks/block-controls/index.js b/blocks/block-controls/index.js index e23a344f955ad..ed25d5849d816 100644 --- a/blocks/block-controls/index.js +++ b/blocks/block-controls/index.js @@ -5,7 +5,7 @@ import { Toolbar, Fill } from '@wordpress/components'; export default function BlockControls( { controls, children } ) { return ( - + { children } diff --git a/blocks/block-controls/test/__snapshots__/index.js.snap b/blocks/block-controls/test/__snapshots__/index.js.snap index 78c75ad990fb2..f1cf3c119e9ad 100644 --- a/blocks/block-controls/test/__snapshots__/index.js.snap +++ b/blocks/block-controls/test/__snapshots__/index.js.snap @@ -2,7 +2,7 @@ exports[`BlockControls Should render a dynamic toolbar of controls 1`] = ` setAttributes( { caption: value } ) } + isSelected={ isSelected } inlineToolbar /> ) } diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js index fd8a6a1ce0a7d..c91e4e1f77022 100644 --- a/blocks/library/button/index.js +++ b/blocks/library/button/index.js @@ -92,6 +92,7 @@ class ButtonBlock extends Component { backgroundColor: color, color: textColor, } } + isSelected={ isSelected } keepPlaceholderOnFocus /> { isSelected && diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js index a07c3f4733d62..8999277552afc 100644 --- a/blocks/library/cover-image/index.js +++ b/blocks/library/cover-image/index.js @@ -177,6 +177,7 @@ export const settings = { tagName="h2" value={ title } onChange={ ( value ) => setAttributes( { title: value } ) } + isSelected={ isSelected } inlineToolbar /> ) : __( 'Cover Image' ); @@ -203,6 +204,7 @@ export const settings = { placeholder={ __( 'Write title…' ) } value={ title } onChange={ ( value ) => setAttributes( { title: value } ) } + isSelected={ isSelected } inlineToolbar /> ) : null } diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js index ef412a6628b7d..c714c98ff0e47 100644 --- a/blocks/library/embed/index.js +++ b/blocks/library/embed/index.js @@ -209,6 +209,7 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k placeholder={ __( 'Write caption…' ) } value={ caption } onChange={ ( value ) => setAttributes( { caption: value } ) } + isSelected={ isSelected } inlineToolbar /> ) : null } diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js index 1f817d6b7d045..74f2bcbfcb069 100644 --- a/blocks/library/heading/index.js +++ b/blocks/library/heading/index.js @@ -164,6 +164,7 @@ export const settings = { onRemove={ () => onReplace( [] ) } style={ { textAlign: align } } placeholder={ placeholder || __( 'Write heading…' ) } + isSelected={ isSelected } />, ]; }, diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js index 52b3572211643..7c92349864ce1 100644 --- a/blocks/library/image/block.js +++ b/blocks/library/image/block.js @@ -251,6 +251,7 @@ class ImageBlock extends Component { placeholder={ __( 'Write caption…' ) } value={ caption } onChange={ ( value ) => setAttributes( { caption: value } ) } + isSelected={ isSelected } inlineToolbar /> ) : null } diff --git a/blocks/library/list/index.js b/blocks/library/list/index.js index 520189f34abf0..1c4d846344269 100644 --- a/blocks/library/list/index.js +++ b/blocks/library/list/index.js @@ -298,6 +298,7 @@ export const settings = { undefined } onRemove={ () => onReplace( [] ) } + isSelected={ isSelected } />, ]; } diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js index 741a9c79569f8..cb23781c2aaf6 100644 --- a/blocks/library/paragraph/index.js +++ b/blocks/library/paragraph/index.js @@ -181,6 +181,7 @@ class ParagraphBlock extends Component { aria-expanded={ isExpanded } aria-owns={ listBoxId } aria-activedescendant={ activeId } + isSelected={ isSelected } /> ) } diff --git a/blocks/library/preformatted/index.js b/blocks/library/preformatted/index.js index 4bf2bac12652b..705945f431767 100644 --- a/blocks/library/preformatted/index.js +++ b/blocks/library/preformatted/index.js @@ -58,7 +58,7 @@ export const settings = { ], }, - edit( { attributes, setAttributes, className } ) { + edit( { attributes, setAttributes, className, isSelected } ) { const { content } = attributes; return [ @@ -73,6 +73,7 @@ export const settings = { } } placeholder={ __( 'Write preformatted text…' ) } wrapperClassName={ className } + isSelected={ isSelected } />, ]; }, diff --git a/blocks/library/pullquote/index.js b/blocks/library/pullquote/index.js index d009f145403a7..8116d44d63ded 100644 --- a/blocks/library/pullquote/index.js +++ b/blocks/library/pullquote/index.js @@ -7,6 +7,7 @@ import { map } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { withState } from '@wordpress/components'; /** * Internal dependencies @@ -64,9 +65,12 @@ export const settings = { } }, - edit( { attributes, setAttributes, isSelected, className } ) { + edit: withState( { + editable: 'content', + } )( ( { attributes, setAttributes, isSelected, className, editable, setState } ) => { const { value, citation, align } = attributes; const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); + const onSetActiveEditable = ( newEditable ) => () => setState( { editable: newEditable } ); return [ isSelected && ( @@ -88,6 +92,8 @@ export const settings = { } placeholder={ __( 'Write quote…' ) } wrapperClassName="blocks-pullquote__content" + isSelected={ isSelected && editable === 'content' } + onFocus={ onSetActiveEditable( 'content' ) } /> { ( citation || isSelected ) && ( ) } , ]; - }, + } ), save( { attributes } ) { const { value, citation, align } = attributes; diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index 8143c460a538f..de4119dd88767 100644 --- a/blocks/library/quote/index.js +++ b/blocks/library/quote/index.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { Toolbar } from '@wordpress/components'; +import { Toolbar, withState } from '@wordpress/components'; /** * Internal dependencies @@ -153,9 +153,12 @@ export const settings = { ], }, - edit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) { + edit: withState( { + editable: 'content', + } )( ( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className, editable, setState } ) => { const { align, value, citation, style } = attributes; const containerClassname = classnames( className, style === 2 ? 'is-large' : '' ); + const onSetActiveEditable = ( newEditable ) => () => setState( { editable: newEditable } ); return [ isSelected && ( @@ -197,6 +200,8 @@ export const settings = { } } } placeholder={ __( 'Write quote…' ) } + isSelected={ isSelected && editable === 'content' } + onFocus={ onSetActiveEditable( 'content' ) } /> { ( ( citation && citation.length > 0 ) || isSelected ) && ( ) } , ]; - }, + } ), save( { attributes } ) { const { align, value, citation, style } = attributes; diff --git a/blocks/library/subhead/index.js b/blocks/library/subhead/index.js index 9fdac8104938d..58a7908502e55 100644 --- a/blocks/library/subhead/index.js +++ b/blocks/library/subhead/index.js @@ -79,6 +79,7 @@ export const settings = { } } className={ className } placeholder={ placeholder || __( 'Write subhead…' ) } + isSelected={ isSelected } />, ]; }, diff --git a/blocks/library/table/table-block.js b/blocks/library/table/table-block.js index 4396fa873312c..7f91ff7c3daff 100644 --- a/blocks/library/table/table-block.js +++ b/blocks/library/table/table-block.js @@ -107,6 +107,7 @@ export default class TableBlock extends Component { onSetup={ ( editor ) => this.handleSetup( editor, isSelected ) } onChange={ onChange } value={ content } + isSelected={ isSelected } />, isSelected && ( diff --git a/blocks/library/text-columns/index.js b/blocks/library/text-columns/index.js index e2f6b64bacefd..b8c2b7a05a6da 100644 --- a/blocks/library/text-columns/index.js +++ b/blocks/library/text-columns/index.js @@ -98,6 +98,7 @@ export const settings = { } ); } } placeholder={ __( 'New Column' ) } + isSelected={ isSelected } /> ) } diff --git a/blocks/library/verse/index.js b/blocks/library/verse/index.js index 91089c68b469f..4848bcacc4091 100644 --- a/blocks/library/verse/index.js +++ b/blocks/library/verse/index.js @@ -50,7 +50,7 @@ export const settings = { ], }, - edit( { attributes, setAttributes, className } ) { + edit( { attributes, setAttributes, className, isSelected } ) { const { content } = attributes; return ( @@ -65,6 +65,7 @@ export const settings = { placeholder={ __( 'Write…' ) } wrapperClassName={ className } formattingControls={ [ 'bold', 'italic', 'strikethrough' ] } + isSelected={ isSelected } /> ); }, diff --git a/blocks/library/video/index.js b/blocks/library/video/index.js index 1ed6fd09a9bcb..5e81bd8909e7c 100644 --- a/blocks/library/video/index.js +++ b/blocks/library/video/index.js @@ -158,6 +158,7 @@ export const settings = { placeholder={ __( 'Write caption…' ) } value={ caption } onChange={ ( value ) => setAttributes( { caption: value } ) } + isSelected={ isSelected } inlineToolbar /> ) } diff --git a/blocks/rich-text/README.md b/blocks/rich-text/README.md index dd5e72fade45c..cae8a0c6064f6 100644 --- a/blocks/rich-text/README.md +++ b/blocks/rich-text/README.md @@ -51,6 +51,10 @@ a traditional `input` field, usually when the user exits the field. *Optional.* By default, all formatting controls are present. This setting can be used to fine-tune formatting controls. Possible items: `[ 'bold', 'italic', 'strikethrough', 'link' ]`. +### `isSelected: Boolean` + +*Optional.* Whether to show the input is selected or not in order to show the formatting contros. + ### `keepPlaceholderOnFocus: Boolean` *Optional.* By default, the placeholder will hide as soon as the editable field receives focus. With this setting it can be be kept while the field is focussed and empty. diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index 7fb73b4b77afc..b373ecaa2bfc4 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -105,7 +105,6 @@ export default class RichText extends Component { this.state = { formats: {}, empty: ! value || ! value.length, - active: false, selectedNodeId: 0, }; } @@ -207,9 +206,6 @@ export default class RichText extends Component { */ onSelectionChange() { const isActive = document.activeElement === this.editor.getBody(); - if ( this.state.isActive !== isActive ) { - this.setState( { isActive } ); - } // We must check this because selectionChange is a global event. if ( ! isActive ) { return; @@ -782,9 +778,10 @@ export default class RichText extends Component { placeholder, multiline: MultilineTag, keepPlaceholderOnFocus = false, + isSelected = false, formatters, } = this.props; - const { empty, isActive } = this.state; + const { empty } = this.state; const ariaProps = pickAriaProps( this.props ); @@ -792,7 +789,7 @@ export default class RichText extends Component { // changes, we unmount and destroy the previous TinyMCE element, then // mount and initialize a new child element in its place. const key = [ 'editor', Tagname ].join(); - const isPlaceholderVisible = placeholder && ( ! isActive || keepPlaceholderOnFocus ) && empty; + const isPlaceholderVisible = placeholder && ( ! isSelected || keepPlaceholderOnFocus ) && empty; const classes = classnames( wrapperClassName, 'blocks-rich-text' ); const formatToolbar = ( @@ -808,12 +805,12 @@ export default class RichText extends Component { return (
- { isActive && + { isSelected && { ! inlineToolbar && formatToolbar } } - { isActive && inlineToolbar && + { isSelected && inlineToolbar &&
{ formatToolbar }
@@ -838,7 +835,7 @@ export default class RichText extends Component { { MultilineTag ? { placeholder } : placeholder } } - { isActive && } + { isSelected && }
); } diff --git a/docs/blocks-editable.md b/docs/blocks-editable.md index 941e886204f3f..af9e1e3339403 100644 --- a/docs/blocks-editable.md +++ b/docs/blocks-editable.md @@ -44,6 +44,7 @@ registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-03', { className: props.className, onChange: onChangeContent, value: content, + isSelected: props.isSelected, } ); }, @@ -75,7 +76,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-03', { }, edit( { attributes, className, setAttributes } ) { - const { content } = attributes; + const { content, isSelected } = attributes; function onChangeContent( newContent ) { setAttributes( { content: newContent } ); @@ -87,6 +88,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-03', { className={ className } onChange={ onChangeContent } value={ content } + isSelected={ isSelected } /> ); }, diff --git a/editor/components/block-toolbar/index.js b/editor/components/block-toolbar/index.js index 1a92664c999cb..52a70899f4edd 100644 --- a/editor/components/block-toolbar/index.js +++ b/editor/components/block-toolbar/index.js @@ -23,6 +23,7 @@ function BlockToolbar( { block, mode } ) { return (
+
);