canvas / components / basic-elements / block-cover / block.jsx

block.jsx in Canvas 2.4.9, at components/basic-elements/block-cover/block.jsx

149 lines 2.9 KB

Raw Download Zip

1	/**
2	* Internal dependencies
3	*/
4	import {
5	replaceClass,
6	getActiveClass,
7	} from '../../../gutenberg/utils/classes-replacer';
8
9	/**
10	* WordPress dependencies
11	*/
12	const {
13	__,
14	} = wp.i18n;
15
16	const {
17	Component,
18	Fragment,
19	} = wp.element;
20
21	const {
22	PanelBody,
23	SelectControl,
24	} = wp.components;
25
26	const {
27	InspectorControls,
28	} = wp.blockEditor;
29
30	const {
31	addFilter,
32	} = wp.hooks;
33
34	const {
35	createHigherOrderComponent,
36	} = wp.compose;
37
38	const {
39	withDispatch,
40	} = wp.data;
41
42
43	/**
44	* Override the default edit UI to include a new block inspector control for
45	* assigning the custom styles if needed.
46	*
47	* @param {function\|Component} BlockEdit Original component.
48	*
49	* @return {string} Wrapped component.
50	*/
51	const coverWithCanvasVertical = createHigherOrderComponent( ( BlockEdit ) => {
52	class NewEdit extends Component {
53	constructor() {
54	super( ...arguments );
55
56	this.getVerticalAlign = this.getVerticalAlign.bind( this );
57	this.updateVerticalAlign = this.updateVerticalAlign.bind( this );
58	}
59
60	/**
61	* Get vertical style from classname on the block.
62	*
63	* @return {String}
64	*/
65	getVerticalAlign() {
66	const {
67	attributes,
68	} = this.props;
69
70	return getActiveClass( attributes.className, 'is-cnvs-vert-align' );
71	}
72
73	/**
74	* Update vertical classname on the block.
75	*
76	* @param {String} verticalName name of vertical style
77	* @memberof NewEdit
78	*/
79	updateVerticalAlign( verticalName ) {
80	const {
81	attributes,
82	onChangeClassName,
83	} = this.props;
84
85	const updatedClassName = replaceClass( attributes.className, 'is-cnvs-vert-align', verticalName );
86
87	onChangeClassName( updatedClassName );
88	}
89
90	render() {
91	if ( 'core/cover' !== this.props.name ) {
92	return <BlockEdit { ...this.props } />;
93	}
94
95	const {
96	attributes,
97	} = this.props;
98
99	let verticalAlign = this.getVerticalAlign();
100
101	if ( verticalAlign ) {
102	verticalAlign = verticalAlign.replace( /^is-cnvs-vert-align-/, '' );
103	}
104
105	return (
106	<Fragment>
107	<BlockEdit { ...this.props } />
108	<InspectorControls>
109	<PanelBody
110	title={ __( 'Vertical Align' ) }
111	>
112	<SelectControl
113	value={ verticalAlign }
114	options={ [
115	{
116	label: __( 'Top' ),
117	value: '',
118	}, {
119	label: __( 'Middle' ),
120	value: 'middle',
121	}, {
122	label: __( 'Bottom' ),
123	value: 'bottom',
124	},
125	] }
126	onChange={ ( val ) => {
127	this.updateVerticalAlign( val );
128	} }
129	/>
130	</PanelBody>
131	</InspectorControls>
132	</Fragment>
133	);;
134	}
135	}
136
137	return withDispatch( ( dispatch, { clientId } ) => {
138	return {
139	onChangeClassName( newClassName ) {
140	dispatch( 'core/block-editor' ).updateBlockAttributes( clientId, {
141	className: newClassName,
142	} );
143	},
144	};
145	} )( NewEdit );
146	}, 'coverWithCanvasVertical' );
147
148	addFilter( 'editor.BlockEdit', 'canvas/cover/vertical', coverWithCanvasVertical );
149