Blocks: Refactor blocks to use supports align

blocks/hooks/align.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { assign, includes } from 'lodash';
+import { assign, has, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -24,7 +24,7 @@ import { getBlockSupport, hasBlockSupport } from '../api';
  * @return {Object} Filtered block settings
  */
 export function addAttribute( settings ) {
- if ( hasBlockSupport( settings, 'align' ) ) {
+ if ( hasBlockSupport( settings, 'align' ) && ! has( settings, [ 'attributes', 'align' ] ) ) {
  // Use Lodash's assign to gracefully handle if attributes are undefined
  settings.attributes = assign( settings.attributes, {
  align: {

blocks/library/button/index.js

@@ -12,8 +12,6 @@ import './editor.scss';
 import './style.scss';
 import RichText from '../../rich-text';
 import UrlInput from '../../url-input';
-import BlockControls from '../../block-controls';
-import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import ColorPalette from '../../color-palette';
 import ContrastChecker from '../../contrast-checker';
 import InspectorControls from '../../inspector-controls';
@@ -67,18 +65,12 @@ class ButtonBlock extends Component {
  text,
  url,
  title,
- align,
  color,
  textColor,
  clear,
  } = attributes;
 
  return [
- isSelected && (
- <BlockControls key="controls">
- <BlockAlignmentToolbar value={ align } onChange={ this.updateAlignment } />
- </BlockControls>
- ),
  <span key="button" className={ className } title={ title } ref={ this.bindRef }>
  <RichText
  tagName="span"
@@ -182,13 +174,13 @@ export const settings = {
 
  attributes: blockAttributes,
 
- getEditWrapperProps( attributes ) {
- const { align, clear } = attributes;
- const props = {};
+ supports: {
+ align: true,
+ wideAlign: false,
+ },
 
- if ( 'left' === align || 'right' === align || 'center' === align ) {
- props[ 'data-align' ] = align;
- }
+ getEditWrapperProps( { clear } ) {
+ const props = {};
 
  if ( clear ) {
  props[ 'data-clear' ] = 'true';

blocks/library/categories/block.js

@@ -12,8 +12,6 @@ import { times, unescape } from 'lodash';
 import './editor.scss';
 import './style.scss';
 import InspectorControls from '../../inspector-controls';
-import BlockControls from '../../block-controls';
-import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 
 class CategoriesBlock extends Component {
  constructor() {
@@ -142,11 +140,11 @@ class CategoriesBlock extends Component {
  }
 
  render() {
- const { attributes, focus, setAttributes } = this.props;
- const { align, displayAsDropdown, showHierarchy, showPostCounts } = attributes;
+ const { attributes, isSelected } = this.props;
+ const { displayAsDropdown, showHierarchy, showPostCounts } = attributes;
  const categories = this.getCategories();
 
- const inspectorControls = focus && (
+ const inspectorControls = isSelected && (
  <InspectorControls key="inspector">
  <h3>{ __( 'Categories Settings' ) }</h3>
  <ToggleControl
@@ -182,17 +180,6 @@ class CategoriesBlock extends Component {
 
  return [
  inspectorControls,
- focus && (
- <BlockControls key="controls">
- <BlockAlignmentToolbar
- value={ align }
- onChange={ ( nextAlign ) => {
- setAttributes( { align: nextAlign } );
- } }
- controls={ [ 'left', 'center', 'right', 'full' ] }
- />
- </BlockControls>
- ),
  <div key="categories" className={ this.props.className }>
  {
  displayAsDropdown ?

blocks/library/categories/index.js

@@ -34,22 +34,13 @@ export const settings = {
  type: 'boolean',
  default: false,
  },
- align: {
- type: 'string',
- },
  },
 
  supports: {
+ align: [ 'left', 'center', 'right', 'full' ],
  html: false,
  },
 
- getEditWrapperProps( attributes ) {
- const { align } = attributes;
- if ( 'left' === align || 'right' === align || 'full' === align ) {
- return { 'data-align': align };
- }
- },
-
  edit: CategoriesBlock,
 
  save() {

blocks/library/columns/index.js

@@ -16,8 +16,6 @@ import { RangeControl } from '@wordpress/components';
  */
 import './style.scss';
 import InspectorControls from '../../inspector-controls';
-import BlockControls from '../../block-controls';
-import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import InnerBlocks from '../../inner-blocks';
 
 /**
@@ -54,34 +52,20 @@ export const settings = {
  type: 'number',
  default: 2,
  },
- align: {
- type: 'string',
- },
  },
 
- description: __( 'A multi-column layout of content.' ),
-
- getEditWrapperProps( attributes ) {
- const { align } = attributes;
-
- return { 'data-align': align };
+ supports: {
+ align: [ 'wide', 'full' ],
  },
 
- edit( { attributes, setAttributes, className, focus } ) {
- const { align, columns } = attributes;
+ description: __( 'A multi-column layout of content.' ),
+
+ edit( { attributes, setAttributes, className, isSelected } ) {
+ const { columns } = attributes;
  const classes = classnames( className, `has-${ columns }-columns` );
 
  return [
- ...focus ? [
- <BlockControls key="controls">
- <BlockAlignmentToolbar
- controls={ [ 'wide', 'full' ] }
- value={ align }
- onChange={ ( nextAlign ) => {
- setAttributes( { align: nextAlign } );
- } }
- />
- </BlockControls>,
+ isSelected ? [
  <InspectorControls key="inspector">
  <RangeControl
  label={ __( 'Columns' ) }

blocks/library/cover-image/index.js

@@ -21,11 +21,8 @@ import AlignmentToolbar from '../../alignment-toolbar';
 import MediaUpload from '../../media-upload';
 import ImagePlaceHolder from '../../image-placeholder';
 import BlockControls from '../../block-controls';
-import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import InspectorControls from '../../inspector-controls';
 
-const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
-
 export const name = 'core/cover-image';
 
 export const settings = {
@@ -46,9 +43,6 @@ export const settings = {
  url: {
  type: 'string',
  },
- align: {
- type: 'string',
- },
  contentAlign: {
  type: 'string',
  default: 'center',
@@ -66,6 +60,10 @@ export const settings = {
  },
  },
 
+ supports: {
+ align: true,
+ },
+
  transforms: {
  from: [
  {
@@ -87,16 +85,8 @@ export const settings = {
  ],
  },
 
- getEditWrapperProps( attributes ) {
- const { align } = attributes;
- if ( -1 !== validAlignments.indexOf( align ) ) {
- return { 'data-align': align };
- }
- },
-
  edit( { attributes, setAttributes, isSelected, className } ) {
- const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
- const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
+ const { url, title, contentAlign, id, hasParallax, dimRatio } = attributes;
  const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
  const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
  const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
@@ -124,11 +114,6 @@ export const settings = {
  );
  const controls = isSelected && [
  <BlockControls key="controls">
- <BlockAlignmentToolbar
- value={ align }
- onChange={ updateAlignment }
- />
-
  { alignmentToolbar }
  <Toolbar>
  <MediaUpload

blocks/library/embed/index.js

@@ -19,8 +19,6 @@ import './style.scss';
 import './editor.scss';
 import { createBlock } from '../../api';
 import RichText from '../../rich-text';
-import BlockControls from '../../block-controls';
-import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 
 // These embeds do not work in sandboxes
 const HOSTS_NO_PREVIEWS = [ 'facebook.com' ];
@@ -47,20 +45,14 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
  selector: 'figcaption',
  default: [],
  },
- align: {
- type: 'string',
- },
  },
 
- transforms,
-
- getEditWrapperProps( attributes ) {
- const { align } = attributes;
- if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) {
- return { 'data-align': align };
- }
+ supports: {
+ align: true,
  },
 
+ transforms,
+
  edit: class extends Component {
  constructor() {
  super( ...arguments );
@@ -130,34 +122,22 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
 
  render() {
  const { html, type, error, fetching } = this.state;
- const { align, url, caption } = this.props.attributes;
+ const { url, caption } = this.props.attributes;
  const { setAttributes, isSelected } = this.props;
- const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
-
- const controls = isSelected && (
- <BlockControls key="controls">
- <BlockAlignmentToolbar
- value={ align }
- onChange={ updateAlignment }
- />
- </BlockControls>
- );
 
  if ( fetching ) {
- return [
- controls,
+ return (
  <div key="loading" className="wp-block-embed is-loading">
  <Spinner />
  <p>{ __( 'Embedding…' ) }</p>
- </div>,
- ];
+ </div>
+ );
  }
 
  if ( ! html ) {
  const label = sprintf( __( '%s URL' ), title );
 
- return [
- controls,
+ return (
  <Placeholder key="placeholder" icon={ icon } label={ label } className="wp-block-embed">
  <form onSubmit={ this.doServerSideRender }>
  <input
@@ -174,8 +154,8 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
  </Button>
  { error && <p className="components-placeholder__error">{ __( 'Sorry, we could not embed that content.' ) }</p> }
  </form>
- </Placeholder>,
- ];
+ </Placeholder>
+ );
  }
 
  const parsedUrl = parse( url );
@@ -186,8 +166,7 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
  typeClassName += ' is-video';
  }
 
- return [
- controls,
+ return (
  <figure key="embed" className={ typeClassName }>
  { ( cannotPreview ) ? (
  <Placeholder icon={ icon } label={ __( 'Embed URL' ) }>
@@ -213,8 +192,8 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
  inlineToolbar
  />
  ) : null }
- </figure>,
- ];
+ </figure>
+ );
  }
  },
 

blocks/library/gallery/block.js

@@ -25,7 +25,6 @@ import MediaUpload from '../../media-upload';
 import ImagePlaceHolder from '../../image-placeholder';
 import InspectorControls from '../../inspector-controls';
 import BlockControls from '../../block-controls';
-import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import GalleryImage from './gallery-image';
 
 const MAX_COLUMNS = 8;
@@ -47,7 +46,6 @@ class GalleryBlock extends Component {
  this.onSelectImages = this.onSelectImages.bind( this );
  this.setLinkTo = this.setLinkTo.bind( this );
  this.setColumnsNumber = this.setColumnsNumber.bind( this );
- this.updateAlignment = this.updateAlignment.bind( this );
  this.toggleImageCrop = this.toggleImageCrop.bind( this );
  this.onRemoveImage = this.onRemoveImage.bind( this );
  this.setImageAttributes = this.setImageAttributes.bind( this );
@@ -96,10 +94,6 @@ class GalleryBlock extends Component {
  this.props.setAttributes( { columns: value } );
  }
 
- updateAlignment( nextAlign ) {
- this.props.setAttributes( { align: nextAlign } );
- }
-
  toggleImageCrop() {
  this.props.setAttributes( { imageCrop: ! this.props.attributes.imageCrop } );
  }
@@ -155,10 +149,6 @@ class GalleryBlock extends Component {
  const controls = (
  isSelected && (
  <BlockControls key="controls">
- <BlockAlignmentToolbar
- value={ align }
- onChange={ this.updateAlignment }
- />
  { !! images.length && (
  <Toolbar>
  <MediaUpload