first commit
This commit is contained in:
CHIEFSOFT\ameye
+138
@@ -0,0 +1,138 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"],
|
||||
.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] > .cnvs-block-column {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] {
|
||||
-ms-flex-preferred-size: 50%;
|
||||
flex-basis: 50%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
min-width: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.cnvs-block-column-inner > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-column {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cnvs-block-column-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 100%;
|
||||
-ms-flex: 100%;
|
||||
flex: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-column-inner > div {
|
||||
-webkit-box-flex: 100%;
|
||||
-ms-flex: 100%;
|
||||
flex: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-column-resizer {
|
||||
position: absolute;
|
||||
left: -2.5px;
|
||||
top: -5px;
|
||||
bottom: -5px;
|
||||
width: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: #017cba;
|
||||
cursor: col-resize;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
-webkit-transition: .3s opacity;
|
||||
transition: .3s opacity;
|
||||
}
|
||||
|
||||
.cnvs-block-column-resizer:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -5px;
|
||||
left: -5px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
[data-type="canvas/column"]:hover > .canvas-component-custom-blocks > .cnvs-block-column-resizer {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cnvs-block-column-resizer > span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-top: -7px;
|
||||
margin-right: -7px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #fff;
|
||||
background-color: #017cba;
|
||||
}
|
||||
|
||||
.cnvs-block-row-inner .block-editor-block-list__layout .block-editor-block-list__block {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.components-popover.block-editor-block-list__block-popover
|
||||
.components-popover__content
|
||||
.block-editor-block-contextual-toolbar[data-type="canvas/column"] {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Columns act as as a "passthrough container"
|
||||
* and therefore has its vertical margins/padding removed via negative margins
|
||||
* therefore we need to compensate for this here by doubling the spacing on the
|
||||
* vertical to ensure there is equal visual spacing around the inserter. Note there
|
||||
* is no formal API for a "passthrough" Block so this is an edge case override
|
||||
*/
|
||||
[data-type="canvas/row"] .block-list-appender {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-row-inner > .block-editor-inner-blocks.has-overlay::after {
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"],
|
||||
.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] > .cnvs-block-column {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] {
|
||||
-ms-flex-preferred-size: 50%;
|
||||
flex-basis: 50%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
min-width: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.cnvs-block-column-inner > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-column {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cnvs-block-column-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 100%;
|
||||
-ms-flex: 100%;
|
||||
flex: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-column-inner > div {
|
||||
-webkit-box-flex: 100%;
|
||||
-ms-flex: 100%;
|
||||
flex: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-column-resizer {
|
||||
position: absolute;
|
||||
right: -2.5px;
|
||||
top: -5px;
|
||||
bottom: -5px;
|
||||
width: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: #017cba;
|
||||
cursor: col-resize;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
-webkit-transition: .3s opacity;
|
||||
transition: .3s opacity;
|
||||
}
|
||||
|
||||
.cnvs-block-column-resizer:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
[data-type="canvas/column"]:hover > .canvas-component-custom-blocks > .cnvs-block-column-resizer {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cnvs-block-column-resizer > span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-top: -7px;
|
||||
margin-left: -7px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #fff;
|
||||
background-color: #017cba;
|
||||
}
|
||||
|
||||
.cnvs-block-row-inner .block-editor-block-list__layout .block-editor-block-list__block {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.components-popover.block-editor-block-list__block-popover
|
||||
.components-popover__content
|
||||
.block-editor-block-contextual-toolbar[data-type="canvas/column"] {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Columns act as as a "passthrough container"
|
||||
* and therefore has its vertical margins/padding removed via negative margins
|
||||
* therefore we need to compensate for this here by doubling the spacing on the
|
||||
* vertical to ensure there is equal visual spacing around the inserter. Note there
|
||||
* is no formal API for a "passthrough" Block so this is an edge case override
|
||||
*/
|
||||
[data-type="canvas/row"] .block-list-appender {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-row-inner > .block-editor-inner-blocks.has-overlay::after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-row > .cnvs-block-row-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cnvs-block-column {
|
||||
-ms-flex-preferred-size: 50%;
|
||||
flex-basis: 50%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
min-width: 0;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.cnvs-block-column {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cnvs-block-column-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 100%;
|
||||
-ms-flex: 100%;
|
||||
flex: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-column-inner > div {
|
||||
-webkit-box-flex: 100%;
|
||||
-ms-flex: 100%;
|
||||
flex: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-row > .cnvs-block-row-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cnvs-block-column {
|
||||
-ms-flex-preferred-size: 50%;
|
||||
flex-basis: 50%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
min-width: 0;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.cnvs-block-column {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cnvs-block-column-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 100%;
|
||||
-ms-flex: 100%;
|
||||
flex: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-column-inner > div {
|
||||
-webkit-box-flex: 100%;
|
||||
-ms-flex: 100%;
|
||||
flex: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import RowBlockEdit from './edit.jsx';
|
||||
import RowBlockSave from './save.jsx';
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Row block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender( edit, blockProps ) {
|
||||
if ( 'canvas/row' === blockProps.name ) {
|
||||
return (
|
||||
<RowBlockEdit { ...blockProps } />
|
||||
);
|
||||
}
|
||||
|
||||
return edit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom block register data for Row block.
|
||||
*
|
||||
* @param {Object} blockData Block data.
|
||||
*
|
||||
* @return {Object} Block data.
|
||||
*/
|
||||
function registerData( blockData ) {
|
||||
if ( 'canvas/row' === blockData.name ) {
|
||||
blockData.save = RowBlockSave;
|
||||
}
|
||||
|
||||
return blockData;
|
||||
}
|
||||
|
||||
addFilter( 'canvas.customBlock.editRender', 'canvas/row/editRender', editRender );
|
||||
addFilter( 'canvas.customBlock.registerData', 'canvas/row/registerData', registerData );
|
||||
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
const {
|
||||
compose,
|
||||
} = wp.compose;
|
||||
const {
|
||||
withSelect,
|
||||
} = wp.data;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import getStyles from './styles';
|
||||
import changeColumnSize from '../block-column/change-column-size';
|
||||
|
||||
const availableSizes = {
|
||||
1: [ 12 ],
|
||||
2: [ 6, 6 ],
|
||||
3: [ 4, 4, 4 ],
|
||||
4: [ 3, 3, 3, 3 ],
|
||||
5: [ 2, 2, 4, 2, 2 ],
|
||||
6: [ 2, 2, 2, 2, 2, 2 ],
|
||||
};
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
class RowBlockEdit extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
|
||||
this.state = {
|
||||
currentColumnCount: this.props.attributes.columns,
|
||||
};
|
||||
|
||||
this.getLayoutTemplate = this.getLayoutTemplate.bind( this );
|
||||
this.updateColumnsSizes = this.updateColumnsSizes.bind( this );
|
||||
}
|
||||
|
||||
componentDidUpdate( prevProps ) {
|
||||
if ( this.props.attributes.columns !== this.state.currentColumnCount ) {
|
||||
this.setState( {
|
||||
currentColumnCount: this.props.attributes.columns,
|
||||
} );
|
||||
this.updateColumnsSizes();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the template configuration for a given section layout.
|
||||
*
|
||||
* @return {Object[]} Layout configuration.
|
||||
*/
|
||||
getLayoutTemplate() {
|
||||
const {
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
columns,
|
||||
} = attributes;
|
||||
|
||||
const result = [];
|
||||
|
||||
for ( let k = 0; k < columns; k++ ) {
|
||||
result.push( [
|
||||
'canvas/column',
|
||||
{
|
||||
size: availableSizes[ columns ][ k ],
|
||||
},
|
||||
] );
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update columns sizes.
|
||||
*/
|
||||
updateColumnsSizes() {
|
||||
const {
|
||||
block,
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
columns,
|
||||
} = attributes;
|
||||
|
||||
block.innerBlocks.forEach( ( colData, i ) => {
|
||||
if ( availableSizes[ columns ][ i ] ) {
|
||||
changeColumnSize( colData.clientId, availableSizes[ columns ][ i ] );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
className,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
columns,
|
||||
canvasClassName,
|
||||
} = attributes;
|
||||
|
||||
className = classnames(
|
||||
'cnvs-block-row',
|
||||
`cnvs-block-row-columns-${ columns }`,
|
||||
canvasClassName,
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={ className }>
|
||||
<div className="cnvs-block-row-inner">
|
||||
<InnerBlocks
|
||||
template={ this.getLayoutTemplate() }
|
||||
templateLock="all"
|
||||
allowedBlocks={ [ 'canvas/column' ] }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<style>{ canvasClassName ? getStyles( attributes, canvasClassName ) : '' }</style>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default compose( [
|
||||
withSelect( ( select, ownProps ) => {
|
||||
const {
|
||||
getBlock,
|
||||
} = select( 'core/block-editor' );
|
||||
|
||||
return {
|
||||
block: getBlock( ownProps.clientId ),
|
||||
};
|
||||
} ),
|
||||
] )( RowBlockEdit );
|
||||
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
/**
|
||||
* Row block template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $content - inner blocks
|
||||
* @var $options - layout options
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
$attributes['className'] .= ' cnvs-block-row-columns-' . $attributes['columns'];
|
||||
|
||||
if ( isset( $attributes['verticalAlignment'] ) && $attributes['verticalAlignment'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-row-valign-' . $attributes['verticalAlignment'];
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
|
||||
<div class="cnvs-block-row-inner">
|
||||
<?php echo $content; // XSS. ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { Component } = wp.element;
|
||||
|
||||
const {
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class RowBlockSave extends Component {
|
||||
render() {
|
||||
return <InnerBlocks.Content />;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
const {
|
||||
canvasBreakpoints,
|
||||
} = window;
|
||||
|
||||
/**
|
||||
* Row block styles for Editor
|
||||
*
|
||||
* @param {Object} attributes block attributes
|
||||
* @param {String} className block class name
|
||||
*
|
||||
* @returns {String}
|
||||
*/
|
||||
export default function( attributes, className ) {
|
||||
let result = '';
|
||||
let breakColumns = true;
|
||||
|
||||
Object.keys( canvasBreakpoints ).forEach( ( name ) => {
|
||||
const data = canvasBreakpoints[ name ];
|
||||
let styles = '';
|
||||
let suffix = '';
|
||||
|
||||
if ( 'desktop' !== name ) {
|
||||
suffix = `_${ name }`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Break columns.
|
||||
*/
|
||||
if ( suffix && breakColumns ) {
|
||||
breakColumns = false;
|
||||
styles += `
|
||||
.${ className } > .cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gap.
|
||||
*/
|
||||
if ( typeof attributes[ `gap${ suffix }` ] === 'number' ) {
|
||||
const gap = attributes[ `gap${ suffix }` ];
|
||||
styles += `
|
||||
.${ className } > .cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
margin-left: ${ - gap / 2 }px;
|
||||
margin-right: ${ - gap / 2 }px;
|
||||
}
|
||||
.${ className } > .cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] {
|
||||
padding-left: ${ gap / 2 }px;
|
||||
padding-right: ${ gap / 2 }px;
|
||||
}
|
||||
.${ className } > .cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] > .canvas-component-custom-blocks > .cnvs-block-column-resizer {
|
||||
margin-right: ${ - gap / 2 }px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
// add media query.
|
||||
if ( suffix && styles ) {
|
||||
styles = `@media (max-width: ${ data.width }px) { ${ styles } } `;
|
||||
}
|
||||
|
||||
if ( styles ) {
|
||||
result += styles;
|
||||
}
|
||||
} );
|
||||
|
||||
return result;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
<?php
|
||||
/**
|
||||
* Row block styles for Frontend
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $class_name - block class name
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
$breakpoints = cnvs_gutenberg()->get_breakpoints_data();
|
||||
$break_columns = true;
|
||||
|
||||
foreach ( $breakpoints as $name => $data ) {
|
||||
$result = '';
|
||||
$suffix = '';
|
||||
|
||||
if ( 'desktop' !== $name ) {
|
||||
$suffix = '_' . $name;
|
||||
}
|
||||
|
||||
/**
|
||||
* Break columns.
|
||||
*/
|
||||
if ( $suffix && $break_columns ) {
|
||||
$break_columns = false;
|
||||
$result .= '
|
||||
.' . esc_attr( $class_name ) . ' > .cnvs-block-row-inner {
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
';
|
||||
}
|
||||
|
||||
/**
|
||||
* Gap.
|
||||
*/
|
||||
if ( isset( $attributes[ 'gap' . $suffix ] ) && $attributes[ 'gap' . $suffix ] ) {
|
||||
$gap = $attributes[ 'gap' . $suffix ];
|
||||
$result .= '
|
||||
.' . esc_attr( $class_name ) . ' > .cnvs-block-row-inner {
|
||||
margin-top: ' . esc_attr( - $gap / 2 ) . 'px;
|
||||
margin-left: ' . esc_attr( - $gap / 2 ) . 'px;
|
||||
margin-right: ' . esc_attr( - $gap / 2 ) . 'px;
|
||||
}
|
||||
.' . esc_attr( $class_name ) . ' > .cnvs-block-row-inner > .cnvs-block-column {
|
||||
padding-top: ' . esc_attr( $gap / 2 ) . 'px;
|
||||
padding-left: ' . esc_attr( $gap / 2 ) . 'px;
|
||||
padding-right: ' . esc_attr( $gap / 2 ) . 'px;
|
||||
}
|
||||
';
|
||||
}
|
||||
|
||||
// add media query.
|
||||
if ( $suffix && $result ) {
|
||||
$result = '@media (max-width: ' . esc_attr( $data['width'] ) . 'px) { ' . $result . ' } ';
|
||||
}
|
||||
|
||||
if ( $result ) {
|
||||
echo $result; // XSS Ok.
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user