Add text alignment to block controls

includes/js/block.js

@@ -26,8 +26,11 @@
 				html: false
 			},
 
-			getEditWrapperProps ( { blockAlignment } ) {
-				return { 'data-align': blockAlignment };
+			getEditWrapperProps ( { blockAlignment, alignment } ) {
+				return {
+					'data-align': blockAlignment,
+					'alignment': alignment
+				};
 			},
 
 			edit: props => {
@@ -37,7 +40,8 @@
 				} = props,
 					Fragment = wp.element.Fragment,
 					BlockControls = wp.blockEditor.BlockControls,
-					BlockAlignmentToolbar = wp.blockEditor.BlockAlignmentToolbar;
+					BlockAlignmentToolbar = wp.blockEditor.BlockAlignmentToolbar,
+					AlignmentToolbar = wp.blockEditor.AlignmentToolbar;
 				let render = DFIGBlockObject.el( ServerSideRender, {
 					block: params.block,
 					attributes: attributes
@@ -58,6 +62,13 @@
 								onChange: ( value ) => {
 									setAttributes( { blockAlignment: value } );
 								},
+							} ),
+							DFIGBlockObject.el( AlignmentToolbar, {
+								value: attributes.alignment,
+								controls: [ 'left', 'right', 'center' ],
+								onChange: ( value ) => {
+									setAttributes( { alignment: value } );
+								},
 							} )
 						),
 					),
@@ -111,7 +122,7 @@
 		const controls = [];
 		Object.keys( fields ).forEach( function ( key, index ) {
 			if ( fields.hasOwnProperty( key ) ) {
-				var skipped = [ 'blockAlignment', 'className' ];
+				var skipped = [ 'blockAlignment', 'className', 'alignment' ];
 				if ( -1 !== skipped.indexOf( key ) ) {
 					return;
 				}

includes/js/block.min.js

@@ -1 +1 @@
-!function(e,t,n){"use strict";const o={el:e.element.createElement};function r(e,r,a){if(o.params.prefix+"/term"!==a.name)return;!function(e,r,a){const{attributes:c,setAttributes:s}=a;t.post(o.params.ajax_url,e,function(e){if(n!==e.success&&!1===e.success)return!1;const a=t.parseJSON(e);!function(e,n,r){const a=t("."+o.params.prefix+"-"+n+" select"),c=r[n]||"";a.empty(),function(e,n,o){t.each(e,function(e,r){const a=t("<option />").val(e).text(r),c=e?"append":"prepend";n.val(o),n[c](a)})}(e,a,c)}(a,"term",c),r&&s({term:""})})}(function(e,t,n){const r={action:o.params.prefix+"_block",security:o.params.security},{attributes:a}=n;r.taxonomy="taxonomy"===e?t:a.taxonomy;return r}(e,r,a),e,a)}o.init=function(t){const n=e.blocks.registerBlockType,a=e.components.ServerSideRender,c=e.blockEditor.InspectorControls;n(t.block,{title:t.title,description:t.description,keywords:t.keywords,icon:t.icon,category:t.category,supports:{html:!1},getEditWrapperProps:({blockAlignment:e})=>({"data-align":e}),edit:n=>{const{attributes:s,setAttributes:l}=n,i=e.element.Fragment,p=e.blockEditor.BlockControls,u=e.blockEditor.BlockAlignmentToolbar;let m=o.el(a,{block:t.block,attributes:s});return t.placeholder&&!s[t.required]&&(m=o.el("div",{className:o.params.prefix+"-placeholder"},t.placeholder)),[m,o.el(i,null,o.el(p,null,o.el(u,{value:s.blockAlignment,controls:["wide","full"],onChange:e=>{l({blockAlignment:e})}}))),o.el(c,{},function(t,n){const a=[],c=e.components.PanelBody;return Object.keys(n.panels).forEach(function(s,l){if(n.panels.hasOwnProperty(s)){const i=n.panels[s];a[l]=o.el(c,{title:i.title,initialOpen:i.initialOpen,className:o.params.prefix+"-panel-"+s},function(t,n){const a=[];return Object.keys(n).forEach(function(c,s){if(n.hasOwnProperty(c)){if(-1!==["blockAlignment","className"].indexOf(c))return;const l=n[c],i=function(t,n){const{TextControl:o,SelectControl:r,CheckboxControl:a,TextareaControl:c}=e.components,s=o;return"select"===t?r:"checkbox"===t?a:"textarea"===t?c:s}(l.method,l.type);a[s]=o.el(i,function(e,t,n){const{attributes:a,setAttributes:c}=n,s={label:t.label,value:a[e],className:o.params.prefix+"-"+e,onChange:t=>{"taxonomy"===e&&r(e,t,n),c({[e]:t})}};return"select"===t.method?s.options=t.options:"checkbox"===t.method&&(s.checked=a[e]),s}(c,l,t))}}),a}(t,i.attributes))}}),a}(n,t),r(!1,!1,n))]},save:e=>null})},o.params="undefined"==typeof DisplayFeaturedImageBlock?"":DisplayFeaturedImageBlock,void 0!==o.params&&Object.keys(o.params.blocks).forEach(function(e,t){o.params.blocks.hasOwnProperty(e)&&o.init(o.params.blocks[e])})}(wp,jQuery);
+!function(e,t,n){"use strict";const o={el:e.element.createElement};function r(e,r,l){if(o.params.prefix+"/term"!==l.name)return;!function(e,r,l){const{attributes:a,setAttributes:c}=l;t.post(o.params.ajax_url,e,function(e){if(n!==e.success&&!1===e.success)return!1;const l=t.parseJSON(e);!function(e,n,r){const l=t("."+o.params.prefix+"-"+n+" select"),a=r[n]||"";l.empty(),function(e,n,o){t.each(e,function(e,r){const l=t("<option />").val(e).text(r),a=e?"append":"prepend";n.val(o),n[a](l)})}(e,l,a)}(l,"term",a),r&&c({term:""})})}(function(e,t,n){const r={action:o.params.prefix+"_block",security:o.params.security},{attributes:l}=n;r.taxonomy="taxonomy"===e?t:l.taxonomy;return r}(e,r,l),e,l)}o.init=function(t){const n=e.blocks.registerBlockType,l=e.components.ServerSideRender,a=e.blockEditor.InspectorControls;n(t.block,{title:t.title,description:t.description,keywords:t.keywords,icon:t.icon,category:t.category,supports:{html:!1},getEditWrapperProps:({blockAlignment:e,alignment:t})=>({"data-align":e,alignment:t}),edit:n=>{const{attributes:c,setAttributes:s}=n,i=e.element.Fragment,p=e.blockEditor.BlockControls,u=e.blockEditor.BlockAlignmentToolbar,m=e.blockEditor.AlignmentToolbar;let b=o.el(l,{block:t.block,attributes:c});return t.placeholder&&!c[t.required]&&(b=o.el("div",{className:o.params.prefix+"-placeholder"},t.placeholder)),[b,o.el(i,null,o.el(p,null,o.el(u,{value:c.blockAlignment,controls:["wide","full"],onChange:e=>{s({blockAlignment:e})}}),o.el(m,{value:c.alignment,controls:["left","right","center"],onChange:e=>{s({alignment:e})}}))),o.el(a,{},function(t,n){const l=[],a=e.components.PanelBody;return Object.keys(n.panels).forEach(function(c,s){if(n.panels.hasOwnProperty(c)){const i=n.panels[c];l[s]=o.el(a,{title:i.title,initialOpen:i.initialOpen,className:o.params.prefix+"-panel-"+c},function(t,n){const l=[];return Object.keys(n).forEach(function(a,c){if(n.hasOwnProperty(a)){if(-1!==["blockAlignment","className","alignment"].indexOf(a))return;const s=n[a],i=function(t,n){const{TextControl:o,SelectControl:r,CheckboxControl:l,TextareaControl:a}=e.components,c=o;return"select"===t?r:"checkbox"===t?l:"textarea"===t?a:c}(s.method,s.type);l[c]=o.el(i,function(e,t,n){const{attributes:l,setAttributes:a}=n,c={label:t.label,value:l[e],className:o.params.prefix+"-"+e,onChange:t=>{"taxonomy"===e&&r(e,t,n),a({[e]:t})}};return"select"===t.method?c.options=t.options:"checkbox"===t.method&&(c.checked=l[e]),c}(a,s,t))}}),l}(t,i.attributes))}}),l}(n,t),r(!1,!1,n))]},save:e=>null})},o.params="undefined"==typeof DisplayFeaturedImageBlock?"":DisplayFeaturedImageBlock,void 0!==o.params&&Object.keys(o.params.blocks).forEach(function(e,t){o.params.blocks.hasOwnProperty(e)&&o.init(o.params.blocks[e])})}(wp,jQuery);

includes/widgets/class-displayfeaturedimagegenesis-widgets-blocks-output.php

@@ -116,6 +116,9 @@ class DisplayFeaturedImageGenesisWidgetsBlocksOutput {
 		if ( ! empty( $atts['blockAlignment'] ) ) {
 			$classes[] = 'align' . $atts['blockAlignment'];
 		}
+		if ( ! empty( $atts['alignment'] ) ) {
+			$classes[] = 'has-text-align-' . $atts['alignment'];
+		}
 
 		return implode( ' ', $classes );
 	}

includes/widgets/fields/blocks-attributes.php

@@ -5,6 +5,10 @@ return array(
 		'type'    => 'string',
 		'default' => '',
 	),
+	'alignment'      => array(
+		'type'    => 'string',
+		'default' => '',
+	),
 	'className'      => array(
 		'type'    => 'string',
 		'default' => '',