Merge pull request #4014 from WordPress/update/supports-html

Block API: Refactor supportHTML as supports property
WordPress · Dec 15, 2017 · bbf06e2 · bbf06e2
2 parents 7cb404d + 2a3e4a0
commit bbf06e2
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 21 deletions.
diff --git a/blocks/library/categories/index.js b/blocks/library/categories/index.js
@@ -44,7 +44,9 @@ registerBlockType( 'core/categories', {
 		},
 	},
 
-	supportHTML: false,
+	supports: {
+		html: false,
+	},
 
 	getEditWrapperProps( attributes ) {
 		const { align } = attributes;

diff --git a/blocks/library/code/index.js b/blocks/library/code/index.js
@@ -32,7 +32,9 @@ registerBlockType( 'core/code', {
 		},
 	},
 
-	supportHTML: false,
+	supports: {
+		html: false,
+	},
 
 	transforms: {
 		from: [

diff --git a/blocks/library/html/index.js b/blocks/library/html/index.js
@@ -27,11 +27,10 @@ registerBlockType( 'core/html', {
 
 	keywords: [ __( 'embed' ) ],
 
-	supportHTML: false,
-
 	supports: {
 		customClassName: false,
 		className: false,
+		html: false,
 	},
 
 	attributes: {

diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js
@@ -34,7 +34,9 @@ registerBlockType( 'core/latest-posts', {
 
 	keywords: [ __( 'recent posts' ) ],
 
-	supportHTML: false,
+	supports: {
+		html: false,
+	},
 
 	getEditWrapperProps( attributes ) {
 		const { align } = attributes;

diff --git a/blocks/library/more/index.js b/blocks/library/more/index.js
@@ -21,11 +21,10 @@ registerBlockType( 'core/more', {
 
 	useOnce: true,
 
-	supportHTML: false,
-
 	supports: {
 		customClassName: false,
 		className: false,
+		html: false,
 	},
 
 	attributes: {

diff --git a/blocks/library/shortcode/index.js b/blocks/library/shortcode/index.js
@@ -55,11 +55,10 @@ registerBlockType( 'core/shortcode', {
 		],
 	},
 
-	supportHTML: false,
-
 	supports: {
 		customClassName: false,
 		className: false,
+		html: false,
 	},
 
 	edit: withInstanceId(

diff --git a/docs/block-api.md b/docs/block-api.md
@@ -140,16 +140,11 @@ customClassName: false,
 className: false,
 ```
 
-#### supportHTML (optional)
-
-* **Type:** `Bool`
-* **Default:** `true`
-
-Whether a block can be edited in HTML mode.
+- `html` (default `true`): By default, Gutenberg will allow a block's markup to be edited individually. To disable this behavior, set `html` to `false`.
 
 ```js
 // Remove support for an HTML mode.
-supportHTML: false,
+html: false,
 ```
 
 ## Edit and Save

diff --git a/editor/components/block-settings-menu/block-mode-toggle.js b/editor/components/block-settings-menu/block-mode-toggle.js
@@ -9,7 +9,7 @@ import { noop } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ import { getBlockMode, getBlock } from '../../selectors';
 import { toggleBlockMode } from '../../actions';
 
 export function BlockModeToggle( { blockType, mode, onToggleMode, small = false } ) {
-	if ( ! blockType || blockType.supportHTML === false ) {
+	if ( ! hasBlockSupport( blockType, 'html', true ) ) {
 		return null;
 	}
 

diff --git a/editor/components/block-settings-menu/test/block-mode-toggle.js b/editor/components/block-settings-menu/test/block-mode-toggle.js
@@ -11,7 +11,7 @@ import { BlockModeToggle } from '../block-mode-toggle';
 describe( 'BlockModeToggle', () => {
 	it( 'should not render the HTML mode button if the block doesn\'t support it', () => {
 		const wrapper = shallow(
-			<BlockModeToggle blockType={ { supportHTML: false } } />
+			<BlockModeToggle blockType={ { supports: { html: false } } } />
 		);
 
 		expect( wrapper.equals( null ) ).toBe( true );
@@ -20,7 +20,7 @@ describe( 'BlockModeToggle', () => {
 	it( 'should render the HTML mode button', () => {
 		const wrapper = shallow(
 			<BlockModeToggle
-				blockType={ { supportHTML: true } }
+				blockType={ { supports: { html: true } } }
 				mode="visual"
 			/>
 		);
@@ -32,7 +32,7 @@ describe( 'BlockModeToggle', () => {
 	it( 'should render the Visual mode button', () => {
 		const wrapper = shallow(
 			<BlockModeToggle
-				blockType={ { supportHTML: true } }
+				blockType={ { supports: { html: true } } }
 				mode="html"
 			/>
 		);