Skip to content

Instantly share code, notes, and snippets.

@rocketdevcorp
Last active August 7, 2019 04:35
Show Gist options
  • Save rocketdevcorp/c9b019b93a0d7b47bc3882deefd02ff6 to your computer and use it in GitHub Desktop.
Save rocketdevcorp/c9b019b93a0d7b47bc3882deefd02ff6 to your computer and use it in GitHub Desktop.
Footnote with background color: The basic footnote block uses the withColors HOC
( function( i18n, blocks, blockEditor, element, richText ) {
var el = element.createElement;
var __ = i18n.__;
var RichText = blockEditor.RichText;
// NEW ASSIGNMENTS
var Fragment = element.Fragment;
var InspectorControls = blockEditor.InspectorControls;
var PanelColorSettings = blockEditor.PanelColorSettings;
var compose = wp.compose.compose;
var withColors = blockEditor.withColors;
var getColorClassName = blockEditor.getColorClassName;
// ASSIGN ORIGINAL EDIT FUNCTION TO A VARIABLE
// INCLUDE LOGIC THAT WILL BE USED TO HANDLE BACKGROUND COLORS
// ALSO INCLUDE THE PROPERTIES THAT IT WILL RECEIVE FROM THE withColor WRAPPER
var innerEdit = function( props ) {
var attributes = props.attributes,
content = props.attributes.content;
// NEW PROPS FROM withColor
// backgroundColor IS AN OBJECT
var backgroundColor = props.backgroundColor,
setBackgroundColor = props.setBackgroundColor;
var bgColorClass = getColorClassName( 'background-color', backgroundColor.slug );
function onChangeContent( newContent ) {
props.setAttributes( {
content: newContent
});
}
return el( Fragment, {},
el( InspectorControls, {},
el( PanelColorSettings, {
title: 'Color Settings',
initialOpen: true,
colorSettings: [{
label: 'Background Color',
disableCustomColors: true,
// FROM withColor
value: backgroundColor.color,
onChange: setBackgroundColor
}]
})
),
el( RichText,
{
tagName: 'div',
multiline: 'p',
onChange: onChangeContent,
value: content,
// ADD GENERATED BACKGROUND COLOR CLASS
className: classNames( props.className, bgColorClass )
}
));
};
blocks.registerBlockType( 'myblocks/footnote', {
title: __( 'Footnote', 'myblocks'),
category: 'formatting',
attributes: {
content: {
type: 'string',
source: 'html',
selector: 'div',
multiline: 'p',
},
// NEW ATTRIBUTE TO STORE CHOSEN BACKGROUND COLOR
backgroundColor: {
type: 'string',
}
},
edit: compose([ withColors( 'backgroundColor' ) ])( innerEdit ),
save: function( props ) {
// BACKGROUND COLOR ATTRIBUTE IS A STRING (SLUG)
var bgColorClass = getColorClassName( 'background-color', props.attributes.backgroundColor );
return el( RichText.Content,
{
tagName: 'div',
multiline: 'p',
value: props.attributes.content,
// ADD GENERATED BACKGROUND COLOR CLASS
className: classNames( props.className, bgColorClass )
}
);
},
} );
}(
window.wp.i18n,
window.wp.blocks,
window.wp.blockEditor,
window.wp.element,
window.wp.richText
) );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment