Make the vertical align button work, add more styling options for too…

…lbar buttons
WordPress · Aug 6, 2019 · bc94b51 · bc94b51
1 parent ad467de
commit bc94b51
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 24 deletions.
diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js
@@ -130,8 +130,9 @@ class MediaTextEdit extends Component {
 		const containerStyles = {
 			...styles[ 'wp-block-media-text' ],
 			...styles[ `is-vertically-aligned-${ verticalAlignment }` ],
-			...( isStackedOnMobile ? styles[ 'is-stacked-on-mobile' ] : {} ),
 			...( mediaPosition === 'right' ? styles[ 'has-media-on-the-right' ] : {} ),
+			...( isStackedOnMobile ? styles[ 'is-stacked-on-mobile' ] : {} ),
+			...( isStackedOnMobile && mediaPosition === 'right' ? styles[ 'is-stacked-on-mobile.has-media-on-the-right' ] : {} ),
 			backgroundColor: backgroundColor.color,
 		};
 		const innerBlockWidth = 100 - temporaryMediaWidth;
@@ -162,6 +163,7 @@ class MediaTextEdit extends Component {
 					<BlockVerticalAlignmentToolbar
 						onChange={ onVerticalAlignmentChange }
 						value={ verticalAlignment }
+						isCollapsed={ false }
 					/>
 				</BlockControls>
 				<View style={ containerStyles }>

diff --git a/packages/block-library/src/media-text/style.native.scss b/packages/block-library/src/media-text/style.native.scss
@@ -2,9 +2,17 @@
 	display: flex;
 	align-items: flex-start;
 	flex-direction: row;
+}
+
+.has-media-on-the-right {
+	flex-direction: row-reverse;
+}
+
+.is-stacked-on-mobile {
+	flex-direction: column;
 
 	&.has-media-on-the-right {
-		flex-direction: row-reverse;
+		flex-direction: column-reverse;
 	}
 }
 
@@ -19,20 +27,3 @@
 .is-vertically-aligned-bottom {
 	align-items: flex-end;
 }
-
-/*
-* Here we here not able to use a mobile first CSS approach.
-* Custom widths are set using inline styles, and on mobile,
-* we need 100% width, so we use important to overwrite the inline style.
-* If the style were set on mobile first, on desktop styles,
-* we would have no way of setting the style again to the inline style.
-*/
-@media (max-width: #{ ($break-small) }) {
-	.wp-block-media-text.is-stacked-on-mobile {
-		flex-direction: column;
-	}
-
-	.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right {
-		flex-direction: column-reverse;
-	}
-}
diff --git a/packages/components/src/icon-button/index.js b/packages/components/src/icon-button/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isArray, isString } from 'lodash';
+import { isArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { forwardRef } from '@wordpress/element';
  */
 import Tooltip from '../tooltip';
 import Button from '../button';
-import Dashicon from '../dashicon';
+import Icon from '../icon';
 
 function IconButton( props, ref ) {
 	const {
@@ -56,7 +56,7 @@ function IconButton( props, ref ) {
 			className={ classes }
 			ref={ ref }
 		>
-			{ isString( icon ) ? <Dashicon icon={ icon } ariaPressed={ ariaPressed } /> : icon }
+			<Icon icon={ icon } ariaPressed={ ariaPressed } className={ classes } />
 			{ children }
 		</Button>
 	);

diff --git a/packages/components/src/icon/index.js b/packages/components/src/icon/index.js
@@ -17,6 +17,10 @@ function Icon( { icon = null, size, ...additionalProps } ) {
 		return <Dashicon icon={ icon } size={ iconSize } { ...additionalProps } />;
 	}
 
+	if ( Dashicon === icon.type ) {
+		return icon;
+	}
+
 	// Any other icons should be 24x24 by default
 	iconSize = size || 24;
 

diff --git a/packages/components/src/primitives/svg/style.native.scss b/packages/components/src/primitives/svg/style.native.scss
@@ -1,9 +1,11 @@
-.dashicon {
+.dashicon,
+.components-toolbar__control {
 	color: #7b9ab1;
 	fill: currentColor;
 }
 
-.dashicon-active {
+.dashicon-active,
+.is-active {
 	color: #fff;
 	fill: currentColor;
 }