Early List block implementation (no UI yet)

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,40 @@
+const Editable = wp.blocks.Editable;
+const { html, prop } = wp.blocks.query;
+
+wp.blocks.registerBlock( 'core/list', {
+	title: wp.i18n.__( '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( item => {
+			return `<li>${ item.value }</li>`;
+		} ).join( '' );
+
+		return (
+			<Editable
+				tagName={ listType }
+				value={ value }
+				onChange={ onChange } />
+		);
+	},
+
+	save( { attributes } ) {
+		const { listType = 'ol', items = [] } = attributes;
+		const children = items.map( ( item, index ) => (
+			<li key={ index } dangerouslySetInnerHTML={ { __html: item.value } } />
+		) );
+		return wp.element.createElement( listType.toLowerCase(), null, children );
+	}
+} );

languages/gutenberg.pot

@@ -3,13 +3,17 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "X-Generator: babel-plugin-wp-i18n\n"
 
+#: 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:31
-msgctxt "Name for the Text editor tab (formerly HTML)"
-msgid "Text"
+#: editor/blocks/list/index.js:5
+msgid "List"
 msgstr ""
 
 #: editor/header/mode-switcher/index.js:30

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( '' ),
 	},
 };
+