Add alignment buttons for embed (#840)

WordPress · May 19, 2017 · 3bab12f · 3bab12f
1 parent 7492855
commit 3bab12f
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 1 deletion.
diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
@@ -13,6 +13,20 @@ import Editable from '../../editable';
 
 const { attr, children } = query;
 
+/**
+ * Returns an attribute setter with behavior that if the target value is
+ * already the assigned attribute value, it will be set to undefined.
+ *
+ * @param  {string}   align Alignment value
+ * @return {Function}       Attribute setter
+ */
+function toggleAlignment( align ) {
+	return ( attributes, setAttributes ) => {
+		const nextAlign = attributes.align === align ? undefined : align;
+		setAttributes( { align: nextAlign } );
+	};
+}
+
 registerBlock( 'core/embed', {
 	title: wp.i18n.__( 'Embed' ),
 
@@ -26,6 +40,40 @@ registerBlock( 'core/embed', {
 		caption: children( 'figcaption' ),
 	},
 
+	controls: [
+		{
+			icon: 'align-left',
+			title: wp.i18n.__( 'Align left' ),
+			isActive: ( { align } ) => 'left' === align,
+			onClick: toggleAlignment( 'left' ),
+		},
+		{
+			icon: 'align-center',
+			title: wp.i18n.__( 'Align center' ),
+			isActive: ( { align } ) => ! align || 'center' === align,
+			onClick: toggleAlignment( 'center' ),
+		},
+		{
+			icon: 'align-right',
+			title: wp.i18n.__( 'Align right' ),
+			isActive: ( { align } ) => 'right' === align,
+			onClick: toggleAlignment( 'right' ),
+		},
+		{
+			icon: 'align-full-width',
+			title: wp.i18n.__( 'Wide width' ),
+			isActive: ( { align } ) => 'wide' === align,
+			onClick: toggleAlignment( 'wide' ),
+		},
+	],
+
+	getEditWrapperProps( attributes ) {
+		const { align } = attributes;
+		if ( 'left' === align || 'right' === align || 'wide' === align ) {
+			return { 'data-align': align };
+		}
+	},
+
 	edit( { attributes, setAttributes, focus, setFocus } ) {
 		const { url, title, caption } = attributes;
 

diff --git a/blocks/library/embed/style.scss b/blocks/library/embed/style.scss
@@ -16,3 +16,45 @@
 	width: 100%;
 	height: 100%;
 }
+
+div[data-type="core/embed"] {
+	&[data-align="left"],
+	&[data-align="right"] {
+		// Without z-index, won't be clickable as "above" adjacent content
+		z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' );
+		width: 370px;
+	}
+
+	&[data-align="left"] {
+		float: left;
+		margin-right: $block-padding;
+	}
+
+	&[data-align="right"] {
+		float: right;
+		margin-left: $block-padding;
+	}
+
+	&[data-align="wide"] {
+		padding-left: 0;
+		padding-right: 0;
+		margin-right: -#{ $block-padding + $block-mover-margin };	/* Compensate for .editor-visual-editor centering padding */
+
+		&:before {
+			left: 0;
+			border-left-width: 0;
+			border-right-width: 0;
+		}
+
+		.editor-block-mover {
+			display: none;
+		}
+
+		.editor-visual-editor__block-controls {
+			max-width: #{ $visual-editor-max-width - $block-padding - ( $block-padding * 2 + $block-mover-margin ) };
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+	}
+}
diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
@@ -50,7 +50,7 @@ registerBlock( 'core/image', {
 		{
 			icon: 'align-center',
 			title: wp.i18n.__( 'Align center' ),
-			isActive: ( { align } ) => 'center' === align,
+			isActive: ( { align } ) => ! align || 'center' === align,
 			onClick: toggleAlignment( 'center' ),
 		},
 		{