/home/preegmxb/gymnyou.com/wp-content/plugins/canvas/gutenberg/extensions/border/index.jsx
/**
* 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 );