Blocks: Automatically generate a wrapper classname for blocks

blocks/api/serializer.js

@@ -1,13 +1,14 @@
 /**
  * External dependencies
  */
-import { isEmpty, map, reduce } from 'lodash';
+import { isEmpty, map, reduce, kebabCase, isObject } from 'lodash';
 import { html as beautifyHtml } from 'js-beautify';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { Component, createElement, renderToString } from 'element';
+import { Component, createElement, renderToString, cloneElement, Children } from 'element';
 
 /**
  * Internal dependencies
@@ -16,14 +17,29 @@ import { getBlockType } from './registration';
 import { parseBlockAttributes } from './parser';
 
 /**
- * Given a block's save render implementation and attributes, returns the
+ * Returns the block's default classname from its name
+ *
+ * @param {String}   blockName  The block name
+ * @return {string}             The block's default class
+ */
+export function getBlockDefaultClassname( blockName ) {
+	// Drop the namespace "core/"" for core blocks only
+	const match = /^([a-z0-9-]+)\/([a-z0-9-]+)$/.exec( blockName );
+	const sanitizedBlockName = match[ 1 ] === 'core' ? match[ 2 ] : blockName;
+
+	return `wp-block-${ kebabCase( sanitizedBlockName ) }`;
+}
+
+/**
+ * Given a block type containg a save render implementation and attributes, returns the
  * static markup to be saved.
  *
- * @param  {Function|WPComponent} save       Save render implementation
+ * @param  {Object}               blockType  Block type
  * @param  {Object}               attributes Block attributes
  * @return {string}                          Save content
  */
-export function getSaveContent( save, attributes ) {
+export function getSaveContent( blockType, attributes ) {
+	const { save, className = getBlockDefaultClassname( blockType.name ) } = blockType;
 	let rawContent;
 
 	if ( save.prototype instanceof Component ) {
@@ -37,8 +53,19 @@ export function getSaveContent( save, attributes ) {
 		}
 	}
 
+	// Adding a generic classname
+	const addClassnameToElement = ( element ) => {
+		if ( ! element || ! isObject( element ) || ! className ) {
+			return element;
+		}
+
+		const updatedClassName = classnames( element.props.className, className );
+		return cloneElement( element, { className: updatedClassName } );
+	};
+	const contentWithClassname = Children.map( rawContent, addClassnameToElement );
+
 	// Otherwise, infer as element
-	return renderToString( rawContent );
+	return renderToString( contentWithClassname );
 }
 
 const escapeDoubleQuotes = value => value.replace( /"/g, '\"' );
@@ -107,7 +134,7 @@ function asNameValuePair( value, key ) {
 export function serializeBlock( block ) {
 	const blockName = block.name;
 	const blockType = getBlockType( blockName );
-	const saveContent = getSaveContent( blockType.save, block.attributes );
+	const saveContent = getSaveContent( blockType, block.attributes );
 	const saveAttributes = getCommentAttributes( block.attributes, parseBlockAttributes( saveContent, blockType ) );
 
 	const serializedAttributes = ! isEmpty( saveAttributes )

blocks/api/test/serializer.js

@@ -25,7 +25,10 @@ describe( 'block serializer', () => {
 		context( 'function save', () => {
 			it( 'should return string verbatim', () => {
 				const saved = getSaveContent(
-					( { attributes } ) => attributes.fruit,
+					{
+						save: ( { attributes } ) => attributes.fruit,
+						name: 'core/fruit',
+					},
 					{ fruit: 'Bananas' }
 				);
 
@@ -34,7 +37,48 @@ describe( 'block serializer', () => {
 
 			it( 'should return element as string if save returns element', () => {
 				const saved = getSaveContent(
-					( { attributes } ) => createElement( 'div', null, attributes.fruit ),
+					{
+						save: ( { attributes } ) => createElement( 'div', null, attributes.fruit ),
+						name: 'core/fruit',
+					},
+					{ fruit: 'Bananas' }
+				);
+
+				expect( saved ).to.equal( '<div class="wp-block-fruit">Bananas</div>' );
+			} );
+
+			it( 'should return use the namespace in the classname if it\' not a core block', () => {
+				const saved = getSaveContent(
+					{
+						save: ( { attributes } ) => createElement( 'div', null, attributes.fruit ),
+						name: 'myplugin/fruit',
+					},
+					{ fruit: 'Bananas' }
+				);
+
+				expect( saved ).to.equal( '<div class="wp-block-myplugin-fruit">Bananas</div>' );
+			} );
+
+			it( 'should overrides the className', () => {
+				const saved = getSaveContent(
+					{
+						save: ( { attributes } ) => createElement( 'div', null, attributes.fruit ),
+						name: 'myplugin/fruit',
+						className: 'apples',
+					},
+					{ fruit: 'Bananas' }
+				);
+
+				expect( saved ).to.equal( '<div class="apples">Bananas</div>' );
+			} );
+
+			it( 'should not add a className if falsy', () => {
+				const saved = getSaveContent(
+					{
+						save: ( { attributes } ) => createElement( 'div', null, attributes.fruit ),
+						name: 'myplugin/fruit',
+						className: false,
+					},
 					{ fruit: 'Bananas' }
 				);
 
@@ -45,10 +89,13 @@ describe( 'block serializer', () => {
 		context( 'component save', () => {
 			it( 'should return element as string', () => {
 				const saved = getSaveContent(
-					class extends Component {
-						render() {
-							return createElement( 'div', null, this.props.attributes.fruit );
-						}
+					{
+						save: class extends Component {
+							render() {
+								return createElement( 'div', null, this.props.attributes.fruit );
+							}
+						},
+						name: 'core/fruit',
 					},
 					{ fruit: 'Bananas' }
 				);
@@ -124,7 +171,7 @@ describe( 'block serializer', () => {
 					},
 				},
 			];
-			const expectedPostContent = '<!-- wp:core/test-block align="left" -->\n<p>Ribs & Chicken</p>\n<!-- /wp:core/test-block -->';
+			const expectedPostContent = '<!-- wp:core/test-block align="left" -->\n<p class="wp-block-test-block">Ribs & Chicken</p>\n<!-- /wp:core/test-block -->';
 
 			expect( serialize( blockList ) ).to.eql( expectedPostContent );
 		} );

blocks/library/heading/index.js

@@ -26,6 +26,8 @@ registerBlockType( 'core/heading', {
 
 	category: 'common',
 
+	className: false,
+
 	attributes: {
 		content: children( 'h1,h2,h3,h4,h5,h6' ),
 		nodeName: prop( 'h1,h2,h3,h4,h5,h6', 'nodeName' ),

blocks/library/html/index.js

@@ -25,6 +25,8 @@ registerBlockType( 'core/html', {
 
 	category: 'formatting',
 
+	className: false,
+
 	attributes: {
 		content: children(),
 	},

blocks/library/list/index.js

@@ -74,6 +74,8 @@ registerBlockType( 'core/list', {
 		values: children( 'ol,ul' ),
 	},
 
+	className: false,
+
 	transforms: {
 		from: [
 			{

blocks/library/text/index.js

@@ -23,6 +23,8 @@ registerBlockType( 'core/text', {
 
 	category: 'common',
 
+	className: false,
+
 	attributes: {
 		content: query( 'p', children() ),
 	},

blocks/test/fixtures/core-button-center.html

@@ -1,3 +1,3 @@
 <!-- wp:core/button align="center" -->
-<div class="aligncenter"><a href="https://github.com/WordPress/gutenberg">Help build Gutenberg</a></div>
+<div class="aligncenter wp-block-button"><a href="https://github.com/WordPress/gutenberg">Help build Gutenberg</a></div>
 <!-- /wp:core/button -->

blocks/test/fixtures/core-button-center.serialized.html

@@ -1,4 +1,4 @@
 <!-- wp:core/button align="center" -->
-<div class="aligncenter"><a href="https://github.com/WordPress/gutenberg">Help build Gutenberg</a></div>
+<div class="aligncenter wp-block-button"><a href="https://github.com/WordPress/gutenberg">Help build Gutenberg</a></div>
 <!-- /wp:core/button -->
 

blocks/test/fixtures/core-code.html

@@ -1,5 +1,5 @@
 <!-- wp:core/code -->
-<pre><code>export default function MyButton() {
+<pre class="wp-block-code"><code>export default function MyButton() {
 	return &lt;Button&gt;Click Me!&lt;/Button&gt;;
 }</code></pre>
 <!-- /wp:core/code -->

blocks/test/fixtures/core-code.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/code -->
-<pre><code>export default function MyButton() {
+<pre class="wp-block-code"><code>export default function MyButton() {
 	return &lt;Button&gt;Click Me!&lt;/Button&gt;;
 }</code></pre>
 <!-- /wp:core/code -->

blocks/test/fixtures/core-cover-image.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/cover-image url="https://cldup.com/uuUqE_dXzy.jpg" -->
-<section class="blocks-cover-image">
+<section class="blocks-cover-image wp-block-cover-image">
     <section class="cover-image" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
         <h2>Guten Berg!</h2>
     </section>

blocks/test/fixtures/core-embed.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embed url="https://example.com/" -->
-<figure>
+<figure class="wp-block-embed">
     https://example.com/
     <figcaption>Embedded content from an example URL</figcaption>
 </figure>

blocks/test/fixtures/core-embed.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embed url="https://example.com/" -->
-<figure>
+<figure class="wp-block-embed">
     https://example.com/
     <figcaption>Embedded content from an example URL</figcaption>
 </figure>

blocks/test/fixtures/core-embedanimoto.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedanimoto url="https://animoto.com/" -->
-<figure>
+<figure class="wp-block-embedanimoto">
     https://animoto.com/
     <figcaption>Embedded content from animoto</figcaption>
 </figure>

blocks/test/fixtures/core-embedanimoto.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedanimoto url="https://animoto.com/" -->
-<figure>
+<figure class="wp-block-embedanimoto">
     https://animoto.com/
     <figcaption>Embedded content from animoto</figcaption>
 </figure>

blocks/test/fixtures/core-embedcloudup.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedcloudup url="https://cloudup.com/" -->
-<figure>
+<figure class="wp-block-embedcloudup">
     https://cloudup.com/
     <figcaption>Embedded content from cloudup</figcaption>
 </figure>

blocks/test/fixtures/core-embedcloudup.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedcloudup url="https://cloudup.com/" -->
-<figure>
+<figure class="wp-block-embedcloudup">
     https://cloudup.com/
     <figcaption>Embedded content from cloudup</figcaption>
 </figure>

blocks/test/fixtures/core-embedcollegehumor.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedcollegehumor url="https://collegehumor.com/" -->
-<figure>
+<figure class="wp-block-embedcollegehumor">
     https://collegehumor.com/
     <figcaption>Embedded content from collegehumor</figcaption>
 </figure>

blocks/test/fixtures/core-embedcollegehumor.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedcollegehumor url="https://collegehumor.com/" -->
-<figure>
+<figure class="wp-block-embedcollegehumor">
     https://collegehumor.com/
     <figcaption>Embedded content from collegehumor</figcaption>
 </figure>

blocks/test/fixtures/core-embeddailymotion.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embeddailymotion url="https://dailymotion.com/" -->
-<figure>
+<figure class="wp-block-embeddailymotion">
     https://dailymotion.com/
     <figcaption>Embedded content from dailymotion</figcaption>
 </figure>

blocks/test/fixtures/core-embeddailymotion.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embeddailymotion url="https://dailymotion.com/" -->
-<figure>
+<figure class="wp-block-embeddailymotion">
     https://dailymotion.com/
     <figcaption>Embedded content from dailymotion</figcaption>
 </figure>

blocks/test/fixtures/core-embedfacebook.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedfacebook url="https://facebook.com/" -->
-<figure>
+<figure class="wp-block-embedfacebook">
     https://facebook.com/
     <figcaption>Embedded content from facebook</figcaption>
 </figure>

blocks/test/fixtures/core-embedfacebook.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedfacebook url="https://facebook.com/" -->
-<figure>
+<figure class="wp-block-embedfacebook">
     https://facebook.com/
     <figcaption>Embedded content from facebook</figcaption>
 </figure>

blocks/test/fixtures/core-embedflickr.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedflickr url="https://flickr.com/" -->
-<figure>
+<figure class="wp-block-embedflickr">
     https://flickr.com/
     <figcaption>Embedded content from flickr</figcaption>
 </figure>

blocks/test/fixtures/core-embedflickr.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedflickr url="https://flickr.com/" -->
-<figure>
+<figure class="wp-block-embedflickr">
     https://flickr.com/
     <figcaption>Embedded content from flickr</figcaption>
 </figure>

blocks/test/fixtures/core-embedfunnyordie.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedfunnyordie url="https://funnyordie.com/" -->
-<figure>
+<figure class="wp-block-embedfunnyordie">
     https://funnyordie.com/
     <figcaption>Embedded content from funnyordie</figcaption>
 </figure>

blocks/test/fixtures/core-embedfunnyordie.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedfunnyordie url="https://funnyordie.com/" -->
-<figure>
+<figure class="wp-block-embedfunnyordie">
     https://funnyordie.com/
     <figcaption>Embedded content from funnyordie</figcaption>
 </figure>

blocks/test/fixtures/core-embedhulu.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedhulu url="https://hulu.com/" -->
-<figure>
+<figure class="wp-block-embedhulu">
     https://hulu.com/
     <figcaption>Embedded content from hulu</figcaption>
 </figure>

blocks/test/fixtures/core-embedhulu.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedhulu url="https://hulu.com/" -->
-<figure>
+<figure class="wp-block-embedhulu">
     https://hulu.com/
     <figcaption>Embedded content from hulu</figcaption>
 </figure>

blocks/test/fixtures/core-embedimgur.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedimgur url="https://imgur.com/" -->
-<figure>
+<figure class="wp-block-embedimgur">
     https://imgur.com/
     <figcaption>Embedded content from imgur</figcaption>
 </figure>

blocks/test/fixtures/core-embedimgur.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedimgur url="https://imgur.com/" -->
-<figure>
+<figure class="wp-block-embedimgur">
     https://imgur.com/
     <figcaption>Embedded content from imgur</figcaption>
 </figure>

blocks/test/fixtures/core-embedinstagram.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedinstagram url="https://instagram.com/" -->
-<figure>
+<figure class="wp-block-embedinstagram">
     https://instagram.com/
     <figcaption>Embedded content from instagram</figcaption>
 </figure>

blocks/test/fixtures/core-embedinstagram.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedinstagram url="https://instagram.com/" -->
-<figure>
+<figure class="wp-block-embedinstagram">
     https://instagram.com/
     <figcaption>Embedded content from instagram</figcaption>
 </figure>

blocks/test/fixtures/core-embedissuu.html

@@ -1,5 +1,5 @@
 <!-- wp:core/embedissuu url="https://issuu.com/" -->
-<figure>
+<figure class="wp-block-embedissuu">
     https://issuu.com/
     <figcaption>Embedded content from issuu</figcaption>
 </figure>