{1.0.beta} prototype elements list

Do you like this project? Good! Remember to encourage us in this: click on the ★ above this page and follow

---

Prototyper elements :

---

Very briefly: This is the list of what we have done so far as usable prototypes.

All voice is on: gutenberg-prototyper.js and used in all demo blocks.

Soon we will put the representative images (we understand that it is difficult without). It is a provisional list, it will be updated and correlated.

- editor
generete the editor block, it's good role use it for open your main block content.

make('editor', [ ... ]),

- toolbar

generete main toolbar section. without you can make it.

make('toolbar',[ ... ]),

- toolbar-group

generete a group inside toolbar. it's a good role use it at least once

make('toolbar-group',[ ... ]),

- toolbar-tab
generete a drop group with icon

make('toolbar-tab',{
  icon:'color-picker'
},[
  ...
]),

- inspector
open an inspector section. without you can make it.

make('inspector',[ ... ]),

- inspector-container
generete a main group of inspector. It's a good role use it at least once

make('inspector-container','YOUR TITLE:',[ ... ]),

- inspector-banner
simple wided image load inside inspector.

make('inspector-banner',{src:'https://....jpg'}),

- inspector-group
a group of standard aligned elments

make('inspector-group --TYPEOFLAYOUT',[ ... ]),

  inspector-group --aligned
  it's inline elements layout;
  inspector-group --justified
  a group whit justified elements;
  inspector-group --wide
  a group with wided (a line by line) elements;

- inspector-grid-2, 3, 4, 5, 6
make a group with in grid elements

make('inspector-grid-4',[
    make('span', ... ),
    make('span', ... ),
    make('span', ... ),
    make('span', ... ),
    ...
]),

- inspector-card
make a card with contents

  make('inspector-card','my card header',[ ... ]),

- inspector-flagbox
make a flag with a message

make('inspector-flagbox',{
    hexcolor:'#f3f4f5',
    icon:'info',
    message: 'this is info demo message',
}),

- inspector-tab
make a hide/show tab content

make('inspector-tab',{
    label:' ➜ open color picking',
    icon: props.attributes.css_textcolor,
},[ 
    ...
]),

- split or ====
make hard line from left to right in inspector and toolbars

make('===='),

- space or ----
make a spaced dashed line in inspector and toolbars

make('----'),

- nesting-group
Similar to original gutenberg appender (the +). but customizable. without you can make it.

make('nesting-group',{
    // extra params:
    // template:[ [ 'core/heading', { placeholder: 'Test Title' } ], ... ],
    // allowedBlocks:['core/columns','core/heading']
}),

- edit-texts
open a rich text customizable section.

make('edit-texts',{
    tagName: 'p',
    allowedFormats: [yourformats],
    placeholder:'type anything here',
    value: props.attributes.demo_text,
    onChange: data => props.setAttributes( { demo_text: data } ) }
}),

All Ui elements is an explicative type of button

- ui-textarea

make('ui-textarea',{}),

- ui-aligner

make('ui-aligner',{
    value: props.attributes.css_textalign,
    onChange: data => props.setAttributes( { css_textalign: data }),
}),

- ui-btn-group

make('ui-btn-group',[ OTHER BUTTONS ]),

- ui-button

make('ui-button',{
    label:"this is classic button!",
    onClick: () => alert('hello!')
}),

- ui-button --featuredimage

make('ui-button --featuredimage',{
    label:"this is featured image button!",
    onClick: () => alert('demo')
}),

- ui-button --iconic

make('ui-button --iconic',{
    icon: 'star-empty',
    value: 'first',
    className: props.attributes.test_selected!='first'?'':'is-active',
    onClick: () => props.setAttributes({ test_selected:'first' })
}),

- ui-checkbox

make('ui-checkbox',{
    label:"demo check true false",
    // help:'if is visible or not (demo)', not raccomended
    checked: false,
    onClick: status =>{ props.setAttributes({ demo_value:!!props.attributes.demo_value })}
}),

- ui-radiobox

make('ui-radiobox',{
    selected: 'one',
    options: [
        { label: '- like one', value: 'one' },
        { label: '- like other', value: 'two' },
        { label: '- like anywone', value: 'three' },
    ],
    onChange: data => props.setAttributes({ actual_value: data })
}),

- ui-range

make('ui-range',{
    label:"ranged [50/50]",
    value: props.attributes.demo_value,
    min:-50,
    max:50,
    step:0.2,
    marks:[
        { value: -50, label: 'min' },
        { value: 0, label: '--', },
        { value: 50, label: 'max', },
    ],
    onChange: data => props.setAttributes({ demo_value: data })
}),

- ui-range-compact

make('ui-range-compact',{
    // equal range
}),

- ui-selectbox

make('ui-selectbox',{
    label: "Font size",
    value: props.attributes.demo_value,
    multiple:false,
    options: [
        { label: 'Big', value: '300' },
        { label: 'Medium', value: '100' },
        { label: 'Small', value: '50' }],
    onChange: data => props.setAttributes({ demo_value: data })
}),

- ui-togglebox

make('ui-togglebox',{
    label: 'my label',
    value: 'm',
    opts:[
        { value: 's', label: 'S' },
        { value: 'm', label: 'M' },
        { value: 'l', label: 'L' }
    ]
}),

- ui-switchbox

make('ui-switchbox',{
    status:false,
    update : data => props.setAttributes({ data_your_status:!!data })
}),

- ui-color-picker

make('ui-color-picker',{
    disableAlpha: false,
    value: props.attributes.demo_hex_color,
    defaultValue: '#000000',
    onChangeComplete: data => props.setAttributes({ demo_hex_color: data.hex})
}),

- ui-color-palette

make('ui-color-palette',{
    colors: [
        { name: 'black', color: '#202020' },
        { name: 'white', color: '#ffffff' },
        { name: 'red', color: '#ff1212' },
        ...
    ],
    onChange: data => props.setAttributes({ demo_hex_color: data})
})

- ui-positioner

make('ui-positioner',{
    setPositionType: data => {props.setAttributes({ css_position_type: data })},
    setPositionCoord: data => {props.setAttributes({ css_position_coord: data })},
    actualCoord: props.attributes.css_position_coord,
    actualType: props.attributes.css_position_type,
}),

- ui-setmargins

make('ui-setmargins', {
    top: props.attributes.css_margin_top,
    right: props.attributes.css_margin_right,
    bottom:props.attributes.css_margin_bottom,
    left:props.attributes.css_margin_left,
    update: (dir,px,shorthand) => {
        props.setAttributes({['css_margin_'+dir]:px})
        props.setAttributes({ css_margins:shorthand })
    }
}),

- ui-background

make('ui-background',{
    reset: () => props.setAttributes({ css_bkgimage_url:'' }),
    setCover: () => props.setAttributes({ css_bkgimage_cover:!props.attributes.css_bkgimage_cover }),
    setRepeat: () => props.setAttributes({ css_bkgimage_repeat:!props.attributes.css_bkgimage_repeat }),
    setPosition: pos => props.setAttributes({ css_bkgimage_position: pos }),
    setMedia: media => props.setAttributes({ css_bkgimage_url: media.url, css_bkgimage_id:media.id }),
    iscover: props.attributes.css_bkgimage_cover,
    isrepeat: props.attributes.css_bkgimage_repeat,
    coord: props.attributes.css_bkgimage_position,
    url: props.attributes.css_bkgimage_url,
    id: props.attributes.css_bkgimage_id
})

- ui-dropdown

make( 'ui-dropdown', {
    icon:'editor-insertmore',
    label:'more'
},[
    [
        { title: 'Up', icon: 'arrow-up', onClick: () => alert( 'up' )},
        { title: 'Right', icon: 'arrow-right', onClick: () => alert( 'right' )}
    ],
    [
        { title: 'Down', icon: 'arrow-down', onClick: () => alert( 'down' ) },
        { title: 'Left', icon: 'arrow-left', onClick: () => alert( 'left' ),}
    ],
]),

the final note:

• remember that when you pass an html element to the prototyper, it generates that element directly.

make( 'div', {props},[nesteds]),

• to save any element remember to insert the saved: true attribute in the save function.

make( 'div', {saved:true, ...other props},[nesteds]),