import { CaxtonLayoutBlocksSetup } from './layout-blocks/layout-blocks.es6'; /** * Plugin front end scripts * * @package Caxton * @version 1.0.0 */ ( (( $, blocks, el, i18n, {SelectControl, TextControl, ToggleControl, RangeControl} ) => { const createBlock = blocks.createBlock; const InspectorControls = caxtonWPEditor.InspectorControls; const __ = i18n.__; CaxtonLayoutBlocksSetup( $, wp ); CaxtonBlock( { id: 'hero', title: 'Cover with button', icon: 'archive', category: 'caxton', tpl: '
' + '
' + '
' + '

{{Title}}

' + '
{{Sub-title}}
' + '' + '{{Call to action button}}
', fields: { 'Background image': 'image', 'Dim image': { type: 'radio', options: [ {value: ' bg-white-50', label: 'Lighter',}, {value: ' bg-white-30', label: 'Light',}, {value: ' ', label: "Don't dim",}, {value: ' bg-black-20', label: 'Dark',}, {value: ' bg-black-40', label: 'Darker',}, ], default: ' bg-black-20', }, 'Text position': { type: 'radio', options: [ {value: ' mba', label: 'Top',}, {value: ' mva', label: 'Center',}, {value: ' mta', label: 'Bottom',}, ], default: ' mva', }, 'Background parallax': { type: 'toggle', value: 'background-attachment:fixed;', }, 'Full width': { type: 'toggle', value: ' vw-100', }, 'Full height': { type: 'toggle', value: ' min-vh-100', }, 'Title': { type: 'editable', default: 'Click here to edit title' }, 'Title color': { type: 'color', default: '#fff' }, 'Title size': { type: 'range', default: '20' }, 'Sub-title': { type: 'editable', default: 'Edit sub-title' }, 'Sub-title color': { type: 'color', default: '#fff' }, 'Sub-title size': { type: 'range', default: '16' }, 'Call to action button': { type: 'editable', default: 'Button' }, 'Button Link': { type: 'text', default: '#' }, 'Button size': { type: 'range', default: '16' }, 'Button text color': { type: 'color', default: '#444' }, 'Button background color': { type: 'color', default: '#eee' }, '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: 'social-share-icons', title: 'Social share icons', icon: 'admin-links', category: 'caxton', tpl: '
\n' + '' + '' + 'Facebook' + '' + '' + 'Pinterest icon' + '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: '
' + '' + '{{Icon before text}}{{Text}}{{Icon after text}}' + '
', 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: function( icon ) { if ( icon.indexOf( ''; } return '%s'; }, section: 'Button icons', }, 'Icon after text': { type: 'icon', tpl: function( icon ) { if ( icon.indexOf( ''; } return '%s'; }, 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: function( props, block ) { if ( props.attributes.Icon.indexOf( '' + '' + ' ' + '
'; } return '
' + '{{Icon}}' + '
'; }, 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: '', 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: '
' + '
', toolbars: { Alignment: 'AlignmentToolbar', BlockAlignment: 'BlockAlignToolbar', }, afterEdit() { setTimeout( CaxtonUtils.flexslider, 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: '
  • ' + '
    ' + '{{Slide 1 title}}{{Slide 1 text}}{{Slide 1 button text}}' + '
    ' + '
    • ', 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: '
  • ' + '
    ' + '{{Slide 2 title}}{{Slide 2 text}}{{Slide 2 button text}}' + '
    ' + '
    • ', 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: '
  • ' + '
    ' + '{{Slide 3 title}}{{Slide 3 text}}{{Slide 3 button text}}' + '
    ' + '
    • ', 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: '
  • ' + '
    ' + '{{Slide 4 title}}{{Slide 4 text}}{{Slide 4 button text}}' + '
    ' + '
    • ', 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: '
  • ' + '
    ' + '{{Slide 5 title}}{{Slide 5 text}}{{Slide 5 button text}}' + '
    ' + '
    • ', 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( caxtonWPEditor.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( caxtonWPEditor.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: '\n' + '' + '', 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 '
    ' + '
    ' + svg + '
    '; }, 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}${commentIcon} ${post.comments}`}; } 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 );