Latest Posts block: remove columns-x class for list view

.eslintrc.json

@@ -114,6 +114,10 @@
 				"selector": "ImportDeclaration[source.value=/^i18n$/]",
 				"message": "Use @wordpress/i18n as import path instead."
 			},
+			{
+				"selector": "ImportDeclaration[source.value=/^data$/]",
+				"message": "Use @wordpress/data as import path instead."
+			},
 			{
 				"selector": "ImportDeclaration[source.value=/^utils$/]",
 				"message": "Use @wordpress/utils as import path instead."

bin/build-plugin-zip.sh

@@ -104,6 +104,7 @@ zip -r gutenberg.zip \
 	element/build/*.{js,map} \
 	hooks/build/*.{js,map} \
 	i18n/build/*.{js,map} \
+	data/build/*.{js,map} \
 	utils/build/*.{js,map} \
 	blocks/build/*.css \
 	components/build/*.css \

blocks/README.md

@@ -133,7 +133,7 @@ add_action( 'enqueue_block_editor_assets', 'random_image_enqueue_block_editor_as
 
 		icon: 'format-image',
 
-		category: 'media',
+		category: 'common',
 
 		attributes: {
 			category: {

blocks/api/factory.js

@@ -44,7 +44,7 @@ export function createBlock( name, blockAttributes = {} ) {
 		const value = blockAttributes[ key ];
 		if ( undefined !== value ) {
 			result[ key ] = value;
-		} else if ( source.default ) {
+		} else if ( source.hasOwnProperty( 'default' ) ) {
 			result[ key ] = source.default;
 		}
 
@@ -224,7 +224,7 @@ export function createReusableBlock( type, attributes ) {
 	return {
 		id: +uniqueId(), // Temorary id replaced when the block is saved server side
 		isTemporary: true,
-		name: __( 'Untitled block' ),
+		title: __( 'Untitled block' ),
 		type,
 		attributes,
 	};

blocks/api/index.js

@@ -1,7 +1,12 @@
 export { createBlock, getPossibleBlockTransformations, switchToBlockType, createReusableBlock } from './factory';
 export { default as parse, getBlockAttributes } from './parser';
 export { default as rawHandler } from './raw-handling';
-export { default as serialize, getBlockDefaultClassname, getBlockContent } from './serializer';
+export {
+	default as serialize,
+	getBlockContent,
+	getBlockDefaultClassname,
+	getSaveElement,
+} from './serializer';
 export { isValidBlock } from './validation';
 export { getCategories } from './categories';
 export {

blocks/api/raw-handling/index.js

@@ -34,9 +34,10 @@ import shortcodeConverter from './shortcode-converter';
  *                                            * 'AUTO': Decide based on the content passed.
  *                                            * 'INLINE': Always handle as inline content, and return string.
  *                                            * 'BLOCKS': Always handle as blocks, and return array of blocks.
+ * @param  {Array}         [options.tagName]  The tag into which content will be inserted.
  * @return {Array|String}                     A list of blocks or a string, depending on `handlerMode`.
  */
-export default function rawHandler( { HTML, plainText = '', mode = 'AUTO' } ) {
+export default function rawHandler( { HTML, plainText = '', mode = 'AUTO', tagName } ) {
 	// First of all, strip any meta tags.
 	HTML = HTML.replace( /<meta[^>]+>/, '' );
 
@@ -65,7 +66,7 @@ export default function rawHandler( { HTML, plainText = '', mode = 'AUTO' } ) {
 	const hasShortcodes = pieces.length > 1;
 
 	// True if mode is auto, no shortcode is included and HTML verifies the isInlineContent condition
-	const isAutoModeInline = mode === 'AUTO' && isInlineContent( HTML ) && ! hasShortcodes;
+	const isAutoModeInline = mode === 'AUTO' && isInlineContent( HTML, tagName ) && ! hasShortcodes;
 
 	// Return filtered HTML if condition is true
 	if ( mode === 'INLINE' || isAutoModeInline ) {
@@ -74,7 +75,7 @@ export default function rawHandler( { HTML, plainText = '', mode = 'AUTO' } ) {
 			formattingTransformer,
 			stripAttributes,
 			commentRemover,
-			createUnwrapper( ( node ) => ! isInline( node ) ),
+			createUnwrapper( ( node ) => ! isInline( node, tagName ) ),
 		] );
 
 		// Allows us to ask for this information when we get a report.

blocks/api/raw-handling/is-inline-content.js

@@ -3,19 +3,19 @@
  */
 import { isInline, isDoubleBR } from './utils';
 
-export default function( HTML ) {
+export default function( HTML, tagName ) {
 	const doc = document.implementation.createHTMLDocument( '' );
 
 	doc.body.innerHTML = HTML;
 
 	const nodes = Array.from( doc.body.children );
 
-	return ! nodes.some( isDoubleBR ) && deepCheck( nodes );
+	return ! nodes.some( isDoubleBR ) && deepCheck( nodes, tagName );
 }
 
-function deepCheck( nodes ) {
+function deepCheck( nodes, tagName ) {
 	return nodes.every( ( node ) => {
-		return ( 'SPAN' === node.nodeName || isInline( node ) ) &&
-			deepCheck( Array.from( node.children ) );
+		return ( 'SPAN' === node.nodeName || isInline( node, tagName ) ) &&
+			deepCheck( Array.from( node.children ), tagName );
 	} );
 }

blocks/api/raw-handling/test/is-inline-content.js

@@ -12,12 +12,16 @@ describe( 'stripWrappers', () => {
 	it( 'should be inline content', () => {
 		equal( isInlineContent( '<em>test</em>' ), true );
 		equal( isInlineContent( '<span>test</span>' ), true );
+		equal( isInlineContent( '<li>test</li>', 'ul' ), true );
 	} );
 
 	it( 'should not be inline content', () => {
 		equal( isInlineContent( '<div>test</div>' ), false );
 		equal( isInlineContent( '<em>test</em><div>test</div>' ), false );
 		equal( isInlineContent( 'test<br><br>test' ), false );
 		equal( isInlineContent( '<em><div>test</div></em>' ), false );
+		equal( isInlineContent( '<li>test</li>', 'p' ), false );
+		equal( isInlineContent( '<li>test</li>', 'h1' ), false );
+		equal( isInlineContent( '<h1>test</h1>', 'li' ), false );
 	} );
 } );

blocks/api/raw-handling/utils.js

@@ -1,8 +1,23 @@
+/**
+ * External dependencies
+ */
+import { includes } from 'lodash';
+
 /**
  * Browser dependencies
  */
 const { ELEMENT_NODE, TEXT_NODE } = window.Node;
 
+/**
+ * An array of tag groups used by isInlineForTag function.
+ * If tagName and nodeName are present in the same group, the node should be treated as inline.
+ * @type {Array}
+ */
+const inlineWhitelistTagGroups = [
+	[ 'ul', 'li', 'ol' ],
+	[ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
+];
+
 const inlineWhitelist = {
 	strong: {},
 	em: {},
@@ -63,8 +78,26 @@ export function isAttributeWhitelisted( tag, attribute ) {
 	);
 }
 
-export function isInline( node ) {
-	return !! inlineWhitelist[ node.nodeName.toLowerCase() ];
+/**
+ * Checks if nodeName should be treated as inline when being added to tagName.
+ * This happens if nodeName and tagName are in the same group defined in inlineWhitelistTagGroups.
+ *
+ * @param  {String}  nodeName Node name.
+ * @param  {String}  tagName  Tag name.
+ * @return {Boolean}          True if nodeName is inline in the context of tagName and false otherwise.
+ */
+function isInlineForTag( nodeName, tagName ) {
+	if ( ! tagName || ! nodeName ) {
+		return false;
+	}
+	return inlineWhitelistTagGroups.some( tagGroup =>
+		includes( tagGroup, nodeName ) && includes( tagGroup, tagName )
+	);
+}
+
+export function isInline( node, tagName ) {
+	const nodeName = node.nodeName.toLowerCase();
+	return !! inlineWhitelist[ nodeName ] || isInlineForTag( nodeName, tagName );
 }
 
 export function isInlineWrapper( node ) {

blocks/api/serializer.js

@@ -28,24 +28,25 @@ export function getBlockDefaultClassname( blockName ) {
 
 /**
  * Given a block type containg a save render implementation and attributes, returns the
- * static markup to be saved.
+ * enhanced element to be saved or string when raw HTML expected.
  *
  * @param  {Object} blockType  Block type
  * @param  {Object} attributes Block attributes
- * @return {string}            Save content
+ * @return {Object|string}     Save content
  */
-export function getSaveContent( blockType, attributes ) {
+export function getSaveElement( blockType, attributes ) {
 	const { save } = blockType;
-	let saveContent;
+
+	let saveElement;
 
 	if ( save.prototype instanceof Component ) {
-		saveContent = createElement( save, { attributes } );
+		saveElement = createElement( save, { attributes } );
 	} else {
-		saveContent = save( { attributes } );
+		saveElement = save( { attributes } );
 
 		// Special-case function render implementation to allow raw HTML return
-		if ( 'string' === typeof saveContent ) {
-			return saveContent;
+		if ( 'string' === typeof saveElement ) {
+			return saveElement;
 		}
 	}
 
@@ -59,10 +60,28 @@ export function getSaveContent( blockType, attributes ) {
 
 		return cloneElement( element, props );
 	};
-	const contentWithExtraProps = Children.map( saveContent, addExtraContainerProps );
+
+	return Children.map( saveElement, addExtraContainerProps );
+}
+
+/**
+ * Given a block type containg a save render implementation and attributes, returns the
+ * static markup to be saved.
+ *
+ * @param  {Object} blockType  Block type
+ * @param  {Object} attributes Block attributes
+ * @return {string}            Save content
+ */
+export function getSaveContent( blockType, attributes ) {
+	const saveElement = getSaveElement( blockType, attributes );
+
+	// Special-case function render implementation to allow raw HTML return
+	if ( 'string' === typeof saveElement ) {
+		return saveElement;
+	}
 
 	// Otherwise, infer as element
-	return renderToString( contentWithExtraProps );
+	return renderToString( saveElement );
 }
 
 /**

blocks/api/test/factory.js

@@ -44,6 +44,10 @@ describe( 'block factory', () => {
 						type: 'boolean',
 						default: true,
 					},
+					includesFalseyDefault: {
+						type: 'number',
+						default: 0,
+					},
 				},
 				save: noop,
 				category: 'common',
@@ -56,6 +60,7 @@ describe( 'block factory', () => {
 			expect( block.name ).toEqual( 'core/test-block' );
 			expect( block.attributes ).toEqual( {
 				includesDefault: true,
+				includesFalseyDefault: 0,
 				align: 'left',
 			} );
 			expect( block.isValid ).toBe( true );
@@ -619,7 +624,7 @@ describe( 'block factory', () => {
 
 			expect( createReusableBlock( type, attributes ) ).toMatchObject( {
 				id: expect.any( Number ),
-				name: 'Untitled block',
+				title: 'Untitled block',
 				type,
 				attributes,
 			} );

blocks/block-description/index.js

@@ -1,12 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-export default function BlockDescription( { children } ) {
-	return (
-		<div className="components-block-description">
-			{ children }
-		</div>
-	);
+class BlockDescription extends Component {
+	constructor() {
+		super( ...arguments );
+		// eslint-disable-next-line no-console
+		console.warn( 'The wp.blocks.BlockDescription component is deprecated. Use the "description" block property instead.' );
+	}
+
+	render() {
+		const { children } = this.props;
+		return (
+			<div className="components-block-description">
+				{ children }
+			</div>
+		);
+	}
 }
+
+export default BlockDescription;

blocks/block-description/test/index.js

@@ -8,13 +8,21 @@ import { shallow } from 'enzyme';
  */
 import BlockDescription from '../';
 
+/* eslint-disable no-console */
+function expectWarning() {
+	expect( console.warn ).toHaveBeenCalled();
+	console.warn.mockClear();
+}
+/* eslint-enable no-console */
+
 describe( 'BlockDescription', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render a <p> element with some content', () => {
 			const blockDescription = shallow( <BlockDescription><p>Hello World</p></BlockDescription> );
 			expect( blockDescription.hasClass( 'components-block-description' ) ).toBe( true );
 			expect( blockDescription.type() ).toBe( 'div' );
 			expect( blockDescription.text() ).toBe( 'Hello World' );
+			expectWarning();
 		} );
 	} );
 } );

blocks/block-edit/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -6,22 +11,32 @@ import { withFilters } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { getBlockType } from '../api';
+import {
+	getBlockType,
+	getBlockDefaultClassname,
+	hasBlockSupport,
+} from '../api';
 
-function BlockEdit( props ) {
-	const { name, ...editProps } = props;
+export function BlockEdit( props ) {
+	const { name, attributes = {} } = props;
 	const blockType = getBlockType( name );
 
 	if ( ! blockType ) {
 		return null;
 	}
 
+	// Generate a class name for the block's editable form
+	const generatedClassName = hasBlockSupport( blockType, 'className', true ) ?
+		getBlockDefaultClassname( name ) :
+		null;
+	const className = classnames( generatedClassName, attributes.className );
+
 	// `edit` and `save` are functions or components describing the markup
 	// with which a block is displayed. If `blockType` is valid, assign
 	// them preferencially as the render value for the block.
 	const Edit = blockType.edit || blockType.save;
 
-	return <Edit { ...editProps } />;
+	return <Edit { ...props } className={ className } />;
 }
 
 export default withFilters( 'blocks.BlockEdit' )( BlockEdit );