Created
October 25, 2018 15:54
-
-
Save noltedesign/2b19ba7462274b31de4c7ab88b3c43d0 to your computer and use it in GitHub Desktop.
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
ar el = wp.element.createElement, | |
Fragment = wp.element.Fragment | |
registerBlockType = wp.blocks.registerBlockType, | |
RichText = wp.editor.RichText, | |
BlockControls = wp.editor.BlockControls, | |
AlignmentToolbar = wp.editor.AlignmentToolbar, | |
MediaUpload = wp.editor.MediaUpload, | |
InspectorControls = wp.components.InspectorControls, | |
PanelColor = wp.editor.PanelColor, | |
withColors = wp.editor.withColors, | |
compose = wp.compose.compose, | |
TextControl = wp.components.TextControl, | |
InspectorControls = wp.editor.InspectorControls, | |
PanelBody = wp.components.PanelBody, | |
Button = wp.components.Button | |
; | |
registerBlockType( 'brink/fullwidth-block', { | |
title: 'Full Width Block', | |
icon: 'align-wide', | |
category: 'layout', | |
attributes: { | |
title: { | |
type: 'array', | |
source: 'children', | |
selector: 'h3', | |
}, | |
content: { | |
type: 'array', | |
source: 'children', | |
selector: 'p', | |
}, | |
backgroundColor: { | |
type: 'string', | |
default: 'white', | |
}, | |
mediaID: { | |
type: 'number', | |
}, | |
mediaURL: { | |
type: 'string', | |
source: 'attribute', | |
selector: 'img', | |
attribute: 'src', | |
}, | |
alignment: { | |
type: 'string', | |
}, | |
}, | |
edit: function( props ) { | |
var attributes = props.attributes; | |
var title = props.attributes.title; | |
var content = props.attributes.content; | |
var backgroundColor = props.attributes.backgroundColor; | |
var alignment = props.attributes.alignment; | |
var onSelectImage = function( media ) { | |
return props.setAttributes( { | |
mediaURL: media.url, | |
mediaID: media.id, | |
} ); | |
}; | |
function onChangeTitle( newTitle ) { | |
props.setAttributes( { title: newTitle } ); | |
} | |
function onChangeContent( newContent ) { | |
props.setAttributes( { content: newContent } ); | |
} | |
function onChangeBackgroundColor( newBackgroundColor ) { | |
props.setAttributes( { backgroundColor: newBackgroundColor} ); | |
} | |
function onChangeAlignment( newAlignment ) { | |
props.setAttributes( { alignment: newAlignment } ); | |
} | |
return [ | |
// Block Controls | |
el( BlockControls, { key: 'controls' }, | |
el( 'div', { className: 'components-toolbar' }, | |
el( MediaUpload, { | |
onSelect: onSelectImage, | |
type: 'image', | |
render: function( obj ) { | |
return el( Button, { | |
className: 'components-icon-button components-toolbar__control', | |
onClick: obj.open | |
}, | |
el( 'svg', { className: 'dashicon dashicons-edit', width: '20', height: '20' }, | |
el( 'path', { d: "M2.25 1h15.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H2.25C1.56 19 1 18.44 1 17.75V2.25C1 1.56 1.56 1 2.25 1zM17 17V3H3v14h14zM10 6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm3 5s0-6 3-6v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V8c2 0 3 4 3 4s1-3 3-3 3 2 3 2z" } ) | |
) | |
); | |
} | |
} ) | |
), | |
el( AlignmentToolbar, { | |
value: alignment, | |
onChange: onChangeAlignment, | |
} ), | |
), | |
// Inspector | |
el( | |
wp.element.Fragment, | |
{}, | |
el( | |
InspectorControls, | |
{}, | |
el( | |
PanelColor, | |
{ | |
title: 'Background Color', | |
value: backgroundColor, | |
onChange: onChangeBackgroundColor, | |
} | |
), | |
), | |
), | |
// Editor | |
el( 'div', { | |
className: props.className, | |
style: { backgroundColor: backgroundColor }, | |
style: attributes.mediaID ? { backgroundImage: 'url('+attributes.mediaURL+')' } : {} | |
}, | |
el( 'div', { | |
className: 'inner-container', | |
style: { textAlign: alignment } | |
}, | |
el( | |
RichText, | |
{ | |
tagName: 'h3', | |
value: title, | |
placeholder: 'Block Title...', | |
keepPlaceholderOnFocus: true, | |
focus: focus, | |
onFocus: props.setFocus, | |
onChange: onChangeTitle | |
} | |
), | |
el( | |
RichText, | |
{ | |
tagName: 'p', | |
onChange: onChangeContent, | |
value: content, | |
placeholder: 'Content Here...', | |
} | |
) | |
) | |
) | |
] | |
}, | |
save: function( props ) { | |
var attributes = props.attributes; | |
var title = props.attributes.title; | |
var content = props.attributes.content; | |
var backgroundColor = props.attributes.backgroundColor; | |
var alignment = props.attributes.alignment; | |
return ( | |
el( 'div', { | |
className: props.className, | |
style: { | |
backgroundColor: backgroundColor, | |
backgroundImage: "url("+attributes.mediaURL+")" | |
}, | |
}, | |
el( 'div', { | |
className: 'inner-container', | |
style: { textAlign: attributes.alignment } | |
}, | |
el( RichText.Content, { | |
tagName: 'h3', | |
value: title | |
} ), | |
el( RichText.Content, { | |
tagName: 'p', | |
value: content | |
} ), | |
) | |
) | |
); | |
}, | |
} ); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment