You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.3 KiB
137 lines
3.3 KiB
import classnames from 'classnames';
|
|
import { assign } from 'lodash';
|
|
|
|
const { addFilter } = wp.hooks;
|
|
const { __ } = wp.i18n;
|
|
const { Fragment } = wp.element;
|
|
const { InspectorControls, InspectorAdvancedControls } = wp.editor
|
|
const { createHigherOrderComponent } = wp.compose;
|
|
const { SelectControl, ToggleControl } = wp.components
|
|
|
|
const spacingOptions = [
|
|
{
|
|
label: __('Normal'),
|
|
value: '',
|
|
},
|
|
{
|
|
label: __('Pequeno'),
|
|
value: 'sm',
|
|
},
|
|
{
|
|
label: __('Médio'),
|
|
value: 'md',
|
|
},
|
|
{
|
|
label: __('Grande'),
|
|
value: 'lg',
|
|
},
|
|
];
|
|
|
|
/**
|
|
* Add spacing control attribute to block.
|
|
*
|
|
* @param {object} settings Current block settings.
|
|
* @param {string} name Name of block.
|
|
*
|
|
* @returns {object} Modified block settings.
|
|
*/
|
|
addFilter('blocks.registerBlockType', 'reuna/columns/attribute/spacing', function(settings, name) {
|
|
if (name !== 'core/columns') {
|
|
return settings;
|
|
}
|
|
|
|
settings.attributes = assign(settings.attributes, {
|
|
invertOnMobile: {
|
|
type: 'boolean',
|
|
default: false,
|
|
},
|
|
keepOnMobile: {
|
|
type: 'boolean',
|
|
default: false,
|
|
},
|
|
spacing: {
|
|
type: 'string',
|
|
default: spacingOptions[0].value,
|
|
},
|
|
});
|
|
|
|
return settings;
|
|
});
|
|
|
|
addFilter('editor.BlockEdit', 'reuna-blocos/custom-column-controls', createHigherOrderComponent(function(BlockEdit) {
|
|
return function(props) {
|
|
if (props.name !== 'core/columns') {
|
|
return (
|
|
<BlockEdit {...props} />
|
|
);
|
|
}
|
|
|
|
const { invertOnMobile, keepOnMobile, spacing } = props.attributes;
|
|
|
|
return (
|
|
<Fragment>
|
|
|
|
<BlockEdit {...props} />
|
|
|
|
<InspectorControls>
|
|
<PanelBody
|
|
title={ __('Responsividade') }
|
|
initialOpen={ false }
|
|
>
|
|
<ToggleControl
|
|
label={ __('Inverter ordem das colunas em celulares') }
|
|
checked={ invertOnMobile }
|
|
onChange={ () => setAttributes({ invertOnMobile: ! invertOnMobile }) }
|
|
/>
|
|
<ToggleControl
|
|
label={ __('Manter colunas em celulares') }
|
|
checked={ keepOnMobile }
|
|
onChange={ () => setAttributes({ keepOnMobile: ! keepOnMobile }) }
|
|
/>
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
|
|
<InspectorAdvancedControls>
|
|
<SelectControl
|
|
label={ __('Espaçamento entre colunas') }
|
|
value={ spacing }
|
|
options={ spacingOptions }
|
|
onChange={ () => setAttributes({ spacing: spacing }) }
|
|
/>
|
|
</InspectorAdvancedControls>
|
|
|
|
</Fragment>
|
|
);
|
|
};
|
|
}, 'customColumnControls'));
|
|
|
|
/**
|
|
* Add custom element class in save element.
|
|
*
|
|
* @param {Object} extraProps Block element.
|
|
* @param {Object} blockType Blocks object.
|
|
* @param {Object} attributes Blocks attributes.
|
|
*
|
|
* @return {Object} extraProps Modified block element.
|
|
*/
|
|
addFilter('blocks.getSaveContent.extraProps', 'reuna-blocos/add-custom-columns-classes', function(extraProps, blockType, attributes) {
|
|
if (blockType.name !== 'core/columns') {
|
|
return extraProps;
|
|
}
|
|
|
|
const { invertOnMobile, keepOnMobile, spacing } = attributes;
|
|
|
|
if (invertOnMobile) {
|
|
extraProps.className = classnames(extraProps.className, 'invert-on-mobile');
|
|
}
|
|
|
|
if (keepOnMobile) {
|
|
extraProps.className = classnames(extraProps.className, 'keep-on-mobile');
|
|
}
|
|
|
|
if (spacing) {
|
|
extraProps.className = classnames(extraProps.className, `has-spacing-${spacing}`);
|
|
}
|
|
|
|
return extraProps;
|
|
});
|