\n' +
'
' +
'' +
'Facebook' +
'' +
'
' +
'' +
'Pinterest' +
'' +
'
' +
'' +
'Twitter' +
'' +
'
' +
'' +
'Mail' +
'' +
'',
fields: {
'Share URL': {
type: 'text',
help: "Please specify a url for users to share",
default: ''
},
'All caps': {
type: 'toggle',
value: 'ttu',
},
'Buttons style': {
type: 'radio',
options: [
{value: 'br0', label: 'Boxed corners',},
{value: 'br3', label: "Rounded corners",},
{value: 'ph3 br-pill', label: 'Pill',},
],
default: 'br2',
},
},
} );
CaxtonBlock( {
id: 'super-text',
title: 'Super Text',
icon: '
',
category: 'caxton',
tpl: '<{{Element Tag}} class="{{Alignment}}" ' +
'style="{{Letter Spacing}}{{Margin top}}{{Margin bottom}}{{Inner Padding}}{{Left/right Inner Padding}}{{Weight}}{{Font}}{{Text color}}{{Background color}}{{Font size}}{{Line height}}{{Text Glow/Shadow}}" ' +
'data-mobile-css="{{Font size mobile}}" ' +
'data-tablet-css="{{Font size tablet}}" ' +
'data-desktop-css="{{Font size}}">' +
'
{{Overline}}{{Text}}{{Underline}}' +
'',
transforms: {
from: [
{
type: 'block',
blocks: ['core/paragraph'],
transform({content}) {
return createBlock( 'caxton/super-text', {
Text: Caxton.el2html( content ),
} );
},
},
{
type: 'block',
blocks: ['core/heading'],
transform({content, nodeName}) {
return createBlock( 'caxton/super-text', {
Text: Caxton.el2html( content ),
'Element Tag': nodeName.toLowerCase(),
} );
},
},
{
type: 'block',
blocks: ['core/subhead'],
transform({content}) {
return createBlock( 'caxton/super-text', {
Text: Caxton.el2html( content ),
} );
},
},
],
},
toolbars: {
Alignment: 'AlignmentToolbar',
},
fields: {
'Text': {
type: 'editable',
default: 'Click here to edit text'
},
'Element Tag': {
type: 'radio',
section: 'Layout',
options: [
{value: 'p', label: 'Paragraph',},
{value: 'h1', label: 'Heading 1',},
{value: 'h2', label: 'Heading 2',},
{value: 'h3', label: 'Heading 3',},
{value: 'h4', label: 'Heading 4',},
{value: 'h5', label: 'Heading 5',},
{value: 'h6', label: 'Heading 6',},
{value: 'div', label: 'Normal div',},
],
default: 'p',
},
'Background color': {
type: 'color',
tpl: 'background-color:%s;',
section: 'Layout',
},
'Font': {
type: 'font',
tpl: 'font-family:%s;',
section: 'Typography',
},
'Letter Spacing': {
type: 'range',
max: 25,
min: -5,
tpl: 'letter-spacing:%spx;',
section: 'Typography',
},
'Font size': {
type: 'range',
min: 5,
max: 250,
tpl: 'font-size:%spx;',
section: 'Typography',
},
'Line height': {
type: 'range',
min: .5,
max: 5,
step: .1,
tpl: 'line-height:%s;',
section: 'Typography',
},
'Font size tablet': {
type: 'range',
min: 5,
max: 250,
tpl: 'font-size:%spx;',
section: 'Typography',
},
'Font size mobile': {
type: 'range',
min: 5,
max: 250,
tpl: 'font-size:%spx;',
section: 'Typography',
},
'Weight': {
type: 'range',
min: 100,
max: 900,
step: 100,
default: 400,
help: 'Effect of weight depends on support by selected font.',
tpl: 'font-weight:%s;',
section: 'Typography',
},
'Text color': {
type: 'color',
default: '#555',
tpl: 'color:%s;',
section: 'Typography',
},
'Overline': {
type: 'select',
options: [
{
value: '',
label: 'None',
},
{
value: '
',
label: 'Dotted',
},
{
value: '
',
label: 'Dashed',
},
{
value: '
',
label: 'Thin',
},
{
value: '
',
label: 'Thin + Thin',
},
{
value: '
',
label: 'Thin + Thick',
},
{
value: '
',
label: 'Thick + Thin',
},
{
value: '
',
label: 'Thick',
},
],
section: 'Underline & Overline',
},
'Underline': {
type: 'select',
options: [
{
value: '',
label: 'None',
},
{
value: '
',
label: 'Dotted',
},
{
value: '
',
label: 'Dashed',
},
{
value: '
',
label: 'Thin',
},
{
value: '
',
label: 'Thin + Thin',
},
{
value: '
',
label: 'Thin + Thick',
},
{
value: '
',
label: 'Thick + Thin',
},
{
value: '
',
label: 'Thick',
},
],
section: 'Underline & Overline',
},
'Lines as wide as content': {
type: 'toggle',
value: ' dib',
section: 'Underline & Overline',
},
'Line color': {
type: 'color',
section: 'Underline & Overline',
},
'Line spacing': {
type: 'range',
min: -.5,
max: 2.5,
step: .1,
tpl: '%sem;',
section: 'Underline & Overline',
},
'Text Glow/Shadow': {
type: 'select',
options: [
{value: '', label: 'No shadow/glow',},
{value: '255,255,255', label: 'Glow',},
{value: '0,0,0', label: 'Shadow',},
],
section: 'Glow/Shadow',
tpl: 'text-shadow:{{Shadow position}} {{Shadow Blur}} rgba(%s,{{Shadow Strength}});',
},
'Shadow position': {
type: 'select',
options: [
{value: 'calc( -2px + -.05em ) calc( 2px + .03em )', label: 'Far Left',},
{value: 'calc( -1px + -.03em ) calc( 1px + .01em )', label: 'Left',},
{value: '0 0', label: 'Center',},
{value: 'calc( 1px + .03em ) calc( 1px + .01em )', label: 'Right',},
{value: 'calc( 2px + .05em ) calc( 2px + .03em )', label: 'Far Right',},
],
default: '0 0',
section: 'Glow/Shadow',
},
'Shadow Blur': {
type: 'range',
tpl: '%spx ',
default: 3,
max: 25,
section: 'Glow/Shadow',
},
'Shadow Strength': {
type: 'range',
min: .1,
step: .1,
default: .1,
max: 1,
section: 'Glow/Shadow',
},
'Margin top': {
type: 'range',
section: 'Margin/Padding',
min: 0,
max: 10,
step: 0.5,
tpl: 'margin-top:%sem;',
},
'Margin bottom': {
type: 'range',
section: 'Margin/Padding',
min: 0,
max: 10,
step: 0.5,
tpl: 'margin-bottom:%sem;',
},
'Inner Padding': {
type: 'range',
section: 'Margin/Padding',
min: 0,
max: 10,
step: 0.5,
tpl: 'padding:%sem calc( .5em + %sem );',
},
'Left/right Inner Padding': {
type: 'range',
section: 'Margin/Padding',
min: 0,
max: 10,
step: 0.5,
tpl: 'padding-left:%sem;padding-right:%sem;',
},
},
} );
CaxtonBlock( {
id: 'super-button',
title: 'Button',
icon: '
',
category: 'caxton',
tpl: '
',
transforms: {
from: [
{
type: 'block',
blocks: ['core/button'],
transform({text, url, textColor, color}) {
return createBlock( 'caxton/super-button', {
Text: Caxton.el2html( text ),
URL: url,
'Text color': textColor,
'Background color': color,
} );
},
},
],
},
toolbars: {
Alignment: 'AlignmentToolbar',
BlockAlignment: 'BlockAlignToolbar',
},
fields: {
'Text': {
type: 'editable',
default: 'Click here to edit text'
},
'URL': {
type: 'text',
default: '#'
},
'Text color': {
type: 'color',
default: '#555',
tpl: 'color:%s;',
},
'Background color': {
type: 'color',
tpl: 'background-color:%s;',
},
'Button size': {
type: 'range',
min: 5,
max: 250,
tpl: 'font-size:%spx;',
},
'Font': {
type: 'font',
tpl: 'font-family:%s;',
section: 'Typography',
},
'Letter Spacing': {
type: 'range',
max: 25,
min: -5,
default: 2,
tpl: 'letter-spacing:%spx;',
section: 'Typography',
},
'Font size tablet': {
type: 'range',
min: 5,
max: 250,
tpl: 'font-size:%spx;',
section: 'Typography',
},
'Font size mobile': {
type: 'range',
min: 5,
max: 250,
tpl: 'font-size:%spx;',
section: 'Typography',
},
'Weight': {
type: 'range',
min: 100,
max: 800,
step: 100,
default: 400,
help: 'Effect of weight depends on support by selected font.',
tpl: 'font-weight:%s;',
section: 'Typography',
},
'Inner Padding left/right': {
type: 'range',
section: 'Margin/Padding',
min: 0,
default: 1,
max: 5,
step: 0.05,
tpl: '%sem',
},
'Inner Padding top/bottom': {
type: 'range',
section: 'Margin/Padding',
min: 0,
default: .5,
max: 5,
step: 0.05,
tpl: '%sem',
},
'Margin top': {
type: 'range',
section: 'Margin/Padding',
min: 0,
max: 10,
step: 0.5,
tpl: 'margin-top:%sem;',
},
'Margin bottom': {
type: 'range',
section: 'Margin/Padding',
min: 0,
max: 10,
step: 0.5,
tpl: 'margin-bottom:%sem;',
},
'Border color': {
type: 'color',
section: 'Border',
},
'Border weight': {
type: 'range',
min: 0,
default: 2,
max: 50,
tpl: '%spx ',
section: 'Border',
},
'Rounded Corners': {
type: 'range',
section: 'Border',
min: 0,
max: 50,
tpl: 'border-radius:%spx;',
},
'Icons color': {
type: 'color',
tpl: 'color:%s;',
section: 'Button icons',
},
'Icons size': {
type: 'slider',
min: 0.2,
max: 5,
step: 0.2,
tpl: 'font-size:%sem;',
section: 'Button icons',
},
'Icon before text': {
type: 'icon',
tpl: '
',
section: 'Button icons',
},
'Icon after text': {
type: 'icon',
tpl: '
',
section: 'Button icons',
},
'Hover Text color': {
type: 'color',
default: '#555',
tpl: 'color:%s;',
section: 'Hover Colors',
},
'Hover Background color': {
type: 'color',
tpl: 'background-color:%s;',
section: 'Hover Colors',
},
'Hover Border color': {
type: 'color',
section: 'Hover Colors',
tpl: 'border-color:%s;',
},
'Text Glow/Shadow': {
type: 'select',
options: [
{value: '', label: 'None',},
{value: ' text-glow', label: 'Glow',},
{value: ' text-shadow', label: 'Shadow',},
],
section: 'Button Glow/Shadow',
},
'Button Glow/Shadow': {
type: 'select',
options: [
{value: '', label: 'No shadow/glow',},
{value: '255,255,255', label: 'Glow',},
{value: '0,0,0', label: 'Shadow',},
],
section: 'Button Glow/Shadow',
tpl: 'box-shadow:{{Shadow position}} {{Blur}} {{Spread}} rgba(%s,{{Strength}});',
},
'Shadow position': {
type: 'select',
options: [
{value: 'calc( -2px + -.05em ) calc( 2px + .03em )', label: 'Far Left',},
{value: 'calc( -1px + -.03em ) calc( 1px + .01em )', label: 'Left',},
{value: '0 0', label: 'Center',},
{value: 'calc( 1px + .03em ) calc( 1px + .01em )', label: 'Right',},
{value: 'calc( 2px + .05em ) calc( 2px + .03em )', label: 'Far Right',},
],
default: '0 0',
section: 'Button Glow/Shadow',
},
'Spread': {
type: 'range',
tpl: '%spx',
default: 2,
max: 25,
section: 'Button Glow/Shadow',
},
'Blur': {
type: 'range',
tpl: '%spx',
default: 8,
max: 25,
section: 'Button Glow/Shadow',
},
'Strength': {
type: 'range',
min: .1,
step: .1,
default: .2,
max: 1,
section: 'Button Glow/Shadow',
},
},
} );
CaxtonBlock( {
id: 'super-icon',
title: 'Icon',
icon: '
',
category: 'caxton',
tpl: '
',
toolbars: {
Alignment: 'AlignmentToolbar',
BlockAlignment: 'BlockAlignToolbar',
},
fields: {
'Icon': {
type: 'icon',
default: ' fab fa-font-awesome-flag'
},
'URL': {
help: 'Type in a URL to make icon link to it.',
type: 'text',
tpl: 'href="%s"',
},
'Icon color': {
type: 'color',
default: '#555',
tpl: 'color:%s;',
},
'Icon size': {
type: 'range',
min: 5,
max: 250,
default: 16,
tpl: 'font-size:%spx;',
section: 'Icon size',
},
'Icon size tablet': {
type: 'range',
min: 5,
max: 250,
tpl: 'font-size:%spx;',
section: 'Icon size',
},
'Icon size mobile': {
type: 'range',
min: 5,
max: 250,
tpl: 'font-size:%spx;',
section: 'Icon size',
},
'Inner Padding': {
type: 'range',
section: 'Margin/Padding',
min: 0,
default: .25,
max: 5,
step: 0.05,
tpl: 'padding:%sem;',
},
'Margin top': {
type: 'range',
section: 'Margin/Padding',
min: 0,
max: 10,
step: 0.5,
tpl: 'margin-top:%sem;',
},
'Margin bottom': {
type: 'range',
section: 'Margin/Padding',
min: 0,
max: 10,
step: 0.5,
tpl: 'margin-bottom:%sem;',
},
'Background color': {
type: 'color',
tpl: 'background-color:%s;',
section: 'Color and decoration',
},
'Border color': {
type: 'color',
section: 'Color and decoration',
},
'Border weight': {
type: 'range',
min: 0,
default: 2,
max: 50,
tpl: '%spx ',
section: 'Color and decoration',
},
'Rounded Corners': {
type: 'range',
min: 0,
max: 50,
tpl: 'border-radius:%spx;',
section: 'Color and decoration',
},
'Glow/Shadow': {
type: 'select',
options: [
{value: '', label: 'None',},
{value: ' glow', label: 'Glow',},
{value: ' shadow', label: 'Shadow',},
],
section: 'Icon Glow/Shadow',
},
'Icon Glow/Shadow': {
type: 'select',
options: [
{value: '', label: 'No shadow/glow',},
{value: '255,255,255', label: 'Glow',},
{value: '0,0,0', label: 'Shadow',},
],
section: 'Icon Glow/Shadow',
tpl: 'text-shadow:{{Shadow position}} {{Shadow Blur}} rgba(%s,{{Shadow Strength}});',
},
'Shadow position': {
type: 'select',
options: [
{value: 'calc( -2px + -.05em ) calc( 2px + .03em )', label: 'Far Left',},
{value: 'calc( -1px + -.03em ) calc( 1px + .01em )', label: 'Left',},
{value: '0 0', label: 'Center',},
{value: 'calc( 1px + .03em ) calc( 1px + .01em )', label: 'Right',},
{value: 'calc( 2px + .05em ) calc( 2px + .03em )', label: 'Far Right',},
],
default: '0 0',
section: 'Icon Glow/Shadow',
},
'Shadow Blur': {
type: 'range',
tpl: '%spx ',
default: 3,
max: 25,
section: 'Icon Glow/Shadow',
},
'Shadow Strength': {
type: 'range',
min: .1,
step: .1,
default: .1,
max: 1,
section: 'Icon Glow/Shadow',
},
'Hover icon color': {
type: 'color',
default: '#555',
tpl: 'color:%s;',
section: 'Hover Colors',
},
'Hover Background color': {
type: 'color',
tpl: 'background-color:%s;',
section: 'Hover Colors',
},
'Hover Border color': {
type: 'color',
section: 'Hover Colors',
tpl: 'border-color:%s;',
},
},
} );
CaxtonBlock( {
id: 'slider',
title: 'Slider',
icon: 'slides',
category: 'caxton',
tpl: '
' +
'
' +
'{{Slide 1 image}}' +
'{{Slide 2 image}}' +
'{{Slide 3 image}}' +
'{{Slide 4 image}}' +
'{{Slide 5 image}}' +
'
',
toolbars: {
Alignment: 'AlignmentToolbar',
BlockAlignment: 'BlockAlignToolbar',
},
afterEdit() {
setTimeout( caxtonSetupSlider, 700 );
},
fields: {
'Height': {
type: 'range',
tpl: 'min-height:%svh;',
min: 25,
max: 125,
help: 'Relative to screen height. Set to 100 to have it full height.',
section: 'Layout',
},
'Slide 1 image': {
type: 'image',
tpl: '
' +
'' +
'',
section: 'Slide 1',
},
'Slide 1 title': {
type: 'text',
tpl: '
%s
',
section: 'Slide 1',
},
'Slide 1 text': {
type: 'textarea',
tpl: '
%s
',
section: 'Slide 1',
},
'Slide 1 button text': {
type: 'text',
tpl: '
%s',
section: 'Slide 1',
},
'Slide 1 button url': {
type: 'text',
section: 'Slide 1',
},
'Slide 2 image': {
type: 'image',
tpl: '
' +
'' +
'',
section: 'Slide 2',
},
'Slide 2 title': {
type: 'text',
tpl: '
%s
',
section: 'Slide 2',
},
'Slide 2 text': {
type: 'textarea',
tpl: '
%s
',
section: 'Slide 2',
},
'Slide 2 button text': {
type: 'text',
tpl: '
%s',
section: 'Slide 2',
},
'Slide 2 button url': {
type: 'text',
section: 'Slide 2',
},
'Slide 3 image': {
type: 'image',
tpl: '
' +
'' +
'',
section: 'Slide 3',
},
'Slide 3 title': {
type: 'text',
tpl: '
%s
',
section: 'Slide 3',
},
'Slide 3 text': {
type: 'textarea',
tpl: '
%s
',
section: 'Slide 3',
},
'Slide 3 button text': {
type: 'text',
tpl: '
%s',
section: 'Slide 3',
},
'Slide 3 button url': {
type: 'text',
section: 'Slide 3',
},
'Slide 4 image': {
type: 'image',
tpl: '
' +
'' +
'',
section: 'Slide 4',
},
'Slide 4 title': {
type: 'text',
tpl: '
%s
',
section: 'Slide 4',
},
'Slide 4 text': {
type: 'textarea',
tpl: '
%s
',
section: 'Slide 4',
},
'Slide 4 button text': {
type: 'text',
tpl: '
%s',
section: 'Slide 4',
},
'Slide 4 button url': {
type: 'text',
section: 'Slide 4',
},
'Slide 5 image': {
type: 'image',
tpl: '
' +
'' +
'',
section: 'Slide 5',
},
'Slide 5 title': {
type: 'text',
tpl: '
%s
',
section: 'Slide 5',
},
'Slide 5 text': {
type: 'textarea',
tpl: '
%s
',
section: 'Slide 5',
},
'Slide 5 button text': {
type: 'text',
tpl: '
%s',
section: 'Slide 5',
},
'Slide 5 button url': {
type: 'text',
section: 'Slide 5',
},
'Button color': {
type: 'color',
default: '#0693e3',
tpl: 'background:%s;',
section: 'Typography',
},
'Button text color': {
type: 'color',
default: '#ffffff',
tpl: 'color:%s;',
section: 'Typography',
},
'Text color': {
type: 'color',
tpl: 'color:%s;',
default: '#ffffff',
section: 'Typography',
},
'Font size': {
type: 'range',
min: 5,
max: 250,
default: 16,
tpl: 'font-size:%spx;',
section: 'Typography',
},
'Font size tablet': {
type: 'range',
min: 5,
max: 250,
tpl: 'font-size:%spx;',
section: 'Typography',
},
'Font size mobile': {
type: 'range',
min: 5,
max: 250,
tpl: 'font-size:%spx;',
section: 'Typography',
},
'Text Glow/Shadow': {
type: 'select',
options: [
{value: '', label: 'No shadow/glow',},
{value: '255,255,255', label: 'Glow',},
{value: '0,0,0', label: 'Shadow',},
],
section: 'Text Glow/Shadow',
tpl: 'text-shadow:{{Text Shadow position}} .05em rgba(%s,{{Text Shadow strength}});',
},
'Text Shadow position': {
type: 'select',
options: [
{value: 'calc( -3px + -.07em ) calc( 2px + .03em )', label: 'Far Left',},
{value: 'calc( -1px + -.03em ) calc( 1px + .01em )', label: 'Left',},
{value: '0 0', label: 'Center',},
{value: 'calc( 1px + .03em ) calc( 1px + .01em )', label: 'Right',},
{value: 'calc( 2px + .05em ) calc( 2px + .03em )', label: 'Far Right',},
],
default: '0 0',
section: 'Text Glow/Shadow',
},
'Text Shadow strength': {
type: 'select',
options: [
{value: '.25', label: 'Light',},
{value: '.5', label: 'Normal',},
{value: '.75', label: 'Strong',},
],
default: '.5',
section: 'Text Glow/Shadow',
}
},
} );
CaxtonBlock( {
id: 'super-hero',
title: 'Super Hero',
icon: 'archive',
category: 'caxton',
toolbars: {
Layout: 'BlockWidthToolbar',
},
fields: {
'Background image': {
type: 'image',
section: 'Background image',
tpl: 'background-image:url(%s);',
},
'Background image position': {
type: 'position',
section: 'Background image',
tpl: 'background-position:%s;',
},
'Background parallax': {
type: 'toggle',
value: 'background-attachment:fixed;',
section: 'Background image',
},
'Background color': {
type: 'color',
section: 'Background colors',
},
'Gradient color': {
type: 'color',
section: 'Background colors',
tpl: ', %s',
},
'Gradient type': {
type: 'select',
options: [
{value: 'linear-gradient( ', label: 'Linear vertical',},
{value: 'linear-gradient( 90deg, ', label: 'Linear horizontal',},
{value: 'linear-gradient( 45deg, ', label: 'Linear 45 deg',},
{value: 'linear-gradient( -45deg, ', label: 'Linear 45 deg anticlockwise',},
{value: 'radial-gradient( ', label: 'Radial gradient',},
],
default: 'linear-gradient( ',
section: 'Background colors',
},
'Background colors opacity': {
type: 'range',
min: 0,
max: 1,
step: .05,
help: 'Reduce opacity to have transparent colors over image',
default: '.9',
section: 'Background colors',
tpl: 'opacity:%s;',
},
'Columns': {
type: 'range',
min: 1,
max: 8,
section: 'Layout',
default: 1,
},
'Column gap': {
type: 'select',
options: [
{value: 'grid-gap-none', label: 'None',},
{value: 'grid-gap-tight', label: 'Tight',},
{value: '', label: 'Normal',},
{value: 'grid-gap-wide', label: 'Wide',},
{value: 'grid-gap-wider', label: 'Wider',},
],
section: 'Layout',
},
'Inner Padding top': {
type: 'range',
section: 'Layout',
default: 5,
},
'Inner Padding left': {
type: 'range',
max: 70,
section: 'Layout',
default: 5,
},
'Inner Padding bottom': {
type: 'range',
section: 'Layout',
default: 5,
},
'Inner Padding right': {
type: 'range',
max: 70,
section: 'Layout',
default: 5,
},
'Inner Padding left/right tablet': {
type: 'range',
max: 70,
section: 'Layout',
default: 5,
},
'Inner Padding left/right mobile': {
type: 'range',
max: 70,
section: 'Layout',
default: 5,
},
'Inner Padding unit': {
type: 'select',
options: [
{value: '%', label: 'Responsive',},
{value: 'px', label: 'Pixels x 5',},
],
default: '%',
section: 'Layout',
},
},
edit(props, block) {
const colBlk = ['core/column'];
function getColumnsTemplate( columns ) {
return Array( +columns ).fill( colBlk );
}
let bgHTML, padUnit, padT, padL, padB, padR, columns;
let
cls = 'relative ',
colCls = 'relative caxton-columns';
const padMob = block.attrs['Inner Padding left/right tablet'];
const padTab = block.attrs['Inner Padding left/right mobile'];
padUnit = block.attrs['Inner Padding unit'];
padT = block.attrs['Inner Padding top'];
padL = block.attrs['Inner Padding left'];
padB = block.attrs['Inner Padding bottom'];
padR = block.attrs['Inner Padding right'];
columns = block.attrs['Columns'];
if ( 'px' === padUnit ) {
padT *= 5;
padL *= 5;
padB *= 5;
padR *= 5;
}
padT = padT ? padT + padUnit : 0;
padL = padL ? padL + padUnit : 0;
padB = padB ? padB + padUnit : 0;
padR = padR ? padR + padUnit : 0;
if ( block.attrs['Layout'] ) {
cls += ` ${block.attrs['Layout']}`;
}
if ( block.attrs['Column gap'] ) {
colCls += ` ${block.attrs['Column gap']}`;
}
bgHTML = '
' +
'
';
return el(
// Element
'div', { className: cls, key: 'super-hero-block' },
// Background div
el( 'div', {key: 'bg', className: 'absolute absolute--fill', dangerouslySetInnerHTML: block.outputHTML( bgHTML )} ),
// Blocks inserter
el( 'div', {
className: `${colCls} caxton-${columns}-columns`,
style: {
'paddingTop': padT,
'paddingLeft': padL,
'paddingBottom': padB,
'paddingRight': padR,
},
'data-tablet-css' : `padding-left:${padTab}em;padding-right:${padTab}em;`,
'data-mobile-css' : `padding-left:${padMob}em;padding-right:${padMob}em;`,
key: 'block',
},
el( wp.editor.InnerBlocks, {
template: getColumnsTemplate( block.attrs['Columns'] ),
templateLock: 'all',
allowedBlock: colBlk,
key: 'innerblockscontent'
} )
)
);
},
save(props, block) {
let cls = 'relative';
let bgHTML;
let padUnit;
let padT;
let padL;
let padB;
let padR;
let columns;
let colCls = 'relative caxton-columns';
const padMob = block.attrs['Inner Padding left/right tablet'];
const padTab = block.attrs['Inner Padding left/right mobile'];
padUnit = block.attrs['Inner Padding unit'];
padT = block.attrs['Inner Padding top'];
padL = block.attrs['Inner Padding left'];
padB = block.attrs['Inner Padding bottom'];
padR = block.attrs['Inner Padding right'];
columns = block.attrs['Columns'];
if ( 'px' == padUnit ) {
padT *= 5;
padL *= 5;
padB *= 5;
padR *= 5;
}
padT = padT ? padT + padUnit : 0;
padL = padL ? padL + padUnit : 0;
padB = padB ? padB + padUnit : 0;
padR = padR ? padR + padUnit : 0;
if ( block.attrs['Layout'] ) {
cls += ` ${block.attrs['Layout']}`;
}
if ( block.attrs['Column gap'] ) {
colCls += ` ${block.attrs['Column gap']}`;
}
bgHTML = '
' +
'
';
const childrenBlocks = el( wp.editor.InnerBlocks.Content, {} );
return el(
// Element
'div', { className: cls, key: 'super-hero-block' },
[
// Background div
el( 'div', { key: 'bg', className: 'absolute absolute--fill', dangerouslySetInnerHTML: block.outputHTML( bgHTML )} ),
// Blocks inserter
el( 'div', {
className: `${colCls} caxton-${columns}-columns`,
style: {
'paddingTop': padT,
'paddingLeft': padL,
'paddingBottom': padB,
'paddingRight': padR,
},
'data-mobile-css' : `padding-left:${padMob}em;padding-right:${padMob}em;`,
'data-tablet-css' : `padding-left:${padTab}em;padding-right:${padTab}em;`,
key: 'block',
},
childrenBlocks
)
]
);
}
} );
CaxtonBlock( {
id: 'divider',
title: 'Shape Divider',
icon: 'cloud',
category: 'caxton',
tpl: function( props ) {
let svgMaps = {
'': '
',
book: '
',
waves: '
',
pyramids: '
',
tilt: '
',
// '' : '',
};
let
svg = svgMaps[''],
classes = 'caxton-shape-divider cover bg-center{{Full width}}{{Position}}';
if ( svgMaps[ props.attributes['Shape'] ] ) {
svg = svgMaps[props.attributes['Shape']];
}
return '
';
},
fields: {
'Shape': {
type: 'select',
options: [
{
value: '',
label: 'Clouds',
},
{
value: 'book',
label: 'Book',
},
{
value: 'waves',
label: 'Waves',
},
{
value: 'pyramids',
label: 'Pyramids',
},
{
value: 'tilt',
label: 'Tilt',
},
],
},
'Full width': {
type: 'toggle',
value: ' vw-100',
},
'Flip': {
type: 'toggle',
value: ' flip-v',
},
'Position': {
type: 'select',
options: [
{ value: '', label: 'Normal', },
{ value: ' caxton-shape-divider-onxt', label: 'Over previous block', },
{ value: ' caxton-shape-divider-oprv', label: 'Over next block', },
],
value: ' aspect-ratio',
},
'Color 1': {
type: 'color',
default: '#fff'
},
'Color 2': {
type: 'color',
default: '#fff'
},
},
} );
class CaxtonPostsGridEditComponent extends React.Component {
constructor( props ) {
super( ...arguments );
this.state = {
dataProps: Caxton.copyObj( {}, props )
};
}
fetchUrls() {
let
state = this.state,
cmp = this,
attributes = state.dataProps;
const attrs = $.extend( {
cat: [],
order: 'date/desc',
rows: 4,
columns: 2,
}, attributes );
const order = attrs.order.split( '/' );
const url =
`/caxton/v1/posts?posts_per_page=${attrs.rows * attrs.columns}&post__not_in=${caxton.post}&cat=${attrs.cat}${attrs.postIDs ? `&post__in=${attrs.postIDs}` : ''}${attrs.displayPostWithoutImages ? '&meta_key=' : ''}&orderby=${order[0]}&order=${order[1]}`;
if ( ! state.dataProps['posts'] || url !== state.dataProps['posts'].path ) {
state.dataProps['posts'] = {};
wp.apiFetch( {path: url} ).then( data => {
if ( cmp && state.dataProps['posts'].data !== data ) {
state.dataProps['posts'].data = data;
state.dataProps['posts'].path = url;
cmp.setState( state );
}
} );
}
}
render() {
function postMetaMarkup() {
if ( attrs.displayMeta ) {
return {__html: `
${authorIcon}${post.author}`};
} else {
return {__html: ''};
}
};
Caxton.copyObj( this.state.dataProps, this.props );
this.fetchUrls();
const props = this.state.dataProps;
const attrs = $.extend( {
cat: '',
order: 'date/desc',
rows: 4,
columns: 2,
titleSize: 20,
}, props.attributes );
let post;
let gridInfo;
const commentIcon = '';
const authorIcon = '
';
const grids = [];
const selected = props.isSelected;
let className = `${props.className} ${props.name.replace( '/', '-' )} caxton-grid`;
className += ` caxton-${attrs.imagesType}-images`;
if ( attrs.titleBelowImage ) {
className += ' caxton-title-below-image';
}
if ( ! props.posts.data ) {
grids.push( el( 'div', {className: 'caxton-notification', key: 'notice'}, 'Loading posts...' ) );
} else if ( props.posts.data.length === 0 ) {
grids.push( el( 'div', {className: 'caxton-notification', key: 'notice'}, 'No posts match criteria.' ) );
} else {
let postClass = 'grid-item';
if ( attrs.border ) {
postClass += ' ba';
}
for ( let i = 0; i < props.posts.data.length; i ++ ) {
post = props.posts.data[i];
gridInfo = [
el( 'a', {className: 'grid-link', href: '#',key: 'anchor'},
el( 'div', {className: 'grid-image', style: {backgroundImage: `url(${post.thumb_ml})`},},
el( 'h3', {className: 'grid-title', style: {fontSize: attrs.titleSize},}, post.title ),
),
)
];
gridInfo.push( el( 'h3', {className: 'grid-title', style: {fontSize: attrs.titleSize},key: 'title'}, $("
").html( post.title ).text() ) );
if ( attrs.displayDate ) {
gridInfo.push( el( 'time', {key: 'date'}, post.date ) );
}
if ( attrs.displayExcerpt ) {
gridInfo.push( el( 'p', {key: 'excerpt'}, $("
").html( post.excerpt ).text() ) );
}
gridInfo.push( el( 'div', {className: 'grid-meta', dangerouslySetInnerHTML: postMetaMarkup(),key: 'meta'}, ), );
grids.push(
el(
'div',
{
className: postClass,
style: { width: `${100 / attrs.columns - 2}%` },
key: `post-${post.id}`
},
gridInfo
)
);
}
}
return [
! ! selected && el(
InspectorControls,
{key: 'inspector'},
el(
SelectControl,
{
label: 'Category',
value: attrs.cat,
instanceId: 'caxton-postCats',
options: caxton.postCategories,
onChange(val) {
props.setAttributes( {postIDs: '', cat: val} );
}
}
),
( attrs.cat ? '' : el(
TextControl,
{
label: 'Hand picked posts',
instanceId: 'caxton-postIDs',
options: caxton.postCategories,
help: 'Type in the IDs of posts separated by comma',
onChange(val) {
props.setAttributes( { postIDs: val } );
}
}
) ),
el(
SelectControl,
{
label: 'Order',
value: attrs.order,
options: [
{label: __( 'Newest to Oldest' ), value: 'date/desc',},
{label: __( 'Oldest to Newest' ), value: 'date/asc',},
{label: __( 'A → Z' ), value: 'title/asc',},
{label: __( 'Z → A' ), value: 'title/desc',},
],
onChange(val) {
props.setAttributes( {order: val} );
}
}
),
el(
SelectControl,
{
label: 'Images shape',
value: attrs.imagesType,
options: [
{label: __( 'Square' ), value: '',},
{label: __( 'Circle' ), value: 'circle',},
{label: __( 'Rectangle' ), value: 'rectangle',},
],
onChange(val) {
props.setAttributes( {imagesType: val} );
}
}
),
el(
ToggleControl,
{
label: 'Include posts without image',
checked: attrs.displayPostWithoutImages,
onChange(val) {
if ( val.target ) {
props.setAttributes( {displayPostWithoutImages: val.target.checked} );
} else {
props.setAttributes( {displayPostWithoutImages: val} );
}
}
}
),
el(
ToggleControl,
{
label: 'Display post date',
checked: attrs.displayDate,
onChange(val) {
if ( val.target ) {
props.setAttributes( {displayDate: val.target.checked} );
} else {
props.setAttributes( {displayDate: val} );
}
}
}
),
el(
ToggleControl,
{
label: 'Display post meta',
checked: attrs.displayMeta,
onChange(val) {
if ( val.target ) {
props.setAttributes( {displayMeta: val.target.checked} );
} else {
props.setAttributes( {displayMeta: val} );
}
}
}
),
el(
ToggleControl,
{
label: 'Show Border',
checked: attrs.border,
onChange(val) {
if ( val.target ) {
props.setAttributes( {border: val.target.checked} );
} else {
props.setAttributes( {border: val} );
}
}
}
),
el(
ToggleControl,
{
label: 'Display post excerpt',
checked: attrs.displayExcerpt,
onChange(val) {
if ( val.target ) {
props.setAttributes( {displayExcerpt: val.target.checked} );
} else {
props.setAttributes( {displayExcerpt: val} );
}
}
}
),
el(
ToggleControl,
{
label: 'Show title below image',
checked: attrs.titleBelowImage,
onChange(val) {
if ( val.target ) {
props.setAttributes( {titleBelowImage: val.target.checked} );
} else {
props.setAttributes( {titleBelowImage: val} );
}
}
}
),
el(
RangeControl,
{
label: 'Title size',
value: attrs.titleSize,
onChange(val) {
props.setAttributes( {titleSize: val} );
},
min: 10,
max: 50,
}
),
el(
RangeControl,
{
label: 'Post columns',
value: attrs.columns,
onChange(val) {
props.setAttributes( {columns: val} );
},
min: 1,
max: 5,
}
),
el(
RangeControl,
{
label: 'Post rows',
value: attrs.rows,
onChange(val) {
props.setAttributes( {rows: val} );
},
min: 1,
max: 20,
}
)
),
el( 'div', {className, key: 'grid'}, grids )
];
}
}
wp.blocks.registerBlockType(
'caxton/posts-grid',
{
title: 'Posts grid',
icon: 'screenoptions',
category: 'caxton',
attributes: {
postIDs: {
type: 'string',
},
cat: {
type: 'string',
},
order: {
type: 'string',
},
imagesType: {
type: 'string',
},
displayPostWithoutImages: {
type: 'boolean',
},
border: {
type: 'boolean',
},
displayDate: {
type: 'boolean',
},
displayExcerpt: {
type: 'boolean',
},
displayMeta: {
type: 'boolean',
},
titleBelowImage: {
type: 'boolean',
},
titleSize: {
type: 'number',
},
rows: {
type: 'number',
},
columns: {
type: 'number',
},
},
edit: CaxtonPostsGridEditComponent,
save() {
// Rendering in PHP
return null;
},
}
);
})
)( jQuery, wp.blocks, wp.element.createElement, wp.i18n, wp.components );