Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WDS Background Options Blog Post Examples
/**
* Set the attributes to be displayed in the Background Options panel.
* @type {Object}
*/
const BackgroundOptionsAttributes = {
    backgroundType: {
        type: 'string',
    },
    backgroundImage: {
        type: 'object',
    },
    backgroundVideo: {
        type: 'object',
    },
    backgroundColor: {
        type: 'string',
    },
};
export default BackgroundOptionsAttributes;
const {
InspectorControls,
} = wp.blocks;
// Import all of our Background Options requirements.
import BackgroundOptions, { BackgroundOptionsAttributes, BackgroundOptionsClasses, BackgroundOptionsInlineStyles, BackgroundOptionsVideoOutput } from '../../components/background-options';
attributes: {
...BackgroundOptionsAttributes,
},
!! props.focus && (
<InspectorControls key="inspector">
{ BackgroundOptions( props ) }
</InspectorControls>
),
<section
className={ classnames(
...BackgroundOptionsClasses( props ),
) }
style={ {
...BackgroundOptionsInlineStyles( props ),
} }
>
{ BackgroundOptionsVideoOutput( props ) }
/**
* Set inline CSS class.
* @param {object} props - The block object.
* @return {array} The inline CSS class.
*/
function BackgroundOptionsClasses( props ) {
return [
{ 'has-image-background has-custom-background': 'image' === props.attributes.backgroundType },
{ 'has-color-background has-custom-background': 'color' === props.attributes.backgroundType },
{ 'has-video-background has-custom-background': 'video' === props.attributes.backgroundType },
];
}
export default BackgroundOptionsClasses;
- attributes.js (this contains the attributes saved to the block)
- classes.js (a simple function to add a class to our block based on the background option type)
- editor.scss (our panel option styles visible in the dashboard)
- index.js (the main file of our component)
- inline-styles.js (a simple function to add inline styles based on our saved background options)
- style.scss (styles for the frontend of our site)
- video.js (the visual output of a video when used as a background option)
/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
const {
    ColorPalette,
    description,
    MediaUpload,
} = wp.blocks;
const {
    Button,
    Dashicon,
    PanelBody,
    PanelColor,
    PanelRow,
    SelectControl,
} = wp.components;
/**
* Internal dependencies
*/
import BackgroundOptionsAttributes from './attributes';
import BackgroundOptionsClasses from './classes';
import BackgroundOptionsInlineStyles from './inline-styles';
import BackgroundOptionsVideoOutput from './video';
import './editor.scss';
// Export for ease of importing in individual blocks.
export {
    BackgroundOptionsAttributes,
    BackgroundOptionsClasses,
    BackgroundOptionsInlineStyles,
    BackgroundOptionsVideoOutput,
};
function BackgroundOptions( props ) {
}
export default BackgroundOptions;
const setBackgroundType = value => props.setAttributes( { backgroundType: value } );
const setBackgroundImage = value => props.setAttributes( { backgroundImage: value } );
const removeBackgroundImage = () => props.setAttributes( { backgroundImage: null } );
const setBackgroundVideo = value => props.setAttributes( { backgroundVideo: value } );
const removeBackgroundVideo = () => props.setAttributes( { backgroundVideo: null } );
const setBackgroundColor = value => props.setAttributes( { backgroundColor: value } );
const imageBackgroundSelect = () => {
};
if ( 'image' !== props.attributes.backgroundType ) {
return '';
}
if ( ! props.attributes.backgroundImage ) {
return (
<div className="media-upload-wrapper">
<p>
<MediaUpload
buttonProps={ {
className: 'components-button button button-large',
} }
onSelect={ setBackgroundImage }
type="image"
value=""
render={ ( { open } ) => (
<Button className="button button-large" onClick={ open }>
<Dashicon icon="format-image" /> { __( 'Upload Image' ) }
</Button>
) }
/>
</p>
<p>
<description>
{ __( 'Add/Upload an image file. (1920x1080px .jpg, .png)' ) }
</description>
</p>
</div>
);
}
return (
<div className="image-wrapper">
<p>
<img
src={ props.attributes.backgroundImage.url }
alt={ props.attributes.backgroundImage.alt }
/>
</p>
{ props.focus ? (
<div className="media-button-wrapper">
<p>
<Button
className="remove-image button button-large"
onClick={ removeBackgroundImage }
>
<Dashicon icon="no-alt" /> { __( 'Remove Image' ) }
</Button>
</p>
<p>
<description>
{ __( 'Add/Upload an image file. (1920x1080px .jpg, .png)' ) }
</description>
</p>
</div>
) : null }
</div>
);
const videoBackgroundSelect = () => {
};
if ( 'video' !== props.attributes.backgroundType ) {
return '';
}
if ( ! props.attributes.backgroundVideo ) {
return (
<div className="media-upload-wrapper">
<p>
<MediaUpload
buttonProps={ {
className: 'components-button button button-large',
} }
onSelect={ setBackgroundVideo }
type="video"
value=""
render={ ( { open } ) => (
<Button className="button button-large" onClick={ open }>
<Dashicon icon="format-video" /> { __( 'Upload Video' ) }
</Button>
) }
/>
</p>
<p>
<description>
{ __( 'Add/Upload a 1920x1080 .mp4 video file. Note: background videos are only supported on heroes.' ) }
</description>
</p>
</div>
);
}
return (
<div className="video-wrapper">
<p>
<video className="video-container video-container-overlay">
<source
type="video/mp4"
src={ props.attributes.backgroundVideo.url }
/>
</video>
</p>
{ props.focus ? (
<div className="media-button-wrapper">
<p>
<Button
className="remove-video button button-large"
onClick={ removeBackgroundVideo }
>
<Dashicon icon="no-alt" /> { __( 'Remove Video' ) }
</Button>
</p>
<p>
<description>
{ __( 'Add/Upload a 1920x1080 .mp4 video file. Note: background videos are only supported on heroes.' ) }
</description>
</p>
</div>
) : null }
</div>
);
const colorPanelSelect = () => {
};
if ( 'color' !== props.attributes.backgroundType ) {
return '';
}
return (
<PanelColor
title={ __( 'Background Color' ) }
colorValue={ props.attributes.backgroundColor }
>
<ColorPalette
value={ props.attributes.backgroundColor }
onChange={ setBackgroundColor }
/>
</PanelColor>
);
return (
<PanelBody
title={ __( 'Background Options' ) }
className="wds-background-options"
initialOpen={ false }
>
</PanelBody>
);
<PanelRow>
<SelectControl
key="background-type"
label={ __( 'Background Type' ) }
value={ props.attributes.backgroundType ? props.attributes.backgroundType : '' }
options={ [
{
label: __( 'None' ),
value: '',
},
{
label: __( 'Image' ),
value: 'image',
},
{
label: __( 'Video' ),
value: 'video',
},
{
label: __( 'Color' ),
value: 'color',
},
] }
onChange={ setBackgroundType }
/>
</PanelRow>
<PanelRow>
{ imageBackgroundSelect() }
{ videoBackgroundSelect() }
{ colorPanelSelect() }
</PanelRow>
/**
* Set inline styles.
* @param {object} props - The block object.
* @return {object} The inline background type CSS.
*/
function BackgroundOptionsInlineStyles( props ) {
return {
backgroundColor: 'color' === props.attributes.backgroundType ? props.attributes.backgroundColor : null,
backgroundImage: 'image' === props.attributes.backgroundType && props.attributes.backgroundImage ? `url(${ props.attributes.backgroundImage.url })` : null,
};
}
export default BackgroundOptionsInlineStyles;
/**
* Set video output.
* @param {object} props - The block object.
* @return {string} The video output container.
*/
function BackgroundOptionsVideoOutput( props ) {
if ( 'video' === props.attributes.backgroundType && props.attributes.backgroundVideo ) {
return (
<video
className="video-container video-container-overlay"
autoPlay="true"
loop="true"
muted="true"
>
<source
type="video/mp4"
src={ props.attributes.backgroundVideo.url }
/>
</video>
);
}
}
export default BackgroundOptionsVideoOutput;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment