Skip to content

Button Components

Jump to bottom
Josh_soporte edited this page Apr 24, 2020 · 1 revision

ButtonSettings, Button Editor and Button Saver

Include button settings on Inspector Control, button editor for the editor and button saver element for the frontend.

Files path

'/src/components/button-settings'

Usage

Renders popover control on Inspector Control:

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

#Component
import { 
    ButtonSettings,
    ButtonEditor,
    ButtonSaver
} from '../components/button-styles/';

registerBlockType( 'gutenberg-extra/example-block', {
    title: __('Example block', 'gutenberg-extra'),
    icon: icon,
    category: 'gutenberg-extra-blocks',
    supports: { 
        align: true,
    },
    attributes: {
        buttonSettings: {
            type: 'string',
            default: JSON.stringify(/* Refer main props: buttonSettings */)
        }
    },
    edit: (props) => {
        return [
            <InspectorControls>
                <ButtonStyles
                    className="some-class"
                    buttonSettings={props.attributes.buttonStyles}
                    onChange={value => props.setAttributes({buttonStyles: value})
                    target="some-class-target"
                />
            </InspectorControls>,
                <ButtonEditor
                    className="some-class"
                    buttonSettings={props.attributes.buttonStyles}
                    onChange={value => props.setAttributes({buttonStyles: value})}
                />
        ]
    }
    save: props => {
        return (
            <ButtonSaver
                className="some-class"
                buttonSettings={props.attributes.buttonStyles}
            />
        );
    }
} );

Main prop: buttonSettings

Value should content a class with next structure:

{
    "label": "Button Styles",
    "buttonText": "",
    "linkOptions": {},
    "alignment": "",
    "size": {
        "label": "Size",
        "general": {
            "max-widthUnit": "px",
            "max-width": 0,
            "widthUnit": "px",
            "width": 0,
            "min-widthUnit": "px",
            "min-width": 0,
            "max-heightUnit": "px",
            "max-height": 0,
            "heightUnit": "px",
            "height": 0,
            "min-heightUnit": "px",
            "min-height": 0
        }
    },
    "normal": {
        "color": "",
        "backgroundColor": "",
        "defaultBackgroundColor": "",
        "background": "",
        "defaultBackground": "",
        "boxShadow": {
            "label": "Box Shadow",
            "shadowColor": "#ffffff",
            "defaultShadowColor": "#ffffff",
            "shadowGradient": "",
            "shadowHorizontal": 0,
            "shadowVertical": 0,
            "shadowBlur": 0,
            "shadowSpread": 0
        },
        "typography": {
            "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"
            }
        },
        "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
                }
            }
        },
        "padding": {
            "label": "Padding",
            "unit": "px",
            "desktop": {
                "padding-top": 0,
                "padding-right": 0,
                "padding-bottom": 0,
                "padding-left": 0,
                "sync": true
            },
            "tablet": {
                "padding-top": 0,
                "padding-right": 0,
                "padding-bottom": 0,
                "padding-left": 0,
                "sync": true
            },
            "mobile": {
                "padding-top": 0,
                "padding-right": 0,
                "padding-bottom": 0,
                "padding-left": 0,
                "sync": true
            }
        },
        "margin": {
            "label": "Margin",
            "min": "none",
            "unit": "px",
            "desktop": {
                "margin-top": 0,
                "margin-right": 0,
                "margin-bottom": 0,
                "margin-left": 0,
                "sync": true
            },
            "tablet": {
                "margin-top": 0,
                "margin-right": 0,
                "margin-bottom": 0,
                "margin-left": 0,
                "sync": true
            },
            "mobile": {
                "margin-top": 0,
                "margin-right": 0,
                "margin-bottom": 0,
                "margin-left": 0,
                "sync": true
            }
        },
        "opacity": 100
    },
    "hover": {
        "color": "",
        "backgroundColor": "",
        "defaultBackgroundColor": "",
        "background": "",
        "defaultBackground": "",
        "boxShadow": {
            "label": "Box Shadow",
            "shadowColor": "#ffffff",
            "defaultShadowColor": "#ffffff",
            "shadowGradient": "",
            "shadowHorizontal": 0,
            "shadowVertical": 0,
            "shadowBlur": 0,
            "shadowSpread": 0
        },
        "typography": {
            "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"
            }
        },
        "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
                }
            }
        },
        "padding": {
            "label": "Padding",
            "unit": "px",
            "desktop": {
                "padding-top": 0,
                "padding-right": 0,
                "padding-bottom": 0,
                "padding-left": 0,
                "sync": true
            },
            "tablet": {
                "padding-top": 0,
                "padding-right": 0,
                "padding-bottom": 0,
                "padding-left": 0,
                "sync": true
            },
            "mobile": {
                "padding-top": 0,
                "padding-right": 0,
                "padding-bottom": 0,
                "padding-left": 0,
                "sync": true
            }
        },
        "margin": {
            "label": "Margin",
            "min": "none",
            "unit": "px",
            "desktop": {
                "margin-top": 0,
                "margin-right": 0,
                "margin-bottom": 0,
                "margin-left": 0,
                "sync": true
            },
            "tablet": {
                "margin-top": 0,
                "margin-right": 0,
                "margin-bottom": 0,
                "margin-left": 0,
                "sync": true
            },
            "mobile": {
                "margin-top": 0,
                "margin-right": 0,
                "margin-bottom": 0,
                "margin-left": 0,
                "sync": true
            }
        },
        "opacity": 100
    }
}

Props

Name Type Default Required Description
className(1) string gx-buttonstyles-control N Element class name
className(2) string gx-buttonstyles-button N Element class name
buttonSettings string none Y Stringified object property with saved value
onChange function none Y Retrieve stringified object value to be saved
target string gx-buttonstyles-button N Necessary to reach element targeted

(1) => on ButtonStyles component (2) => on ButtonEditor and ButtonSaver component

Some considerations

  1. ButtonEditor and ButtonSaver depenend on ButtonStyles. ButtonStyles can be used alone.
  2. All the styles are retrieved automatically.
Clone this wiki locally