Add new alignments for pullLeft, pullRight, and twoFold with icons.

WordPress · Apr 12, 2018 · c111972 · c111972
1 parent ce24a0d
commit c111972
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 10 deletions.
diff --git a/blocks/block-alignment-toolbar/index.js b/blocks/block-alignment-toolbar/index.js
@@ -25,14 +25,22 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 		icon: 'align-full-width',
 		title: __( 'Full width' ),
 	},
-	card: {
-		icon: 'align-full-width',
-		title: __( 'Card' ),
+	pullLeft: {
+		icon: 'align-pull-left',
+		title: __( 'Pull left' ),
+	},
+	pullRight: {
+		icon: 'align-pull-right',
+		title: __( 'Pull right' ),
+	},
+	twoFold: {
+		icon: 'layout-two-fold',
+		title: __( 'Two Fold' ),
 	},
 };
 
-const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full', 'card' ];
-const WIDE_CONTROLS = [ 'wide', 'full', 'card' ];
+const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'pullLeft', 'pullRight', 'wide', 'full', 'twoFold' ];
+const WIDE_CONTROLS = [ 'pullLeft', 'pullRight', 'wide', 'full', 'twoFold' ];
 
 export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS, wideControlsEnabled = false } ) {
 	function applyOrUnset( align ) {

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
@@ -76,7 +76,7 @@ export const settings = {
 					return tag === 'img' || ( hasImage && tag === 'figure' );
 				},
 				transform( node ) {
-					const matches = /align(left|center|right|card)/.exec( node.className );
+					const matches = /align(left|center|right|pullLeft|pullRight|twoFold)/.exec( node.className );
 					const align = matches ? matches[ 1 ] : undefined;
 					const blockType = getBlockType( 'core/image' );
 					const attributes = getBlockAttributes( blockType, node.outerHTML, { align } );
@@ -150,7 +150,7 @@ export const settings = {
 
 	getEditWrapperProps( attributes ) {
 		const { align, width } = attributes;
-		if ( 'left' === align || 'center' === align || 'right' === align || 'wide' === align || 'full' === align || 'card' === align ) {
+		if ( 'left' === align || 'pullLeft' === align || 'center' === align || 'right' === align || 'pullRight' === align || 'wide' === align || 'full' === align || 'twoFold' === align ) {
 			return { 'data-align': align, 'data-resized': !! width };
 		}
 	},

diff --git a/components/dashicon/index.js b/components/dashicon/index.js
@@ -102,6 +102,12 @@ export default class Dashicon extends wp.element.Component {
 			case 'align-none':
 				path = 'M3 5h14V3H3v2zm10 8V7H3v6h10zM3 17h14v-2H3v2z';
 				break;
+			case 'align-pull-left':
+				path = 'M11 5h6V3h-6v2zm-2 6V3H3v8h6zm2-2h6V7h-6v2zm0 4h6v-2h-6v2zm0 4h6v-2h-6v2z';
+				break;
+			case 'align-pull-right':
+				path = 'M9 3H3v2h6V3zm8 8V3h-6v8h6zM9 7H3v2h6V7zm0 4H3v2h6v-2zm0 4H3v2h6v-2z';
+				break;
 			case 'align-right':
 				path = 'M3 5h14V3H3v2zm0 4h3V7H3v2zm14 4V7H8v6h9zM3 13h3v-2H3v2zm0 4h14v-2H3v2z';
 				break;
@@ -552,6 +558,9 @@ export default class Dashicon extends wp.element.Component {
 			case 'laptop':
 				path = 'M3 3h14c.6 0 1 .4 1 1v10c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V4c0-.6.4-1 1-1zm13 2H4v8h12V5zm-3 1H5v4zm6 11v-1H1v1c0 .6.5 1 1.1 1h15.8c.6 0 1.1-.4 1.1-1z';
 				break;
+			case 'layout-two-fold':
+				path = 'M9 16V4H3v12h6zm2-7h6V7h-6v2zm0 4h6v-2h-6v2z';
+				break;
 			case 'layout':
 				path = 'M2 2h5v11H2V2zm6 0h5v5H8V2zm6 0h4v16h-4V2zM8 8h5v5H8V8zm-6 6h11v4H2v-4z';
 				break;

diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
@@ -74,7 +74,7 @@
 		}
 	}
 
-	&[data-align="card"] {
+	&[data-align="twoFold"] {
 		grid-column: wide-start / middle;
 
 
@@ -84,14 +84,28 @@
 		}
 	}
 
-	&[data-align="left"] {
+	&[data-align="pullLeft"] {
 		grid-column: wide-start / content-start;
 		height: 0;
+		align-self: start;
 	}
 
-	&[data-align="right"] {
+	&[data-align="pullRight"] {
 		grid-column: content-end / wide-end;
 		height: 0;
+		align-self: end;
+	}
+
+	&[data-align="left"] {
+		grid-column: content-start / middle;
+
+		+ div {
+			grid-column: middle / content-end;
+		}
+	}
+
+	&[data-align="right"] {
+		grid-column: content-end / wide-end;
 	}
 
 	&[data-align="wide"] {