%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: '%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: '%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: '%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: '%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 cls = 'relative '; let bgHTML; let padUnit; let padT; let padL; let padB; let padR; 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 = '' + ''; 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 ) ] ); } } ); 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() { 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]; function postMetaMarkup() { if ( attrs.displayMeta ) { return {__html: `${commentIcon} ${post.comments}`}; } else { return {__html: ''}; } }; 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 );