Skip to content

Commit

Permalink
Merge pull request #18 from phpbits/add/colors-toolbar
Browse files Browse the repository at this point in the history 
Add Highlighted Text Color and Background Color Formats
  • Loading branch information
@phpbits
phpbits authored May 17, 2019
2 parents 2581249 + bf90ee2 commit 3c8912c
Show file tree
Hide file tree
Showing 8 changed files with 1,498 additions and 5 deletions.
1,107 changes: 1,106 additions & 1 deletion dist/blocks.build.js
View file

Large diffs are not rendered by default.

135 changes: 132 additions & 3 deletions dist/blocks.editor.build.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,132 @@
.editorskit-button-group-container{border-top:1px solid #e2e4e7;padding:15px 0px}.editorskit-button-group-container:last-child{border-bottom:1px solid #e2e4e7}.editorskit-button-group-container .components-base-control__label{display:block;font-weight:600;margin-bottom:5px}.editorskit-button-group-container .components-button-group{display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(1, 1fr)}.editorskit-button-group-container .components-button-group button{display:inline;text-align:center;padding-top:2px;border:1px solid #fff;outline:none !important;text-shadow:none;line-height:21px;-webkit-box-shadow:inset 0 0 0 1px #e2e4e7, inset 0 0 0 2px #fff;box-shadow:inset 0 0 0 1px #e2e4e7, inset 0 0 0 2px #fff}.editorskit-button-group-container .components-button-group button,.editorskit-button-group-container .components-button-group button:focus:enabled{color:#a2aab2}.editorskit-button-group-container .components-button-group button:focus:enabled,.editorskit-button-group-container .components-button-group button:hover{-webkit-box-shadow:inset 0 0 0 1px #a2aab2, inset 0 0 0 2px #fff;box-shadow:inset 0 0 0 1px #a2aab2, inset 0 0 0 2px #fff}.editorskit-button-group-container .components-button-group button.is-primary,.editorskit-button-group-container .components-button-group button.is-primary:focus:enabled{color:#fff;background:#697782;-webkit-box-shadow:none;box-shadow:none;outline:none}.editorskit-button-group-container .components-button-group button.is-primary:hover{border:1px solid #fff;-webkit-box-shadow:inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;box-shadow:inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff}.editorskit-button-group-container .components-base-control__help{font-style:italic;margin:0px;padding-top:5px;opacity:0.75;font-size:11px}.editorskit-button-group-container.editorskit-button-group-state .components-button-group{grid-template-columns:repeat(2, 1fr)}
.editorskit-components-modal__content{width:320px;min-width:200px !important}.editorskit-components-modal__content .editorskit-button-group-container{padding:15px 0px}.editorskit-components-modal__content .editorskit-button-group-container.editorskit-button-group-devices,.editorskit-components-modal__content .editorskit-button-group-container.editorskit-button-group-logic{padding-top:5px;border-top:0px}.editorskit-components-modal__content .editorskit-button-group-container:last-child{border-bottom:0px}.editorskit-components-modal__content .components-modal__header{margin-bottom:0}.editorskit-tab-panel{margin:0 -16px}.editorskit-tab-panel .components-tab-panel__tabs{-ms-flex-align:center;align-items:center;background:#f3f4f5;border-bottom:1px solid #e2e4e7;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;position:-webkit-sticky;position:sticky;top:56px;z-index:9}.editorskit-tab-panel .components-tab-panel__tabs .edit-post-sidebar__panel-tab{margin-bottom:-1px}.editorskit-tab-panel .components-tab-panel__tabs button{display:-ms-inline-flexbox;display:inline-flex;text-decoration:none;font-size:13px;margin:0;border:0;cursor:pointer;-webkit-appearance:none;background:none}.editorskit-tab-panel .components-tab-panel__tabs .components-button,.editorskit-tab-panel .components-tab-panel__tabs button{padding:10px 15px;border-bottom:2px solid #f3f4f5}.editorskit-tab-panel .components-tab-panel__tabs .components-button.is-active,.editorskit-tab-panel .components-tab-panel__tabs button.is-active{border-color:#007cba}.editorskit-tab-panel .components-tab-panel__tab-content{padding:16px}
.is-guide-lines-on .editor-post-title__block .editor-post-title__input{border:1px solid rgba(66,88,99,0.2)}.is-guide-lines-on .block-editor-block-list__layout .block-editor-block-list__block:not([data-type="core/columns"]):not([data-type="core/column"]):not([data-type="coblocks/accordion"]):not([data-type="coblocks/accordion-item"]):not([data-type="coblocks/row"]):not([data-type="coblocks/column"]):not([data-type="coblocks/buttons"]):not([data-type="atomic-blocks/ab-container"]):not([data-type="atomic-blocks/ab-pricing-table"])>.block-editor-block-list__block-edit:before{border:1px solid rgba(66,88,99,0.2)}.is-guide-lines-on .block-editor-block-list__layout .block-editor-block-list__block:not([data-type="core/columns"]):not([data-type="core/column"]):not([data-type="coblocks/accordion"]):not([data-type="coblocks/accordion-item"]):not([data-type="coblocks/row"]):not([data-type="coblocks/column"]):not([data-type="coblocks/buttons"]):not([data-type="atomic-blocks/ab-container"]):not([data-type="atomic-blocks/ab-pricing-table"]).is-selected>.block-editor-block-list__block-edit:before{border:1px solid rgba(66,88,99,0.4);border-left:none}.is-guide-lines-on .block-editor-block-list__layout .block-editor-block-list__block[data-type="atomic-blocks/ab-pricing-table"] .block-editor-block-list__block>.block-editor-block-list__block-edit:before{left:-3px;right:-3px}.is-guide-lines-on .editor-block-list__layout .editor-block-list__block:not([data-type="core/columns"]):not([data-type="core/column"]):not([data-type="coblocks/accordion"]):not([data-type="coblocks/accordion-item"]):not([data-type="coblocks/row"]):not([data-type="coblocks/column"]):not([data-type="coblocks/buttons"]):not([data-type="atomic-blocks/ab-container"]):not([data-type="atomic-blocks/ab-pricing-table"])>.editor-block-list__block-edit:before{border:1px solid rgba(66,88,99,0.2)}.is-guide-lines-on .editor-block-list__layout .editor-block-list__block:not([data-type="core/columns"]):not([data-type="core/column"]):not([data-type="coblocks/accordion"]):not([data-type="coblocks/accordion-item"]):not([data-type="coblocks/row"]):not([data-type="coblocks/column"]):not([data-type="coblocks/buttons"]):not([data-type="atomic-blocks/ab-container"]):not([data-type="atomic-blocks/ab-pricing-table"]).is-selected>.editor-block-list__block-edit:before{border:1px solid rgba(66,88,99,0.4);border-left:none}.is-guide-lines-on .editor-block-list__layout .editor-block-list__block[data-type="atomic-blocks/ab-pricing-table"] .editor-block-list__block>.editor-block-list__block-edit:before{left:-3px;right:-3px}
.editorskit-button-group-container {
border-top: 1px solid #e2e4e7;
padding: 15px 0px; }
.editorskit-button-group-container:last-child {
border-bottom: 1px solid #e2e4e7; }
.editorskit-button-group-container .components-base-control__label {
display: block;
font-weight: 600;
margin-bottom: 5px; }
.editorskit-button-group-container .components-button-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 1fr); }
.editorskit-button-group-container .components-button-group button {
display: inline;
text-align: center;
padding-top: 2px;
border: 1px solid #fff;
outline: none !important;
text-shadow: none;
line-height: 21px;
-webkit-box-shadow: inset 0 0 0 1px #e2e4e7, inset 0 0 0 2px #fff;
box-shadow: inset 0 0 0 1px #e2e4e7, inset 0 0 0 2px #fff; }
.editorskit-button-group-container .components-button-group button, .editorskit-button-group-container .components-button-group button:focus:enabled {
color: #a2aab2; }
.editorskit-button-group-container .components-button-group button:focus:enabled, .editorskit-button-group-container .components-button-group button:hover {
-webkit-box-shadow: inset 0 0 0 1px #a2aab2, inset 0 0 0 2px #fff;
box-shadow: inset 0 0 0 1px #a2aab2, inset 0 0 0 2px #fff; }
.editorskit-button-group-container .components-button-group button.is-primary, .editorskit-button-group-container .components-button-group button.is-primary:focus:enabled {
color: #fff;
background: #697782;
-webkit-box-shadow: none;
box-shadow: none;
outline: none; }
.editorskit-button-group-container .components-button-group button.is-primary:hover {
border: 1px solid #fff;
-webkit-box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff; }
.editorskit-button-group-container .components-base-control__help {
font-style: italic;
margin: 0px;
padding-top: 5px;
opacity: 0.75;
font-size: 11px; }
.editorskit-button-group-container.editorskit-button-group-state .components-button-group {
grid-template-columns: repeat(2, 1fr); }
.editorskit-components-modal__content {
width: 320px;
min-width: 200px !important; }
.editorskit-components-modal__content .editorskit-button-group-container {
padding: 15px 0px; }
.editorskit-components-modal__content .editorskit-button-group-container.editorskit-button-group-devices, .editorskit-components-modal__content .editorskit-button-group-container.editorskit-button-group-logic {
padding-top: 5px;
border-top: 0px; }
.editorskit-components-modal__content .editorskit-button-group-container:last-child {
border-bottom: 0px; }
.editorskit-components-modal__content .components-modal__header {
margin-bottom: 0; }

.editorskit-tab-panel {
margin: 0 -16px; }
.editorskit-tab-panel .components-tab-panel__tabs {
-ms-flex-align: center;
align-items: center;
background: #f3f4f5;
border-bottom: 1px solid #e2e4e7;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: start;
justify-content: flex-start;
position: -webkit-sticky;
position: sticky;
top: 56px;
z-index: 9; }
.editorskit-tab-panel .components-tab-panel__tabs .edit-post-sidebar__panel-tab {
margin-bottom: -1px; }
.editorskit-tab-panel .components-tab-panel__tabs button {
display: -ms-inline-flexbox;
display: inline-flex;
text-decoration: none;
font-size: 13px;
margin: 0;
border: 0;
cursor: pointer;
-webkit-appearance: none;
background: none; }
.editorskit-tab-panel .components-tab-panel__tabs .components-button, .editorskit-tab-panel .components-tab-panel__tabs button {
padding: 10px 15px;
border-bottom: 2px solid #f3f4f5; }
.editorskit-tab-panel .components-tab-panel__tabs .components-button.is-active, .editorskit-tab-panel .components-tab-panel__tabs button.is-active {
border-color: #007cba; }
.editorskit-tab-panel .components-tab-panel__tab-content {
padding: 16px; }
.is-guide-lines-on {
/* Backward Compatibility */ }
.is-guide-lines-on .editor-post-title__block .editor-post-title__input {
border: 1px solid rgba(66, 88, 99, 0.2); }
.is-guide-lines-on .block-editor-block-list__layout .block-editor-block-list__block:not([data-type="core/columns"]):not([data-type="core/column"]):not([data-type="coblocks/accordion"]):not([data-type="coblocks/accordion-item"]):not([data-type="coblocks/row"]):not([data-type="coblocks/column"]):not([data-type="coblocks/buttons"]):not([data-type="atomic-blocks/ab-container"]):not([data-type="atomic-blocks/ab-pricing-table"]) > .block-editor-block-list__block-edit:before {
border: 1px solid rgba(66, 88, 99, 0.2); }
.is-guide-lines-on .block-editor-block-list__layout .block-editor-block-list__block:not([data-type="core/columns"]):not([data-type="core/column"]):not([data-type="coblocks/accordion"]):not([data-type="coblocks/accordion-item"]):not([data-type="coblocks/row"]):not([data-type="coblocks/column"]):not([data-type="coblocks/buttons"]):not([data-type="atomic-blocks/ab-container"]):not([data-type="atomic-blocks/ab-pricing-table"]).is-selected > .block-editor-block-list__block-edit:before {
border: 1px solid rgba(66, 88, 99, 0.4);
border-left: none; }
.is-guide-lines-on .block-editor-block-list__layout .block-editor-block-list__block[data-type="atomic-blocks/ab-pricing-table"] .block-editor-block-list__block > .block-editor-block-list__block-edit:before {
left: -3px;
right: -3px; }
.is-guide-lines-on .editor-block-list__layout .editor-block-list__block:not([data-type="core/columns"]):not([data-type="core/column"]):not([data-type="coblocks/accordion"]):not([data-type="coblocks/accordion-item"]):not([data-type="coblocks/row"]):not([data-type="coblocks/column"]):not([data-type="coblocks/buttons"]):not([data-type="atomic-blocks/ab-container"]):not([data-type="atomic-blocks/ab-pricing-table"]) > .editor-block-list__block-edit:before {
border: 1px solid rgba(66, 88, 99, 0.2); }
.is-guide-lines-on .editor-block-list__layout .editor-block-list__block:not([data-type="core/columns"]):not([data-type="core/column"]):not([data-type="coblocks/accordion"]):not([data-type="coblocks/accordion-item"]):not([data-type="coblocks/row"]):not([data-type="coblocks/column"]):not([data-type="coblocks/buttons"]):not([data-type="atomic-blocks/ab-container"]):not([data-type="atomic-blocks/ab-pricing-table"]).is-selected > .editor-block-list__block-edit:before {
border: 1px solid rgba(66, 88, 99, 0.4);
border-left: none; }
.is-guide-lines-on .editor-block-list__layout .editor-block-list__block[data-type="atomic-blocks/ab-pricing-table"] .editor-block-list__block > .editor-block-list__block-edit:before {
left: -3px;
right: -3px; }
.components-editorskit__inline-color-popover .components-popover__content {
padding: 20px 18px; }
.components-editorskit__inline-color-popover .components-popover__content .components-color-palette {
margin-top: .6rem; }
.components-editorskit__inline-color-popover .components-popover__content .components-base-control__title {
display: block;
margin-bottom: 16px;
font-weight: 600;
color: #191e23; }
.components-editorskit__inline-color-popover .components-popover__content .component-color-indicator {
vertical-align: text-bottom; }

.editorskit-settings__separator {
display: block;
margin: 24px -18px;
border-top: 1px solid #e2e4e7; }

.components-editorskit-dropdown-menu__toggle svg {
background: #eee; }
1 change: 0 additions & 1 deletion src/extensions/advanced-controls/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ const withAdvancedControls = createHigherOrderComponent( ( BlockEdit ) => {
{ UserStateOptions( props ) }
</InspectorAdvancedControls>
}

</Fragment>
);
};
Expand Down
37 changes: 37 additions & 0 deletions src/extensions/formats/colors/background-color.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* External dependencies
*/
import { get } from 'lodash';

/**
* Internal dependencies
*/
import './styles/editor.scss';
import InlineColorsToolbar from './controls';

/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
const { Fragment } = wp.element;
const { toggleFormat } = wp.richText;
const { RichTextShortcut, __unstableRichTextInputEvent } = wp.blockEditor;


/**
* Block constants
*/
const name = 'editorskit/background';

export const backgroundColor = {
name,
title: __( 'Background Color' ),
tagName: 'span',
className: 'has-inline-background',
attributes: {
style: 'style',
},
edit( { isActive, value, onChange, activeAttributes } ) {
return null;
},
};
151 changes: 151 additions & 0 deletions src/extensions/formats/colors/controls.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
/**
* External dependencies
*/
import { get } from 'lodash';

/**
* Internal dependencies
*/
import './styles/editor.scss';

/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
const { Component, Fragment } = wp.element;
const { select } = wp.data;
const { BlockControls } = wp.editor;
const { applyFormat, toggleFormat, removeFormat, getActiveFormat } = wp.richText;
const { Toolbar, IconButton, Popover, ColorPalette, ColorIndicator } = wp.components;

class InlineColorsToolbar extends Component {
constructor( props ) {
super( ...arguments );

this.state = {
openPopover: false,
};
}

render() {

const {
name,
isActive,
value,
onChange,
activeAttributes,
} = this.props;

const backgroundColor = 'editorskit/background';
const colors = get( select( 'core/block-editor' ).getSettings(), [ 'colors' ], [] );
let activeColor, activeBackground;

const activeColorFormat = getActiveFormat( value, name );
const activeBackgroundFormat = getActiveFormat( value, backgroundColor );

if( activeColorFormat ){
const styleColor = activeColorFormat.attributes.style;
activeColor = styleColor.replace(new RegExp(`^color:\\s*`), '') ;
}

if( activeBackgroundFormat ){
const styleBackground = activeBackgroundFormat.attributes.style;
activeBackground = styleBackground.replace(new RegExp(`^background-color:\\s*`), '');
}

return (
<Fragment>
<BlockControls>
<Toolbar className="components-dropdown-menu">
<IconButton
className="components-button components-icon-button components-dropdown-menu__toggle components-editorskit-dropdown-menu__toggle"
icon="editor-textcolor"
aria-haspopup="true"
label={ __( 'Text Color' ) }
tooltip={ __( 'Text Color' ) }
onClick={ () => this.setState( { openPopover: ! this.state.openPopover } ) }
>
<span className="components-dropdown-menu__indicator" />
</IconButton>

{ this.state.openPopover && (
<Popover
position="bottom center"
className="components-editorskit__inline-color-popover"
focusOnMount="container"
onClickOutside={ ( onClickOutside ) => {
if( ( ! onClickOutside.target.classList.contains( 'components-editorskit-dropdown-menu__toggle' ) && ! document.querySelector('.components-editorskit-dropdown-menu__toggle').contains( onClickOutside.target ) ) && ( !document.querySelector('.components-color-palette__picker') || ( document.querySelector('.components-color-palette__picker') && ! document.querySelector('.components-color-palette__picker').contains( onClickOutside.target ) ) ) ) {
this.setState( { openPopover: ! this.state.openPopover } );
}
} }
>
<span class="components-base-control__label components-base-control__title">{ __( 'Highlighted Text Settings' ) }</span>
<span class="components-base-control__label">
{ __( 'Text Color' ) }
{ activeColor && (
<ColorIndicator
colorValue={ activeColor }
/>
) }
</span>
<ColorPalette
colors={ colors }
value={ activeColor }
onChange={ ( color ) => {
if( color ){
onChange(
applyFormat( value, {
type: name,
attributes: {
style: `color:${color}`,
},
} )
);
}else{
onChange( removeFormat( value, name ) )
}
} }
>
</ColorPalette>

<div class="editorskit-settings__separator"></div>

<span class="components-base-control__label">
{ __( 'Background Color' ) }
{ activeBackground && (
<ColorIndicator
colorValue={ activeBackground }
/>
) }
</span>
<ColorPalette
colors={ colors }
value={ activeBackground }
onChange={ ( background ) => {
if( background ){
onChange(
applyFormat( value, {
type: backgroundColor,
attributes: {
style: `background-color:${background}`,
},
} )
);
}else{
onChange( removeFormat( value, backgroundColor ) )
}
} }
>
</ColorPalette>
</Popover>
) }
</Toolbar>
</BlockControls>
</Fragment>
);
}

}

export default InlineColorsToolbar;
27 changes: 27 additions & 0 deletions src/extensions/formats/colors/styles/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.components-editorskit__inline-color-popover{
.components-popover__content{
padding: 20px 18px;
.components-color-palette{
margin-top: .6rem;
}
.components-base-control__title{
display: block;
margin-bottom: 16px;
font-weight: 600;
color: #191e23;
}
.component-color-indicator{
vertical-align: text-bottom;
}
}
}
.editorskit-settings__separator{
display: block;
margin: 24px -18px;
border-top: 1px solid #e2e4e7;
}
.components-editorskit-dropdown-menu__toggle{
svg{
background: #eee;
}
}
Loading

0 comments on commit 3c8912c

Please sign in to comment.