WDS Background Options Blog Post Examples

attributes.js

/**
 * 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;

block-01.js

const {
    InspectorControls,
} = wp.blocks;

block-02.js

// Import all of our Background Options requirements.
import BackgroundOptions, { BackgroundOptionsAttributes, BackgroundOptionsClasses, BackgroundOptionsInlineStyles, BackgroundOptionsVideoOutput } from '../../components/background-options';

block-03.js

attributes: {
    ...BackgroundOptionsAttributes,
},

block-04.js

!! props.focus && (
    <InspectorControls key="inspector">
        { BackgroundOptions( props ) }
    </InspectorControls>
),

block-05.js

<section
    className={ classnames(
        ...BackgroundOptionsClasses( props ),
    ) }
    style={ {
        ...BackgroundOptionsInlineStyles( props ),
    } }
>

block-06.js

{ BackgroundOptionsVideoOutput( props ) }

classes.js

/**
 * 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;

file-list.js

- 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)

index-01.js

/**
 * WordPress dependencies
 */

const { __ } = wp.i18n;

const {
    ColorPalette,
    description,
    MediaUpload,
} = wp.blocks;

const {
    Button,
    Dashicon,
    PanelBody,
    PanelColor,
    PanelRow,
    SelectControl,
} = wp.components;

index-02.js

/**
 * 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,
};

index-03.js

function BackgroundOptions( props ) {
}

export default BackgroundOptions;

index-04.js

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 } );

index-05.js

const imageBackgroundSelect = () => {
};

index-06.js

if ( 'image' !== props.attributes.backgroundType ) {
    return '';
}

index-07.js

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>
    );
}

index-08.js

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>
);

index-09.js

const videoBackgroundSelect = () => {
};

index-10.js

if ( 'video' !== props.attributes.backgroundType ) {
    return '';
}

index-11.js

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>
    );
}

index-12.js

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>
);

index-13.js

const colorPanelSelect = () => {
};

index-14.js

if ( 'color' !== props.attributes.backgroundType ) {
    return '';
}

index-15.js

return (
    <PanelColor
        title={ __( 'Background Color' ) }
        colorValue={ props.attributes.backgroundColor }
    >
        <ColorPalette
            value={ props.attributes.backgroundColor }
            onChange={ setBackgroundColor }
        />
    </PanelColor>
);

index-16.js

return (
    <PanelBody
        title={ __( 'Background Options' ) }
        className="wds-background-options"
        initialOpen={ false }
    >
    </PanelBody>
);

index-17.js

<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>

index-18.js

<PanelRow>
    { imageBackgroundSelect() }
    { videoBackgroundSelect() }
    { colorPanelSelect() }
</PanelRow>

inline-styles.js

/**
 * 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;

video.js

/**
 * 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;