Image Components

Image Settings, Image Uploader and Image

Include image settings on Inspector Control, image uploader for the editor and image element for the frontend.

Files path

'/src/components/image-settings'

Usage

Renders popover control on Inspector Control:

const { __ } = wp.i18n;
const { InspectorControls } = wp.blockEditor;
const { registerBlockType } = wp.blocks;

#Attributes
import { imageSettingsAttributes } from '../components/image-settings/';
#Component
import { 
    ImageSettings,
    ImageUpload,
    Image
} from '../components/image-settings/';

registerBlockType( 'gutenberg-extra/example-block', {
    title: __('Example block', 'gutenberg-extra'),
    icon: icon,
    category: 'gutenberg-extra-blocks',
    supports: { 
        align: true,
    },
    attributes: {
        imageSettings: {
            type: 'string',
            default: JSON.strngify(/* See main props: imageSettings */)
        }
        mediaID: {
            type: 'number',
        }
    },
    edit: (props) => {
        return [
            <InspectorControls>
                <ImageSettings
                    imageSettings={props.attributes.imageSettings}
                    onChange={value => props.setAttributes({ props.attributes.imageSettings: value })}
                    target="some-class"
                    mediaID={props.attributes.mediaID}
                />
            </InspectorControls>,
                <ImageUpload 
                    className="some-class"
                    imageSettings={props.attributes.imageSettings}
                    mediaID={props.attributes.mediaID}
                    onSelect={someFunction}
                />
        ]
    }
    save: props => {
        return (
            <Image 
                className="some-class"
                imageSettings={props.attributes.imageSettings}
                mediaID={props.attributes.mediaID}
            />
        );
    }
} );

Main prop: imageSettings

Value should content a class with next structure:

{
    "label": "Image Settings",
    "size": "",
    "imageSize": {
        "options": {},
        "widthUnit": "%",
        "width": 0,
        "heightUnit": "%",
        "height": 0
    },
    "alt": "",
    "alignment": "",
    "captionType": "none",
    "caption": "none",
    "captionTypography": {
        "label": "Typography",
        "font": "Roboto",
        "options": {
            "100": "http://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgWxPKTM1K9nz.ttf",
            "100italic": "http://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrIzcXLsnzjYk.ttf",
            "300": "http://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5vAx05IsDqlA.ttf",
            "300italic": "http://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjARc9AMX6lJBP.ttf",
            "400": "http://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf",
            "italic": "http://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu52xPKTM1K9nz.ttf",
            "500": "http://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9vAx05IsDqlA.ttf",
            "500italic": "http://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ABc9AMX6lJBP.ttf",
            "700": "http://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlvAx05IsDqlA.ttf",
            "700italic": "http://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBhc9AMX6lJBP.ttf",
            "900": "http://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtvAx05IsDqlA.ttf",
            "900italic": "http://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBBc9AMX6lJBP.ttf"
        },
        "general": {
            "color": "#9b9b9b"
        },
        "desktop": {
            "font-sizeUnit": "px",
            "font-size": 16,
            "line-heightUnit": "px",
            "line-height": 26,
            "letter-spacingUnit": "px",
            "letter-spacing": 0,
            "font-weight": 400,
            "text-transform": "none",
            "font-style": "normal",
            "text-decoration": "none"
        },
        "tablet": {
            "font-sizeUnit": "px",
            "font-size": 16,
            "line-heightUnit": "px",
            "line-height": 26,
            "letter-spacingUnit": "px",
            "letter-spacing": 0,
            "font-weight": 400,
            "text-transform": "none",
            "font-style": "normal",
            "text-decoration": "none"
        },
        "mobile": {
            "font-sizeUnit": "px",
            "font-size": 26,
            "line-heightUnit": "px",
            "line-height": 26,
            "letter-spacingUnit": "px",
            "letter-spacing": 0,
            "font-weight": 400,
            "text-transform": "none",
            "font-style": "normal",
            "text-decoration": "none"
        }
    },
    "sizeSettings": {
        "maxWidthUnit": "%",
        "maxWidth": 0,
        "widthUnit": "%",
        "width": 0
    },
    "normal": {
        "opacity": 100,
        "backgroundColor": "",
        "defaultBackgroundColor": "",
        "backgroundGradient": "",
        "defaultBackgroundGradient": "",
        "backgroundGradientAboveBackground": false,
        "boxShadow": {
            "label": "Box Shadow",
            "shadowColor": "#ffffff",
            "defaultShadowColor": "#ffffff",
            "shadowGradient": "",
            "shadowHorizontal": 0,
            "shadowVertical": 0,
            "shadowBlur": 0,
            "shadowSpread": 0
        },
        "borderSettings": {
            "borderColor": "",
            "borderType": "solid",
            "borderRadius": {
                "label": "Border radius",
                "unit": "px",
                "max": 1000,
                "desktop": {
                    "border-top-left-radius": 0,
                    "border-top-right-radius": 0,
                    "border-bottom-right-radius": 0,
                    "border-bottom-left-radius": 0,
                    "sync": true
                },
                "tablet": {
                    "border-top-left-radius": 0,
                    "border-top-right-radius": 0,
                    "border-bottom-right-radius": 0,
                    "border-bottom-left-radius": 0,
                    "sync": true
                },
                "mobile": {
                    "border-top-left-radius": 0,
                    "border-top-right-radius": 0,
                    "border-bottom-right-radius": 0,
                    "border-bottom-left-radius": 0,
                    "sync": true
                }
            },
            "borderWidth": {
                "label": "Border width",
                "unit": "px",
                "max": 1000,
                "desktop": {
                    "border-top-width": 0,
                    "border-right-width": 0,
                    "border-bottom-width": 0,
                    "border-left-width": 0,
                    "sync": true
                },
                "tablet": {
                    "border-top-width": 0,
                    "border-right-width": 0,
                    "border-bottom-width": 0,
                    "border-left-width": 0,
                    "sync": true
                },
                "mobile": {
                    "border-top-width": 0,
                    "border-right-width": 0,
                    "border-bottom-width": 0,
                    "border-left-width": 0,
                    "sync": true
                }
            }
        }
    },
    "hover": {
        "opacity": 100,
        "backgroundColor": "",
        "defaultBackgroundColor": "",
        "backgroundGradient": "",
        "defaultBackgroundGradient": "",
        "backgroundGradientAboveBackground": false,
        "boxShadow": {
            "label": "Box Shadow",
            "shadowColor": "#ffffff",
            "defaultShadowColor": "#ffffff",
            "shadowGradient": "",
            "shadowHorizontal": 0,
            "shadowVertical": 0,
            "shadowBlur": 0,
            "shadowSpread": 0
        },
        "borderSettings": {
            "label": "Border",
            "defaultBorderColor": "#ffffff",
            "general": {
                "border-color": "#ffffff",
                "border-style": "solid"
            },
            "borderWidth": {
                "label": "Border width",
                "unit": "px",
                "max": 1000,
                "desktop": {
                    "border-top-width": 0,
                    "border-right-width": 0,
                    "border-bottom-width": 0,
                    "border-left-width": 0,
                    "sync": true
                },
                "tablet": {
                    "border-top-width": 0,
                    "border-right-width": 0,
                    "border-bottom-width": 0,
                    "border-left-width": 0,
                    "sync": true
                },
                "mobile": {
                    "border-top-width": 0,
                    "border-right-width": 0,
                    "border-bottom-width": 0,
                    "border-left-width": 0,
                    "sync": true
                }
            },
            "borderRadius": {
                "label": "Border radius",
                "unit": "px",
                "max": 1000,
                "desktop": {
                    "border-top-left-radius": 0,
                    "border-top-right-radius": 0,
                    "border-bottom-right-radius": 0,
                    "border-bottom-left-radius": 0,
                    "sync": true
                },
                "tablet": {
                    "border-top-left-radius": 0,
                    "border-top-right-radius": 0,
                    "border-bottom-right-radius": 0,
                    "border-bottom-left-radius": 0,
                    "sync": true
                },
                "mobile": {
                    "border-top-left-radius": 0,
                    "border-top-right-radius": 0,
                    "border-bottom-right-radius": 0,
                    "border-bottom-left-radius": 0,
                    "sync": true
                }
            }
        }
    }
}

Props

Name	Type	Default	Required	Description
imageSettings	string	none	Y	Stringified object property with saved value
onChange	function	none	Y	Retrieve stringified object value to be saved
target	string	''	Y	Necessary to reach element targeted
mediaID	number	none	Y	Image identification

Some considerations

1. ImageUpload and Image depenend on ImageSettings. ImageSettings can be used alone.
2. All the styles are retrieved automatically.