first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-alert-inner {
|
||||
margin-top: -27px;
|
||||
margin-bottom: -27px;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-alert-inner {
|
||||
margin-top: -27px;
|
||||
margin-bottom: -27px;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-alert {
|
||||
--cnvs-alert-background: #f8f9fa;
|
||||
--cnvs-alert-padding: 0.5rem 1rem;
|
||||
--cnvs-alert-font-size: 0.875rem;
|
||||
--cnvs-alert-margin-bottom: 1rem;
|
||||
--cnvs-alert-border-right: 2px solid transparent;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-alert {
|
||||
position: relative;
|
||||
padding: var(--cnvs-alert-padding);
|
||||
background: var(--cnvs-alert-background);
|
||||
font-size: var(--cnvs-alert-font-size);
|
||||
margin-bottom: var(--cnvs-alert-margin-bottom);
|
||||
border-right: var(--cnvs-alert-border-left);
|
||||
}
|
||||
|
||||
.cnvs-block-alert.cnvs-block-alert-dismissible {
|
||||
padding-left: 4rem;
|
||||
}
|
||||
|
||||
.cnvs-block-alert.cnvs-block-alert-dismissible button.cnvs-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.cnvs-block-alert .cnvs-block-alert-inner h1, .cnvs-block-alert .cnvs-block-alert-inner h2, .cnvs-block-alert .cnvs-block-alert-inner h3, .cnvs-block-alert .cnvs-block-alert-inner h4, .cnvs-block-alert .cnvs-block-alert-inner h5, .cnvs-block-alert .cnvs-block-alert-inner h6 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-alert .cnvs-block-alert-inner > * {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-alert .cnvs-block-alert-inner > *:first-child:last-child {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-primary {
|
||||
border-right-color: #007bff;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-secondary {
|
||||
border-right-color: #6c757d;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-success {
|
||||
border-right-color: #28a745;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-info {
|
||||
border-right-color: #17a2b8;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-warning {
|
||||
border-right-color: #ffc107;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-danger {
|
||||
border-right-color: #dc3545;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-light {
|
||||
border-right-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-dark {
|
||||
border-right-color: #343a40;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-alert {
|
||||
--cnvs-alert-background: #f8f9fa;
|
||||
--cnvs-alert-padding: 0.5rem 1rem;
|
||||
--cnvs-alert-font-size: 0.875rem;
|
||||
--cnvs-alert-margin-bottom: 1rem;
|
||||
--cnvs-alert-border-left: 2px solid transparent;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-alert {
|
||||
position: relative;
|
||||
padding: var(--cnvs-alert-padding);
|
||||
background: var(--cnvs-alert-background);
|
||||
font-size: var(--cnvs-alert-font-size);
|
||||
margin-bottom: var(--cnvs-alert-margin-bottom);
|
||||
border-left: var(--cnvs-alert-border-left);
|
||||
}
|
||||
|
||||
.cnvs-block-alert.cnvs-block-alert-dismissible {
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
.cnvs-block-alert.cnvs-block-alert-dismissible button.cnvs-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.cnvs-block-alert .cnvs-block-alert-inner h1, .cnvs-block-alert .cnvs-block-alert-inner h2, .cnvs-block-alert .cnvs-block-alert-inner h3, .cnvs-block-alert .cnvs-block-alert-inner h4, .cnvs-block-alert .cnvs-block-alert-inner h5, .cnvs-block-alert .cnvs-block-alert-inner h6 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-alert .cnvs-block-alert-inner > * {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-alert .cnvs-block-alert-inner > *:first-child:last-child {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-primary {
|
||||
border-left-color: #007bff;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-secondary {
|
||||
border-left-color: #6c757d;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-success {
|
||||
border-left-color: #28a745;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-info {
|
||||
border-left-color: #17a2b8;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-warning {
|
||||
border-left-color: #ffc107;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-danger {
|
||||
border-left-color: #dc3545;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-light {
|
||||
border-left-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-alert-dark {
|
||||
border-left-color: #343a40;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import AlertBlockEdit from './edit.jsx';
|
||||
import AlertBlockSave from './save.jsx';
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Alert block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender( edit, blockProps ) {
|
||||
if ( 'canvas/alert' === blockProps.name ) {
|
||||
return (
|
||||
<AlertBlockEdit { ...blockProps } />
|
||||
);
|
||||
}
|
||||
|
||||
return edit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom block register data for Alert block.
|
||||
*
|
||||
* @param {Object} blockData Block data.
|
||||
*
|
||||
* @return {Object} Block data.
|
||||
*/
|
||||
function registerData( blockData ) {
|
||||
if ( 'canvas/alert' === blockData.name ) {
|
||||
blockData.save = AlertBlockSave;
|
||||
}
|
||||
|
||||
return blockData;
|
||||
}
|
||||
|
||||
addFilter( 'canvas.customBlock.editRender', 'canvas/alert/editRender', editRender );
|
||||
addFilter( 'canvas.customBlock.registerData', 'canvas/alert/registerData', registerData );
|
||||
@@ -0,0 +1,100 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
__,
|
||||
} = wp.i18n;
|
||||
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
const {
|
||||
withSelect,
|
||||
} = wp.data;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
class AlertBlockEdit extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
|
||||
this.state = {
|
||||
// fix for WP 5.2
|
||||
// styles control generates error
|
||||
showInnerBlocks: !!this.props.clientId,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
setAttributes,
|
||||
hasChildBlocks,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
className,
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
dismissible,
|
||||
canvasClassName,
|
||||
} = attributes;
|
||||
|
||||
className = classnames(
|
||||
'cnvs-block-alert',
|
||||
{
|
||||
'cnvs-block-alert-dismissible': dismissible,
|
||||
},
|
||||
canvasClassName,
|
||||
className
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={className}>
|
||||
<div className="cnvs-block-alert-inner">
|
||||
{this.state.showInnerBlocks ? (
|
||||
<InnerBlocks
|
||||
templateLock={false}
|
||||
renderAppender={(
|
||||
hasChildBlocks ?
|
||||
undefined :
|
||||
() => <InnerBlocks.ButtonBlockAppender />
|
||||
)}
|
||||
/>
|
||||
) : __('Alert content')}
|
||||
</div>
|
||||
{dismissible ? (
|
||||
<button className="cnvs-close" type="button" data-dismiss="alert" aria-label={__('Close')}>
|
||||
<i className="cnvs-icon-x" />
|
||||
</button>
|
||||
) : ''}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const AlertBlockEditWithSelect = withSelect((select, ownProps) => {
|
||||
const { clientId } = ownProps;
|
||||
const blockEditor = select('core/block-editor');
|
||||
|
||||
return {
|
||||
hasChildBlocks: blockEditor ? blockEditor.getBlockOrder(clientId).length > 0 : false,
|
||||
};
|
||||
})(AlertBlockEdit);
|
||||
|
||||
export default AlertBlockEditWithSelect;
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Block Alert
|
||||
*/
|
||||
( function( $ ) {
|
||||
|
||||
$( document ).ready( function() {
|
||||
|
||||
$( document ).on( 'click', '.cnvs-block-alert .cnvs-close', function() {
|
||||
$( this ).closest( '.cnvs-block-alert' ).remove();
|
||||
} );
|
||||
|
||||
} );
|
||||
} )( jQuery );
|
||||
@@ -0,0 +1,27 @@
|
||||
<?php
|
||||
/**
|
||||
* Alert block template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $content - inner blocks
|
||||
* @var $options - layout options
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
if ( isset( $attributes['dismissible'] ) && $attributes['dismissible'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-alert-dismissible';
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
|
||||
<div class="cnvs-block-alert-inner">
|
||||
<?php echo (string) $content; // XSS. ?>
|
||||
</div>
|
||||
<?php if ( isset( $attributes['dismissible'] ) && $attributes['dismissible'] ) : ?>
|
||||
<button class="cnvs-close" type="button" data-dismiss="alert" aria-label="<?php echo esc_attr__( 'Close', 'canvas' ); ?>">
|
||||
<i class="cnvs-icon-x"></i>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
Component,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class AlertBlockSave extends Component {
|
||||
render() {
|
||||
return <InnerBlocks.Content />;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import CollapsibleBlockEdit from './edit.jsx';
|
||||
import CollapsibleBlockSave from './save.jsx';
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Collapsible block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender( edit, blockProps ) {
|
||||
if ( 'canvas/collapsible' === blockProps.name ) {
|
||||
return (
|
||||
<CollapsibleBlockEdit { ...blockProps } />
|
||||
);
|
||||
}
|
||||
|
||||
return edit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom block register data for Collapsible block.
|
||||
*
|
||||
* @param {Object} blockData Block data.
|
||||
*
|
||||
* @return {Object} Block data.
|
||||
*/
|
||||
function registerData( blockData ) {
|
||||
if ( 'canvas/collapsible' === blockData.name ) {
|
||||
blockData.save = CollapsibleBlockSave;
|
||||
}
|
||||
|
||||
return blockData;
|
||||
}
|
||||
|
||||
addFilter( 'canvas.customBlock.editRender', 'canvas/collapsible/editRender', editRender );
|
||||
addFilter( 'canvas.customBlock.registerData', 'canvas/collapsible/registerData', registerData );
|
||||
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { Component, Fragment } = wp.element;
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const {
|
||||
RichText,
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
const {
|
||||
Button,
|
||||
} = wp.components;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class CollapsibleBlockEdit extends Component {
|
||||
render() {
|
||||
const {
|
||||
attributes,
|
||||
setAttributes,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
title,
|
||||
opened,
|
||||
canvasClassName,
|
||||
} = attributes;
|
||||
|
||||
let {
|
||||
className,
|
||||
} = this.props;
|
||||
|
||||
className = classnames(
|
||||
'cnvs-block-collapsible',
|
||||
{
|
||||
'cnvs-block-collapsible-opened': opened,
|
||||
},
|
||||
canvasClassName,
|
||||
className
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={ className }>
|
||||
<div className="cnvs-block-collapsible-title">
|
||||
<h6>
|
||||
<RichText
|
||||
placeholder={ __( 'Add collapsible title...' ) }
|
||||
value={ title }
|
||||
onChange={ ( val ) => setAttributes( { title: val } ) }
|
||||
keepPlaceholderOnFocus
|
||||
/>
|
||||
</h6>
|
||||
<Button
|
||||
className="cnvs-block-collapsible-toggle"
|
||||
onClick={ () => setAttributes( { opened: ! opened } ) }
|
||||
>
|
||||
<span className="cnvs-icon-chevron-right" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="cnvs-block-collapsible-content">
|
||||
<InnerBlocks
|
||||
templateLock={ false }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
<?php
|
||||
/**
|
||||
* Collapsible block template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $content - inner blocks
|
||||
* @var $options - layout options
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
if ( $attributes['opened'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-collapsible-opened';
|
||||
}
|
||||
|
||||
?>
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
|
||||
<div class="cnvs-block-collapsible-title">
|
||||
<h6 class="cnvs-block-collapsible-heading">
|
||||
<a href="#"><?php echo (string) $attributes['title']; // XSS. ?></a>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="cnvs-block-collapsible-content">
|
||||
<?php echo (string) $content; // XSS. ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { Component } = wp.element;
|
||||
|
||||
const {
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class CollapsibleBlockSave extends Component {
|
||||
render() {
|
||||
return <InnerBlocks.Content />;
|
||||
}
|
||||
}
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-collapsible {
|
||||
--cnvs-collapsible-border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-collapsibles > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/collapsible"] + [data-type="canvas/collapsible"] > .canvas-component-custom-blocks {
|
||||
margin-top: -33px;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsibles > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/collapsible"] + [data-type="canvas/collapsible"] > .canvas-component-custom-blocks .cnvs-block-collapsible {
|
||||
border-top: var(--cnvs-collapsible-border-top);
|
||||
}
|
||||
|
||||
[data-type="canvas/collapsible"].is-selected {
|
||||
z-index: 120;
|
||||
}
|
||||
|
||||
[data-type="canvas/collapsible"]:not(.is-selected) > .block-editor-block-list__insertion-point {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-title {
|
||||
position: relative;
|
||||
padding: 0.75rem 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-toggle {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
border: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
-webkit-transition: .2s transform;
|
||||
transition: .2s transform;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-toggle:focus, .cnvs-block-collapsible .cnvs-block-collapsible-toggle:hover {
|
||||
color: inherit;
|
||||
border: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible.cnvs-block-collapsible-opened > .cnvs-block-collapsible-title > .cnvs-block-collapsible-toggle > span {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-collapsible {
|
||||
--cnvs-collapsible-border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-collapsibles > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/collapsible"] + [data-type="canvas/collapsible"] > .canvas-component-custom-blocks {
|
||||
margin-top: -33px;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsibles > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/collapsible"] + [data-type="canvas/collapsible"] > .canvas-component-custom-blocks .cnvs-block-collapsible {
|
||||
border-top: var(--cnvs-collapsible-border-top);
|
||||
}
|
||||
|
||||
[data-type="canvas/collapsible"].is-selected {
|
||||
z-index: 120;
|
||||
}
|
||||
|
||||
[data-type="canvas/collapsible"]:not(.is-selected) > .block-editor-block-list__insertion-point {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-title {
|
||||
position: relative;
|
||||
padding: 0.75rem 0;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-toggle {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
border: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
-webkit-transition: .2s transform;
|
||||
transition: .2s transform;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-toggle:focus, .cnvs-block-collapsible .cnvs-block-collapsible-toggle:hover {
|
||||
color: inherit;
|
||||
border: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible.cnvs-block-collapsible-opened > .cnvs-block-collapsible-title > .cnvs-block-collapsible-toggle > span {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-collapsible {
|
||||
--cnvs-collapsible-border-top: 1px solid #e9ecef;
|
||||
--cnvs-collapsible-a-color: #212529;
|
||||
--cnvs-collapsible-a-hover-color: #adb5bd;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-collapsible {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 0;
|
||||
background-clip: border-box;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible + .cnvs-block-collapsible {
|
||||
border-top: var(--cnvs-collapsible-border-top);
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-title h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-title h6 a {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 0;
|
||||
border: none;
|
||||
color: var(--cnvs-collapsible-a-color);
|
||||
-webkit-transition: 0.25s;
|
||||
transition: 0.25s;
|
||||
text-decoration: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-title h6 a:hover {
|
||||
color: var(--cnvs-collapsible-a-hover-color);
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-title h6 a:after {
|
||||
content: "\e914";
|
||||
font-family: "canvas-icons";
|
||||
-webkit-transition: 0.25s;
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible.cnvs-block-collapsible-opened > .cnvs-block-collapsible-title h6 a:after {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible.cnvs-block-collapsible-opened > .cnvs-block-collapsible-content {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-collapsible {
|
||||
--cnvs-collapsible-border-top: 1px solid #e9ecef;
|
||||
--cnvs-collapsible-a-color: #212529;
|
||||
--cnvs-collapsible-a-hover-color: #adb5bd;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-collapsible {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 0;
|
||||
background-clip: border-box;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible + .cnvs-block-collapsible {
|
||||
border-top: var(--cnvs-collapsible-border-top);
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-title h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-title h6 a {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 0;
|
||||
border: none;
|
||||
color: var(--cnvs-collapsible-a-color);
|
||||
-webkit-transition: 0.25s;
|
||||
transition: 0.25s;
|
||||
text-decoration: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-title h6 a:hover {
|
||||
color: var(--cnvs-collapsible-a-hover-color);
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-title h6 a:after {
|
||||
content: "\e914";
|
||||
font-family: "canvas-icons";
|
||||
-webkit-transition: 0.25s;
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible .cnvs-block-collapsible-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible.cnvs-block-collapsible-opened > .cnvs-block-collapsible-title h6 a:after {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.cnvs-block-collapsible.cnvs-block-collapsible-opened > .cnvs-block-collapsible-content {
|
||||
display: block;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import CollapsiblesBlockEdit from './edit.jsx';
|
||||
import CollapsiblesBlockSave from './save.jsx';
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Collapsibles block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender( edit, blockProps ) {
|
||||
if ( 'canvas/collapsibles' === blockProps.name ) {
|
||||
return (
|
||||
<CollapsiblesBlockEdit { ...blockProps } />
|
||||
);
|
||||
}
|
||||
|
||||
return edit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom block register data for Collapsibles block.
|
||||
*
|
||||
* @param {Object} blockData Block data.
|
||||
*
|
||||
* @return {Object} Block data.
|
||||
*/
|
||||
function registerData( blockData ) {
|
||||
if ( 'canvas/collapsibles' === blockData.name ) {
|
||||
blockData.save = CollapsiblesBlockSave;
|
||||
}
|
||||
|
||||
return blockData;
|
||||
}
|
||||
|
||||
addFilter( 'canvas.customBlock.editRender', 'canvas/collapsibles/editRender', editRender );
|
||||
addFilter( 'canvas.customBlock.registerData', 'canvas/collapsibles/registerData', registerData );
|
||||
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class CollapsiblesBlockEdit extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
|
||||
this.getLayoutTemplate = this.getLayoutTemplate.bind( this );
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the template configuration for a given section layout.
|
||||
*
|
||||
* @return {Object[]} Layout configuration.
|
||||
*/
|
||||
getLayoutTemplate() {
|
||||
const {
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
count,
|
||||
} = attributes;
|
||||
|
||||
const result = [];
|
||||
|
||||
for ( let k = 0; k < count; k++ ) {
|
||||
result.push( [
|
||||
'canvas/collapsible',
|
||||
] );
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
setAttributes,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
className,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
count,
|
||||
canvasClassName,
|
||||
} = this.props.attributes;
|
||||
|
||||
className = classnames(
|
||||
'cnvs-block-collapsibles',
|
||||
`cnvs-block-collapsibles-${ count }`,
|
||||
canvasClassName
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={ className }>
|
||||
<InnerBlocks
|
||||
template={ this.getLayoutTemplate() }
|
||||
templateLock="all"
|
||||
allowedBlocks={ [ 'canvas/collapsible' ] }
|
||||
/>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Block Collapsibles
|
||||
*/
|
||||
( function( $ ) {
|
||||
|
||||
$( document ).ready( function() {
|
||||
$( '.cnvs-block-collapsible-opened > .cnvs-block-collapsible-content' ).css( 'display', 'block' );
|
||||
|
||||
$( document ).on( 'click', '.cnvs-block-collapsibles .cnvs-block-collapsible-title a', function( e ) {
|
||||
e.preventDefault();
|
||||
|
||||
var $collapsible = $( this ).closest( '.cnvs-block-collapsible' );
|
||||
|
||||
$collapsible
|
||||
.siblings( '.cnvs-block-collapsible-opened' )
|
||||
.removeClass( 'cnvs-block-collapsible-opened' )
|
||||
.children( '.cnvs-block-collapsible-content' )
|
||||
.stop().slideUp();
|
||||
|
||||
$collapsible.children( '.cnvs-block-collapsible-content' ).stop().slideToggle();
|
||||
$collapsible.toggleClass( 'cnvs-block-collapsible-opened' );
|
||||
} );
|
||||
} );
|
||||
} )( jQuery );
|
||||
@@ -0,0 +1,18 @@
|
||||
<?php
|
||||
/**
|
||||
* Collapsibles block template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $content - inner blocks
|
||||
* @var $options - layout options
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
$attributes['className'] .= ' cnvs-block-collapsibles-' . $attributes['count'];
|
||||
|
||||
?>
|
||||
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
|
||||
<?php echo (string) $content; // XSS. ?>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { Component } = wp.element;
|
||||
|
||||
const {
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class CollapsiblesBlockSave extends Component {
|
||||
render() {
|
||||
return <InnerBlocks.Content />;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.wp-block-cover {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-cnvs-vert-align-middle {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-cnvs-vert-align-bottom {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.wp-block-cover {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-cnvs-vert-align-middle {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-cnvs-vert-align-bottom {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.wp-block-cover {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-cnvs-vert-align-middle {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-cnvs-vert-align-bottom {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.wp-block-cover {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-cnvs-vert-align-middle {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wp-block-cover.is-cnvs-vert-align-bottom {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,148 @@
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import {
|
||||
replaceClass,
|
||||
getActiveClass,
|
||||
} from '../../../gutenberg/utils/classes-replacer';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
__,
|
||||
} = wp.i18n;
|
||||
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
PanelBody,
|
||||
SelectControl,
|
||||
} = wp.components;
|
||||
|
||||
const {
|
||||
InspectorControls,
|
||||
} = wp.blockEditor;
|
||||
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
const {
|
||||
createHigherOrderComponent,
|
||||
} = wp.compose;
|
||||
|
||||
const {
|
||||
withDispatch,
|
||||
} = wp.data;
|
||||
|
||||
|
||||
/**
|
||||
* Override the default edit UI to include a new block inspector control for
|
||||
* assigning the custom styles if needed.
|
||||
*
|
||||
* @param {function|Component} BlockEdit Original component.
|
||||
*
|
||||
* @return {string} Wrapped component.
|
||||
*/
|
||||
const coverWithCanvasVertical = createHigherOrderComponent( ( BlockEdit ) => {
|
||||
class NewEdit extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
|
||||
this.getVerticalAlign = this.getVerticalAlign.bind( this );
|
||||
this.updateVerticalAlign = this.updateVerticalAlign.bind( this );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get vertical style from classname on the block.
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
getVerticalAlign() {
|
||||
const {
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
return getActiveClass( attributes.className, 'is-cnvs-vert-align' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Update vertical classname on the block.
|
||||
*
|
||||
* @param {String} verticalName name of vertical style
|
||||
* @memberof NewEdit
|
||||
*/
|
||||
updateVerticalAlign( verticalName ) {
|
||||
const {
|
||||
attributes,
|
||||
onChangeClassName,
|
||||
} = this.props;
|
||||
|
||||
const updatedClassName = replaceClass( attributes.className, 'is-cnvs-vert-align', verticalName );
|
||||
|
||||
onChangeClassName( updatedClassName );
|
||||
}
|
||||
|
||||
render() {
|
||||
if ( 'core/cover' !== this.props.name ) {
|
||||
return <BlockEdit { ...this.props } />;
|
||||
}
|
||||
|
||||
const {
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
let verticalAlign = this.getVerticalAlign();
|
||||
|
||||
if ( verticalAlign ) {
|
||||
verticalAlign = verticalAlign.replace( /^is-cnvs-vert-align-/, '' );
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<BlockEdit { ...this.props } />
|
||||
<InspectorControls>
|
||||
<PanelBody
|
||||
title={ __( 'Vertical Align' ) }
|
||||
>
|
||||
<SelectControl
|
||||
value={ verticalAlign }
|
||||
options={ [
|
||||
{
|
||||
label: __( 'Top' ),
|
||||
value: '',
|
||||
}, {
|
||||
label: __( 'Middle' ),
|
||||
value: 'middle',
|
||||
}, {
|
||||
label: __( 'Bottom' ),
|
||||
value: 'bottom',
|
||||
},
|
||||
] }
|
||||
onChange={ ( val ) => {
|
||||
this.updateVerticalAlign( val );
|
||||
} }
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
</Fragment>
|
||||
);;
|
||||
}
|
||||
}
|
||||
|
||||
return withDispatch( ( dispatch, { clientId } ) => {
|
||||
return {
|
||||
onChangeClassName( newClassName ) {
|
||||
dispatch( 'core/block-editor' ).updateBlockAttributes( clientId, {
|
||||
className: newClassName,
|
||||
} );
|
||||
},
|
||||
};
|
||||
} )( NewEdit );
|
||||
}, 'coverWithCanvasVertical' );
|
||||
|
||||
addFilter( 'editor.BlockEdit', 'canvas/cover/vertical', coverWithCanvasVertical );
|
||||
@@ -0,0 +1,122 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.wp-block-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-block-group .wp-block-group__inner-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-block-group .wp-block-group__inner-container > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) and (min-width: 760px) {
|
||||
.wp-block-group > .is-block-content {
|
||||
max-width: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-bordered {
|
||||
--cnvs-style-single-border-color: #dee2e6;
|
||||
border: 1px solid var(--cnvs-style-single-border-color);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border {
|
||||
--cnvs-style-single-border-width: 1px;
|
||||
--cnvs-style-single-border-color: #dee2e6;
|
||||
--cnvs-style-single-margin: 2rem;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border:before {
|
||||
position: relative !important;
|
||||
content: "";
|
||||
background-color: var(--cnvs-style-single-border-color);
|
||||
display: block;
|
||||
width: 4rem;
|
||||
height: var(--cnvs-style-single-border-width);
|
||||
margin: var(--cnvs-style-single-margin) auto;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border:after {
|
||||
position: relative !important;
|
||||
content: "";
|
||||
background-color: var(--cnvs-style-single-border-color);
|
||||
display: block;
|
||||
width: 4rem;
|
||||
height: var(--cnvs-style-single-border-width);
|
||||
margin: var(--cnvs-style-single-margin) auto;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignright {
|
||||
border: none;
|
||||
padding-right: var(--cnvs-style-single-margin);
|
||||
border-right: var(--cnvs-style-single-border-width) solid var(--cnvs-style-single-border-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignright:before, .is-style-cnvs-block-single-border.alignright:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignleft {
|
||||
border: none;
|
||||
padding-left: var(--cnvs-style-single-margin);
|
||||
border-left: var(--cnvs-style-single-border-width) solid var(--cnvs-style-single-border-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignleft:before, .is-style-cnvs-block-single-border.alignleft:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-bg-light {
|
||||
--cnvs-style-bg-light-background: #f8f9fa;
|
||||
--cnvs-style-bg-light-padding: 40px;
|
||||
background: var(--cnvs-style-bg-light-background);
|
||||
padding: var(--cnvs-style-bg-light-padding);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-bg-inverse {
|
||||
--cnvs-style-bg-inverse-background: black;
|
||||
--cnvs-style-bg-inverse-color: #fff;
|
||||
--cnvs-style-bg-inverse-padding: 40px;
|
||||
background: var(--cnvs-style-bg-inverse-background);
|
||||
padding: var(--cnvs-style-bg-inverse-padding);
|
||||
color: var(--cnvs-style-bg-inverse-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-shadow {
|
||||
--cnvs-style-shadow-box-shadow: 0 16px 36px 0 rgba(0,0,0,0.08);
|
||||
--cnvs-style-shadow-padding: 40px;
|
||||
-webkit-box-shadow: var(--cnvs-style-shadow-box-shadow);
|
||||
box-shadow: var(--cnvs-style-shadow-box-shadow);
|
||||
padding: var(--cnvs-style-shadow-padding);
|
||||
}
|
||||
|
||||
@media (max-width: 1019.98px) {
|
||||
.is-style-cnvs-block-single-border.alignleft,
|
||||
.is-style-cnvs-block-single-border.alignright {
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.wp-block-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-block-group .wp-block-group__inner-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-block-group .wp-block-group__inner-container > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) and (min-width: 760px) {
|
||||
.wp-block-group > .is-block-content {
|
||||
max-width: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-bordered {
|
||||
--cnvs-style-single-border-color: #dee2e6;
|
||||
border: 1px solid var(--cnvs-style-single-border-color);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border {
|
||||
--cnvs-style-single-border-width: 1px;
|
||||
--cnvs-style-single-border-color: #dee2e6;
|
||||
--cnvs-style-single-margin: 2rem;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border:before {
|
||||
position: relative !important;
|
||||
content: "";
|
||||
background-color: var(--cnvs-style-single-border-color);
|
||||
display: block;
|
||||
width: 4rem;
|
||||
height: var(--cnvs-style-single-border-width);
|
||||
margin: var(--cnvs-style-single-margin) auto;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border:after {
|
||||
position: relative !important;
|
||||
content: "";
|
||||
background-color: var(--cnvs-style-single-border-color);
|
||||
display: block;
|
||||
width: 4rem;
|
||||
height: var(--cnvs-style-single-border-width);
|
||||
margin: var(--cnvs-style-single-margin) auto;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignright {
|
||||
border: none;
|
||||
padding-left: var(--cnvs-style-single-margin);
|
||||
border-left: var(--cnvs-style-single-border-width) solid var(--cnvs-style-single-border-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignright:before, .is-style-cnvs-block-single-border.alignright:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignleft {
|
||||
border: none;
|
||||
padding-right: var(--cnvs-style-single-margin);
|
||||
border-right: var(--cnvs-style-single-border-width) solid var(--cnvs-style-single-border-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignleft:before, .is-style-cnvs-block-single-border.alignleft:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-bg-light {
|
||||
--cnvs-style-bg-light-background: #f8f9fa;
|
||||
--cnvs-style-bg-light-padding: 40px;
|
||||
background: var(--cnvs-style-bg-light-background);
|
||||
padding: var(--cnvs-style-bg-light-padding);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-bg-inverse {
|
||||
--cnvs-style-bg-inverse-background: black;
|
||||
--cnvs-style-bg-inverse-color: #fff;
|
||||
--cnvs-style-bg-inverse-padding: 40px;
|
||||
background: var(--cnvs-style-bg-inverse-background);
|
||||
padding: var(--cnvs-style-bg-inverse-padding);
|
||||
color: var(--cnvs-style-bg-inverse-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-shadow {
|
||||
--cnvs-style-shadow-box-shadow: 0 16px 36px 0 rgba(0,0,0,0.08);
|
||||
--cnvs-style-shadow-padding: 40px;
|
||||
-webkit-box-shadow: var(--cnvs-style-shadow-box-shadow);
|
||||
box-shadow: var(--cnvs-style-shadow-box-shadow);
|
||||
padding: var(--cnvs-style-shadow-padding);
|
||||
}
|
||||
|
||||
@media (max-width: 1019.98px) {
|
||||
.is-style-cnvs-block-single-border.alignleft,
|
||||
.is-style-cnvs-block-single-border.alignright {
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.wp-block-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-block-group .wp-block-group__inner-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-block-group .wp-block-group__inner-container > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) and (min-width: 760px) {
|
||||
.wp-block-group > .is-block-content {
|
||||
max-width: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-bordered {
|
||||
--cnvs-style-single-border-color: #dee2e6;
|
||||
border: 1px solid var(--cnvs-style-single-border-color);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border {
|
||||
--cnvs-style-single-border-width: 1px;
|
||||
--cnvs-style-single-border-color: #dee2e6;
|
||||
--cnvs-style-single-margin: 2rem;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border:before {
|
||||
position: relative !important;
|
||||
content: "";
|
||||
background-color: var(--cnvs-style-single-border-color);
|
||||
display: block;
|
||||
width: 4rem;
|
||||
height: var(--cnvs-style-single-border-width);
|
||||
margin: var(--cnvs-style-single-margin) auto;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border:after {
|
||||
position: relative !important;
|
||||
content: "";
|
||||
background-color: var(--cnvs-style-single-border-color);
|
||||
display: block;
|
||||
width: 4rem;
|
||||
height: var(--cnvs-style-single-border-width);
|
||||
margin: var(--cnvs-style-single-margin) auto;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignright {
|
||||
border: none;
|
||||
padding-right: var(--cnvs-style-single-margin);
|
||||
border-right: var(--cnvs-style-single-border-width) solid var(--cnvs-style-single-border-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignright:before, .is-style-cnvs-block-single-border.alignright:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignleft {
|
||||
border: none;
|
||||
padding-left: var(--cnvs-style-single-margin);
|
||||
border-left: var(--cnvs-style-single-border-width) solid var(--cnvs-style-single-border-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignleft:before, .is-style-cnvs-block-single-border.alignleft:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-bg-light {
|
||||
--cnvs-style-bg-light-background: #f8f9fa;
|
||||
--cnvs-style-bg-light-padding: 40px;
|
||||
background: var(--cnvs-style-bg-light-background);
|
||||
padding: var(--cnvs-style-bg-light-padding);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-bg-inverse {
|
||||
--cnvs-style-bg-inverse-background: black;
|
||||
--cnvs-style-bg-inverse-color: #fff;
|
||||
--cnvs-style-bg-inverse-padding: 40px;
|
||||
background: var(--cnvs-style-bg-inverse-background);
|
||||
padding: var(--cnvs-style-bg-inverse-padding);
|
||||
color: var(--cnvs-style-bg-inverse-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-shadow {
|
||||
--cnvs-style-shadow-box-shadow: 0 16px 36px 0 rgba(0,0,0,0.08);
|
||||
--cnvs-style-shadow-padding: 40px;
|
||||
-webkit-box-shadow: var(--cnvs-style-shadow-box-shadow);
|
||||
box-shadow: var(--cnvs-style-shadow-box-shadow);
|
||||
padding: var(--cnvs-style-shadow-padding);
|
||||
}
|
||||
|
||||
@media (max-width: 1019.98px) {
|
||||
.is-style-cnvs-block-single-border.alignleft,
|
||||
.is-style-cnvs-block-single-border.alignright {
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.wp-block-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-block-group .wp-block-group__inner-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-block-group .wp-block-group__inner-container > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) and (min-width: 760px) {
|
||||
.wp-block-group > .is-block-content {
|
||||
max-width: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-bordered {
|
||||
--cnvs-style-single-border-color: #dee2e6;
|
||||
border: 1px solid var(--cnvs-style-single-border-color);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border {
|
||||
--cnvs-style-single-border-width: 1px;
|
||||
--cnvs-style-single-border-color: #dee2e6;
|
||||
--cnvs-style-single-margin: 2rem;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border:before {
|
||||
position: relative !important;
|
||||
content: "";
|
||||
background-color: var(--cnvs-style-single-border-color);
|
||||
display: block;
|
||||
width: 4rem;
|
||||
height: var(--cnvs-style-single-border-width);
|
||||
margin: var(--cnvs-style-single-margin) auto;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border:after {
|
||||
position: relative !important;
|
||||
content: "";
|
||||
background-color: var(--cnvs-style-single-border-color);
|
||||
display: block;
|
||||
width: 4rem;
|
||||
height: var(--cnvs-style-single-border-width);
|
||||
margin: var(--cnvs-style-single-margin) auto;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignright {
|
||||
border: none;
|
||||
padding-left: var(--cnvs-style-single-margin);
|
||||
border-left: var(--cnvs-style-single-border-width) solid var(--cnvs-style-single-border-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignright:before, .is-style-cnvs-block-single-border.alignright:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignleft {
|
||||
border: none;
|
||||
padding-right: var(--cnvs-style-single-margin);
|
||||
border-right: var(--cnvs-style-single-border-width) solid var(--cnvs-style-single-border-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-single-border.alignleft:before, .is-style-cnvs-block-single-border.alignleft:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-bg-light {
|
||||
--cnvs-style-bg-light-background: #f8f9fa;
|
||||
--cnvs-style-bg-light-padding: 40px;
|
||||
background: var(--cnvs-style-bg-light-background);
|
||||
padding: var(--cnvs-style-bg-light-padding);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-bg-inverse {
|
||||
--cnvs-style-bg-inverse-background: black;
|
||||
--cnvs-style-bg-inverse-color: #fff;
|
||||
--cnvs-style-bg-inverse-padding: 40px;
|
||||
background: var(--cnvs-style-bg-inverse-background);
|
||||
padding: var(--cnvs-style-bg-inverse-padding);
|
||||
color: var(--cnvs-style-bg-inverse-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-shadow {
|
||||
--cnvs-style-shadow-box-shadow: 0 16px 36px 0 rgba(0,0,0,0.08);
|
||||
--cnvs-style-shadow-padding: 40px;
|
||||
-webkit-box-shadow: var(--cnvs-style-shadow-box-shadow);
|
||||
box-shadow: var(--cnvs-style-shadow-box-shadow);
|
||||
padding: var(--cnvs-style-shadow-padding);
|
||||
}
|
||||
|
||||
@media (max-width: 1019.98px) {
|
||||
.is-style-cnvs-block-single-border.alignleft,
|
||||
.is-style-cnvs-block-single-border.alignright {
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
!function(e){var r={};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=e,o.c=r,o.d=function(e,r,n){o.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,r){if(1&r&&(e=o(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var t in e)o.d(n,t,function(r){return e[r]}.bind(null,t));return n},o.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(r,"a",r),r},o.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},o.p="",o(o.s=78)}({78:function(e,r,o){e.exports=o(79)},79:function(e,r){var o=wp.i18n.__,n=wp.blocks.registerBlockStyle;n("core/group",{name:"cnvs-block-bordered",label:o("Bordered")}),n("core/group",{name:"cnvs-block-single-border",label:o("Single Border")}),n("core/group",{name:"cnvs-block-bg-light",label:o("Background Light")}),n("core/group",{name:"cnvs-block-bg-inverse",label:o("Background Inverse")}),n("core/group",{name:"cnvs-block-shadow",label:o("Shadow")}),wp.hooks.addFilter("blocks.registerBlockType","change/align/group",(function(e,r){return"core/group"===r?lodash.assign({},e,{supports:lodash.assign({},e.supports,{align:["left","center","right","wide","full"]})}):e}))}});
|
||||
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
|
||||
const {
|
||||
__,
|
||||
} = wp.i18n;
|
||||
|
||||
const {
|
||||
registerBlockStyle,
|
||||
} = wp.blocks;
|
||||
|
||||
registerBlockStyle( 'core/group', {
|
||||
name: 'cnvs-block-bordered',
|
||||
label: __( 'Bordered' ),
|
||||
} );
|
||||
|
||||
registerBlockStyle( 'core/group', {
|
||||
name: 'cnvs-block-single-border',
|
||||
label: __( 'Single Border' ),
|
||||
} );
|
||||
|
||||
registerBlockStyle( 'core/group', {
|
||||
name: 'cnvs-block-bg-light',
|
||||
label: __( 'Background Light' ),
|
||||
} );
|
||||
|
||||
registerBlockStyle( 'core/group', {
|
||||
name: 'cnvs-block-bg-inverse',
|
||||
label: __( 'Background Inverse' ),
|
||||
} );
|
||||
|
||||
registerBlockStyle( 'core/group', {
|
||||
name: 'cnvs-block-shadow',
|
||||
label: __( 'Shadow' ),
|
||||
} );
|
||||
|
||||
wp.hooks.addFilter(
|
||||
'blocks.registerBlockType',
|
||||
'change/align/group',
|
||||
function( settings, name ) {
|
||||
if ( name === 'core/group' ) {
|
||||
return lodash.assign( {}, settings, {
|
||||
supports: lodash.assign( {}, settings.supports, {
|
||||
align: ['left', 'center', 'right', 'wide', 'full'],
|
||||
} ),
|
||||
} );
|
||||
}
|
||||
return settings;
|
||||
}
|
||||
);
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-progress-bar {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-progress-bar {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-progress {
|
||||
--cnvs-progress-background: #f8f9fa;
|
||||
--cnvs-progress-border-radius: .25rem;
|
||||
--cnvs-progress-font-size: .75rem;
|
||||
--cnvs-progress-bar-background: #007bff;
|
||||
--cnvs-progress-bar-color: #fff;
|
||||
--cnvs-progress-striped-bar-background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-progress {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 1rem;
|
||||
overflow: hidden;
|
||||
font-size: var(--cnvs-progress-font-size);
|
||||
background-color: var(--cnvs-progress-background);
|
||||
border-radius: var(--cnvs-progress-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-progress-bar {
|
||||
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-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
color: var(--cnvs-progress-bar-color);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-transition: width .6s ease;
|
||||
transition: width .6s ease;
|
||||
background-color: var(--cnvs-progress-bar-background);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-primary .cnvs-block-progress-bar {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-secondary .cnvs-block-progress-bar {
|
||||
background-color: #6c757d;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-success .cnvs-block-progress-bar {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-info .cnvs-block-progress-bar {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-warning .cnvs-block-progress-bar {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-danger .cnvs-block-progress-bar {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-light .cnvs-block-progress-bar {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-dark .cnvs-block-progress-bar {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.cnvs-block-progress-bar {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-progress-striped .cnvs-block-progress-bar {
|
||||
background-image: var(--cnvs-progress-striped-bar-background-image);
|
||||
background-size: 1rem 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-progress-animated .cnvs-block-progress-bar {
|
||||
-webkit-animation: cnvs-block-progress-stripes 1s linear infinite;
|
||||
animation: cnvs-block-progress-stripes 1s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes cnvs-block-progress-stripes {
|
||||
from {
|
||||
background-position: 1rem 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cnvs-block-progress-stripes {
|
||||
from {
|
||||
background-position: 1rem 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-progress {
|
||||
--cnvs-progress-background: #f8f9fa;
|
||||
--cnvs-progress-border-radius: .25rem;
|
||||
--cnvs-progress-font-size: .75rem;
|
||||
--cnvs-progress-bar-background: #007bff;
|
||||
--cnvs-progress-bar-color: #fff;
|
||||
--cnvs-progress-striped-bar-background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-progress {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 1rem;
|
||||
overflow: hidden;
|
||||
font-size: var(--cnvs-progress-font-size);
|
||||
background-color: var(--cnvs-progress-background);
|
||||
border-radius: var(--cnvs-progress-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-progress-bar {
|
||||
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-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
color: var(--cnvs-progress-bar-color);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-transition: width .6s ease;
|
||||
transition: width .6s ease;
|
||||
background-color: var(--cnvs-progress-bar-background);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-primary .cnvs-block-progress-bar {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-secondary .cnvs-block-progress-bar {
|
||||
background-color: #6c757d;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-success .cnvs-block-progress-bar {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-info .cnvs-block-progress-bar {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-warning .cnvs-block-progress-bar {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-danger .cnvs-block-progress-bar {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-light .cnvs-block-progress-bar {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-progress-dark .cnvs-block-progress-bar {
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.cnvs-block-progress-bar {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-progress-striped .cnvs-block-progress-bar {
|
||||
background-image: var(--cnvs-progress-striped-bar-background-image);
|
||||
background-size: 1rem 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-progress-animated .cnvs-block-progress-bar {
|
||||
-webkit-animation: cnvs-block-progress-stripes 1s linear infinite;
|
||||
animation: cnvs-block-progress-stripes 1s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes cnvs-block-progress-stripes {
|
||||
from {
|
||||
background-position: 1rem 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cnvs-block-progress-stripes {
|
||||
from {
|
||||
background-position: 1rem 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=80)}({1:function(e,t,n){var r;
|
||||
/*!
|
||||
Copyright (c) 2018 Jed Watson.
|
||||
Licensed under the MIT License (MIT), see
|
||||
http://jedwatson.github.io/classnames
|
||||
*/!function(){"use strict";var n={}.hasOwnProperty;function o(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var i=typeof r;if("string"===i||"number"===i)e.push(r);else if(Array.isArray(r)){if(r.length){var c=o.apply(null,r);c&&e.push(c)}}else if("object"===i)if(r.toString===Object.prototype.toString)for(var u in r)n.call(r,u)&&r[u]&&e.push(u);else e.push(r.toString())}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(r=function(){return o}.apply(t,[]))||(e.exports=r)}()},135:function(e,t,n){"use strict";n.r(t);var r=n(1),o=n.n(r);function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function s(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=l(e);if(t){var o=l(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return f(this,n)}}function f(e,t){return!t||"object"!==i(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function l(e){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var p=wp.element,y=p.Component,b=p.Fragment,h=wp.components.ResizableBox,m=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&a(e,t)}(f,e);var t,n,r,i=s(f);function f(){return c(this,f),i.apply(this,arguments)}return t=f,(n=[{key:"render",value:function(){var e=this.props,t=e.setAttributes,n=e.isSelected,r=this.props.className,i=this.props.attributes,c=i.height,u=i.width,a=i.striped,s=i.animated,f=i.displayPercent,l=i.canvasClassName;return r=o()("cnvs-block-progress",{"cnvs-block-progress-striped":a,"cnvs-block-progress-animated":a&&s,"is-selected":n},l,r),wp.element.createElement(b,null,wp.element.createElement(h,{className:r,size:{height:c},minHeight:"1",maxHeight:"20",enable:{bottom:!0},onResizeStop:function(e,n,r,o){t({height:parseInt(c+o.height,10)})}},wp.element.createElement(h,{className:"cnvs-block-progress-bar",size:{width:"".concat(u,"%")},minHeight:"1",maxHeight:"100",enable:{right:!0},onResizeStop:function(e,n,r,o){t({width:Math.min(100,Math.max(0,u+parseInt(100*o.width/jQuery(r).parent().width(),10)))})}},f?"".concat(u,"%"):"")))}}])&&u(t.prototype,n),r&&u(t,r),f}(y);(0,wp.hooks.addFilter)("canvas.customBlock.editRender","canvas/progress/editRender",(function(e,t){return"canvas/progress"===t.name?wp.element.createElement(m,t):e}))},80:function(e,t,n){e.exports=n(135)}});
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import ProgressBlockEdit from './edit.jsx';
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Progress block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender( edit, blockProps ) {
|
||||
if ( 'canvas/progress' === blockProps.name ) {
|
||||
return (
|
||||
<ProgressBlockEdit { ...blockProps } />
|
||||
);
|
||||
}
|
||||
|
||||
return edit;
|
||||
}
|
||||
|
||||
addFilter( 'canvas.customBlock.editRender', 'canvas/progress/editRender', editRender );
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
ResizableBox,
|
||||
} = wp.components;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class ProgressBlockEdit extends Component {
|
||||
render() {
|
||||
const {
|
||||
setAttributes,
|
||||
isSelected,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
className,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
height,
|
||||
width,
|
||||
striped,
|
||||
animated,
|
||||
displayPercent,
|
||||
canvasClassName,
|
||||
} = this.props.attributes;
|
||||
|
||||
className = classnames(
|
||||
'cnvs-block-progress',
|
||||
{
|
||||
'cnvs-block-progress-striped': striped,
|
||||
'cnvs-block-progress-animated': striped && animated,
|
||||
'is-selected': isSelected,
|
||||
},
|
||||
canvasClassName,
|
||||
className
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<ResizableBox
|
||||
className={ className }
|
||||
size={ {
|
||||
height,
|
||||
} }
|
||||
minHeight="1"
|
||||
maxHeight="20"
|
||||
enable={ { bottom: true } }
|
||||
onResizeStop={ ( event, direction, elt, delta ) => {
|
||||
setAttributes( {
|
||||
height: parseInt( height + delta.height, 10 ),
|
||||
} );
|
||||
} }
|
||||
>
|
||||
<ResizableBox
|
||||
className="cnvs-block-progress-bar"
|
||||
size={ {
|
||||
width: `${ width }%`,
|
||||
} }
|
||||
minHeight="1"
|
||||
maxHeight="100"
|
||||
enable={ { right: true } }
|
||||
onResizeStop={ ( event, direction, elt, delta ) => {
|
||||
setAttributes( {
|
||||
width: Math.min( 100, Math.max( 0, width + parseInt( 100 * delta.width / jQuery( elt ).parent().width(), 10 ) ) ),
|
||||
} );
|
||||
} }
|
||||
>
|
||||
{ displayPercent ? `${ width }%` : '' }
|
||||
</ResizableBox>
|
||||
</ResizableBox>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
<?php
|
||||
/**
|
||||
* Progress block template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $options - layout options
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
if ( $attributes['striped'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-progress-striped';
|
||||
|
||||
if ( isset( $attributes['animated'] ) && $attributes['animated'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-progress-animated';
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
|
||||
|
||||
<div class="cnvs-block-progress-bar" role="progressbar" aria-valuenow="<?php echo esc_attr( $attributes['width'] ); ?>" aria-valuemin="0" aria-valuemax="<?php echo esc_attr( $attributes['width'] ); ?>">
|
||||
<?php
|
||||
if ( $attributes['displayPercent'] ) {
|
||||
echo esc_html( $attributes['width'] . '%' );
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
|
||||
const {
|
||||
__,
|
||||
} = wp.i18n;
|
||||
|
||||
const {
|
||||
Component,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
Icon,
|
||||
Toolbar,
|
||||
DropdownMenu,
|
||||
} = wp.components;
|
||||
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class ExtendAlignmentToolbar extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
}
|
||||
|
||||
render() {
|
||||
const DEFAULT_ALIGNMENT_CONTROLS = [
|
||||
{
|
||||
icon: <Icon icon="editor-textcolor" />,
|
||||
title: __( 'Default Align Text' ),
|
||||
align: 'default',
|
||||
},
|
||||
{
|
||||
icon: <Icon icon="editor-alignleft" />,
|
||||
title: __( 'Align Text Left' ),
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
icon: <Icon icon="editor-aligncenter" />,
|
||||
title: __( 'Align Text Center' ),
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
icon: <Icon icon="editor-alignright" />,
|
||||
title: __( 'Align Text Right' ),
|
||||
align: 'right',
|
||||
},
|
||||
];
|
||||
|
||||
const {
|
||||
value,
|
||||
onChange,
|
||||
alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
|
||||
} = this.props;
|
||||
|
||||
function applyOrUnset( align ) {
|
||||
return () => onChange( value === align ? undefined : align );
|
||||
}
|
||||
|
||||
const activeAlignment = alignmentControls.find( function( control ) {
|
||||
return ( value === control.align || ( 'default' === control.align && ( 'none' === value || 'default' === value || ! value ) ) );
|
||||
} );
|
||||
|
||||
return (
|
||||
<Toolbar>
|
||||
<DropdownMenu
|
||||
icon={ activeAlignment ? activeAlignment.icon : <Icon icon="editor-textcolor" /> }
|
||||
label={ activeAlignment ? activeAlignment.title : __( 'Change text alignment' ) }
|
||||
controls={ alignmentControls.map( ( control ) => {
|
||||
const { align } = control;
|
||||
|
||||
const isActive = ( value === align || ( 'default' === align && ( 'none' === value || 'default' === value || ! value ) ) );
|
||||
|
||||
return {
|
||||
...control,
|
||||
isActive,
|
||||
onClick: applyOrUnset( align ),
|
||||
};
|
||||
} ) }
|
||||
/>
|
||||
</Toolbar>
|
||||
);
|
||||
}
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-section-heading .cnvs-section-title:before {
|
||||
z-index: initial !important;
|
||||
}
|
||||
|
||||
.cnvs-block-section-heading .cnvs-section-title > .cnvs-section-plain {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cnvs-block-section-heading .cnvs-section-plain {
|
||||
display: inline-block;
|
||||
min-width: 5px;
|
||||
}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-section-heading .cnvs-section-title:before {
|
||||
z-index: initial !important;
|
||||
}
|
||||
|
||||
.cnvs-block-section-heading .cnvs-section-title > .cnvs-section-plain {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cnvs-block-section-heading .cnvs-section-plain {
|
||||
display: inline-block;
|
||||
min-width: 5px;
|
||||
}
|
||||
+778
@@ -0,0 +1,778 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-section-heading {
|
||||
--cnvs-section-heading-color: #000000;
|
||||
--cnvs-section-heading-border-color: #e9ecef;
|
||||
--cnvs-section-heading-icon-color: #000000;
|
||||
--cnvs-section-heading-accent-block-backround: #000000;
|
||||
--cnvs-section-heading-accent-block-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-section-heading {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-heading .cnvs-section-title {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
color: var(--cnvs-section-heading-color);
|
||||
}
|
||||
|
||||
.cnvs-block-section-heading .cnvs-section-title > span {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cnvs-block-section-heading.haligncenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cnvs-block-section-heading.halignright {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-2,
|
||||
.section-heading-default-style-2 .is-style-cnvs-block-section-heading-default {
|
||||
border-bottom: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-3,
|
||||
.section-heading-default-style-3 .is-style-cnvs-block-section-heading-default {
|
||||
border-bottom: 4px solid var(--cnvs-section-heading-border-color);
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4 .cnvs-section-title,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4:after,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 0 0 1em;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4:after,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default:after {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.haligncenter,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.haligncenter:before, .is-style-cnvs-block-section-heading-4.haligncenter:after,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.haligncenter:before,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 0 0 1em;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.haligncenter:after,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.halignright,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.halignright:before,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 0 0 1em;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.halignright:before,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.halignright:after,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.halignright:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5 .cnvs-section-title,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5:after,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default:after {
|
||||
content: '';
|
||||
border-top: 4px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 0 0 1em;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5:after,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default:after {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.haligncenter,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.haligncenter:before, .is-style-cnvs-block-section-heading-5.haligncenter:after,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.haligncenter:before,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
content: '';
|
||||
border-top: 4px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 0 0 1em;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.haligncenter:after,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.halignright,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.halignright:before,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
content: '';
|
||||
border-top: 4px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 0 0 1em;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.halignright:before,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.halignright:after,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.halignright:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-6,
|
||||
.section-heading-default-style-6 .is-style-cnvs-block-section-heading-default {
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-7,
|
||||
.section-heading-default-style-7 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-7 .cnvs-section-title,
|
||||
.section-heading-default-style-7 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
border-bottom: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-7.haligncenter,
|
||||
.section-heading-default-style-7 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-7.halignright,
|
||||
.section-heading-default-style-7 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8 .cnvs-section-title,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
border-left: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding: 0.125rem 0 0.125rem 1em;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8:after,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.haligncenter,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.haligncenter:before, .is-style-cnvs-block-section-heading-8.haligncenter:after,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.haligncenter:before,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.haligncenter .cnvs-section-title,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.haligncenter .cnvs-section-title {
|
||||
border-right: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-left: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding-right: 1em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.halignright,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.halignright:before,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.halignright .cnvs-section-title,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.halignright .cnvs-section-title {
|
||||
border-right: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-left: none;
|
||||
padding-right: 1em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.halignright:after,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.halignright:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-9,
|
||||
.section-heading-default-style-9 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-9 .cnvs-section-title,
|
||||
.section-heading-default-style-9 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
position: relative;
|
||||
padding-right: 1.75em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-9 .cnvs-section-title:before,
|
||||
.section-heading-default-style-9 .is-style-cnvs-block-section-heading-default .cnvs-section-title:before {
|
||||
content: '';
|
||||
margin-left: 0.5em;
|
||||
height: calc(0.875em + 2px);
|
||||
width: 2px;
|
||||
background: var(--cnvs-section-heading-icon-color);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.4375em;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-9 .cnvs-section-title:after,
|
||||
.section-heading-default-style-9 .is-style-cnvs-block-section-heading-default .cnvs-section-title:after {
|
||||
content: '';
|
||||
height: 2px;
|
||||
width: calc(0.875em + 2px);
|
||||
right: 0;
|
||||
position: absolute;
|
||||
background: var(--cnvs-section-heading-icon-color);
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-9.haligncenter,
|
||||
.section-heading-default-style-9 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-9.halignright,
|
||||
.section-heading-default-style-9 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-10,
|
||||
.section-heading-default-style-10 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-10 .cnvs-section-title,
|
||||
.section-heading-default-style-10 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
position: relative;
|
||||
padding: 0.5em 1em;
|
||||
color: var(--cnvs-section-heading-accent-block-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-10 .cnvs-section-title:before,
|
||||
.section-heading-default-style-10 .is-style-cnvs-block-section-heading-default .cnvs-section-title:before {
|
||||
position: absolute;
|
||||
background-color: var(--cnvs-section-heading-accent-block-backround);
|
||||
-webkit-transform: skew(-15deg);
|
||||
transform: skew(-15deg);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-10.haligncenter,
|
||||
.section-heading-default-style-10 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-10.halignright,
|
||||
.section-heading-default-style-10 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11 .cnvs-section-title,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
position: relative;
|
||||
color: var(--cnvs-section-heading-accent-block-color);
|
||||
padding: 0.5em 1em;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11 .cnvs-section-title:before,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default .cnvs-section-title:before {
|
||||
position: absolute;
|
||||
background-color: var(--cnvs-section-heading-accent-block-backround);
|
||||
-webkit-transform: skew(-15deg);
|
||||
transform: skew(-15deg);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11:after,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 0 0 1em;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11:after,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default:after {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.haligncenter,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.haligncenter:before, .is-style-cnvs-block-section-heading-11.haligncenter:after,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.haligncenter:before,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 0 0 1em;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.haligncenter:after,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.halignright,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.halignright:before,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 0 0 1em;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.halignright:before,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.halignright:after,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.halignright:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-12,
|
||||
.section-heading-default-style-12 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-12 .cnvs-section-title,
|
||||
.section-heading-default-style-12 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
background-color: var(--cnvs-section-heading-accent-block-backround);
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--cnvs-section-heading-accent-block-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-12.haligncenter,
|
||||
.section-heading-default-style-12 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-12.halignright,
|
||||
.section-heading-default-style-12 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-13,
|
||||
.section-heading-default-style-13 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-13 .cnvs-section-title,
|
||||
.section-heading-default-style-13 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
border: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--cnvs-section-heading-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-13.haligncenter,
|
||||
.section-heading-default-style-13 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-13.halignright,
|
||||
.section-heading-default-style-13 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-14,
|
||||
.section-heading-default-style-14 .is-style-cnvs-block-section-heading-default {
|
||||
background-color: var(--cnvs-section-heading-accent-block-backround);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-14 .cnvs-section-title,
|
||||
.section-heading-default-style-14 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--cnvs-section-heading-accent-block-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-15,
|
||||
.section-heading-default-style-15 .is-style-cnvs-block-section-heading-default {
|
||||
border: 1px solid var(--cnvs-section-heading-border-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-15 .cnvs-section-title,
|
||||
.section-heading-default-style-15 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--cnvs-section-heading-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16 .cnvs-section-title,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
border-left: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding: 0.125rem 0 0.125rem 1em;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16:after,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-bottom: 1px solid var(--cnvs-section-heading-border-color);
|
||||
height: 0.25rem;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.haligncenter,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.haligncenter:before, .is-style-cnvs-block-section-heading-16.haligncenter:after,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.haligncenter:before,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-bottom: 1px solid var(--cnvs-section-heading-border-color);
|
||||
height: 0.25rem;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.haligncenter .cnvs-section-title,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.haligncenter .cnvs-section-title {
|
||||
border-right: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-left: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding-right: 1em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.halignright,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.halignright:before,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-bottom: 1px solid var(--cnvs-section-heading-border-color);
|
||||
height: 0.25rem;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.halignright .cnvs-section-title,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.halignright .cnvs-section-title {
|
||||
border-right: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-left: none;
|
||||
padding-right: 1em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.halignright:after,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.halignright:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17 .cnvs-section-title,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17 .cnvs-section-title:not([contenteditable="true"]),
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default .cnvs-section-title:not([contenteditable="true"]) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17 .cnvs-section-title:after,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default .cnvs-section-title:after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
border-bottom: 1px solid var(--cnvs-section-heading-border-color);
|
||||
width: 100%;
|
||||
max-width: 30%;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17.haligncenter .cnvs-section-title:after,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default.haligncenter .cnvs-section-title:after {
|
||||
right: 50%;
|
||||
-webkit-transform: translate(50%, 0);
|
||||
transform: translate(50%, 0);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17.halignright .cnvs-section-title:after,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default.halignright .cnvs-section-title:after {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17.haligncenter,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17.halignright,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@@ -0,0 +1,778 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-section-heading {
|
||||
--cnvs-section-heading-color: #000000;
|
||||
--cnvs-section-heading-border-color: #e9ecef;
|
||||
--cnvs-section-heading-icon-color: #000000;
|
||||
--cnvs-section-heading-accent-block-backround: #000000;
|
||||
--cnvs-section-heading-accent-block-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-section-heading {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-section-heading .cnvs-section-title {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
color: var(--cnvs-section-heading-color);
|
||||
}
|
||||
|
||||
.cnvs-block-section-heading .cnvs-section-title > span {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cnvs-block-section-heading.haligncenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cnvs-block-section-heading.halignright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-2,
|
||||
.section-heading-default-style-2 .is-style-cnvs-block-section-heading-default {
|
||||
border-bottom: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-3,
|
||||
.section-heading-default-style-3 .is-style-cnvs-block-section-heading-default {
|
||||
border-bottom: 4px solid var(--cnvs-section-heading-border-color);
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4 .cnvs-section-title,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4:after,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 1em 0 0;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4:after,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default:after {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.haligncenter,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.haligncenter:before, .is-style-cnvs-block-section-heading-4.haligncenter:after,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.haligncenter:before,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 1em 0 0;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.haligncenter:after,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.halignright,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.halignright:before,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 1em 0 0;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.halignright:before,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-4.halignright:after,
|
||||
.section-heading-default-style-4 .is-style-cnvs-block-section-heading-default.halignright:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5 .cnvs-section-title,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5:after,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default:after {
|
||||
content: '';
|
||||
border-top: 4px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 1em 0 0;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5:after,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default:after {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.haligncenter,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.haligncenter:before, .is-style-cnvs-block-section-heading-5.haligncenter:after,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.haligncenter:before,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
content: '';
|
||||
border-top: 4px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 1em 0 0;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.haligncenter:after,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.halignright,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.halignright:before,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
content: '';
|
||||
border-top: 4px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 1em 0 0;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.halignright:before,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-5.halignright:after,
|
||||
.section-heading-default-style-5 .is-style-cnvs-block-section-heading-default.halignright:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-6,
|
||||
.section-heading-default-style-6 .is-style-cnvs-block-section-heading-default {
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-7,
|
||||
.section-heading-default-style-7 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-7 .cnvs-section-title,
|
||||
.section-heading-default-style-7 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
border-bottom: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-7.haligncenter,
|
||||
.section-heading-default-style-7 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-7.halignright,
|
||||
.section-heading-default-style-7 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8 .cnvs-section-title,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
border-right: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding: 0.125rem 1em 0.125rem 0;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8:after,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.haligncenter,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.haligncenter:before, .is-style-cnvs-block-section-heading-8.haligncenter:after,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.haligncenter:before,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.haligncenter .cnvs-section-title,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.haligncenter .cnvs-section-title {
|
||||
border-left: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-right: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.halignright,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.halignright:before,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.halignright .cnvs-section-title,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.halignright .cnvs-section-title {
|
||||
border-left: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-right: none;
|
||||
padding-left: 1em;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-8.halignright:after,
|
||||
.section-heading-default-style-8 .is-style-cnvs-block-section-heading-default.halignright:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-9,
|
||||
.section-heading-default-style-9 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-9 .cnvs-section-title,
|
||||
.section-heading-default-style-9 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
position: relative;
|
||||
padding-left: 1.75em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-9 .cnvs-section-title:before,
|
||||
.section-heading-default-style-9 .is-style-cnvs-block-section-heading-default .cnvs-section-title:before {
|
||||
content: '';
|
||||
margin-right: 0.5em;
|
||||
height: calc(0.875em + 2px);
|
||||
width: 2px;
|
||||
background: var(--cnvs-section-heading-icon-color);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0.4375em;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-9 .cnvs-section-title:after,
|
||||
.section-heading-default-style-9 .is-style-cnvs-block-section-heading-default .cnvs-section-title:after {
|
||||
content: '';
|
||||
height: 2px;
|
||||
width: calc(0.875em + 2px);
|
||||
left: 0;
|
||||
position: absolute;
|
||||
background: var(--cnvs-section-heading-icon-color);
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-9.haligncenter,
|
||||
.section-heading-default-style-9 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-9.halignright,
|
||||
.section-heading-default-style-9 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-10,
|
||||
.section-heading-default-style-10 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-10 .cnvs-section-title,
|
||||
.section-heading-default-style-10 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
position: relative;
|
||||
padding: 0.5em 1em;
|
||||
color: var(--cnvs-section-heading-accent-block-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-10 .cnvs-section-title:before,
|
||||
.section-heading-default-style-10 .is-style-cnvs-block-section-heading-default .cnvs-section-title:before {
|
||||
position: absolute;
|
||||
background-color: var(--cnvs-section-heading-accent-block-backround);
|
||||
-webkit-transform: skew(-15deg);
|
||||
transform: skew(-15deg);
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-10.haligncenter,
|
||||
.section-heading-default-style-10 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-10.halignright,
|
||||
.section-heading-default-style-10 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11 .cnvs-section-title,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
position: relative;
|
||||
color: var(--cnvs-section-heading-accent-block-color);
|
||||
padding: 0.5em 1em;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11 .cnvs-section-title:before,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default .cnvs-section-title:before {
|
||||
position: absolute;
|
||||
background-color: var(--cnvs-section-heading-accent-block-backround);
|
||||
-webkit-transform: skew(-15deg);
|
||||
transform: skew(-15deg);
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11:after,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 1em 0 0;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11:after,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default:after {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.haligncenter,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.haligncenter:before, .is-style-cnvs-block-section-heading-11.haligncenter:after,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.haligncenter:before,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 1em 0 0;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.haligncenter:after,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.halignright,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.halignright:before,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
margin: 0 1em 0 0;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 1em;
|
||||
flex: 1 0 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.halignright:before,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-11.halignright:after,
|
||||
.section-heading-default-style-11 .is-style-cnvs-block-section-heading-default.halignright:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-12,
|
||||
.section-heading-default-style-12 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-12 .cnvs-section-title,
|
||||
.section-heading-default-style-12 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
background-color: var(--cnvs-section-heading-accent-block-backround);
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--cnvs-section-heading-accent-block-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-12.haligncenter,
|
||||
.section-heading-default-style-12 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-12.halignright,
|
||||
.section-heading-default-style-12 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-13,
|
||||
.section-heading-default-style-13 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-13 .cnvs-section-title,
|
||||
.section-heading-default-style-13 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
border: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--cnvs-section-heading-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-13.haligncenter,
|
||||
.section-heading-default-style-13 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-13.halignright,
|
||||
.section-heading-default-style-13 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-14,
|
||||
.section-heading-default-style-14 .is-style-cnvs-block-section-heading-default {
|
||||
background-color: var(--cnvs-section-heading-accent-block-backround);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-14 .cnvs-section-title,
|
||||
.section-heading-default-style-14 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--cnvs-section-heading-accent-block-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-15,
|
||||
.section-heading-default-style-15 .is-style-cnvs-block-section-heading-default {
|
||||
border: 1px solid var(--cnvs-section-heading-border-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-15 .cnvs-section-title,
|
||||
.section-heading-default-style-15 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--cnvs-section-heading-color);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16 .cnvs-section-title,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
border-right: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding: 0.125rem 1em 0.125rem 0;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16:after,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-bottom: 1px solid var(--cnvs-section-heading-border-color);
|
||||
height: 0.25rem;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.haligncenter,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.haligncenter:before, .is-style-cnvs-block-section-heading-16.haligncenter:after,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.haligncenter:before,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.haligncenter:after {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-bottom: 1px solid var(--cnvs-section-heading-border-color);
|
||||
height: 0.25rem;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.haligncenter .cnvs-section-title,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.haligncenter .cnvs-section-title {
|
||||
border-left: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-right: 1px solid var(--cnvs-section-heading-border-color);
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.halignright,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.halignright:before,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.halignright:before {
|
||||
content: '';
|
||||
border-top: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-bottom: 1px solid var(--cnvs-section-heading-border-color);
|
||||
height: 0.25rem;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.halignright .cnvs-section-title,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.halignright .cnvs-section-title {
|
||||
border-left: 1px solid var(--cnvs-section-heading-border-color);
|
||||
border-right: none;
|
||||
padding-left: 1em;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-16.halignright:after,
|
||||
.section-heading-default-style-16 .is-style-cnvs-block-section-heading-default.halignright:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17 .cnvs-section-title,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default .cnvs-section-title {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17 .cnvs-section-title:not([contenteditable="true"]),
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default .cnvs-section-title:not([contenteditable="true"]) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17 .cnvs-section-title:after,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default .cnvs-section-title:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
border-bottom: 1px solid var(--cnvs-section-heading-border-color);
|
||||
width: 100%;
|
||||
max-width: 30%;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17.haligncenter .cnvs-section-title:after,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default.haligncenter .cnvs-section-title:after {
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17.halignright .cnvs-section-title:after,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default.halignright .cnvs-section-title:after {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17.haligncenter,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default.haligncenter {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-style-cnvs-block-section-heading-17.halignright,
|
||||
.section-heading-default-style-17 .is-style-cnvs-block-section-heading-default.halignright {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import SectionHeadingBlockEdit from './edit.jsx';
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Styled Block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender(edit, blockProps) {
|
||||
if ('canvas/section-heading' === blockProps.name) {
|
||||
return (
|
||||
<SectionHeadingBlockEdit {...blockProps} />
|
||||
);
|
||||
}
|
||||
|
||||
return edit;
|
||||
}
|
||||
|
||||
addFilter('canvas.customBlock.editRender', 'canvas/section-heading/editRender', editRender);
|
||||
@@ -0,0 +1,144 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
import ExtendAlignmentToolbar from './aligntoolbar';
|
||||
import ExtendTagToolbar from './tagtoolbar';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
|
||||
const {
|
||||
createBlock
|
||||
} = wp.blocks;
|
||||
|
||||
const {
|
||||
__,
|
||||
} = wp.i18n;
|
||||
|
||||
const {
|
||||
Component,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
BlockControls,
|
||||
} = wp.blockEditor;
|
||||
|
||||
const { RichText } = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
class SectionHeadingBlockEdit extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
|
||||
this.state = {
|
||||
tagName: canvasBSHLocalize.sectionHeadingTag
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
setAttributes
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
className,
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
halign,
|
||||
tag,
|
||||
content,
|
||||
canvasClassName,
|
||||
} = attributes;
|
||||
|
||||
this.state.tagName = tag ? tag : '';
|
||||
|
||||
// If tag default.
|
||||
if ( 'default' === tag || 'none' === tag || ! tag ) {
|
||||
this.state.tagName = canvasBSHLocalize.sectionHeadingTag;
|
||||
}
|
||||
|
||||
let classAlign = halign ? `halign${halign}` : '';
|
||||
|
||||
// If align default.
|
||||
if ( 'default' === halign || 'none' === halign || ! halign ) {
|
||||
classAlign = canvasBSHLocalize.sectionHeadingAlign;
|
||||
}
|
||||
|
||||
className = classnames(
|
||||
'cnvs-block-section-heading',
|
||||
classAlign,
|
||||
canvasClassName,
|
||||
className
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<BlockControls>
|
||||
<ExtendAlignmentToolbar
|
||||
value={halign}
|
||||
onChange={(val) => {
|
||||
let align= (val === undefined) ? 'default' : val;
|
||||
|
||||
setAttributes({ halign: align })
|
||||
}}
|
||||
/>
|
||||
<ExtendTagToolbar
|
||||
value={tag}
|
||||
onChange={(val) => {
|
||||
let type= (val === undefined) ? 'default' : val;
|
||||
|
||||
setAttributes({ tag: type })
|
||||
}}
|
||||
/>
|
||||
</BlockControls>
|
||||
|
||||
<this.state.tagName className={className}>
|
||||
<div className="cnvs-section-title">
|
||||
<RichText
|
||||
tagName="span"
|
||||
className="cnvs-section-plain"
|
||||
onChange={(newContent) => {
|
||||
setAttributes({ content: newContent });
|
||||
}}
|
||||
value={content}
|
||||
placeholder={__('Write heading…')}
|
||||
/>
|
||||
</div>
|
||||
</this.state.tagName>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
jQuery(() => {
|
||||
function sectionHeadingTransforms(settings) {
|
||||
if (settings.name !== 'canvas/section-heading') {
|
||||
return settings;
|
||||
}
|
||||
|
||||
settings.transforms = {
|
||||
from: [
|
||||
{
|
||||
type: 'block',
|
||||
blocks: ['core/heading', 'core/paragraph'],
|
||||
transform: function (attributes) {
|
||||
return createBlock('canvas/section-heading', {
|
||||
content: attributes.content,
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return settings;
|
||||
}
|
||||
|
||||
wp.hooks.addFilter('canvas.customBlock.registerData', 'canvas/section-heading/transforms', sectionHeadingTransforms);
|
||||
});
|
||||
|
||||
export default SectionHeadingBlockEdit;
|
||||
@@ -0,0 +1,36 @@
|
||||
<?php
|
||||
/**
|
||||
* Section Heading template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $content - inner blocks
|
||||
* @var $options - layout options
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
$halign = isset( $attributes['halign'] ) ? 'halign' . $attributes['halign'] : '';
|
||||
$block_tag = isset( $attributes['tag'] ) ? $attributes['tag'] : '';
|
||||
$content = isset( $attributes['content'] ) ? $attributes['content'] : '';
|
||||
|
||||
$class_name = $attributes['className'];
|
||||
|
||||
// If align default.
|
||||
if ( 'haligndefault' === $halign || 'halignnone' === $halign || ! $halign ) {
|
||||
$halign = apply_filters( 'canvas_section_heading_align', 'halignleft' );
|
||||
}
|
||||
|
||||
// If tag default.
|
||||
if ( 'default' === $block_tag || 'none' === $block_tag || ! $block_tag ) {
|
||||
$block_tag = apply_filters( 'canvas_section_heading_tag', 'h2' );
|
||||
}
|
||||
|
||||
// Set align class.
|
||||
$class_name .= ' ' . $halign;
|
||||
?>
|
||||
|
||||
<<?php echo esc_attr( $block_tag ); ?> class="<?php echo esc_attr( $class_name ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
|
||||
<span class="cnvs-section-title">
|
||||
<span><?php echo (string) $content; // XSS. ?></span>
|
||||
</span>
|
||||
</<?php echo esc_attr( $block_tag ); ?>>
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
|
||||
const {
|
||||
__,
|
||||
} = wp.i18n;
|
||||
|
||||
const {
|
||||
Component
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
Icon,
|
||||
Toolbar,
|
||||
DropdownMenu,
|
||||
Path, SVG
|
||||
} = wp.components;
|
||||
|
||||
function HeadingLevelIcon( level ) {
|
||||
const levelToPath = {
|
||||
1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
|
||||
2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
|
||||
3: 'M12.1 12.2c.4.3.8.5 1.2.7.4.2.9.3 1.4.3.5 0 1-.1 1.4-.3.3-.1.5-.5.5-.8 0-.2 0-.4-.1-.6-.1-.2-.3-.3-.5-.4-.3-.1-.7-.2-1-.3-.5-.1-1-.1-1.5-.1V9.1c.7.1 1.5-.1 2.2-.4.4-.2.6-.5.6-.9 0-.3-.1-.6-.4-.8-.3-.2-.7-.3-1.1-.3-.4 0-.8.1-1.1.3-.4.2-.7.4-1.1.6l-1.2-1.4c.5-.4 1.1-.7 1.6-.9.5-.2 1.2-.3 1.8-.3.5 0 1 .1 1.6.2.4.1.8.3 1.2.5.3.2.6.5.8.8.2.3.3.7.3 1.1 0 .5-.2.9-.5 1.3-.4.4-.9.7-1.5.9v.1c.6.1 1.2.4 1.6.8.4.4.7.9.7 1.5 0 .4-.1.8-.3 1.2-.2.4-.5.7-.9.9-.4.3-.9.4-1.3.5-.5.1-1 .2-1.6.2-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1l1.1-1.4zM7 9H3V5H1v10h2v-4h4v4h2V5H7v4z',
|
||||
4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z',
|
||||
5: 'M12.1 12.2c.4.3.7.5 1.1.7.4.2.9.3 1.3.3.5 0 1-.1 1.4-.4.4-.3.6-.7.6-1.1 0-.4-.2-.9-.6-1.1-.4-.3-.9-.4-1.4-.4H14c-.1 0-.3 0-.4.1l-.4.1-.5.2-1-.6.3-5h6.4v1.9h-4.3L14 8.8c.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.5 0 .9.1 1.4.2.4.1.8.3 1.1.6.3.2.6.6.8.9.2.4.3.9.3 1.4 0 .5-.1 1-.3 1.4-.2.4-.5.8-.9 1.1-.4.3-.8.5-1.3.7-.5.2-1 .3-1.5.3-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1-.1-.1 1-1.5 1-1.5zM9 15H7v-4H3v4H1V5h2v4h4V5h2v10z',
|
||||
6: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z',
|
||||
};
|
||||
|
||||
if ( ! levelToPath.hasOwnProperty( level ) ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" >
|
||||
<Path d={ levelToPath[ level ] } />
|
||||
</SVG>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class ExtendTagToolbar extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
}
|
||||
|
||||
render() {
|
||||
const DEFAULT_TAG_CONTROLS = [
|
||||
{
|
||||
icon: <Icon icon="editor-code" />,
|
||||
title: __( 'Default' ),
|
||||
type: 'default',
|
||||
},
|
||||
{
|
||||
icon: HeadingLevelIcon( 1 ),
|
||||
title: __( 'H1' ),
|
||||
type: 'h1',
|
||||
},
|
||||
{
|
||||
icon: HeadingLevelIcon( 2 ),
|
||||
title: __( 'H2' ),
|
||||
type: 'h2',
|
||||
},
|
||||
{
|
||||
icon: HeadingLevelIcon( 3 ),
|
||||
title: __( 'H3' ),
|
||||
type: 'h3',
|
||||
},
|
||||
{
|
||||
icon: HeadingLevelIcon( 4 ),
|
||||
title: __( 'H4' ),
|
||||
type: 'h4',
|
||||
},
|
||||
{
|
||||
icon: HeadingLevelIcon( 5 ),
|
||||
title: __( 'H5' ),
|
||||
type: 'h5',
|
||||
},
|
||||
{
|
||||
icon: HeadingLevelIcon( 6 ),
|
||||
title: __( 'H6' ),
|
||||
type: 'h6',
|
||||
},
|
||||
{
|
||||
icon: <Icon icon="minus" />,
|
||||
title: __( 'DIV' ),
|
||||
type: 'div',
|
||||
},
|
||||
{
|
||||
icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M11 5v7H9.5C7.6 12 6 10.4 6 8.5S7.6 5 9.5 5H11m8-2H9.5C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3z" /></SVG>,
|
||||
title: __( 'P' ),
|
||||
type: 'p',
|
||||
},
|
||||
];
|
||||
|
||||
const {
|
||||
value,
|
||||
onChange,
|
||||
tagControls = DEFAULT_TAG_CONTROLS,
|
||||
} = this.props;
|
||||
|
||||
function applyOrUnset( type ) {
|
||||
return () => onChange( value === type ? undefined : type );
|
||||
}
|
||||
|
||||
const activeTag = tagControls.find( function( control ) {
|
||||
return ( value === control.type || ( 'default' === control.type && ( 'none' === value || 'default' === value || ! value ) ) );
|
||||
} );
|
||||
|
||||
return (
|
||||
<Toolbar>
|
||||
<DropdownMenu
|
||||
icon={ activeTag ? activeTag.icon : <Icon icon="editor-code" /> }
|
||||
label={ activeTag ? activeTag.title : __( 'Change type tag' ) }
|
||||
controls={ tagControls.map( ( control ) => {
|
||||
const { type } = control;
|
||||
|
||||
const isActive = ( value === type || ( 'default' === type && ( 'none' === value || 'default' === value || ! value ) ) );
|
||||
|
||||
return {
|
||||
...control,
|
||||
isActive,
|
||||
onClick: applyOrUnset( type ),
|
||||
};
|
||||
} ) }
|
||||
/>
|
||||
</Toolbar>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
!function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=82)}({1:function(t,e,n){var r;
|
||||
/*!
|
||||
Copyright (c) 2018 Jed Watson.
|
||||
Licensed under the MIT License (MIT), see
|
||||
http://jedwatson.github.io/classnames
|
||||
*/!function(){"use strict";var n={}.hasOwnProperty;function o(){for(var t=[],e=0;e<arguments.length;e++){var r=arguments[e];if(r){var u=typeof r;if("string"===u||"number"===u)t.push(r);else if(Array.isArray(r)){if(r.length){var c=o.apply(null,r);c&&t.push(c)}}else if("object"===u)if(r.toString===Object.prototype.toString)for(var i in r)n.call(r,i)&&r[i]&&t.push(i);else t.push(r.toString())}}return t.join(" ")}t.exports?(o.default=o,t.exports=o):void 0===(r=function(){return o}.apply(e,[]))||(t.exports=r)}()},131:function(t,e,n){"use strict";n.r(e);var r=n(1),o=n.n(r);function u(t){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function c(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function f(t,e){return(f=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function a(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,r=p(t);if(e){var o=p(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return l(this,n)}}function l(t,e){return!e||"object"!==u(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function p(t){return(p=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var s=wp.element,y=s.Component,b=s.Fragment,m=wp.blockEditor.InnerBlocks,v=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&f(t,e)}(l,t);var e,n,r,u=a(l);function l(){return c(this,l),u.apply(this,arguments)}return e=l,(n=[{key:"render",value:function(){var t=this.props.className,e=this.props.attributes.canvasClassName;return t=o()("cnvs-block-tab",e,t),wp.element.createElement(b,null,wp.element.createElement("div",{className:t},wp.element.createElement(m,{templateLock:!1})))}}])&&i(e.prototype,n),r&&i(e,r),l}(y);function d(t){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function h(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function O(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function w(t,e){return(w=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function g(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,r=_(t);if(e){var o=_(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return j(this,n)}}function j(t,e){return!e||"object"!==d(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function _(t){return(_=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var S=wp.element.Component,P=wp.blockEditor.InnerBlocks,k=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&w(t,e)}(u,t);var e,n,r,o=g(u);function u(){return h(this,u),o.apply(this,arguments)}return e=u,(n=[{key:"render",value:function(){return wp.element.createElement("div",{className:"cnvs-block-tab"},wp.element.createElement(P.Content,null))}}])&&O(e.prototype,n),r&&O(e,r),u}(S),E=wp.hooks.addFilter;E("canvas.customBlock.editRender","canvas/tab/editRender",(function(t,e){return"canvas/tab"===e.name?wp.element.createElement(v,e):t})),E("canvas.customBlock.registerData","canvas/tab/registerData",(function(t){return"canvas/tab"===t.name&&(t.save=k),t}))},82:function(t,e,n){t.exports=n(131)}});
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import TabBlockEdit from './edit.jsx';
|
||||
import TabBlockSave from './save.jsx';
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Tab block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender( edit, blockProps ) {
|
||||
if ( 'canvas/tab' === blockProps.name ) {
|
||||
return (
|
||||
<TabBlockEdit { ...blockProps } />
|
||||
);
|
||||
}
|
||||
|
||||
return edit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom block register data for Tab block.
|
||||
*
|
||||
* @param {Object} blockData Block data.
|
||||
*
|
||||
* @return {Object} Block data.
|
||||
*/
|
||||
function registerData( blockData ) {
|
||||
if ( 'canvas/tab' === blockData.name ) {
|
||||
blockData.save = TabBlockSave;
|
||||
}
|
||||
|
||||
return blockData;
|
||||
}
|
||||
|
||||
addFilter( 'canvas.customBlock.editRender', 'canvas/tab/editRender', editRender );
|
||||
addFilter( 'canvas.customBlock.registerData', 'canvas/tab/registerData', registerData );
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { Component, Fragment } = wp.element;
|
||||
|
||||
const {
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class TabBlockEdit extends Component {
|
||||
render() {
|
||||
let {
|
||||
className,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
canvasClassName,
|
||||
} = this.props.attributes;
|
||||
|
||||
className = classnames(
|
||||
'cnvs-block-tab',
|
||||
canvasClassName,
|
||||
className
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={ className }>
|
||||
<InnerBlocks
|
||||
templateLock={ false }
|
||||
/>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<?php
|
||||
/**
|
||||
* Tab block template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $content - inner blocks
|
||||
* @var $options - layout options
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
?>
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
|
||||
<?php echo (string) $content; // XSS. ?>
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { Component } = wp.element;
|
||||
|
||||
const {
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class TabBlockSave extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="cnvs-block-tab">
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs {
|
||||
--cnvs-tabs-border-width: 1px;
|
||||
--cnvs-tabs-border-color: #dee2e6;
|
||||
--cnvs-tabs-border-radius: 0.25rem;
|
||||
--cnvs-tabs-button-font-size: 1rem;
|
||||
--cnvs-tabs-button-color: #adb5bd;
|
||||
--cnvs-tabs-button-hover-color: #212529;
|
||||
--cnvs-tabs-button-active-color: #000;
|
||||
--cnvs-tabs-button-active-background: #e9ecef;
|
||||
--cnvs-tabs-button-pills-color: #adb5bd;
|
||||
--cnvs-tabs-button-pills-active-color: #000;
|
||||
--cnvs-tabs-button-pills-active-background: #e9ecef;
|
||||
--cnvs-pc-tabs-button-active-border-bottom-color: #FFFFFF;
|
||||
--cnvs-pc-tabs-button-active-background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 1.5rem;
|
||||
display: block;
|
||||
border: var(--cnvs-tabs-border-width) solid transparent;
|
||||
border-color: var(--cnvs-tabs-border-color);
|
||||
padding: 1rem 1.5rem;
|
||||
line-height: 1;
|
||||
font-size: var(--cnvs-tabs-button-font-size);
|
||||
color: var(--cnvs-tabs-button-color);
|
||||
text-decoration: none;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border-top-right-radius: var(--cnvs-tabs-border-radius);
|
||||
border-top-left-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:hover, .cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:focus {
|
||||
color: var(--cnvs-tabs-button-hover-color);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
color: var(--cnvs-tabs-button-active-color);
|
||||
background-color: var(--cnvs-tabs-button-active-background);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
padding: 0.75rem 1rem;
|
||||
line-height: 1;
|
||||
color: var(--cnvs-tabs-button-pills-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content .block-editor-block-list__layout:empty:after {
|
||||
min-height: 50px;
|
||||
content: 'Click on the block to enter text';
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
border-bottom: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
-webkit-transform: translateY(var(--cnvs-tabs-border-width));
|
||||
transform: translateY(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:not(.cnvs-block-tabs-button-active) {
|
||||
border-color: transparent;
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
border-bottom-color: var(--cnvs-pc-tabs-button-active-border-bottom-color);
|
||||
background-color: var(--cnvs-pc-tabs-button-active-background-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 30%;
|
||||
flex: 0 0 30%;
|
||||
border-bottom: none;
|
||||
border-left: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-left-color: transparent;
|
||||
border-radius: var(--cnvs-tabs-border-radius) 0 0 var(--cnvs-tabs-border-radius);
|
||||
-webkit-transform: translateX(var(--cnvs-tabs-border-width));
|
||||
transform: translateX(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button-active {
|
||||
border-bottom-color: var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-content {
|
||||
margin-right: 5%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 65%;
|
||||
flex: 0 0 65%;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons {
|
||||
border-bottom: none;
|
||||
border-left: none;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills.cnvs-block-tabs-vertical .cnvs-block-tabs-button-active {
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs {
|
||||
--cnvs-tabs-border-width: 1px;
|
||||
--cnvs-tabs-border-color: #dee2e6;
|
||||
--cnvs-tabs-border-radius: 0.25rem;
|
||||
--cnvs-tabs-button-font-size: 1rem;
|
||||
--cnvs-tabs-button-color: #adb5bd;
|
||||
--cnvs-tabs-button-hover-color: #212529;
|
||||
--cnvs-tabs-button-active-color: #000;
|
||||
--cnvs-tabs-button-active-background: #e9ecef;
|
||||
--cnvs-tabs-button-pills-color: #adb5bd;
|
||||
--cnvs-tabs-button-pills-active-color: #000;
|
||||
--cnvs-tabs-button-pills-active-background: #e9ecef;
|
||||
--cnvs-pc-tabs-button-active-border-bottom-color: #FFFFFF;
|
||||
--cnvs-pc-tabs-button-active-background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 1.5rem;
|
||||
display: block;
|
||||
border: var(--cnvs-tabs-border-width) solid transparent;
|
||||
border-color: var(--cnvs-tabs-border-color);
|
||||
padding: 1rem 1.5rem;
|
||||
line-height: 1;
|
||||
font-size: var(--cnvs-tabs-button-font-size);
|
||||
color: var(--cnvs-tabs-button-color);
|
||||
text-decoration: none;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border-top-left-radius: var(--cnvs-tabs-border-radius);
|
||||
border-top-right-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:hover, .cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:focus {
|
||||
color: var(--cnvs-tabs-button-hover-color);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
color: var(--cnvs-tabs-button-active-color);
|
||||
background-color: var(--cnvs-tabs-button-active-background);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
padding: 0.75rem 1rem;
|
||||
line-height: 1;
|
||||
color: var(--cnvs-tabs-button-pills-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content .block-editor-block-list__layout:empty:after {
|
||||
min-height: 50px;
|
||||
content: 'Click on the block to enter text';
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
border-bottom: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
-webkit-transform: translateY(var(--cnvs-tabs-border-width));
|
||||
transform: translateY(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:not(.cnvs-block-tabs-button-active) {
|
||||
border-color: transparent;
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
border-bottom-color: var(--cnvs-pc-tabs-button-active-border-bottom-color);
|
||||
background-color: var(--cnvs-pc-tabs-button-active-background-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 30%;
|
||||
flex: 0 0 30%;
|
||||
border-bottom: none;
|
||||
border-right: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-right-color: transparent;
|
||||
border-radius: var(--cnvs-tabs-border-radius) 0 0 var(--cnvs-tabs-border-radius);
|
||||
-webkit-transform: translateX(var(--cnvs-tabs-border-width));
|
||||
transform: translateX(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button-active {
|
||||
border-bottom-color: var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-content {
|
||||
margin-left: 5%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 65%;
|
||||
flex: 0 0 65%;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons {
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills.cnvs-block-tabs-vertical .cnvs-block-tabs-button-active {
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs {
|
||||
--cnvs-tabs-border-width: 1px;
|
||||
--cnvs-tabs-border-color: #dee2e6;
|
||||
--cnvs-tabs-border-radius: 0.25rem;
|
||||
--cnvs-tabs-button-font-size: 1rem;
|
||||
--cnvs-tabs-button-color: #adb5bd;
|
||||
--cnvs-tabs-button-hover-color: #212529;
|
||||
--cnvs-tabs-button-active-color: #000;
|
||||
--cnvs-tabs-button-active-background: #e9ecef;
|
||||
--cnvs-tabs-button-pills-color: #adb5bd;
|
||||
--cnvs-tabs-button-pills-active-color: #000;
|
||||
--cnvs-tabs-button-pills-active-background: #e9ecef;
|
||||
--cnvs-pc-tabs-button-active-border-bottom-color: #FFFFFF;
|
||||
--cnvs-pc-tabs-button-active-background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button a {
|
||||
display: block;
|
||||
border: var(--cnvs-tabs-border-width) solid transparent;
|
||||
border-color: var(--cnvs-tabs-border-color);
|
||||
padding: 1rem 1.5rem;
|
||||
line-height: 1;
|
||||
font-size: var(--cnvs-tabs-button-font-size);
|
||||
color: var(--cnvs-tabs-button-color);
|
||||
text-decoration: none;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border-top-right-radius: var(--cnvs-tabs-border-radius);
|
||||
border-top-left-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button a:hover, .cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button a:focus {
|
||||
color: var(--cnvs-tabs-button-hover-color);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
color: var(--cnvs-tabs-button-active-color);
|
||||
background-color: var(--cnvs-tabs-button-active-background);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content > .cnvs-block-tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content > .cnvs-block-tab.cnvs-block-tab-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content > .cnvs-block-tab > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button a {
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
padding: 0.75rem 1rem;
|
||||
line-height: 1;
|
||||
color: var(--cnvs-tabs-button-pills-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
border-bottom: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
-webkit-transform: translateY(var(--cnvs-tabs-border-width));
|
||||
transform: translateY(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:not(.cnvs-block-tabs-button-active) a {
|
||||
border-color: transparent;
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
border-bottom-color: var(--cnvs-pc-tabs-button-active-border-bottom-color);
|
||||
background-color: var(--cnvs-pc-tabs-button-active-background-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 30%;
|
||||
flex: 0 0 30%;
|
||||
border-bottom: none;
|
||||
border-left: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button a {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-left-color: transparent;
|
||||
border-radius: var(--cnvs-tabs-border-radius) 0 0 var(--cnvs-tabs-border-radius);
|
||||
-webkit-transform: translateX(var(--cnvs-tabs-border-width));
|
||||
transform: translateX(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button-active a {
|
||||
border-bottom-color: var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-content {
|
||||
margin-right: 5%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 65%;
|
||||
flex: 0 0 65%;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons {
|
||||
border-bottom: none;
|
||||
border-left: none;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills.cnvs-block-tabs-vertical .cnvs-block-tabs-button-active a {
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs {
|
||||
--cnvs-tabs-border-width: 1px;
|
||||
--cnvs-tabs-border-color: #dee2e6;
|
||||
--cnvs-tabs-border-radius: 0.25rem;
|
||||
--cnvs-tabs-button-font-size: 1rem;
|
||||
--cnvs-tabs-button-color: #adb5bd;
|
||||
--cnvs-tabs-button-hover-color: #212529;
|
||||
--cnvs-tabs-button-active-color: #000;
|
||||
--cnvs-tabs-button-active-background: #e9ecef;
|
||||
--cnvs-tabs-button-pills-color: #adb5bd;
|
||||
--cnvs-tabs-button-pills-active-color: #000;
|
||||
--cnvs-tabs-button-pills-active-background: #e9ecef;
|
||||
--cnvs-pc-tabs-button-active-border-bottom-color: #FFFFFF;
|
||||
--cnvs-pc-tabs-button-active-background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button a {
|
||||
display: block;
|
||||
border: var(--cnvs-tabs-border-width) solid transparent;
|
||||
border-color: var(--cnvs-tabs-border-color);
|
||||
padding: 1rem 1.5rem;
|
||||
line-height: 1;
|
||||
font-size: var(--cnvs-tabs-button-font-size);
|
||||
color: var(--cnvs-tabs-button-color);
|
||||
text-decoration: none;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border-top-left-radius: var(--cnvs-tabs-border-radius);
|
||||
border-top-right-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button a:hover, .cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button a:focus {
|
||||
color: var(--cnvs-tabs-button-hover-color);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
color: var(--cnvs-tabs-button-active-color);
|
||||
background-color: var(--cnvs-tabs-button-active-background);
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content > .cnvs-block-tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content > .cnvs-block-tab.cnvs-block-tab-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs .cnvs-block-tabs-content > .cnvs-block-tab > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button a {
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
padding: 0.75rem 1rem;
|
||||
line-height: 1;
|
||||
color: var(--cnvs-tabs-button-pills-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
border-bottom: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button {
|
||||
margin-bottom: 0;
|
||||
-webkit-transform: translateY(var(--cnvs-tabs-border-width));
|
||||
transform: translateY(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button:not(.cnvs-block-tabs-button-active) a {
|
||||
border-color: transparent;
|
||||
}
|
||||
.cnvs-block-tabs .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
border-bottom-color: var(--cnvs-pc-tabs-button-active-border-bottom-color);
|
||||
background-color: var(--cnvs-pc-tabs-button-active-background-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 30%;
|
||||
flex: 0 0 30%;
|
||||
border-bottom: none;
|
||||
border-right: var(--cnvs-tabs-border-width) solid var(--cnvs-tabs-border-color);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button a {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-right-color: transparent;
|
||||
border-radius: var(--cnvs-tabs-border-radius) 0 0 var(--cnvs-tabs-border-radius);
|
||||
-webkit-transform: translateX(var(--cnvs-tabs-border-width));
|
||||
transform: translateX(var(--cnvs-tabs-border-width));
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-buttons .cnvs-block-tabs-button-active a {
|
||||
border-bottom-color: var(--cnvs-tabs-border-color);
|
||||
}
|
||||
.cnvs-block-tabs.cnvs-block-tabs-vertical .cnvs-block-tabs-content {
|
||||
margin-left: 5%;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 65%;
|
||||
flex: 0 0 65%;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons {
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills .cnvs-block-tabs-buttons .cnvs-block-tabs-button.cnvs-block-tabs-button-active a {
|
||||
color: var(--cnvs-tabs-button-pills-active-color);
|
||||
background-color: var(--cnvs-tabs-button-pills-active-background);
|
||||
}
|
||||
.cnvs-block-tabs.is-style-cnvs-block-tabs-pills.cnvs-block-tabs-vertical .cnvs-block-tabs-button-active a {
|
||||
border-radius: var(--cnvs-tabs-border-radius);
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import TabsBlockEdit from './edit.jsx';
|
||||
import TabsBlockSave from './save.jsx';
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Tabs block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender( edit, blockProps ) {
|
||||
if ( 'canvas/tabs' === blockProps.name ) {
|
||||
return (
|
||||
<TabsBlockEdit { ...blockProps } />
|
||||
);
|
||||
}
|
||||
|
||||
return edit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom block register data for Tabs block.
|
||||
*
|
||||
* @param {Object} blockData Block data.
|
||||
*
|
||||
* @return {Object} Block data.
|
||||
*/
|
||||
function registerData( blockData ) {
|
||||
if ( 'canvas/tabs' === blockData.name ) {
|
||||
blockData.save = TabsBlockSave;
|
||||
}
|
||||
|
||||
return blockData;
|
||||
}
|
||||
|
||||
addFilter( 'canvas.customBlock.editRender', 'canvas/tabs/editRender', editRender );
|
||||
addFilter( 'canvas.customBlock.registerData', 'canvas/tabs/registerData', registerData );
|
||||
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
PanelBody,
|
||||
RangeControl,
|
||||
} = wp.components;
|
||||
|
||||
const {
|
||||
InspectorControls,
|
||||
InnerBlocks,
|
||||
RichText,
|
||||
} = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class TabsBlockEdit extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
|
||||
this.state = {
|
||||
// fix for WP 5.2
|
||||
// styles control generates error
|
||||
showInnerBlocks: !! this.props.clientId,
|
||||
};
|
||||
|
||||
this.getLayoutTemplate = this.getLayoutTemplate.bind( this );
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the template configuration for a given section layout.
|
||||
*
|
||||
* @return {Object[]} Layout configuration.
|
||||
*/
|
||||
getLayoutTemplate() {
|
||||
const {
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
tabsData,
|
||||
} = attributes;
|
||||
|
||||
const result = [];
|
||||
|
||||
console.log(tabsData);
|
||||
|
||||
for ( let k = 0; k < tabsData.length; k++ ) {
|
||||
result.push( [
|
||||
'canvas/tab',
|
||||
{},
|
||||
] );
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
setAttributes,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
className,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
tabActive,
|
||||
tabsData,
|
||||
tabsPosition,
|
||||
canvasClassName,
|
||||
} = this.props.attributes;
|
||||
|
||||
className = classnames(
|
||||
'cnvs-block-tabs',
|
||||
`cnvs-block-tabs-${ tabsData.length }`,
|
||||
'vertical' === tabsPosition ? `cnvs-block-tabs-${ tabsPosition }` : '',
|
||||
canvasClassName,
|
||||
className,
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<InspectorControls>
|
||||
<PanelBody>
|
||||
<RangeControl
|
||||
label={ __( 'Tabs' ) }
|
||||
value={ tabsData.length }
|
||||
min={ 1 }
|
||||
max={ 20 }
|
||||
onChange={ ( val ) => {
|
||||
const newTabsData = [];
|
||||
|
||||
for ( let k = 0; k < val; k += 1 ) {
|
||||
if ( tabsData[ k ] ) {
|
||||
newTabsData.push( tabsData[ k ] );
|
||||
} else {
|
||||
newTabsData.push( `Tab ${ k + 1 }` );
|
||||
}
|
||||
}
|
||||
|
||||
setAttributes( { tabsData: newTabsData } );
|
||||
} }
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
<div className={ className }>
|
||||
<div className="cnvs-block-tabs-buttons">
|
||||
{
|
||||
tabsData.map( ( title, i ) => {
|
||||
const selected = tabActive === i;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
classnames(
|
||||
'cnvs-block-tabs-button',
|
||||
{
|
||||
'cnvs-block-tabs-button-active': selected,
|
||||
}
|
||||
)
|
||||
}
|
||||
key={ `tab_button_${ i }` }
|
||||
>
|
||||
<RichText
|
||||
tagName="span"
|
||||
placeholder={ __( 'Tab label' ) }
|
||||
value={ title }
|
||||
unstableOnFocus={ () => setAttributes( { tabActive: i } ) }
|
||||
onChange={ ( value ) => {
|
||||
if ( tabsData[ i ] ) {
|
||||
const newTabsData = tabsData.map( ( oldTabData, newIndex ) => {
|
||||
if ( i === newIndex ) {
|
||||
return value;
|
||||
}
|
||||
|
||||
return oldTabData;
|
||||
} );
|
||||
|
||||
setAttributes( {
|
||||
tabsData: newTabsData,
|
||||
} );
|
||||
}
|
||||
} }
|
||||
keepPlaceholderOnFocus
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} )
|
||||
}
|
||||
</div>
|
||||
<div className="cnvs-block-tabs-content">
|
||||
{ this.state.showInnerBlocks ? (
|
||||
<InnerBlocks
|
||||
template={ this.getLayoutTemplate() }
|
||||
templateLock="all"
|
||||
allowedBlocks={ [ 'canvas/tab' ] }
|
||||
/>
|
||||
) : __( 'Tab content' ) }
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
{ `
|
||||
[data-block="${ this.props.clientId }"] > .canvas-component-custom-blocks > .cnvs-block-tabs > .cnvs-block-tabs-content > .block-editor-inner-blocks > .block-editor-block-list__layout > div {
|
||||
display: none;
|
||||
}
|
||||
[data-block="${ this.props.clientId }"] > .canvas-component-custom-blocks > .cnvs-block-tabs > .cnvs-block-tabs-content > .block-editor-inner-blocks > .block-editor-block-list__layout > :nth-child(${ tabActive + 1 }) {
|
||||
display: block;
|
||||
}
|
||||
` }
|
||||
</style>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Block Tabs
|
||||
*/
|
||||
( function( $ ) {
|
||||
|
||||
$( document ).ready( function() {
|
||||
|
||||
$( document ).on( 'click', '.cnvs-block-tabs .cnvs-block-tabs-button a', function( e ) {
|
||||
e.preventDefault();
|
||||
|
||||
var $tab = $( this ).closest( '.cnvs-block-tabs-button' );
|
||||
var $tabs = $tab.closest( '.cnvs-block-tabs' );
|
||||
|
||||
$tab
|
||||
.addClass( 'cnvs-block-tabs-button-active' )
|
||||
.siblings()
|
||||
.removeClass( 'cnvs-block-tabs-button-active' );
|
||||
$tabs
|
||||
.find( '.cnvs-block-tabs-content' ).children( '.cnvs-block-tab:eq(' + $tab.index() + ')' )
|
||||
.addClass( 'cnvs-block-tab-active' )
|
||||
.siblings()
|
||||
.removeClass( 'cnvs-block-tab-active' );
|
||||
} );
|
||||
|
||||
$( '.cnvs-block-tabs .cnvs-block-tabs-button-active a' ).click();
|
||||
|
||||
} );
|
||||
} )( jQuery );
|
||||
@@ -0,0 +1,45 @@
|
||||
<?php
|
||||
/**
|
||||
* Tabs block template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $content - inner blocks
|
||||
* @var $options - layout options
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
$tabs_data = is_array( $attributes['tabsData'] ) ? $attributes['tabsData'] : array();
|
||||
|
||||
if ( $tabs_data && count( $tabs_data ) ) {
|
||||
$attributes['className'] .= ' cnvs-block-tabs-' . count( $tabs_data );
|
||||
}
|
||||
|
||||
if ( 'vertical' === $attributes['tabsPosition'] ) {
|
||||
$attributes['className'] .= ' cnvs-block-tabs-' . $attributes['tabsPosition'];
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
|
||||
<div class="cnvs-block-tabs-buttons">
|
||||
<?php
|
||||
foreach ( $tabs_data as $i => $title ) {
|
||||
$tab_class = 'cnvs-block-tabs-button';
|
||||
|
||||
if ( $i === $attributes['tabActive'] ) {
|
||||
$tab_class .= ' cnvs-block-tabs-button-active';
|
||||
}
|
||||
|
||||
?>
|
||||
<div class="<?php echo esc_attr( $tab_class ); ?>">
|
||||
<a href="#"><?php echo (string) $title; // XSS. ?></a>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="cnvs-block-tabs-content">
|
||||
<?php echo (string) $content; // XSS. ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { Component } = wp.element;
|
||||
|
||||
const {
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class TabsBlockSave extends Component {
|
||||
render() {
|
||||
return <InnerBlocks.Content />;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=84)}({136:function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function c(e,t){return(c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function i(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=a(e);if(t){var o=a(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return l(this,n)}}function l(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function a(e){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}n.r(t);var f=wp.i18n.__,p=wp.element,s=p.Component,y=p.Fragment,d=wp.components,b=d.PanelBody,m=d.SelectControl,v=d.Placeholder,w=wp.blockEditor.InspectorControls,h=window.canvasWidgetizedBlock.sidebars,g=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&c(e,t)}(a,e);var t,n,r,l=i(a);function a(){return o(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"render",value:function(){var e=this.props,t=e.attributes,n=e.setAttributes,r=t.area,o=[{label:f("Select Widgetized Area"),value:""}];return h&&Object.keys(h).length&&Object.keys(h).forEach((function(e){o.push({label:h[e].name,value:h[e].id})})),wp.element.createElement(y,null,wp.element.createElement(w,null,wp.element.createElement(b,null,wp.element.createElement(m,{label:f("Widgetized Area"),value:r,options:o,onChange:function(e){n({area:e})}}))),wp.element.createElement(v,null,wp.element.createElement(m,{label:f("Widgetized Area"),value:r,options:o,onChange:function(e){n({area:e})}})))}}])&&u(t.prototype,n),r&&u(t,r),a}(s);(0,wp.hooks.addFilter)("canvas.customBlock.editRender","canvas/widgetized-area/editRender",(function(e,t){return"canvas/widgetized-area"===t.name?wp.element.createElement(g,t):e}))},84:function(e,t,n){e.exports=n(136)}});
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const {
|
||||
addFilter,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import WidgetizedAreaBlockEdit from './edit.jsx';
|
||||
|
||||
/**
|
||||
* Custom block Edit output for Widgetized Area block.
|
||||
*
|
||||
* @param {JSX} edit Original block edit.
|
||||
* @param {Object} blockProps Block data.
|
||||
*
|
||||
* @return {JSX} Block edit.
|
||||
*/
|
||||
function editRender( edit, blockProps ) {
|
||||
if ( 'canvas/widgetized-area' === blockProps.name ) {
|
||||
return (
|
||||
<WidgetizedAreaBlockEdit { ...blockProps } />
|
||||
);
|
||||
}
|
||||
|
||||
return edit;
|
||||
}
|
||||
|
||||
addFilter( 'canvas.customBlock.editRender', 'canvas/widgetized-area/editRender', editRender );
|
||||
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
PanelBody,
|
||||
SelectControl,
|
||||
Placeholder,
|
||||
} = wp.components;
|
||||
|
||||
const {
|
||||
InspectorControls,
|
||||
} = wp.blockEditor;
|
||||
|
||||
const {
|
||||
sidebars,
|
||||
} = window.canvasWidgetizedBlock;
|
||||
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class WidgetizedAreaBlockEdit extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
attributes,
|
||||
setAttributes,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
area,
|
||||
} = attributes;
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: __( 'Select Widgetized Area' ),
|
||||
value: '',
|
||||
},
|
||||
];
|
||||
|
||||
if ( sidebars && Object.keys( sidebars ).length ) {
|
||||
Object.keys( sidebars ).forEach( ( name ) => {
|
||||
options.push( {
|
||||
label: sidebars[ name ].name,
|
||||
value: sidebars[ name ].id,
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<InspectorControls>
|
||||
<PanelBody>
|
||||
<SelectControl
|
||||
label={ __( 'Widgetized Area' ) }
|
||||
value={ area }
|
||||
options={ options }
|
||||
onChange={ ( val ) => { setAttributes( { area: val } ) } }
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
<Placeholder>
|
||||
<SelectControl
|
||||
label={ __( 'Widgetized Area' ) }
|
||||
value={ area }
|
||||
options={ options }
|
||||
onChange={ ( val ) => { setAttributes( { area: val } ) } }
|
||||
/>
|
||||
</Placeholder>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<?php
|
||||
/**
|
||||
* Widgetized Area block template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $options - layout options
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
?>
|
||||
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>" <?php echo ( isset( $attributes['anchor'] ) ? ' id="' . esc_attr( $attributes['anchor'] ) . '"' : '' ); ?>>
|
||||
<?php
|
||||
dynamic_sidebar( $attributes['area'] );
|
||||
?>
|
||||
</div>
|
||||
@@ -0,0 +1,145 @@
|
||||
<?php
|
||||
/**
|
||||
* Alert Block.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize Alert block.
|
||||
*/
|
||||
class CNVS_Block_Alert {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'init', array( $this, 'init' ) );
|
||||
add_filter( 'canvas_register_block_type', array( $this, 'register_block_type' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function init() {
|
||||
// Editor Scripts.
|
||||
wp_register_script(
|
||||
'canvas-block-alert-editor-script',
|
||||
plugins_url( 'block-alert/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor', 'lodash', 'jquery' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-alert/block.js' ),
|
||||
true
|
||||
);
|
||||
|
||||
wp_register_style(
|
||||
'canvas-block-alert-editor-style',
|
||||
plugins_url( 'block-alert/block-editor.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-alert/block-editor.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-alert-editor-style', 'rtl', 'replace' );
|
||||
|
||||
// Styles.
|
||||
wp_register_style(
|
||||
'canvas-block-alert-style',
|
||||
plugins_url( 'block-alert/block.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-alert/block.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-alert-style', 'rtl', 'replace' );
|
||||
|
||||
// Scripts.
|
||||
wp_register_script( 'canvas-block-alert-script', plugin_dir_url( __FILE__ ) . 'block-alert/public-block-alert.js', array( 'jquery' ), cnvs_get_setting( 'version' ), true );
|
||||
}
|
||||
|
||||
/**
|
||||
* Register block
|
||||
*
|
||||
* @param array $blocks all registered blocks.
|
||||
* @return array
|
||||
*/
|
||||
public function register_block_type( $blocks ) {
|
||||
$blocks[] = array(
|
||||
'name' => 'canvas/alert',
|
||||
'title' => esc_html__( 'Alert', 'canvas' ),
|
||||
'description' => '',
|
||||
'category' => 'canvas',
|
||||
'keywords' => array(),
|
||||
'icon' => '
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M11 15H13V17H11V15ZM11 7H13V13H11V7ZM11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" />
|
||||
</svg>
|
||||
',
|
||||
'supports' => array(
|
||||
'className' => true,
|
||||
'anchor' => true,
|
||||
'html' => false,
|
||||
'canvasSpacings' => true,
|
||||
'canvasBorder' => true,
|
||||
'canvasResponsive' => true,
|
||||
),
|
||||
'styles' => array(
|
||||
array(
|
||||
'name' => 'cnvs-block-alert-primary',
|
||||
'label' => esc_html__( 'Primary', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-alert-success',
|
||||
'label' => esc_html__( 'Success', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-alert-info',
|
||||
'label' => esc_html__( 'Info', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-alert-warning',
|
||||
'label' => esc_html__( 'Warning', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-alert-danger',
|
||||
'label' => esc_html__( 'Danger', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-alert-dark',
|
||||
'label' => esc_html__( 'Dark', 'canvas' ),
|
||||
),
|
||||
),
|
||||
'location' => array(),
|
||||
|
||||
'sections' => array(
|
||||
'general' => array(
|
||||
'title' => esc_html__( 'Block Settings', 'canvas' ),
|
||||
'priority' => 5,
|
||||
'open' => true,
|
||||
),
|
||||
),
|
||||
'layouts' => array(),
|
||||
|
||||
// Set fields just for add block attributes.
|
||||
// Editor render for this block is custom JSX
|
||||
// so we don't need to render fields automatically.
|
||||
'fields' => array(
|
||||
array(
|
||||
'key' => 'dismissible',
|
||||
'label' => esc_html__( 'Dismissible', 'canvas' ),
|
||||
'type' => 'toggle',
|
||||
'default' => false,
|
||||
'section' => 'general',
|
||||
),
|
||||
),
|
||||
'template' => dirname( __FILE__ ) . '/block-alert/render.php',
|
||||
|
||||
// enqueue registered scripts/styles.
|
||||
'style' => 'canvas-block-alert-style',
|
||||
'script' => is_admin() ? '' : 'canvas-block-alert-script',
|
||||
'editor_style' => 'canvas-block-alert-editor-style',
|
||||
'editor_script' => 'canvas-block-alert-editor-script',
|
||||
);
|
||||
|
||||
return $blocks;
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_Alert();
|
||||
@@ -0,0 +1,178 @@
|
||||
<?php
|
||||
/**
|
||||
* Collapsibles Block.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize Collapsibles block.
|
||||
*/
|
||||
class CNVS_Block_Collapsibles {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'init', array( $this, 'init' ) );
|
||||
add_filter( 'canvas_register_block_type', array( $this, 'register_block_type' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function init() {
|
||||
// Editor Scripts.
|
||||
wp_register_script(
|
||||
'canvas-block-collapsibles-editor-script',
|
||||
plugins_url( 'block-collapsibles/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-collapsibles/block.js' ),
|
||||
true
|
||||
);
|
||||
|
||||
wp_register_script(
|
||||
'canvas-block-collapsible-editor-script',
|
||||
plugins_url( 'block-collapsible/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-collapsible/block.js' ),
|
||||
true
|
||||
);
|
||||
|
||||
// Editor Styles.
|
||||
wp_register_style(
|
||||
'canvas-block-collapsibles-editor-style',
|
||||
plugins_url( 'block-collapsibles/block-editor.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-collapsibles/block-editor.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-collapsibles-editor-style', 'rtl', 'replace' );
|
||||
|
||||
// Styles.
|
||||
wp_register_style(
|
||||
'canvas-block-collapsibles-style',
|
||||
plugins_url( 'block-collapsibles/block.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-collapsibles/block.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-collapsibles-style', 'rtl', 'replace' );
|
||||
|
||||
// Scripts.
|
||||
wp_register_script( 'canvas-block-collapsibles-script', plugin_dir_url( __FILE__ ) . 'block-collapsibles/public-block-collapsibles.js', array( 'jquery' ), cnvs_get_setting( 'version' ), true );
|
||||
}
|
||||
|
||||
/**
|
||||
* Register block
|
||||
*
|
||||
* @param array $blocks all registered blocks.
|
||||
* @return array
|
||||
*/
|
||||
public function register_block_type( $blocks ) {
|
||||
$blocks[] = array(
|
||||
'name' => 'canvas/collapsibles',
|
||||
'title' => esc_html__( 'Collapsibles', 'canvas' ),
|
||||
'description' => '',
|
||||
'category' => 'canvas',
|
||||
'keywords' => array(),
|
||||
'icon' => '
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M19 15V17H5V15H19ZM21 5H3V7H21V5ZM21 9H3V11H21V9ZM21 13H3V19H21V13Z" />
|
||||
</svg>
|
||||
',
|
||||
'supports' => array(
|
||||
'className' => true,
|
||||
'anchor' => true,
|
||||
'html' => false,
|
||||
'canvasSpacings' => true,
|
||||
'canvasBorder' => true,
|
||||
'canvasResponsive' => true,
|
||||
),
|
||||
'styles' => array(),
|
||||
'location' => array(),
|
||||
|
||||
'sections' => array(
|
||||
'general' => array(
|
||||
'title' => esc_html__( 'Block Settings', 'canvas' ),
|
||||
'priority' => 5,
|
||||
'open' => true,
|
||||
),
|
||||
),
|
||||
'layouts' => array(),
|
||||
|
||||
// Set fields just for add block attributes.
|
||||
// Editor render for this block is custom JSX
|
||||
// so we don't need to render fields automatically.
|
||||
'fields' => array(
|
||||
array(
|
||||
'key' => 'count',
|
||||
'label' => esc_html__( 'Collapsibles', 'canvas' ),
|
||||
'type' => 'number',
|
||||
'min' => 1,
|
||||
'max' => 20,
|
||||
'default' => 2,
|
||||
'section' => 'general',
|
||||
),
|
||||
),
|
||||
'template' => dirname( __FILE__ ) . '/block-collapsibles/render.php',
|
||||
|
||||
// enqueue registered scripts/styles.
|
||||
'style' => 'canvas-block-collapsibles-style',
|
||||
'script' => is_admin() ? '' : 'canvas-block-collapsibles-script',
|
||||
'editor_script' => 'canvas-block-collapsibles-editor-script',
|
||||
'editor_style' => 'canvas-block-collapsibles-editor-style',
|
||||
);
|
||||
|
||||
$blocks[] = array(
|
||||
'name' => 'canvas/collapsible',
|
||||
'title' => esc_html__( 'Collapsible', 'canvas' ),
|
||||
'description' => '',
|
||||
'category' => 'canvas',
|
||||
'keywords' => array(),
|
||||
'icon' => '
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M19 15V17H5V15H19ZM21 5H3V7H21V5ZM21 9H3V11H21V9ZM21 13H3V19H21V13Z" />
|
||||
</svg>
|
||||
',
|
||||
'supports' => array(
|
||||
'inserter' => false,
|
||||
'reusable' => false,
|
||||
'className' => true,
|
||||
'anchor' => true,
|
||||
'canvasSpacings' => true,
|
||||
'canvasBorder' => true,
|
||||
'canvasResponsive' => true,
|
||||
),
|
||||
'parent' => array(
|
||||
'canvas/collapsibles',
|
||||
),
|
||||
'styles' => array(),
|
||||
'location' => array(),
|
||||
|
||||
'sections' => array(),
|
||||
'layouts' => array(),
|
||||
'fields' => array(
|
||||
array(
|
||||
'key' => 'title',
|
||||
'type' => 'type-string',
|
||||
'default' => '',
|
||||
),
|
||||
array(
|
||||
'key' => 'opened',
|
||||
'label' => esc_html__( 'Opened', 'canvas' ),
|
||||
'type' => 'toggle',
|
||||
'default' => false,
|
||||
),
|
||||
),
|
||||
'template' => dirname( __FILE__ ) . '/block-collapsible/render.php',
|
||||
|
||||
// enqueue registered scripts/styles.
|
||||
'editor_script' => 'canvas-block-collapsible-editor-script',
|
||||
);
|
||||
|
||||
return $blocks;
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_Collapsibles();
|
||||
@@ -0,0 +1,61 @@
|
||||
<?php
|
||||
/**
|
||||
* Cover Block.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize Cover block.
|
||||
*/
|
||||
class CNVS_Block_Cover {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
|
||||
add_action( 'wp_enqueue_scripts', array( $this, 'wp_enqueue_scripts' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function enqueue_block_editor_assets() {
|
||||
// Editor Scripts.
|
||||
wp_enqueue_script(
|
||||
'canvas-block-cover-editor-script',
|
||||
plugins_url( 'block-cover/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor', 'lodash', 'jquery' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-cover/block.js' ),
|
||||
true
|
||||
);
|
||||
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'canvas-block-cover-editor-style',
|
||||
plugins_url( 'block-cover/block-editor.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-cover/block-editor.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-cover-editor-style', 'rtl', 'replace' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue assets for the front-end.
|
||||
*/
|
||||
public function wp_enqueue_scripts() {
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'canvas-block-cover-style',
|
||||
plugins_url( 'block-cover/block.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-cover/block.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-cover-style', 'rtl', 'replace' );
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_Cover();
|
||||
@@ -0,0 +1,61 @@
|
||||
<?php
|
||||
/**
|
||||
* Group Block.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize Group block.
|
||||
*/
|
||||
class CNVS_Block_Group {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
|
||||
add_action( 'wp_enqueue_scripts', array( $this, 'wp_enqueue_scripts' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function enqueue_block_editor_assets() {
|
||||
// Editor Scripts.
|
||||
wp_enqueue_script(
|
||||
'canvas-block-group-editor-script',
|
||||
plugins_url( 'block-group/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor', 'lodash', 'jquery' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-group/block.js' ),
|
||||
true
|
||||
);
|
||||
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'canvas-block-group-editor-style',
|
||||
plugins_url( 'block-group/block-editor.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-group/block-editor.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-group-editor-style', 'rtl', 'replace' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue assets for the front-end.
|
||||
*/
|
||||
public function wp_enqueue_scripts() {
|
||||
// Styles.
|
||||
wp_enqueue_style(
|
||||
'canvas-block-group-style',
|
||||
plugins_url( 'block-group/block.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-group/block.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-group-style', 'rtl', 'replace' );
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_Group();
|
||||
@@ -0,0 +1,185 @@
|
||||
<?php
|
||||
/**
|
||||
* Progress Block.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize Progress block.
|
||||
*/
|
||||
class CNVS_Block_Progress {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'init', array( $this, 'init' ) );
|
||||
add_filter( 'canvas_register_block_type', array( $this, 'register_block_type' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function init() {
|
||||
// Editor Scripts.
|
||||
wp_register_script(
|
||||
'canvas-block-progress-editor-script',
|
||||
plugins_url( 'block-progress/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor', 'lodash', 'jquery' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-progress/block.js' ),
|
||||
true
|
||||
);
|
||||
|
||||
wp_register_style(
|
||||
'canvas-block-progress-editor-style',
|
||||
plugins_url( 'block-progress/block-editor.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-progress/block-editor.css' )
|
||||
);
|
||||
|
||||
// Styles.
|
||||
wp_register_style(
|
||||
'canvas-block-progress-style',
|
||||
plugins_url( 'block-progress/block.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-progress/block.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-progress-style', 'rtl', 'replace' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Register block
|
||||
*
|
||||
* @param array $blocks all registered blocks.
|
||||
* @return array
|
||||
*/
|
||||
public function register_block_type( $blocks ) {
|
||||
$blocks[] = array(
|
||||
'name' => 'canvas/progress',
|
||||
'title' => esc_html__( 'Progress', 'canvas' ),
|
||||
'description' => '',
|
||||
'category' => 'canvas',
|
||||
'keywords' => array(),
|
||||
'icon' => '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(3 5)"><rect stroke="#000" stroke-width="2" x="1" y="1" width="16" height="4" rx="1"/><path d="M1 0h9v6H1a1 1 0 01-1-1V1a1 1 0 011-1z" fill="#000"/></g><g transform="translate(3 13)"><rect stroke="#000" stroke-width="2" x="1" y="1" width="16" height="4" rx="1"/><path d="M1 0h6v6H1a1 1 0 01-1-1V1a1 1 0 011-1z" fill="#000"/></g></g></svg>',
|
||||
'supports' => array(
|
||||
'className' => true,
|
||||
'anchor' => true,
|
||||
'html' => false,
|
||||
'canvasSpacings' => true,
|
||||
'canvasBorder' => true,
|
||||
'canvasResponsive' => true,
|
||||
),
|
||||
'styles' => array(
|
||||
array(
|
||||
'name' => 'cnvs-block-progress-primary',
|
||||
'label' => esc_html__( 'Primary', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-progress-success',
|
||||
'label' => esc_html__( 'Success', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-progress-info',
|
||||
'label' => esc_html__( 'Info', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-progress-warning',
|
||||
'label' => esc_html__( 'Warning', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-progress-danger',
|
||||
'label' => esc_html__( 'Danger', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-progress-dark',
|
||||
'label' => esc_html__( 'Dark', 'canvas' ),
|
||||
),
|
||||
),
|
||||
'location' => array(),
|
||||
|
||||
'sections' => array(
|
||||
'general' => array(
|
||||
'title' => esc_html__( 'Block Settings', 'canvas' ),
|
||||
'priority' => 5,
|
||||
'open' => true,
|
||||
),
|
||||
),
|
||||
'layouts' => array(),
|
||||
|
||||
// Set fields just for add block attributes.
|
||||
// Editor render for this block is custom JSX
|
||||
// so we don't need to render fields automatically.
|
||||
'fields' => array(
|
||||
array(
|
||||
'key' => 'width',
|
||||
'label' => esc_html__( 'Width', 'canvas' ),
|
||||
'type' => 'number',
|
||||
'section' => 'general',
|
||||
'min' => 1,
|
||||
'max' => 100,
|
||||
'default' => 70,
|
||||
'output' => array(
|
||||
array(
|
||||
'element' => '$ .cnvs-block-progress-bar',
|
||||
'property' => 'width',
|
||||
'units' => '%',
|
||||
),
|
||||
),
|
||||
),
|
||||
array(
|
||||
'key' => 'height',
|
||||
'label' => esc_html__( 'Height', 'canvas' ),
|
||||
'type' => 'number',
|
||||
'section' => 'general',
|
||||
'min' => 1,
|
||||
'max' => 20,
|
||||
'default' => 14,
|
||||
'output' => array(
|
||||
array(
|
||||
'property' => 'height',
|
||||
'units' => 'px',
|
||||
),
|
||||
),
|
||||
),
|
||||
array(
|
||||
'key' => 'striped',
|
||||
'label' => esc_html__( 'Striped', 'canvas' ),
|
||||
'type' => 'toggle',
|
||||
'section' => 'general',
|
||||
'default' => true,
|
||||
),
|
||||
array(
|
||||
'key' => 'animated',
|
||||
'label' => esc_html__( 'Animated', 'canvas' ),
|
||||
'type' => 'toggle',
|
||||
'section' => 'general',
|
||||
'default' => false,
|
||||
'active_callback' => array(
|
||||
array(
|
||||
'field' => 'striped',
|
||||
),
|
||||
),
|
||||
),
|
||||
array(
|
||||
'key' => 'displayPercent',
|
||||
'label' => esc_html__( 'Display Percent', 'canvas' ),
|
||||
'type' => 'toggle',
|
||||
'section' => 'general',
|
||||
'default' => false,
|
||||
),
|
||||
),
|
||||
'template' => dirname( __FILE__ ) . '/block-progress/render.php',
|
||||
|
||||
// enqueue registered scripts/styles.
|
||||
'style' => 'canvas-block-progress-style',
|
||||
'editor_style' => 'canvas-block-progress-editor-style',
|
||||
'editor_script' => 'canvas-block-progress-editor-script',
|
||||
);
|
||||
|
||||
return $blocks;
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_Progress();
|
||||
@@ -0,0 +1,264 @@
|
||||
<?php
|
||||
/**
|
||||
* Section Heading Block.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize Section Heading Block.
|
||||
*/
|
||||
class CNVS_Block_Section_Heading {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'init', array( $this, 'init' ) );
|
||||
add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ), 5 );
|
||||
add_filter( 'canvas_register_block_type', array( $this, 'register_block_type' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function init() {
|
||||
// Editor Scripts.
|
||||
wp_register_script(
|
||||
'canvas-block-section-heading-editor-script',
|
||||
plugins_url( 'block-section-heading/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor', 'lodash', 'jquery' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-section-heading/block.js' ),
|
||||
true
|
||||
);
|
||||
|
||||
wp_register_style(
|
||||
'canvas-block-section-heading-editor-style',
|
||||
plugins_url( 'block-section-heading/block-editor.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-section-heading/block-editor.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-section-heading-editor-style', 'rtl', 'replace' );
|
||||
|
||||
// Styles.
|
||||
wp_register_style(
|
||||
'canvas-block-section-heading-style',
|
||||
plugins_url( 'block-section-heading/block.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-section-heading/block.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-section-heading-style', 'rtl', 'replace' );
|
||||
}
|
||||
|
||||
/**
|
||||
* This function will register scripts and styles for admin dashboard.
|
||||
*
|
||||
* @param string $page Current page.
|
||||
*/
|
||||
public function admin_enqueue_scripts( $page ) {
|
||||
wp_localize_script(
|
||||
'jquery-ui-core',
|
||||
'canvasBSHLocalize',
|
||||
array(
|
||||
'sectionHeadingAlign' => apply_filters( 'canvas_section_heading_align', 'halignleft' ),
|
||||
'sectionHeadingTag' => apply_filters( 'canvas_section_heading_tag', 'h2' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register block
|
||||
*
|
||||
* @param array $blocks all registered blocks.
|
||||
* @return array
|
||||
*/
|
||||
public function register_block_type( $blocks ) {
|
||||
|
||||
$blocks[] = array(
|
||||
'name' => 'canvas/section-heading',
|
||||
'title' => esc_html__( 'Section Heading', 'canvas' ),
|
||||
'description' => '',
|
||||
'category' => 'canvas',
|
||||
'keywords' => array(),
|
||||
'icon' => 'heading',
|
||||
'supports' => array(
|
||||
'className' => true,
|
||||
'anchor' => true,
|
||||
'html' => false,
|
||||
'canvasSpacings' => true,
|
||||
'canvasBorder' => true,
|
||||
'canvasResponsive' => true,
|
||||
'align' => false,
|
||||
),
|
||||
'styles' => array(
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-default',
|
||||
'label' => esc_html__( 'Default', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-1',
|
||||
'label' => esc_html__( 'Plain', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-2',
|
||||
'label' => esc_html__( 'Thin Bottom Line', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-3',
|
||||
'label' => esc_html__( 'Thick Bottom Line', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-4',
|
||||
'label' => esc_html__( 'Thin Side Line', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-5',
|
||||
'label' => esc_html__( 'Thick Side Line', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-6',
|
||||
'label' => esc_html__( 'Top Line', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-7',
|
||||
'label' => esc_html__( 'Bottom Line, Medium Length', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-8',
|
||||
'label' => esc_html__( 'Side Line with Angle', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-9',
|
||||
'label' => esc_html__( 'Cross Icon', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-10',
|
||||
'label' => esc_html__( 'Scewed Background', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-11',
|
||||
'label' => esc_html__( 'Scewed Background, Side Line', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-12',
|
||||
'label' => esc_html__( 'Solid Background', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-13',
|
||||
'label' => esc_html__( 'Bordered', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-14',
|
||||
'label' => esc_html__( 'Solid Background, Fullwidth', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-15',
|
||||
'label' => esc_html__( 'Bordered, Fullwidth', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-16',
|
||||
'label' => esc_html__( 'Double Line with Angle', 'canvas' ),
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-section-heading-17',
|
||||
'label' => esc_html__( 'Bottom Line, Short Length', 'canvas' ),
|
||||
),
|
||||
),
|
||||
'location' => array(),
|
||||
'sections' => array(
|
||||
'color' => array(
|
||||
'title' => esc_html__( 'Color Settings', 'canvas' ),
|
||||
'priority' => 50,
|
||||
),
|
||||
'typography' => array(
|
||||
'title' => esc_html__( 'Typography Settings', 'canvas' ),
|
||||
'priority' => 45,
|
||||
),
|
||||
),
|
||||
'layouts' => array(),
|
||||
|
||||
// Set fields just for add block attributes.
|
||||
// Editor render for this block is custom JSX
|
||||
// so we don't need to render fields automatically.
|
||||
'fields' => array(
|
||||
array(
|
||||
'key' => 'halign',
|
||||
'type' => 'type-string',
|
||||
),
|
||||
array(
|
||||
'key' => 'tag',
|
||||
'type' => 'type-string',
|
||||
),
|
||||
array(
|
||||
'key' => 'content',
|
||||
'type' => 'type-string',
|
||||
),
|
||||
array(
|
||||
'key' => 'colorHeadingBorder',
|
||||
'label' => esc_html__( 'Border Color', 'canvas' ),
|
||||
'section' => 'color',
|
||||
'type' => 'color',
|
||||
'output' => array(
|
||||
array(
|
||||
'element' => '$, $ .cnvs-section-title, $:before, $:after, $ .cnvs-section-title:before, $ .cnvs-section-title:after',
|
||||
'property' => 'border-color',
|
||||
'suffix' => '!important',
|
||||
),
|
||||
),
|
||||
),
|
||||
array(
|
||||
'key' => 'colorHeadingAccent',
|
||||
'label' => esc_html__( 'Accent Color', 'canvas' ),
|
||||
'section' => 'color',
|
||||
'type' => 'color',
|
||||
'output' => array(
|
||||
array(
|
||||
'element' => '$.is-style-cnvs-block-section-heading-11 .cnvs-section-title:before, $.is-style-cnvs-block-section-heading-10 .cnvs-section-title:before, $.is-style-cnvs-block-section-heading-9 .cnvs-section-title:before, $.is-style-cnvs-block-section-heading-9 .cnvs-section-title:after, $.is-style-cnvs-block-section-heading-12 .cnvs-section-title, $.is-style-cnvs-block-section-heading-14, .section-heading-default-style-11 $.is-style-cnvs-block-section-heading-default .cnvs-section-title:before, .section-heading-default-style-10 $.is-style-cnvs-block-section-heading-default .cnvs-section-title:before, .section-heading-default-style-9 $.is-style-cnvs-block-section-heading-default .cnvs-section-title:before, .section-heading-default-style-9 $.is-style-cnvs-block-section-heading-default .cnvs-section-title:after, .section-heading-default-style-12 $.is-style-cnvs-block-section-heading-default .cnvs-section-title, .section-heading-default-style-14 $.is-style-cnvs-block-section-heading-default',
|
||||
'property' => 'background-color',
|
||||
'suffix' => '!important',
|
||||
),
|
||||
),
|
||||
),
|
||||
array(
|
||||
'key' => 'colorHeading',
|
||||
'label' => esc_html__( 'Text Color', 'canvas' ),
|
||||
'section' => 'color',
|
||||
'type' => 'color',
|
||||
'output' => array(
|
||||
array(
|
||||
'element' => '$ .cnvs-section-title',
|
||||
'property' => 'color',
|
||||
'suffix' => '!important',
|
||||
),
|
||||
),
|
||||
),
|
||||
array(
|
||||
'key' => 'typographyHeading',
|
||||
'label' => esc_html__( 'Font Size', 'canvas' ),
|
||||
'section' => 'typography',
|
||||
'type' => 'dimension',
|
||||
'responsive' => true,
|
||||
'output' => array(
|
||||
array(
|
||||
'element' => '$ .cnvs-section-title',
|
||||
'property' => 'font-size',
|
||||
'suffix' => '!important',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
'template' => dirname( __FILE__ ) . '/block-section-heading/render.php',
|
||||
|
||||
// enqueue registered scripts/styles.
|
||||
'style' => 'canvas-block-section-heading-style',
|
||||
'editor_style' => 'canvas-block-section-heading-editor-style',
|
||||
'editor_script' => 'canvas-block-section-heading-editor-script',
|
||||
);
|
||||
|
||||
return $blocks;
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_Section_Heading();
|
||||
@@ -0,0 +1,186 @@
|
||||
<?php
|
||||
/**
|
||||
* Tabs Block.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize Tabs block.
|
||||
*/
|
||||
class CNVS_Block_Tabs {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'init', array( $this, 'init' ) );
|
||||
add_filter( 'canvas_register_block_type', array( $this, 'register_block_type' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function init() {
|
||||
// Editor Scripts.
|
||||
wp_register_script(
|
||||
'canvas-block-tabs-editor-script',
|
||||
plugins_url( 'block-tabs/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-tabs/block.js' ),
|
||||
true
|
||||
);
|
||||
wp_register_script(
|
||||
'canvas-block-tab-editor-script',
|
||||
plugins_url( 'block-tab/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-tab/block.js' ),
|
||||
true
|
||||
);
|
||||
|
||||
// Editor Styles.
|
||||
wp_register_style(
|
||||
'canvas-block-tabs-editor-style',
|
||||
plugins_url( 'block-tabs/block-editor.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-tabs/block-editor.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-tabs-editor-style', 'rtl', 'replace' );
|
||||
|
||||
// Styles.
|
||||
wp_register_style(
|
||||
'canvas-block-tabs-style',
|
||||
plugins_url( 'block-tabs/block.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-tabs/block.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-tabs-style', 'rtl', 'replace' );
|
||||
|
||||
// Scripts.
|
||||
wp_register_script( 'canvas-block-tabs-script', plugin_dir_url( __FILE__ ) . 'block-tabs/public-block-tabs.js', array( 'jquery' ), cnvs_get_setting( 'version' ), true );
|
||||
}
|
||||
|
||||
/**
|
||||
* Register block
|
||||
*
|
||||
* @param array $blocks all registered blocks.
|
||||
* @return array
|
||||
*/
|
||||
public function register_block_type( $blocks ) {
|
||||
$blocks[] = array(
|
||||
'name' => 'canvas/tabs',
|
||||
'title' => esc_html__( 'Tabs', 'canvas' ),
|
||||
'description' => '',
|
||||
'category' => 'canvas',
|
||||
'keywords' => array(),
|
||||
'icon' => '
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3ZM21 19H3V5H13V9H21V19Z" />
|
||||
</svg>
|
||||
',
|
||||
'supports' => array(
|
||||
'className' => true,
|
||||
'anchor' => true,
|
||||
'html' => false,
|
||||
'canvasSpacings' => true,
|
||||
'canvasBorder' => true,
|
||||
'canvasResponsive' => true,
|
||||
),
|
||||
'styles' => array(
|
||||
array(
|
||||
'name' => 'cnvs-block-tabs-default',
|
||||
'label' => esc_html__( 'Default', 'canvas' ),
|
||||
'isDefault' => true,
|
||||
),
|
||||
array(
|
||||
'name' => 'cnvs-block-tabs-pills',
|
||||
'label' => esc_html__( 'Pills', 'canvas' ),
|
||||
),
|
||||
),
|
||||
'location' => array(),
|
||||
|
||||
'sections' => array(),
|
||||
'layouts' => array(),
|
||||
|
||||
// Set fields just for add block attributes.
|
||||
// Editor render for this block is custom JSX
|
||||
// so we don't need to render fields automatically.
|
||||
'fields' => array(
|
||||
array(
|
||||
'key' => 'tabActive',
|
||||
'type' => 'type-number',
|
||||
'default' => 0,
|
||||
),
|
||||
array(
|
||||
'key' => 'tabsData',
|
||||
'type' => 'type-array',
|
||||
'default' => array(
|
||||
'Tab 1',
|
||||
'Tab 2',
|
||||
),
|
||||
'items' => array(
|
||||
'type' => 'string',
|
||||
),
|
||||
),
|
||||
array(
|
||||
'key' => 'tabsPosition',
|
||||
'label' => esc_html__( 'Position', 'canvas' ),
|
||||
'type' => 'select',
|
||||
'choices' => array(
|
||||
'horizontal' => esc_html__( 'Horizontal', 'canvas' ),
|
||||
'vertical' => esc_html__( 'Vertical', 'canvas' ),
|
||||
),
|
||||
'default' => 'horizontal',
|
||||
),
|
||||
),
|
||||
'template' => dirname( __FILE__ ) . '/block-tabs/render.php',
|
||||
|
||||
// enqueue registered scripts/styles.
|
||||
'style' => is_admin() ? '' : 'canvas-block-tabs-style',
|
||||
'script' => is_admin() ? '' : 'canvas-block-tabs-script',
|
||||
'editor_script' => 'canvas-block-tabs-editor-script',
|
||||
'editor_style' => 'canvas-block-tabs-editor-style',
|
||||
);
|
||||
|
||||
$blocks[] = array(
|
||||
'name' => 'canvas/tab',
|
||||
'title' => esc_html__( 'Tab', 'canvas' ),
|
||||
'description' => '',
|
||||
'category' => 'canvas',
|
||||
'keywords' => array(),
|
||||
'icon' => '
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3ZM21 19H3V5H13V9H21V19Z" />
|
||||
</svg>
|
||||
',
|
||||
'supports' => array(
|
||||
'inserter' => false,
|
||||
'reusable' => false,
|
||||
'className' => true,
|
||||
'anchor' => true,
|
||||
'canvasSpacings' => true,
|
||||
'canvasBorder' => true,
|
||||
'canvasResponsive' => true,
|
||||
),
|
||||
'parent' => array(
|
||||
'canvas/tabs',
|
||||
),
|
||||
'styles' => array(),
|
||||
'location' => array(),
|
||||
|
||||
'sections' => array(),
|
||||
'layouts' => array(),
|
||||
'fields' => array(),
|
||||
'template' => dirname( __FILE__ ) . '/block-tab/render.php',
|
||||
|
||||
// enqueue registered scripts/styles.
|
||||
'editor_script' => 'canvas-block-tab-editor-script',
|
||||
);
|
||||
|
||||
return $blocks;
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_Tabs();
|
||||
@@ -0,0 +1,103 @@
|
||||
<?php
|
||||
/**
|
||||
* Widgetized Area Block.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize Widgetized Area block.
|
||||
*/
|
||||
class CNVS_Block_Widgetized_Area {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'init', array( $this, 'init' ) );
|
||||
add_filter( 'canvas_register_block_type', array( $this, 'register_block_type' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function init() {
|
||||
// Editor Scripts.
|
||||
wp_register_script(
|
||||
'canvas-block-widgetized-area-editor-script',
|
||||
plugins_url( 'block-widgetized-area/block.js', __FILE__ ),
|
||||
array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-widgetized-area/block.js' ),
|
||||
true
|
||||
);
|
||||
|
||||
// Get all sidebars.
|
||||
$sidebars = array();
|
||||
if ( ! empty( $GLOBALS['wp_registered_sidebars'] ) ) {
|
||||
foreach ( $GLOBALS['wp_registered_sidebars'] as $k => $sidebar ) {
|
||||
$sidebars[ $k ] = array(
|
||||
'id' => $sidebar['id'],
|
||||
'name' => $sidebar['name'],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
wp_localize_script(
|
||||
'canvas-block-widgetized-area-editor-script', 'canvasWidgetizedBlock', array(
|
||||
'sidebars' => $sidebars,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register block
|
||||
*
|
||||
* @param array $blocks all registered blocks.
|
||||
* @return array
|
||||
*/
|
||||
public function register_block_type( $blocks ) {
|
||||
$blocks[] = array(
|
||||
'name' => 'canvas/widgetized-area',
|
||||
'title' => esc_html__( 'Widgetized Area', 'canvas' ),
|
||||
'category' => 'canvas',
|
||||
'keywords' => array(),
|
||||
'icon' => '
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 13H11V15H3V13ZM3 17H11V19H3V17ZM3 9H11V11H3V9ZM3 5H11V7H3V5ZM19 7V17H15V7H19ZM21 5H13V19H21V5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
',
|
||||
'supports' => array(
|
||||
'className' => true,
|
||||
'anchor' => true,
|
||||
'html' => false,
|
||||
'canvasSpacings' => true,
|
||||
'canvasBorder' => true,
|
||||
'canvasResponsive' => true,
|
||||
),
|
||||
'styles' => array(),
|
||||
'location' => array(),
|
||||
|
||||
'sections' => array(),
|
||||
'layouts' => array(),
|
||||
|
||||
// Set fields just for add block attributes.
|
||||
// Editor render for this block is custom JSX
|
||||
// so we don't need to render fields automatically.
|
||||
'fields' => array(
|
||||
array(
|
||||
'key' => 'area',
|
||||
'type' => 'type-string',
|
||||
'default' => '',
|
||||
),
|
||||
),
|
||||
'template' => dirname( __FILE__ ) . '/block-widgetized-area/render.php',
|
||||
|
||||
// enqueue registered scripts/styles.
|
||||
'editor_script' => 'canvas-block-widgetized-area-editor-script',
|
||||
);
|
||||
|
||||
return $blocks;
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_Widgetized_Area();
|
||||
Reference in New Issue
Block a user