diff --git a/blocks/rich-text/README.md b/blocks/rich-text/README.md index f5a89c2d209980..3be8969066594e 100644 --- a/blocks/rich-text/README.md +++ b/blocks/rich-text/README.md @@ -69,6 +69,10 @@ a traditional `input` field, usually when the user exits the field. *Optional.* A list of autocompleters to use instead of the default. +### `inlineToolbar: String` + +*Optional.* Render the formatting toolbar inline, next to the rich text field. Needs to be a string that can be used with the `justify-content` CSS property. + ## RichText.Content When using RichText in the edit function of blocks, the usage of `RichText.Content` is recommended in the save function of your blocks to save the correct HTML. diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index 6765ccbab122ec..76550914316174 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -825,7 +825,10 @@ export class RichText extends Component { ) } { isSelected && inlineToolbar && ( -
+
{ formatToolbar }
) } diff --git a/core-blocks/audio/index.js b/core-blocks/audio/index.js index 6f0f47fe37110c..3ef03899ada4de 100644 --- a/core-blocks/audio/index.js +++ b/core-blocks/audio/index.js @@ -156,7 +156,7 @@ export const settings = { placeholder={ __( 'Write caption…' ) } value={ caption } onChange={ ( value ) => setAttributes( { caption: value } ) } - inlineToolbar + inlineToolbar="center" /> ) } diff --git a/core-blocks/cover-image/index.js b/core-blocks/cover-image/index.js index 94b0ad2ed680d3..1323e9a7385be9 100644 --- a/core-blocks/cover-image/index.js +++ b/core-blocks/cover-image/index.js @@ -210,7 +210,7 @@ export const settings = { placeholder={ __( 'Write title…' ) } value={ title } onChange={ ( value ) => setAttributes( { title: value } ) } - inlineToolbar + inlineToolbar="center" /> ) : null }
diff --git a/core-blocks/embed/index.js b/core-blocks/embed/index.js index f9c6565cc326e0..e544f682b15ea1 100644 --- a/core-blocks/embed/index.js +++ b/core-blocks/embed/index.js @@ -229,7 +229,7 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed', placeholder={ __( 'Write caption…' ) } value={ caption } onChange={ ( value ) => setAttributes( { caption: value } ) } - inlineToolbar + inlineToolbar="center" /> ) : null } diff --git a/core-blocks/gallery/gallery-image.js b/core-blocks/gallery/gallery-image.js index f76f9dd458d990..699e7bfaca04e5 100644 --- a/core-blocks/gallery/gallery-image.js +++ b/core-blocks/gallery/gallery-image.js @@ -135,7 +135,7 @@ class GalleryImage extends Component { isSelected={ this.state.captionSelected } onChange={ ( newCaption ) => setAttributes( { caption: newCaption } ) } onFocus={ this.onSelectCaption } - inlineToolbar + inlineToolbar="center" /> ) : null } diff --git a/core-blocks/image/block.js b/core-blocks/image/block.js index 22556c27535aea..346145c85726e7 100644 --- a/core-blocks/image/block.js +++ b/core-blocks/image/block.js @@ -377,7 +377,7 @@ class ImageBlock extends Component { onFocus={ this.onFocusCaption } onChange={ ( value ) => setAttributes( { caption: value } ) } isSelected={ this.state.captionFocused } - inlineToolbar + inlineToolbar="center" /> ) : null } diff --git a/core-blocks/pullquote/index.js b/core-blocks/pullquote/index.js index 64fa1f2dc2baf7..bc93a06d650a99 100644 --- a/core-blocks/pullquote/index.js +++ b/core-blocks/pullquote/index.js @@ -86,7 +86,7 @@ export const settings = { } isSelected={ isSelected && editable === 'cite' } onFocus={ onSetActiveEditable( 'cite' ) } - inlineToolbar + inlineToolbar="center" /> ) } diff --git a/core-blocks/quote/index.js b/core-blocks/quote/index.js index ca804a007b8aa9..7f96c802567d55 100644 --- a/core-blocks/quote/index.js +++ b/core-blocks/quote/index.js @@ -124,7 +124,7 @@ export const settings = { placeholder={ __( 'Write citation…' ) } isSelected={ isSelected && editable === 'cite' } onFocus={ onSetActiveEditable( 'cite' ) } - inlineToolbar + inlineToolbar="left" /> ) } diff --git a/core-blocks/video/index.js b/core-blocks/video/index.js index ce88df821c5388..a26a818740b730 100644 --- a/core-blocks/video/index.js +++ b/core-blocks/video/index.js @@ -180,7 +180,7 @@ export const settings = { placeholder={ __( 'Write caption…' ) } value={ caption } onChange={ ( value ) => setAttributes( { caption: value } ) } - inlineToolbar + inlineToolbar="center" /> ) }