Add/346 list block/ui

controls/alignment-toolbar.js

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import {
+	EditorAlignLeftIcon,
+	EditorAlignCenterIcon,
+	EditorAlignRightIcon
+} from './dashicons';
+
+export default class AlignmentToolbar extends wp.element.Component {
+
+	render() {
+		const { value, actions } = this.props;
+		const alignments = [
+			{ id: 'left', icon: EditorAlignLeftIcon },
+			{ id: 'center', icon: EditorAlignCenterIcon },
+			{ id: 'right', icon: EditorAlignRightIcon }
+		];
+		const selectedTextAlign = value || 'left';
+
+		return (
+			<div className="block-list__block-toolbar">
+				{ alignments.map( ( { id, icon: Icon } ) =>
+					<button
+						key={ id }
+						className={ classNames( 'block-list__block-control', {
+							'is-selected': selectedTextAlign === id
+						} ) }
+						onClick={ actions[ id ] }
+					>
+						<Icon />
+					</button>
+				) }
+			</div>
+		);
+	}
+}
+
+AlignmentToolbar.propTypes = {
+	actions: wp.element.PropTypes.shape( {
+		left: wp.element.PropTypes.func,
+		center: wp.element.PropTypes.func,
+		right: wp.element.PropTypes.func,
+	} )
+};

controls/dashicons/_style.scss

@@ -0,0 +1,6 @@
+.dashicon {
+	display: inline-block;
+	width: 2rem;
+	height: 2rem;
+	fill: currentColor;
+}

controls/dashicons/create-dashicon.js

@@ -0,0 +1,16 @@
+/* eslint-disable wpcalypso/jsx-classname-namespace */
+
+export default function createDashicon( icon ) {
+	icon = (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			className="dashicon">
+			{ icon }
+		</svg>
+	);
+
+	return () => icon;
+}

controls/dashicons/icons/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+	"rules": {
+		"max-len": 0
+	}
+}

controls/dashicons/icons/add-outline.js

@@ -0,0 +1,11 @@
+export default () => (
+	<svg className="dashicon" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+		viewBox="0 0 24 24" style={ { enableBackground: 'new 0 0 24 24' } }>
+		<g id="add-outline">
+			<path d="M12,4c4.411,0,8,3.589,8,8s-3.589,8-8,8s-8-3.589-8-8S7.589,4,12,4 M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10
+				s10-4.477,10-10S17.523,2,12,2L12,2z M17,11h-4V7h-2v4H7v2h4v4h2v-4h4V11z" />
+		</g>
+		<g id="Layer_1">
+		</g>
+	</svg>
+);

controls/dashicons/icons/arrow-down-alt2.js

@@ -0,0 +1,5 @@
+import createDashicon from '../create-dashicon';
+
+export default createDashicon(
+	<path d="M5 6l5 5 5-5 2 1-7 7-7-7z" />
+);

controls/dashicons/icons/arrow-up-alt2.js

@@ -0,0 +1,5 @@
+import createDashicon from '../create-dashicon';
+
+export default createDashicon(
+	<path d="M15 14l-5-5-5 5-2-1 7-7 7 7z" />
+);

controls/dashicons/icons/cloud-outline.js

@@ -0,0 +1,15 @@
+export default () => (
+	<svg className="dashicon" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+		viewBox="0 0 24 24" style={ { enableBackground: 'new 0 0 24 24' } }>
+		<g id="cloud-outline">
+			<path d="M11.5,5c2.336,0,4.304,1.825,4.481,4.154l0.141,1.861l1.867-0.013l0.093-0.001C19.698,11.044,21,12.373,21,14
+				c0,0.748-0.28,1.452-0.783,2H3.279C3.124,15.744,3,15.411,3,15c0-1.074,0.851-1.953,1.915-1.998
+				c0.059,0.007,0.118,0.012,0.178,0.015l2.659,0.124l-0.621-2.588C7.043,10.186,7,9.842,7,9.5C7,7.019,9.019,5,11.5,5 M11.5,3
+				C7.91,3,5,5.91,5,9.5c0,0.524,0.069,1.031,0.186,1.519C5.123,11.016,5.064,11,5,11c-2.209,0-4,1.791-4,4
+				c0,1.202,0.541,2.267,1.38,3h18.593C22.196,17.089,23,15.643,23,14c0-2.761-2.239-5-5-5c-0.009,0-0.017,0.002-0.025,0.002
+				C17.72,5.646,14.922,3,11.5,3L11.5,3z" />
+		</g>
+		<g id="Layer_1">
+		</g>
+	</svg>
+);

controls/dashicons/icons/editor-aligncenter.js

@@ -0,0 +1,5 @@
+import createDashicon from '../create-dashicon';
+
+export default createDashicon(
+	<path d="M14 5v-2h-8v2h8zM17 9v-2h-14v2h14zM14 13v-2h-8v2h8zM17 17v-2h-14v2h14z" />
+);

controls/dashicons/icons/editor-alignleft.js

@@ -0,0 +1,5 @@
+import createDashicon from '../create-dashicon';
+
+export default createDashicon(
+	<path d="M12 5v-2h-9v2h9zM17 9v-2h-14v2h14zM12 13v-2h-9v2h9zM17 17v-2h-14v2h14z" />
+);

controls/dashicons/icons/editor-alignright.js

@@ -0,0 +1,5 @@
+import createDashicon from '../create-dashicon';
+
+export default createDashicon(
+	<path d="M17 5v-2h-9v2h9zM17 9v-2h-14v2h14zM17 13v-2h-9v2h9zM17 17v-2h-14v2h14z" />
+);

controls/dashicons/icons/editor-bold.js

@@ -0,0 +1,5 @@
+import createDashicon from '../create-dashicon';
+
+export default createDashicon(
+	<path d="M6 4v13h4.54c1.37 0 2.46-0.33 3.26-1 0.8-0.66 1.2-1.58 1.2-2.77 0-0.84-0.17-1.51-0.51-2.010s-0.9-0.85-1.67-1.030v-0.090c0.57-0.1 1.020-0.4 1.36-0.9s0.51-1.13 0.51-1.91c0-1.14-0.39-1.98-1.17-2.5-0.77-0.53-2.020-0.79-3.74-0.79h-3.78zM8.57 9.15v-2.89h1.36c0.73 0 1.27 0.11 1.61 0.32 0.34 0.22 0.51 0.58 0.51 1.070 0 0.54-0.16 0.92-0.47 1.15s-0.82 0.35-1.51 0.35h-1.5zM8.57 11.34h1.6c1.44 0 2.16 0.53 2.16 1.61 0 0.6-0.17 1.050-0.51 1.34s-0.86 0.43-1.57 0.43h-1.68v-3.38z"></path>
+);

controls/dashicons/icons/editor-heading.js

@@ -0,0 +1,2 @@
+// This is a gridicon
+export default () => <svg className="dashicon" width="24" height="24" viewBox="0 0 24 24"><title>Heading</title><rect x="0" fill="none" width="24" height="24"></rect><g><path d="M18 20h-3v-6H9v6H6V5.01h3V11h6V5.01h3V20z"></path></g></svg>;

controls/dashicons/icons/editor-italic.js

@@ -0,0 +1,5 @@
+import createDashicon from '../create-dashicon';
+
+export default createDashicon(
+	<path d="M14.78 6h-2.13l-2.8 9h2.12l-0.62 2h-6.75l0.62-2h2.14l2.8-9h-2.13l0.62-2h6.75z"></path>
+);

controls/dashicons/icons/editor-quote.js

@@ -0,0 +1,5 @@
+import createDashicon from '../create-dashicon';
+
+export default createDashicon(
+	<path d="M9.49 13.22c0-0.74-0.2-1.38-0.61-1.9-0.62-0.78-1.83-0.88-2.53-0.72-0.29-1.65 1.11-3.75 2.92-4.65l-1.39-1.95c-2.73 1.3-5.42 4.28-4.96 8.050 0.29 2.38 1.67 3.95 3.62 3.95 0.85 0 1.56-0.25 2.12-0.75s0.83-1.18 0.83-2.030zM17.54 13.22c0-0.74-0.2-1.38-0.61-1.9-0.63-0.78-1.83-0.88-2.53-0.72-0.29-1.65 1.11-3.75 2.92-4.65l-1.39-1.95c-2.73 1.3-5.41 4.28-4.95 8.050 0.29 2.38 1.66 3.95 3.61 3.95 0.85 0 1.56-0.25 2.12-0.75s0.83-1.18 0.83-2.030z"></path>
+);

controls/dashicons/icons/editor-table.js

@@ -0,0 +1,5 @@
+import createDashicon from '../create-dashicon';
+
+export default createDashicon(
+	<path d="M18 17v-14h-16v14h16zM16 7h-12v-2h12v2zM9 11h-5v-2h5v2zM16 11h-5v-2h5v2zM9 15h-5v-2h5v2zM16 15h-5v-2h5v2z"></path>
+);

controls/dashicons/icons/format-image.js

@@ -0,0 +1,5 @@
+import createDashicon from '../create-dashicon';
+
+export default createDashicon(
+	<path d="M2.25 1h15.5c0.69 0 1.25 0.56 1.25 1.25v15.5c0 0.69-0.56 1.25-1.25 1.25h-15.5c-0.69 0-1.25-0.56-1.25-1.25v-15.5c0-0.69 0.56-1.25 1.25-1.25zM17 17v-14h-14v14h14zM10 6c0-1.1-0.9-2-2-2s-2 0.9-2 2 0.9 2 2 2 2-0.9 2-2zM13 11c0 0 0-6 3-6v10c0 0.55-0.45 1-1 1h-10c-0.55 0-1-0.45-1-1v-7c2 0 3 4 3 4s1-3 3-3 3 2 3 2z" />
+);

controls/dashicons/icons/image-align-center.js

@@ -0,0 +1,2 @@
+// This is a gridicon
+export default () => <svg className="dashicon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 5h18v2H3V5zm0 14h18v-2H3v2zm5-4h8V9H8v6z"></path></g></svg>;

controls/dashicons/icons/image-align-left.js

@@ -0,0 +1,2 @@
+// This is a gridicon
+export default () => <svg className="dashicon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 5h18v2H3V5zm0 14h18v-2H3v2zm0-4h8V9H3v6zm10 0h8v-2h-8v2zm0-4h8V9h-8v2z"></path></g></svg>;

controls/dashicons/icons/image-align-right.js

@@ -0,0 +1,2 @@
+// This is a gridicon
+export default () => <svg className="dashicon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M21 7H3V5h18v2zm0 10H3v2h18v-2zm0-8h-8v6h8V9zm-10 4H3v2h8v-2zm0-4H3v2h8V9z"></path></g></svg>;

controls/dashicons/icons/image-full-width.js

@@ -0,0 +1,6 @@
+// This is a gridicon
+export default () => (
+	<svg className="dashicon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path d="M3 9v6h18V9H3zm15-4H6v2h12V5zM6 19h12v-2H6v2z"></path><path fill="none" d="M0 0h24v24H0z"></path>
+	</svg>
+);

controls/dashicons/icons/video-alt3.js

@@ -0,0 +1,5 @@
+import createDashicon from '../create-dashicon';
+
+export default createDashicon(
+	<path d="M19 15v-10c0-1.1-0.9-2-2-2h-13c-1.1 0-2 0.9-2 2v10c0 1.1 0.9 2 2 2h13c1.1 0 2-0.9 2-2zM8 14v-8l6 4z"></path>
+);

controls/dashicons/index.js

@@ -0,0 +1,21 @@
+export { default as EditorAlignLeftIcon } from './icons/editor-alignleft';
+export { default as EditorAlignCenterIcon } from './icons/editor-aligncenter';
+export { default as EditorAlignRightIcon } from './icons/editor-alignright';
+export { default as EditorHeadingIcon } from './icons/editor-heading';
+export { default as ArrowDownAlt2Icon } from './icons/arrow-down-alt2';
+export { default as ArrowUpAlt2Icon } from './icons/arrow-up-alt2';
+export { default as EditorParagraphIcon } from './icons/editor-paragraph';
+export { default as EditorTableIcon } from './icons/editor-table';
+export { default as EditorQuoteIcon } from './icons/editor-quote';
+export { default as FormatImageIcon } from './icons/format-image';
+export { default as EditorBoldIcon } from './icons/editor-bold';
+export { default as EditorItalicIcon } from './icons/editor-italic';
+export { default as EditorStrikethroughIcon } from './icons/editor-strikethrough';
+export { default as ImageAlignCenterIcon } from './icons/image-align-center';
+export { default as ImageAlignLeftIcon } from './icons/image-align-left';
+export { default as ImageAlignRightIcon } from './icons/image-align-right';
+export { default as ImageFullWidthIcon } from './icons/image-full-width';
+export { default as VideoAlt3Icon } from './icons/video-alt3';
+export { default as AdminLinksIcon } from './icons/admin-links';
+export { default as AddOutlineIcon } from './icons/add-outline';
+export { default as CloudOutline } from './icons/cloud-outline';

controls/styles/toolbar.scss

@@ -0,0 +1,96 @@
+.block-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.block-list__block {
+	outline: 0;
+	position: relative;
+	margin-left: -35px;
+	margin-bottom: 15px;
+
+	> div {
+		position: relative;
+		outline: none;
+		padding: 15px 15px 15px 50px;
+
+		&:before {
+			z-index: -1;
+			content: '';
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 33px;
+			right: 0;
+			border: 2px solid transparent;
+			transition: 0.2s border-color;
+		}
+	}
+
+	&:hover > div:before {
+		border-left-color: #e1e6ea;
+	}
+
+	&.is-selected > div:before {
+		border-color: #e1e6ea;
+	}
+}
+
+.block-list__block-controls {
+	@include animate_fade;
+	position: absolute;
+	left: 35px;
+	top: -34px;
+	z-index: 1;
+}
+
+.block-list__block-controls-group {
+	background: #fff;
+	border: 1px solid #d8dbdf;
+	box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
+	color: #12181e;
+	display: inline-block;
+	margin-left: 14px;
+}
+
+.block-list__block-toolbar {
+	display: block;
+	float: left;
+}
+
+.block-list__block-control {
+	position: relative;
+	background: #fff;
+	border: none;
+	width: 36px;
+	height: 36px;
+	padding: 6px;
+	cursor: pointer;
+	display: block;
+	float: left;
+	color: #6d7882;
+
+	&:focus {
+		outline: 0;
+	}
+
+	&:hover {
+		background: #f8f9f9;
+		outline: 1px solid #6d7882;
+		z-index: 1;
+	}
+
+	&.is-selected {
+		background: #eef0f0;
+		outline: 1px solid #6d7882;
+		color: #3e444c;
+		z-index: 1;
+	}
+
+	.dashicon {
+		display: block;
+		width: 24px;
+		height: 24px;
+	}
+}

controls/tinymce-alignment-toolbar.js

@@ -0,0 +1,15 @@
+import AlignmentToolbar from './alignment-toolbar';
+
+const command = ( name ) => () => {
+	tinymce.execCommand( name );
+};
+
+const TinyMCEAlignmentToolbar = ( props ) => (
+	<AlignmentToolbar { ...props } actions={ {
+		left: command( 'JustifyLeft' ),
+		center: command( 'JustifyCenter' ),
+		right: command( 'JustifyRight' ),
+	} } />
+);
+
+export default TinyMCEAlignmentToolbar;

editor/assets/stylesheets/_animations.scss

@@ -0,0 +1,15 @@
+@mixin animate_fade {
+	animation: animate_fade 0.2s ease-out;
+	animation-fill-mode: forwards;
+}
+
+@keyframes animate_fade {
+	from {
+		opacity: 0;
+		transform: translateY( 4px );
+	}
+	to {
+		opacity: 1;
+		transform: translateY( 0px );
+	}
+}

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/AbsolutePosition.js

@@ -0,0 +1,20 @@
+
+const AbsolutePosition = ( { top, left, extraStyles = {}, children } ) => (
+	<div role="presentation"
+		style={ {
+			position: 'absolute',
+			top,
+			left,
+			...extraStyles
+		} }>
+		{ children }
+	</div>
+);
+
+export default AbsolutePosition;
+
+AbsolutePosition.propTypes = {
+	top: wp.element.PropTypes.number.isRequired,
+	left: wp.element.PropTypes.number.isRequired,
+	extraStyles: wp.element.PropTypes.object
+};