(function ( wpI18n, wpBlocks, wpElement, wpEditor, wpComponents ) {
const { __ } = wpI18n;
const { Component, Fragment } = wpElement;
const { registerBlockType } = wpBlocks;
const { InspectorControls, BlockControls, RichText, PanelColorSettings, MediaUpload } = wpEditor;
const { RangeControl, PanelBody, ToggleControl, SelectControl, TextControl, IconButton, Button, Toolbar } = wpComponents;
class AdvImage extends Component {
constructor() {
super(...arguments);
this.state = {
currentEdit: '',
}
}
componentWillMount() {
const { attributes, setAttributes } = this.props;
const currentBlockConfig = advgbDefaultConfig['advgb-image'];
// No override attributes of blocks inserted before
if (attributes.changed !== true) {
if (typeof currentBlockConfig === 'object' && currentBlockConfig !== null) {
Object.keys(currentBlockConfig).map((attribute) => {
if (typeof attributes[attribute] === 'boolean') {
attributes[attribute] = !!currentBlockConfig[attribute];
} else {
attributes[attribute] = currentBlockConfig[attribute];
}
});
}
// Finally set changed attribute to true, so we don't modify anything again
setAttributes( { changed: true } );
}
}
render() {
const { currentEdit } = this.state;
const { attributes, setAttributes, isSelected } = this.props;
const {
openOnClick,
openUrl,
linkInNewTab,
imageUrl,
imageID,
title,
titleColor,
subtitle,
subtitleColor,
overlayColor,
fullWidth,
width,
height,
vAlign,
hAlign,
} = attributes;
const blockClassName = [
'advgb-image-block',
fullWidth && 'full-width',
].filter( Boolean ).join( ' ' );
return (
{imageID && (
setAttributes( { imageUrl: image.url, imageID: image.id } ) }
render={ ( { open } ) => (
) }
/>
setAttributes( { imageUrl: undefined, imageID: undefined } ) }
/>
) }
setAttributes( { openOnClick: value } ) }
/>
{openOnClick === 'url' &&
{ __( 'Preview' ) }
)
] }
value={ openUrl }
placeholder={ __( 'Enter URL…' ) }
onChange={ ( text ) => setAttributes( { openUrl: text } ) }
/>
setAttributes( { linkInNewTab: !linkInNewTab } ) }
/>
}
setAttributes( { fullWidth: !fullWidth } ) }
/>
setAttributes( { height: value } ) }
/>
{!fullWidth &&
setAttributes( { width: value } ) }
/>
}
setAttributes( { titleColor: value === undefined ? '#fff' : value } ),
},
{
label: __( 'Subtitle Color' ),
value: subtitleColor,
onChange: ( value ) => setAttributes( { subtitleColor: value === undefined ? '#fff' : value } ),
},
{
label: __( 'Overlay Color' ),
value: overlayColor,
onChange: ( value ) => setAttributes( { overlayColor: value === undefined ? '#2196f3' : value } ),
},
] }
/>
setAttributes( { vAlign: value } ) }
/>
setAttributes( { hAlign: value } ) }
/>
{!imageID &&
setAttributes( { imageUrl: image.url, imageID: image.id } ) }
render={ ( { open } ) => (
) }
/>
}
setAttributes( { title: value.trim() } ) }
style={ { color: titleColor } }
isSelected={ isSelected && currentEdit === 'title' }
unstableOnFocus={ () => this.setState( { currentEdit: 'title' } ) }
unstableOnSplit={ () => null }
placeholder={ __( 'Enter title…' ) }
/>
setAttributes( { subtitle: value.trim() } ) }
style={ { color: subtitleColor } }
isSelected={ isSelected && currentEdit === 'subtitle' }
unstableOnFocus={ () => this.setState( { currentEdit: 'subtitle' } ) }
unstableOnSplit={ () => null }
placeholder={ __( 'Enter subtitle…' ) }
/>
);
}
}
const advImageBlockIcon = (
);
const blockAttrs = {
openOnClick: {
type: 'string',
default: 'none',
},
linkInNewTab: {
type: 'boolean',
default: true,
},
openUrl: {
type: 'string',
},
imageUrl: {
type: 'string',
},
imageID: {
type: 'number',
},
title: {
type: 'string',
default: __( 'Image title' ),
},
titleColor: {
type: 'string',
default: '#fff',
},
subtitle: {
type: 'string',
default: __( 'Your subtitle here' ),
},
subtitleColor: {
type: 'string',
default: '#fff'
},
overlayColor: {
type: 'string',
default: '#2196f3'
},
fullWidth: {
type: 'boolean',
default: false,
},
width: {
type: 'number',
default: 500,
},
height: {
type: 'number',
default: 500,
},
vAlign: {
type: 'string',
default: 'center',
},
hAlign: {
type: 'string',
default: 'center',
},
changed: {
type: 'boolean',
default: false,
},
};
registerBlockType( 'advgb/image', {
title: __( 'Advanced Image' ),
description: __( 'Advanced image/photo block with more options and styles.' ),
icon: {
src: advImageBlockIcon,
foreground: typeof advgbBlocks !== 'undefined' ? advgbBlocks.color : undefined,
},
category: 'advgb-category',
keywords: [ __( 'image' ), __( 'photo' ), __( 'box' ) ],
attributes: blockAttrs,
edit: AdvImage,
save: ( { attributes } ) => {
const {
openOnClick,
openUrl,
linkInNewTab,
imageUrl,
title,
titleColor,
subtitle,
subtitleColor,
overlayColor,
fullWidth,
width,
height,
vAlign,
hAlign,
} = attributes;
const linkURL = ( openOnClick === 'url' && !!openUrl ) ? openUrl : undefined;
const blockClassName = [
'advgb-image-block',
fullWidth && 'full-width',
openOnClick === 'lightbox' && !!imageUrl && 'advgb-lightbox',
].filter( Boolean ).join( ' ' );
return (
);
},
deprecated: [
{
attributes: blockAttrs,
save: ( { attributes } ) => {
const {
openOnClick,
openUrl,
linkInNewTab,
imageUrl,
title,
titleColor,
subtitle,
subtitleColor,
overlayColor,
fullWidth,
width,
height,
vAlign,
hAlign,
} = attributes;
const linkURL = ( openOnClick === 'url' && !!openUrl ) ? openUrl : undefined;
const blockClassName = [
'advgb-image-block',
fullWidth && 'full-width',
openOnClick === 'lightbox' && !!imageUrl && 'advgb-lightbox',
].filter( Boolean ).join( ' ' );
return (
);
},
}
]
} );
})( wp.i18n, wp.blocks, wp.element, wp.editor, wp.components );