Editable: Adding a prop to opt-for formatting controls (#618)

WordPress · May 3, 2017 · 142a20b · 142a20b
1 parent 519c765
commit 142a20b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 19 deletions.
diff --git a/blocks/components/editable/format-toolbar.js b/blocks/components/editable/format-toolbar.js
@@ -24,6 +24,9 @@ const FORMATTING_CONTROLS = [
 	}
 ];
 
+// Default controls shown if no `enabledControls` prop provided
+const DEFAULT_CONTROLS = [ 'bold', 'italic', 'strikethrough', 'link' ];
+
 class FormatToolbar extends wp.element.Component {
 	constructor( props ) {
 		super( ...arguments );
@@ -101,29 +104,31 @@ class FormatToolbar extends wp.element.Component {
 	}
 
 	render() {
-		const { formats, focusPosition } = this.props;
+		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS } = this.props;
 		const linkStyle = focusPosition
 			? { position: 'absolute', ...focusPosition }
 			: null;
 
+		const toolbarControls = FORMATTING_CONTROLS
+			.filter( control => enabledControls.indexOf( control.format ) !== -1 )
+			.map( ( control ) => ( {
+				...control,
+				onClick: this.toggleFormat( control.format ),
+				isActive: !! formats[ control.format ]
+			} ) );
+
+		if ( enabledControls.indexOf( 'link' ) !== -1 ) {
+			toolbarControls.push( {
+				icon: 'admin-links',
+				title: wp.i18n.__( 'Link' ),
+				onClick: this.addLink,
+				isActive: !! formats.link
+			} );
+		}
+
 		return (
 			<div className="editable-format-toolbar">
-				<Toolbar
-					controls={
-						FORMATTING_CONTROLS
-							.map( ( control ) => ( {
-								...control,
-								onClick: this.toggleFormat( control.format ),
-								isActive: !! formats[ control.format ]
-							} ) )
-							.concat( [ {
-								icon: 'admin-links',
-								title: wp.i18n.__( 'Link' ),
-								onClick: this.addLink,
-								isActive: !! formats.link
-							} ] )
-					}
-				/>
+				<Toolbar controls={ toolbarControls } />
 
 				{ !! formats.link && this.state.isEditingLink &&
 					<form

diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js
@@ -366,7 +366,7 @@ export default class Editable extends wp.element.Component {
 	}
 
 	render() {
-		const { tagName: Tag = 'div', style, focus, className, showAlignments = false } = this.props;
+		const { tagName: Tag = 'div', style, focus, className, showAlignments = false, formattingControls } = this.props;
 		const classes = classnames( 'blocks-editable', className );
 
 		let element = (
@@ -388,7 +388,12 @@ export default class Editable extends wp.element.Component {
 								isActive: this.isAlignmentActive( control.align )
 							} ) ) } />
 					}
-					<FormatToolbar focusPosition={ this.state.focusPosition } formats={ this.state.formats } onChange={ this.changeFormats } />
+					<FormatToolbar
+						focusPosition={ this.state.focusPosition }
+						formats={ this.state.formats }
+						onChange={ this.changeFormats }
+						enabledControls={ formattingControls }
+					/>
 				</Fill>,
 				element
 			];