first commit
This commit is contained in:
@@ -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 />;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user