Last active
August 7, 2019 04:35
-
-
Save rocketdevcorp/c9b019b93a0d7b47bc3882deefd02ff6 to your computer and use it in GitHub Desktop.
Footnote with background color: The basic footnote block uses the withColors HOC
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
( 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