{unstable} prototype elements list

Do you like this project? click on the ★ on this page

---

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.

Every prototype in list, exluded wp-interface, have a className, style, id. If you want you can -obviusly- expand whit extra css/html paramas in native file js.

Remember: value and update, where you see that, are requireds. All commented values is optionals.

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',[
    ..., ..., ..., ..., and more
]),

- inspector-card
make a card with contents

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

- inspector-flagbox
make a flag with a message

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

- inspector-tab
make a hide/show tab content

// texticon: '✪',
// -> override other types icons for an unicode symbol

// icon; image url or color
// ->  override other types icons for an unicode symbol


make('inspector-tab',{
    label:' ➜ open color picking',
    icon: 'http_url_of_backgrounds' | 'hex_color',
},[ 
    ...
]),

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

formats is required in edit.

make('nesting-group',{
    formats: 'all' | [ ['core/columns'],[ 'core/heading', { placeholder: 'Test Title' } ], ... ],
}),

- edit-texts
open a rich text customizable section.

tag is required.

make('edit-texts',{
    tag: 'main_html_tag',
//  break: 'new_element_tag',
//  unspace: true  | false,
//  formats: 'all' | ['core/columns' ,'core/heading', ...],
//  placeholder:'type anything here',
    value: props.attributes.prop,
    update: data => props.setAttributes( { prop: data } ) }
}),

All Ui elements is an explicative type of button

- ui-textarea

make('ui-textarea',{
//  placeholder: 'write anything here',
    value: props.attributes.prop,
    update: data => props.setAttributes( { prop: data } )
}),

- ui-aligner

make('ui-aligner',{
    value: 'left',
    update: data => props.setAttributes( { prop: data }),
}),

- ui-btn-group

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

- ui-button

Button result depend want you want do. It's a trigger. we suggest to start to this and make new prototypes for you intents, infact: data... it's an empty event.

make('ui-button',{
//  icon: 'name_of_dash_icon',
//  label: 'a classic button',
    value: props.attributes.prop,
    update: data => {alert('hello world!'), conole.log(data)}
}),

- ui-featuredimage

It's a demo concept not tested. Displays the button for post covers. An object should return with the image selected in the gallery inside.

make('ui-featuredimage',{
    update: data =>  {alert('hello world!'), conole.log(data)}
}),

- ui-checkbox

make('ui-checkbox',{
//  label:"demo check true false",
//  help:'if is visible or not (demo)', not raccomended
    value: bool,
    update: data =>{ props.setAttributes({ prop:data })}
}),

- ui-radiobox

make('ui-radiobox',{
    value: a_list_value,
    list: [
        { label: '- like one', value: 'one' },
        { label: '- like other', value: 'two' },
        { label: '- like anywone', value: 'three' },
    ],
    update: data => props.setAttributes({ prop: data })
}),

- ui-range

make('ui-range',{
//  label:"ranged [50/50]",
    value: number,
    min:-50,
    max:50,
//  step:0.2,
//  list:[
//      { value: -50, label: 'min' },
//      { value: 0, label: '--', },
//      { value: 50, label: 'max', },
//  ],
    update: data => props.setAttributes({ prop: data })
}),

- ui-range-compact

make('ui-range-compact',{
    // equal of range, but label result inline in inspector
}),

- ui-selectbox

make('ui-selectbox',{
//  label: "Font size",
//  multiple: false | true | prop,
    value: a_list_value,
    list: [
        { label: 'Big', value: '300' },
        { label: 'Medium', value: '100' },
        { label: 'Small', value: '50' }
    ],
    update: data => props.setAttributes({ prop: data })
}),

- ui-togglebox

make('ui-togglebox',{
//  label: 'my label',
    value: a_list_value,
    list:[
        { label: 'S', value: 's' },
        { label: 'M', value: 'm' },
        { label: 'L', value: 'l' }
    ],
    update: data => props.setAttributes({ prop: data })

}),

- ui-switchbox

make('ui-switchbox',{
    value: bool,
    update : data => props.setAttributes({ prop: data })
}),

- ui-color-picker

make('ui-color-picker',{
//  alpha: bool,
//  default: hex_string,
    value: hex_string,
    onChangeComplete: data => props.setAttributes({ prop: data})
}),

- ui-color-palette

make('ui-color-palette',{
    list: [
        { name: 'black', color: '#202020' },
        { name: 'white', color: '#ffffff' },
        { name: 'other', color: '#ff1212' },
        ...
    ],
    update: data => props.setAttributes({ prop: data})
})

- ui-positioner

make('ui-positioner',{
    update_type: data => {props.setAttributes({ css_position_type: data })},
    update_coord: data => {props.setAttributes({ css_position_coord: data })},
    coord: props.attributes.css_position_coord,
    type: 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:'' }),
    update_cover: () => props.setAttributes({ css_bkgimage_cover:!props.attributes.css_bkgimage_cover }),
    update_repeat: () => props.setAttributes({ css_bkgimage_repeat:!props.attributes.css_bkgimage_repeat }),
    update_position: pos => props.setAttributes({ css_bkgimage_position: pos }),
    update_media: 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: a_dash_icon,
    label: a_string 
},[
    [
        { 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]),