Early List block implementation (no UI yet)

blocks/components/editable/index.js

@@ -84,3 +84,7 @@ export default class Editable extends wp.element.Component {
 		);
 	}
 }
+
+Editable.defaultProps = {
+	nodeName: 'div'
+};

editor/assets/stylesheets/main.scss

@@ -25,6 +25,14 @@ body.toplevel_page_gutenberg {
 	svg {
 		fill: currentColor;
 	}
+
+	ul {
+		list-style-type: disc;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
 }
 
 .gutenberg__editor {

editor/blocks/index.js

@@ -1,2 +1,4 @@
 import './freeform';
 import './text';
+import './list';
+

editor/blocks/list/index.js

@@ -0,0 +1,43 @@
+const Editable = wp.blocks.Editable;
+const { html, prop } = wp.blocks.query;
+
+function List( { nodeName, children } ) {
+	// nodeName.toLowerCase() is used to map DOM nodeName values to proper tag.
+	return wp.element.createElement( nodeName.toLowerCase(), null, children );
+}
+
+wp.blocks.registerBlock( 'core/list', {
+	title: 'List',
+	icon: 'editor-ul',
+	category: 'common',
+
+	attributes: {
+		listType: prop( 'ol,ul', 'nodeName' ),
+		items: wp.blocks.query.query(
+			'li',
+			{
+				value: html()
+			}
+		)
+	},
+
+	edit( { attributes, onChange } ) {
+		const { listType = 'ol', items = [] } = attributes;
+		const value = items.map( i => {
+			return `<li>${ i.value }</li>`;
+		} ).join( '' );
+
+		return (
+			<Editable
+				nodeName={ listType }
+				value={ value }
+				onChange={ onChange } />
+		);
+	},
+
+	save( { attributes } ) {
+		const { listType = 'ol', items = [] } = attributes;
+		const children = items.map( ( i, index ) => <li key={ index }>{ i.value }</li> );
+		return <List nodeName={ listType }>{ children }</List>;
+	}
+} );

languages/gutenberg.pot

@@ -3,15 +3,15 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "X-Generator: babel-plugin-wp-i18n\n"
 
-#: editor/blocks/freeform/index.js:4
-msgid "Freeform"
-msgstr ""
-
 #: editor/header/mode-switcher/index.js:31
 msgctxt "Name for the Text editor tab (formerly HTML)"
 msgid "Text"
 msgstr ""
 
+#: editor/blocks/freeform/index.js:4
+msgid "Freeform"
+msgstr ""
+
 #: editor/header/mode-switcher/index.js:30
 msgid "Visual"
 msgstr ""

post-content.js

@@ -32,9 +32,14 @@ window._wpGutenbergPost = {
 			'<p>By shipping early and often you have the unique competitive advantage of hearing from real people what they think of your work, which in best case helps you anticipate market direction, and in worst case gives you a few people rooting for you that you can email when your team pivots to a new idea. Nothing can recreate the crucible of real usage.</p>',
 			'<!-- /wp:core/text -->',
 
+			'<!-- wp:core/list -->',
+			'<ul><li>Ship early</li><li>Ship often</li><li>Listen to feedback from real people</li><li>Anticipate market direction</li></ul>',
+			'<!-- /wp:core/list -->',
+
 			'<!-- wp:core/embed url:https://www.youtube.com/watch?v=Nl6U7UotA-M -->',
 			'<iframe width="560" height="315" src="//www.youtube.com/embed/Nl6U7UotA-M" frameborder="0" allowfullscreen></iframe>',
 			'<!-- /wp:core/embed -->',
 		].join( '' ),
 	},
 };
+