# Gutengeek - Components Reference
The package is a library that provides all components to create control power and UI beauty block inspector easily. This is a part of GutenGeek plugin. Check out Full Features Gutengeek Blocks.
cd path/to/your-[plugin|theme]
composer require gutengeek/componentsMake sure autoload.php had included
// require autoload into your plugin or theme
require_once 'path/to/project/vendor/autoload.php';cd path/to/your-folder
npm i @gutengeek/components// make sure 'wp_enqueue_script' function enqueued with dependencies required
// example
wp_register_script( 'gutengeek-advanced-components', YOUR_PLUGIN_URL . 'path/to/blocks/scripts/index.js', [ 'wp-edit-post', 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-components', 'wp-editor', 'wp-api-fetch', 'wp-compose', 'wp-data' ], false, true );Within GutenGeek Plugin plugin, these components can be accessed by importing from the wp.gutengeek.components root directory:
// use with gtg-advanced-blocks wordpress plugin
const {
BorderControl
} = wp.gutengeek.components
// import via npm
import Components from "@gutengeek/components";
import '@gutengeek/components/build/core.css';
import '@gutengeek/components/build/index.css';/**
* GutenBerg dependencies
*/
const {
InspectorControls
} = wp.blockEditor;
const { __ } = wp.i18n;
const {
PanelBody,
} = wp.components;
/**
* GutenGeek dependencies
*/
const {
BorderControl
} = wp.gutengeek.components
export default function MyComponent() {
const [ device, setDevice ] = useState( 'desktop' ); // desktop, tablet, mobile
const [ value, setValue ] = useState( {} ); // border control value default is an object
return <InspectorControls>
<PanelBody title={ __('My Panel Body') }>
<BorderControl
className="your-extra-class"
title={ __( 'Border' ) }
value={ value }
onChangeDevice={ ( device ) => setDevice(device) }
device={ device }
onChange={ value => setValue( value ) }
units={ [ 'px', 'em', '%' ] }
/>
</PanelBody>
</InspectorControls>
}ShapeControl
SizeTypeUnits
GradientControl
IconPickerControl
PaddingControl
MarginControl
HeadingControl
RangeSlider
BackgroundControl
Typography
AlignmentsControl
BorderControl
BorderRadiusControl
BoxShadowControl
TransformControl
ButtonGroupControl
Dimension
ParallaxControls
Color
MediaControl
TransitionControl
ResponsiveControl
InspectorTabs
InspectorTab
By using Gutengeek, you can easily control all shape dividers which separate the section of page. Able to choose shape top & shape bottom.
const shapes = {
'mask01' : '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 470" style="enable-background:new 0 0 1920 470;" xml:space="preserve">
<path d="M0,0h1920v310L0,470V0z"/>
</svg>'
'mask02' : '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 1920 160" style="enable-background:new 0 0 1920 160;" xml:space="preserve">
<g style="transform: rotate3d(-180, 0, 0, -180deg); transform-origin: center"><polygon points="1920,160 1920,0 0,160 "/></g>
</svg>'
}
export default function MyComponent( props ) {
const {
attributes: {
shape
},
setAttributes
} = props
const [ device, setDevice ] = useState( 'desktop' );
return <InspectorControls>
<PanelBody title={ __('My Panel Body') }>
<ShapeControl value={ shape }
shapes={shapes}
device={ device }
onChangeDevice={ ( device ) => setDevice( device ) }
onChange={ ( value ) => setAttributes( { shape: value } ) }
/>
</PanelBody>
</InspectorControls>
}Gutengeek offers options for units to measure size, type as px, em, rem, % in CSS.
export default function MyComponent() {
const [ value, setValue ] = useState( 'em' ); // default value maybe em, px, %, vh, vw, whatever you want
return <InspectorControls>
<PanelBody title={ __('My Panel Body') }>
<SizeTypeUnit units={ ['px', 'em', '%'] } value={ value } onClick={ ( value ) => setValue( value ) }/>
</PanelBody>
</InspectorControls>
}Support CSS Gradients to let show off a smooth color between at least 2 or more colors.
<GradientControl value={ value } onChange={ ( value ) => setAttributes({value: value}) } presetAllowed={true}/>Support to show/display all icons from font awesome to let you choose icon for button, list bullets, social network icon in order to impress customers at the first sight.
const icons = {
500px: {
label: "500px",
search: {
terms: []
},
styles: ["brands"],
svg: {
brands: {
path: "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7 8.5-28.6 53 0 89.4-10.1 89.4-64.4 0-61-77.1-89.6-116.9-44.6-23.5 26.4-17.6 42.1-17.6 157.6 50.7 31 118.3 22 160.4-20.1 24.8-24.8 38.5-58 38.5-93 0-35.2-13.8-68.2-38.8-93.3-24.8-24.8-57.8-38.5-93.3-38.5s-68.8 13.8-93.5 38.5c-.3.3-16 16.5-21.2 23.9l-.5.6c-3.3 4.7-6.3 9.1-20.1 6.1-6.9-1.7-14.3-5.8-14.3-11.8V20c0-5 3.9-10.5 10.5-10.5h241.3c8.3 0 8.3 11.6 8.3 15.1 0 3.9 0 15.1-8.3 15.1H130.3v132.9h.3c104.2-109.8 282.8-36 282.8 108.9 0 178.1-244.8 220.3-310.1 62.8zm63.3-260.8c-.5 4.2 4.6 24.5 14.6 20.6C306 56.6 384 144.5 390.6 144.5c4.8 0 22.8-15.3 14.3-22.8-93.2-89-234.5-57-238.3-38.2zM393 414.7C283 524.6 94 475.5 61 310.5c0-12.2-30.4-7.4-28.9 3.3 24 173.4 246 256.9 381.6 121.3 6.9-7.8-12.6-28.4-20.7-20.4zM213.6 306.6c0 4 4.3 7.3 5.5 8.5 3 3 6.1 4.4 8.5 4.4 3.8 0 2.6.2 22.3-19.5 19.6 19.3 19.1 19.5 22.3 19.5 5.4 0 18.5-10.4 10.7-18.2L265.6 284l18.2-18.2c6.3-6.8-10.1-21.8-16.2-15.7L249.7 268c-18.6-18.8-18.4-19.5-21.5-19.5-5 0-18 11.7-12.4 17.3L234 284c-18.1 17.9-20.4 19.2-20.4 22.6z"
},
viewBox: [0, 0, 448, 512]
}
},
search: {
label: "Ad",
search: {
terms: []
},
styles: ["solid"],
svg: {
solid: {
path: ""M157.52 272h36.96L176 218.78 157.52 272zM352 256c-13.23 0-24 10.77-24 24s10.77 24 24 24 24-10.77 24-24-10.77-24-24-24zM464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM250.58 352h-16.94c-6.81 0-12.88-4.32-15.12-10.75L211.15 320h-70.29l-7.38 21.25A16 16 0 0 1 118.36 352h-16.94c-11.01 0-18.73-10.85-15.12-21.25L140 176.12A23.995 23.995 0 0 1 162.67 160h26.66A23.99 23.99 0 0 1 212 176.13l53.69 154.62c3.61 10.4-4.11 21.25-15.11 21.25zM424 336c0 8.84-7.16 16-16 16h-16c-4.85 0-9.04-2.27-11.98-5.68-8.62 3.66-18.09 5.68-28.02 5.68-39.7 0-72-32.3-72-72s32.3-72 72-72c8.46 0 16.46 1.73 24 4.42V176c0-8.84 7.16-16 16-16h16c8.84 0 16 7.16 16 16v160z""
},
viewBox: [0, 0, 512, 512]
}
}
}
<IconPickerControl icons={icons} renderIcon={(icon) => {
console.log(icon);
return (
// render your icon here
)
} }
label={ __( 'Icon' ) }
value={ value }
onChange={ value => setAttributes( { value: value } ) }
/>
// renderIcon is optional, default icon will be render as svgSet space for around element's contents,. There are settings for padding ( top, right, bottom, left)
const [ device, setDevice ] = useState( 'desktop' );<PaddingControl
value={ padding }
label={__( 'Padding' )}
onChange={ ( value ) => setAttributes({ padding: value } )}
device={ device}
onChangeDevice={ (value) => setDevice(value) } units={ [ 'px', 'em', '%' ] }
/>Setting the margin for each side of an element with border (top, right, bottom, and left).
const [ device, setDevice ] = useState( 'desktop' );<MarginControl
value={ margin }
label={__( 'Margin' )}
onChange={ ( value ) => setAttributes({ margin: value } )}
device={ device}
onChangeDevice={ (value) => setDevice(value) } units={ [ 'px', 'em', '%' ] }
/>Allows to choose heading tag: h1, h2, h3, h4, h5, h6
<HeadingControl
label={ __( 'Heading Tag' ) }
value={ headingTag }
onChange={ ( value ) => setAttributes( { headingTag: value } ) }
/>Drag and drop number, support on the different devices.
const [ device, setDevice ] = useState( 'desktop' );<RangeSlider
label={ __( 'Column Gap' ) }
value={ marginBottom } min={ 1 }
max={ 33 }
onChange={ ( value ) => setAttributes( { marginBottom: value } ) }
units={['px', 'em', '%']}
min={0}
max={100}
device={device}
onChangeDevice={ ( device ) => setDevice( device ) }
allowReset
/>Choose Normal & Hover. Possible to set background: Color, Gradient, Video & Images
const [ device, setDevice ] = useState( 'desktop' );<BackgroundControl
className="your-extra-class"
label={ __( 'Background' ) }
value={ background }
allows={ [ 'color', 'gradient', 'image' ] }
device={ gutengeek_device_mode }
onChange={ value => setAttributes( { background: value } ) }
onChangeDevice={ ( device ) => setDevice( device ) }
/>Font size, font family, variants, font style, font weight, text transform controls
const [ device, setDevice ] = useState( 'desktop' );<Typography
label={ __( 'Typography' ) }
value={ headingTypo }
onChange={ value => setAttributes( { headingTypo: value } ) }
device={ gutengeek_device_mode }
onChangeDevice={ value => setDevice(value) }
/>Possible to set text-align in CSS with Align center, wide width, full width
<AlignmentsControl
className="your-prefix"
label={ __( 'Text Alignment' ) }
device={ device }
onChangeDevice={ ( device ) => setDevice( device ) }
value={ value }
onChange={ ( value ) => setAttributes( { value: value } ) }
toggle={true}
options={[
{ label: __('Left'), value: 'left', text: __( 'Left' ) },
{ label: __('Center'), value: 'center', text: __( 'Center' ) },
{ label: text: __( 'Right' ), value: 'right', text: __( 'Right' ) },
]}
/>Enable/disable border in css, set position, width (px, em, %), border shape.
<BorderControl
className="your-extra-class"
title={ __( 'Border' ) }
value={ value }
onChangeDevice={ ( device ) => setDevice(device) }
device={ device }
onChange={ value => setValue( value ) }
units={ [ 'px', 'em', '%' ] }
/>Defines the radius in CSS of the element's corners
<BorderRadiusControl
className="your-extra-classs"
label={ __( 'Border Radius' ) }
units={ [ 'px', 'em', '%' ] }
value={ value }
responsive={ true }
device={ device }
onChangeDevice={ ( device ) => setDevice( device ) }
min={ 0 }
max={ 100 }
onChange={ value => setAttributes( { value: value } ) }
/>Choose box shadow in CSS
const [ device, setDevice ] = useState( 'desktop' );<BoxShadowControl
value={ boxShadow } device={ device }
unit='px'
onChangeDevice={ ( device ) => setDevice( device ) }
onChange={ value => setAttributes( { boxShadow: value } ) }
/>All attribute transform in CSS
const [ device, setDevice ] = useState( 'desktop' );<TransformControl
label={ __( 'Transform' ) }
value={ transform }
onChange={(value) => setAttributes( { transform: value } )}
device={ device} onChangeDevice={ ( device ) => setDevice( device ) }
/>Enable/disable buttons, type, size, enable/disable typography, Text, link (Open new window, same window), margin & icon. Only hover ( enable/disable), Icon Position, Icon Spacing,
<ButtonGroupControl
className="your-extra-class"
label={ __( 'Button Position' ) }
value={ position }
options={ [
{ value: 'left', label: <Dashicon icon="arrow-left"/>, text: __( 'Left' ) },
{ value: 'right', label: <Dashicon icon="arrow-right"/>, text: __( 'Right' ) },
] }
toggle={ true }
onClick={ ( value ) => setAttributes( { position: value } ) }
/>Set padding & margin with Top, Right, Bottom & Left with options px, em, rem, % in CSS.
<Dimension
label={ __( 'Card Padding' ) }
value={ cardPadding }
device={ gutengeek_device_mode }
min={ 0 }
max={ 500 }
onChangeDevice={ ( device ) => this.props.setDevice(device) }
onChange={ value => setAttributes( { panelSpacing: value } ) }
/>Enable/disable parallax control, event type, items #1 (select image, width, height, position, Speed, Duration, Index)
<ParallaxControls parallax={parallax} onChange={(value) => setAttributes({ parallax: { ...parallax, ...value } })}/>Pick a suitable color from pallet
<Color className="your-extra-class" label={ __( 'Color' ) } value={ color } onChange={ ( value ) => setAttributes( { color: value } ) }/>Upload media to library or import media url.
<MediaControl
label={ __( 'Select Image' ) } multiple={ false }
type={ [ 'image', 'color', 'gradient', 'video' ] }
value={ iconImg } panel={ true }
onChange={ media => setAttributes( { iconImg: media } ) }
/>Attributes transition effects controls in CSS
<TransitionControl value={ transition } onChange={(value) => setAttributes({ transition: value } )}/>Options for Hide/enable on devices as desktop, tablet, mobile
const [ device, setDevice ] = useState( 'desktop' );
const [ unit, setUnit ] = useState( 'px' );<ResponsiveControl label={ label }
device={ device }
units={ [ 'px', 'em' ] }
unit={ unit }
onChangeSizeType={ ( value ) => setUnit( value ) }
onChangeDevice={ ( value ) => setDevice( value ) }>
{
( deviceMode ) => {
return (
// return your children component
);
}
}Split tab layout, style, advanced
<InspectorControls>
<InspectorTabs tabs={[ 'layout', 'style', 'advanced' ]} active="advanced">
<InspectorTab key="layout">
// do something
</InspectorTab>
<InspectorTab key="style">
// do something
</InspectorTab>
<InspectorTab key="advanced">
// do something
</InspectorTab>
</InspectorTabs>
</InspectorControls>Split tab hover, active state
<Tabs tabs={[ { name: 'normal', label: __( 'Normal' ) }, { name: 'hover', label: __( 'Hover' ) } ]} onChange={(value) => setState( { state: value } )}>
<Tab key="normal">
// do something
</Tab>
<Tab key="hover">
// do something
</Tab>
</Tabs>URL full option
// imageUrl: object
<URL
label={ __( 'URL' ) }
value={imageUrl}
onChange={value => setAttributes({ imageUrl: value })}
/>