Docs: Update docs to reflect the change in how block controls are han…

…dled
WordPress · Mar 30, 2018 · 3192ba7 · 3192ba7
1 parent e628953
commit 3192ba7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 28 deletions.
diff --git a/blocks/README.md b/blocks/README.md
@@ -275,12 +275,6 @@ buttons. This is useful for block-level modifications to be made available when
 a block is selected. For example, if your block supports alignment, you may
 want to display alignment options in the selected block's toolbar.
 
-Because the toolbar should only be shown when the block is selected, it is
-important that a `BlockControls` element is only returned when the block's
-`isSelected` prop is
-[truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy),
-meaning that the block is currently selected.
-
 Example:
 
 ```js
@@ -292,15 +286,13 @@ Example:
 	function edit( props ) {
 		return [
 			// Controls: (only visible when block is selected)
-			props.isSelected && (
-				el( BlockControls, { key: 'controls' },
-					el( AlignmentToolbar, {
-						value: props.align,
-						onChange: function( nextAlign ) {
-							props.setAttributes( { align: nextAlign } )
-						}
-					} )
-				)
+			el( BlockControls, { key: 'controls' },
+				el( AlignmentToolbar, {
+					value: props.align,
+					onChange: function( nextAlign ) {
+						props.setAttributes( { align: nextAlign } )
+					}
+				} )
 			),
 
 			// Block content: (with alignment as attribute)

diff --git a/docs/blocks-controls.md b/docs/blocks-controls.md
@@ -39,8 +39,7 @@ registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-04', {
 
 	edit: function( props ) {
 		var content = props.attributes.content,
-			alignment = props.attributes.alignment,
-			isSelected = props.isSelected;
+			alignment = props.attributes.alignment;
 
 		function onChangeContent( newContent ) {
 			props.setAttributes( { content: newContent } );
@@ -51,7 +50,7 @@ registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-04', {
 		}
 
 		return [
-			isSelected && el(
+			el(
 				BlockControls,
 				{ key: 'controls' },
 				el(
@@ -112,7 +111,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-04', {
 		},
 	},
 
-	edit( { attributes, className, isSelected, setAttributes } ) {
+	edit( { attributes, className, setAttributes } ) {
 		const { content, alignment } = attributes;
 
 		function onChangeContent( newContent ) {
@@ -124,14 +123,12 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-04', {
 		}
 
 		return [
-			isSelected && (
-				<BlockControls key="controls">
-					<AlignmentToolbar
-						value={ alignment }
-						onChange={ onChangeAlignment }
-					/>
-				</BlockControls>
-			),
+			<BlockControls key="controls">
+				<AlignmentToolbar
+					value={ alignment }
+					onChange={ onChangeAlignment }
+				/>
+			</BlockControls>,
 			<RichText
 				key="editable"
 				tagName="p"
@@ -152,7 +149,7 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-04', {
 ```
 {% end %}
 
-Note that you should only include `BlockControls` if the block is currently selected. We must test that the `isSelected` value is truthy before rendering the element, otherwise you will inadvertently cause controls to be shown for the incorrect block type.
+Note that `BlockControls` is only visible when the block is currently selected. 
 
 ## Inspector