Allow blocks to align inlineToolbar

WordPress · May 1, 2018 · db4c94d · db4c94d
1 parent 3478730
commit db4c94d
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -825,7 +825,10 @@ export class RichText extends Component {
 					</BlockFormatControls>
 				) }
 				{ isSelected && inlineToolbar && (
-					<div className="block-rich-text__inline-toolbar">
+					<div
+						className="block-rich-text__inline-toolbar"
+						style={ { justifyContent: inlineToolbar } }
+					>
 						{ formatToolbar }
 					</div>
 				) }

diff --git 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"
 							/>
 						) }
 					</figure>

diff --git 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 }
 				</div>

diff --git 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 }
 						</figure>

diff --git 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 }
 			</figure>

diff --git 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 }
 				</figure>

diff --git 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"
 						/>
 					) }
 				</blockquote>

diff --git 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"
 						/>
 					) }
 				</blockquote>

diff --git 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"
 							/>
 						) }
 					</figure>