CHIEFSOFT\ameye
451 lines
12 KiB
React
451 lines
12 KiB
React
/**
|
|
* Internal dependencies
|
|
*/
|
|
import isCoreBlockWithExt from '../../utils/is-core-block-with-ext';
|
|
import dynamicStylesBYkey from '../../utils/dynamic-styles-by-key';
|
|
import ComponentColors from '../../components/colors';
|
|
import ComponentSpacings from '../../components/spacings';
|
|
import ComponentRadius from '../../components/radius';
|
|
import ComponentSchemeWrapper from '../../components/scheme-wrapper';
|
|
import ComponentResponsiveWrapper from '../../components/responsive-wrapper';
|
|
|
|
const {
|
|
canvasSchemes,
|
|
canvasBreakpoints,
|
|
} = window;
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
const { __ } = wp.i18n;
|
|
|
|
const {
|
|
addFilter,
|
|
} = wp.hooks;
|
|
|
|
const {
|
|
Component,
|
|
Fragment,
|
|
} = wp.element;
|
|
|
|
const {
|
|
createHigherOrderComponent,
|
|
} = wp.compose;
|
|
|
|
const { InspectorControls } = wp.blockEditor;
|
|
|
|
const {
|
|
PanelBody,
|
|
SelectControl,
|
|
} = wp.components;
|
|
|
|
const {
|
|
hasBlockSupport,
|
|
} = wp.blocks;
|
|
|
|
const allBorders = {
|
|
'borderWidthTop': 'border-top-width',
|
|
'borderWidthBottom': 'border-bottom-width',
|
|
'borderWidthLeft': 'border-left-width',
|
|
'borderWidthRight': 'border-right-width',
|
|
};
|
|
|
|
const allBordersRadius = {
|
|
'borderRadiusTopLeft': 'border-top-left-radius',
|
|
'borderRadiusTopRight': 'border-top-right-radius',
|
|
'borderRadiusBottomLeft': 'border-bottom-left-radius',
|
|
'borderRadiusBottomRight': 'border-bottom-right-radius',
|
|
};
|
|
|
|
/**
|
|
* Extend block attributes with borders.
|
|
*
|
|
* @param {Object} blockSettings Original block settings.
|
|
* @param {String} name Original block name.
|
|
*
|
|
* @return {Object} Filtered block settings.
|
|
*/
|
|
function addAttribute( blockSettings, name ) {
|
|
let supports = hasBlockSupport( name, 'canvasBorder', false );
|
|
|
|
// add support to core blocks
|
|
if ( isCoreBlockWithExt( name ) ) {
|
|
blockSettings.supports = {
|
|
...blockSettings.supports,
|
|
canvasBorder: true,
|
|
};
|
|
supports = true;
|
|
}
|
|
|
|
if ( supports ) {
|
|
if ( ! blockSettings.attributes ) {
|
|
blockSettings.attributes = {};
|
|
}
|
|
|
|
// style.
|
|
if ( ! blockSettings.attributes.borderStyle ) {
|
|
blockSettings.attributes.borderStyle = {
|
|
type: 'string',
|
|
};
|
|
}
|
|
|
|
// color.
|
|
Object.keys( canvasSchemes ).forEach( ( scheme ) => {
|
|
let suffix = '';
|
|
|
|
if ( scheme && 'default' !== scheme ) {
|
|
suffix = `_${ scheme }`;
|
|
}
|
|
|
|
if ( ! blockSettings.attributes[ `borderColor${ suffix }` ] ) {
|
|
blockSettings.attributes[ `borderColor${ suffix }` ] = {
|
|
type: 'string',
|
|
};
|
|
}
|
|
} );
|
|
|
|
// responsive attributes.
|
|
Object.keys( canvasBreakpoints ).forEach( ( breakpoint ) => {
|
|
let suffix = '';
|
|
|
|
if ( breakpoint && 'desktop' !== breakpoint ) {
|
|
suffix = `_${ breakpoint }`;
|
|
}
|
|
|
|
// width.
|
|
Object.keys( allBorders ).forEach( ( spacing ) => {
|
|
if ( ! blockSettings.attributes[ spacing + suffix ] ) {
|
|
blockSettings.attributes[ spacing + suffix ] = {
|
|
type: 'number',
|
|
};
|
|
}
|
|
} );
|
|
|
|
// link.
|
|
if ( ! blockSettings.attributes[ `borderWidthLink${ suffix }` ] ) {
|
|
blockSettings.attributes[ `borderWidthLink${ suffix }` ] = {
|
|
type: 'boolean',
|
|
};
|
|
}
|
|
|
|
// unit.
|
|
if ( ! blockSettings.attributes[ `borderWidthUnit${ suffix }` ] ) {
|
|
blockSettings.attributes[ `borderWidthUnit${ suffix }` ] = {
|
|
type: 'string',
|
|
};
|
|
}
|
|
|
|
// radius.
|
|
Object.keys( allBordersRadius ).forEach( ( radius ) => {
|
|
if ( ! blockSettings.attributes[ radius + suffix ] ) {
|
|
blockSettings.attributes[ radius + suffix ] = {
|
|
type: 'number',
|
|
};
|
|
}
|
|
} );
|
|
|
|
// link.
|
|
if ( ! blockSettings.attributes[ `borderRadiusLink${ suffix }` ] ) {
|
|
blockSettings.attributes[ `borderRadiusLink${ suffix }` ] = {
|
|
type: 'boolean',
|
|
};
|
|
}
|
|
|
|
// unit.
|
|
if ( ! blockSettings.attributes[ `borderRadiusUnit${ suffix }` ] ) {
|
|
blockSettings.attributes[ `borderRadiusUnit${ suffix }` ] = {
|
|
type: 'string',
|
|
};
|
|
}
|
|
} );
|
|
}
|
|
|
|
return blockSettings;
|
|
}
|
|
|
|
/**
|
|
* Override the default edit UI to include a new block inspector control for
|
|
* assigning the custom borders if needed.
|
|
*
|
|
* @param {function|Component} BlockEdit Original component.
|
|
*
|
|
* @return {string} Wrapped component.
|
|
*/
|
|
const withInspectorControl = createHigherOrderComponent( ( OriginalComponent ) => {
|
|
return class CanvasBordersWrapper extends Component {
|
|
constructor() {
|
|
super( ...arguments );
|
|
|
|
this.getCurrentBorderStyles = this.getCurrentBorderStyles.bind( this );
|
|
this.getCurrentValue = this.getCurrentValue.bind( this );
|
|
}
|
|
|
|
/**
|
|
* Get current border styles for preview purposes.
|
|
*
|
|
* @returns {String} border styles.
|
|
*/
|
|
getCurrentBorderStyles() {
|
|
const {
|
|
attributes,
|
|
} = this.props;
|
|
|
|
const {
|
|
canvasClassName,
|
|
borderStyle,
|
|
} = attributes;
|
|
|
|
let customStyles = '';
|
|
|
|
if ( canvasClassName ) {
|
|
Object.keys( canvasBreakpoints ).forEach( ( name ) => {
|
|
let suffix = '';
|
|
let borderRadiusUnit = 'px';
|
|
let breakpointStyles = '';
|
|
|
|
if ( name && name !== 'desktop' ) {
|
|
suffix = '_' + name;
|
|
}
|
|
|
|
if ( attributes[ 'borderRadiusUnit' + suffix ] ) {
|
|
borderRadiusUnit = attributes[ 'borderRadiusUnit' + suffix ];
|
|
}
|
|
|
|
Object.keys( allBordersRadius ).forEach( ( radius ) => {
|
|
if ( typeof attributes[ radius + suffix ] !== 'undefined' ) {
|
|
breakpointStyles += `${ allBordersRadius[ radius ] }: ${ attributes[ radius + suffix ] }${ borderRadiusUnit }; `;
|
|
}
|
|
} );
|
|
|
|
if ( breakpointStyles ) {
|
|
breakpointStyles = `.${ canvasClassName } { ${ breakpointStyles } }`;
|
|
|
|
if ( suffix ) {
|
|
breakpointStyles = `@media (max-width: ${ canvasBreakpoints[ name ].width }px) { ${ breakpointStyles } } `;
|
|
}
|
|
|
|
customStyles += breakpointStyles;
|
|
}
|
|
} );
|
|
}
|
|
|
|
if ( canvasClassName && borderStyle ) {
|
|
let mainStyles = '';
|
|
|
|
mainStyles = `border-style: ${ borderStyle };`;
|
|
mainStyles += `border-width: 0;`;
|
|
|
|
customStyles += `.${ canvasClassName } { ${ mainStyles } }`;
|
|
|
|
Object.keys( canvasSchemes ).forEach( ( name ) => {
|
|
let rule = '';
|
|
let suffix = '';
|
|
|
|
if ( name && 'default' !== name ) {
|
|
suffix = `_${ name }`;
|
|
|
|
rule = `[data-scheme="${ name }"]`;
|
|
}
|
|
|
|
if ( attributes[ 'borderColor' + suffix ] ) {
|
|
mainStyles = `border-color: ${ attributes[ 'borderColor' + suffix ] };`;
|
|
|
|
customStyles += `${rule} .${ canvasClassName } { ${ mainStyles } }`;
|
|
}
|
|
} );
|
|
|
|
Object.keys( canvasBreakpoints ).forEach( ( name ) => {
|
|
let suffix = '';
|
|
let borderWidthUnit = 'px';
|
|
let breakpointStyles = '';
|
|
|
|
if ( name && name !== 'desktop' ) {
|
|
suffix = '_' + name;
|
|
}
|
|
|
|
if ( attributes[ 'borderWidthUnit' + suffix ] ) {
|
|
borderWidthUnit = attributes[ 'borderWidthUnit' + suffix ];
|
|
}
|
|
|
|
Object.keys( allBorders ).forEach( ( spacing ) => {
|
|
if ( typeof attributes[ spacing + suffix ] !== 'undefined' ) {
|
|
breakpointStyles += `${ allBorders[ spacing ] }: ${ attributes[ spacing + suffix ] }${ borderWidthUnit }; `;
|
|
}
|
|
} );
|
|
|
|
if ( breakpointStyles ) {
|
|
breakpointStyles = `.${ canvasClassName } { ${ breakpointStyles } }`;
|
|
|
|
if ( suffix ) {
|
|
breakpointStyles = `@media (max-width: ${ canvasBreakpoints[ name ].width }px) { ${ breakpointStyles } } `;
|
|
}
|
|
|
|
customStyles += breakpointStyles;
|
|
}
|
|
} );
|
|
}
|
|
|
|
return customStyles;
|
|
}
|
|
|
|
/**
|
|
* Get current value.
|
|
*
|
|
* @param {String} name - name.
|
|
* @param {String} suffix - suffix.
|
|
*
|
|
* @return {Int}
|
|
*/
|
|
getCurrentValue( name, suffix = '' ) {
|
|
const {
|
|
attributes,
|
|
} = this.props;
|
|
|
|
return attributes[ `${ name }${ suffix }` ];
|
|
}
|
|
|
|
render() {
|
|
if ( ! hasBlockSupport( this.props.name, 'canvasBorder', false ) ) {
|
|
return <OriginalComponent { ...this.props } />;
|
|
}
|
|
|
|
const {
|
|
attributes,
|
|
setAttributes,
|
|
} = this.props;
|
|
|
|
const {
|
|
canvasClassName,
|
|
} = attributes;
|
|
|
|
dynamicStylesBYkey( 'borders', canvasClassName, this.getCurrentBorderStyles() );
|
|
|
|
// add new borders controls.
|
|
return (
|
|
<Fragment>
|
|
<OriginalComponent
|
|
{ ...this.props }
|
|
{ ...this.state }
|
|
setState={ this.setState }
|
|
/>
|
|
<InspectorControls>
|
|
<PanelBody
|
|
title={ __( 'Borders' ) }
|
|
initialOpen={ false }
|
|
>
|
|
<ComponentResponsiveWrapper>
|
|
{ ( { responsiveSuffix, ComponentResponsiveDropdown } ) => {
|
|
return (
|
|
<Fragment>
|
|
<h2>
|
|
{ __( 'Radius' ) }
|
|
<ComponentResponsiveDropdown />
|
|
</h2>
|
|
<ComponentRadius
|
|
prefix="borderRadius"
|
|
suffix={ responsiveSuffix }
|
|
units={ [ 'px', '%' ] }
|
|
topLeft={ this.getCurrentValue( 'borderRadiusTopLeft', responsiveSuffix ) }
|
|
topRight={ this.getCurrentValue( 'borderRadiusTopRight', responsiveSuffix ) }
|
|
bottomLeft={ this.getCurrentValue( 'borderRadiusBottomLeft', responsiveSuffix ) }
|
|
bottomRight={ this.getCurrentValue( 'borderRadiusBottomRight', responsiveSuffix ) }
|
|
link={ this.getCurrentValue( 'borderRadiusLink', responsiveSuffix ) }
|
|
unit={ this.getCurrentValue( 'borderRadiusUnit', responsiveSuffix ) }
|
|
onChange={ ( attributes ) => {
|
|
setAttributes( attributes );
|
|
} }
|
|
/>
|
|
</Fragment>
|
|
);
|
|
} }
|
|
</ComponentResponsiveWrapper>
|
|
<SelectControl
|
|
label={ __( 'Border' ) }
|
|
value={ attributes.borderStyle }
|
|
options={ [
|
|
{
|
|
label: __( 'None' ),
|
|
value: '',
|
|
}, {
|
|
label: __( 'Solid' ),
|
|
value: 'solid',
|
|
}, {
|
|
label: __( 'Dashed' ),
|
|
value: 'dashed',
|
|
}, {
|
|
label: __( 'Dotted' ),
|
|
value: 'dotted',
|
|
}, {
|
|
label: __( 'Double' ),
|
|
value: 'double',
|
|
},
|
|
] }
|
|
onChange={ ( val ) => {
|
|
setAttributes( {
|
|
borderStyle: val,
|
|
} );
|
|
} }
|
|
/>
|
|
{ attributes.borderStyle ? (
|
|
<ComponentResponsiveWrapper>
|
|
{ ( { responsiveSuffix, ComponentResponsiveDropdown } ) => {
|
|
return (
|
|
<Fragment>
|
|
<h2>
|
|
{ __( 'Width' ) }
|
|
<ComponentResponsiveDropdown />
|
|
</h2>
|
|
<ComponentSpacings
|
|
prefix="borderWidth"
|
|
suffix={ responsiveSuffix }
|
|
units={ [ 'px' ] }
|
|
top={ this.getCurrentValue( 'borderWidthTop', responsiveSuffix ) }
|
|
bottom={ this.getCurrentValue( 'borderWidthBottom', responsiveSuffix ) }
|
|
left={ this.getCurrentValue( 'borderWidthLeft', responsiveSuffix ) }
|
|
right={ this.getCurrentValue( 'borderWidthRight', responsiveSuffix ) }
|
|
link={ this.getCurrentValue( 'borderWidthLink', responsiveSuffix ) }
|
|
unit={ this.getCurrentValue( 'borderWidthUnit', responsiveSuffix ) }
|
|
onChange={ ( attributes ) => {
|
|
setAttributes( attributes );
|
|
} }
|
|
/>
|
|
</Fragment>
|
|
);
|
|
} }
|
|
</ComponentResponsiveWrapper>
|
|
) : '' }
|
|
{ attributes.borderStyle ? (
|
|
<ComponentSchemeWrapper>
|
|
{({ schemeSuffix, ComponentSchemeDropdown }) => {
|
|
return (
|
|
<Fragment>
|
|
<h2>
|
|
{ __( 'Color' ) }
|
|
<ComponentSchemeDropdown />
|
|
</h2>
|
|
|
|
<ComponentColors
|
|
slug='borderColor'
|
|
suffix={ schemeSuffix }
|
|
val={ this.getCurrentValue( 'borderColor', schemeSuffix ) }
|
|
onChange={ ( attributes ) => {
|
|
setAttributes( attributes );
|
|
} }
|
|
/>
|
|
</Fragment>
|
|
)
|
|
}}
|
|
</ComponentSchemeWrapper>
|
|
) : '' }
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
</Fragment>
|
|
);
|
|
}
|
|
};
|
|
}, 'withInspectorControl' );
|
|
|
|
// Init filters.
|
|
addFilter( 'blocks.registerBlockType', 'canvas/borders/additional-attributes', addAttribute );
|
|
addFilter( 'editor.BlockEdit', 'canvas/borders/additional-attributes', withInspectorControl );
|