PHPackages gutengeek/components - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. gutengeek/components ActiveLibrary[Utility & Helpers](/categories/utility) gutengeek/components ==================== Gutengeek Components Advanced Controls for GutenBerg 1.0.5(5y ago)1142MITJavaScriptPHP >=7.0CI failing Since Jun 30Pushed 5y ago1 watchersCompare [ Source](https://github.com/gutengeek/Components)[ Packagist](https://packagist.org/packages/gutengeek/components)[ Docs](https://gutengeek.com/)[ RSS](/packages/gutengeek-components/feed)WikiDiscussions master Synced today READMEChangelog (2)DependenciesVersions (3)Used By (0) `# 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](https://wordpress.org/plugins/gtg-advanced-blocks). Installation ------------ [](#installation) ### Install the composer package [](#install-the-composer-package) ``` cd path/to/your-[plugin|theme] composer require gutengeek/components ``` Make sure `autoload.php` had included ``` // require autoload into your plugin or theme require_once 'path/to/project/vendor/autoload.php'; ``` ### Or - Install the npm package [](#or---install-the-npm-package) ``` cd path/to/your-folder npm i @gutengeek/components ``` ### Requirement [](#requirement) ``` // 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 ); ``` Usage ----- [](#usage) Within [GutenGeek Plugin](https://gutengeek.com) 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 setDevice(device) } device={ device } onChange={ value => setValue( value ) } units={ [ 'px', 'em', '%' ] } /> } ``` Gutengeek Toolbar Components Available: --------------------------------------- [](#gutengeek-toolbar-components-available) `ShapeControl` `SizeTypeUnits` `GradientControl` `IconPickerControl` `PaddingControl` `MarginControl` `HeadingControl` `RangeSlider` `BackgroundControl` `Typography` `AlignmentsControl` `BorderControl` `BorderRadiusControl` `BoxShadowControl` `TransformControl` `ButtonGroupControl` `Dimension` `ParallaxControls` `Color` `MediaControl` `TransitionControl` `ResponsiveControl` `InspectorTabs` `InspectorTab` --- Development Guideline --------------------- [](#development-guideline) ### ShapeControl [](#shapecontrol) 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' : ' ' 'mask02' : ' ' } export default function MyComponent( props ) { const { attributes: { shape }, setAttributes } = props const [ device, setDevice ] = useState( 'desktop' ); return setDevice( device ) } onChange={ ( value ) => setAttributes( { shape: value } ) } /> } ``` ### SizeTypeUnits [](#sizetypeunits) 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 setValue( value ) }/> } ``` ### GradientControl [](#gradientcontrol) Support CSS Gradients to let show off a smooth color between at least 2 or more colors. ``` setAttributes({value: value}) } presetAllowed={true}/> ``` ### IconPickerControl [](#iconpickercontrol) 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. [![IconPickerControl](https://camo.githubusercontent.com/464c6ee57ef611d75ff399a38cca3bf03e2dfa6f22498ba422b2792fe9a7ecf0/68747470733a2f2f73332e75732d656173742d322e616d617a6f6e6177732e636f6d2f7374617469632e677574656e6765656b2e636f6d2f5468756d626e61696c732f49636f6e5069636b65722e706e67)](https://wordpress.org/plugins/gtg-advanced-blocks/) ``` 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] } } } { 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 svg ``` ### PaddingControl [](#paddingcontrol) Set space for around element's contents,. There are settings for padding ( top, right, bottom, left) [![PaddingControl](https://camo.githubusercontent.com/69283d3c632e901ca3aaab4b64931e71e0f895f3a36b29a896d976ae2c5f4082/68747470733a2f2f73332e75732d656173742d322e616d617a6f6e6177732e636f6d2f7374617469632e677574656e6765656b2e636f6d2f5468756d626e61696c732f50616464696e672e706e67)](https://wordpress.org/plugins/gtg-advanced-blocks/) ``` const [ device, setDevice ] = useState( 'desktop' ); ``` ``` setAttributes({ padding: value } )} device={ device} onChangeDevice={ (value) => setDevice(value) } units={ [ 'px', 'em', '%' ] } /> ``` ### MarginControl [](#margincontrol) Setting the margin for each side of an element with border (top, right, bottom, and left). ``` const [ device, setDevice ] = useState( 'desktop' ); ``` ``` setAttributes({ margin: value } )} device={ device} onChangeDevice={ (value) => setDevice(value) } units={ [ 'px', 'em', '%' ] } /> ``` ### HeadingControl [](#headingcontrol) Allows to choose heading tag: h1, h2, h3, h4, h5, h6 ``` setAttributes( { headingTag: value } ) } /> ``` ### RangeSlider [](#rangeslider) Drag and drop number, support on the different devices. [![RangeSlider](https://camo.githubusercontent.com/3f89cc59cada0b4a714c08e79eb37b1fc150a2c8ca5f3cf6969a8e607349b0c9/68747470733a2f2f73332e75732d656173742d322e616d617a6f6e6177732e636f6d2f7374617469632e677574656e6765656b2e636f6d2f5468756d626e61696c732f52616e6765536c696465722e706e67)](https://wordpress.org/plugins/gtg-advanced-blocks/) ``` const [ device, setDevice ] = useState( 'desktop' ); ``` ``` setAttributes( { marginBottom: value } ) } units={['px', 'em', '%']} min={0} max={100} device={device} onChangeDevice={ ( device ) => setDevice( device ) } allowReset /> ``` ### BackgroundControl [](#backgroundcontrol) Choose Normal & Hover. Possible to set background: Color, Gradient, Video & Images [![BackgroundControl](https://camo.githubusercontent.com/ae2637c83fc8b0efeab7b2086baeec72d87ff4822c806428af4b528f7b7678f7/68747470733a2f2f73332e75732d656173742d322e616d617a6f6e6177732e636f6d2f7374617469632e677574656e6765656b2e636f6d2f5468756d626e61696c732f4261636b67726f756e642e706e67)](https://wordpress.org/plugins/gtg-advanced-blocks/) ``` const [ device, setDevice ] = useState( 'desktop' ); ``` ``` setAttributes( { background: value } ) } onChangeDevice={ ( device ) => setDevice( device ) } /> ``` ### Typography [](#typography) Font size, font family, variants, font style, font weight, text transform controls [![Typography](https://camo.githubusercontent.com/81dbfd8d0ab42ce7f87de66e86751c8afe50c490ba69fcce19292edd07c7202a/68747470733a2f2f73332e75732d656173742d322e616d617a6f6e6177732e636f6d2f7374617469632e677574656e6765656b2e636f6d2f5468756d626e61696c732f5479706f6772617068792e706e67)](https://wordpress.org/plugins/gtg-advanced-blocks/) ``` const [ device, setDevice ] = useState( 'desktop' ); ``` ``` setAttributes( { headingTypo: value } ) } device={ gutengeek_device_mode } onChangeDevice={ value => setDevice(value) } /> ``` ### AlignmentsControl [](#alignmentscontrol) Possible to set text-align in CSS with Align center, wide width, full width [![AlignmentsControl](https://camo.githubusercontent.com/9da80ed42f4a25be382295729b18368d518a889cc67c806bd3409b56c8e6aa7f/68747470733a2f2f73332e75732d656173742d322e616d617a6f6e6177732e636f6d2f7374617469632e677574656e6765656b2e636f6d2f5468756d626e61696c732f48656164696e67436f6e74726f6c2e706e67)](https://wordpress.org/plugins/gtg-advanced-blocks/) ``` 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' ) }, ]} /> ``` ### BorderControl [](#bordercontrol) Enable/disable border in css, set position, width (px, em, %), border shape. [![BorderControl](https://camo.githubusercontent.com/db556b5bc1d190c6a591d3a1a629d49801f630df0d8e4bffe61ebf5f1e15926b/68747470733a2f2f73332e75732d656173742d322e616d617a6f6e6177732e636f6d2f7374617469632e677574656e6765656b2e636f6d2f5468756d626e61696c732f426f72646572436f6e74726f6c2e706e67)](https://wordpress.org/plugins/gtg-advanced-blocks/) ``` setDevice(device) } device={ device } onChange={ value => setValue( value ) } units={ [ 'px', 'em', '%' ] } /> ``` ### BorderRadius [](#borderradius) Defines the radius in CSS of the element's corners [![BorderRadius](https://camo.githubusercontent.com/a2673bfa7ca99b2c961927a5eaaf12c389432d95ba8aadbdffa655e223cac507/68747470733a2f2f73332e75732d656173742d322e616d617a6f6e6177732e636f6d2f7374617469632e677574656e6765656b2e636f6d2f5468756d626e61696c732f426f726465725261646975732e706e67)](https://wordpress.org/plugins/gtg-advanced-blocks/) ``` setDevice( device ) } min={ 0 } max={ 100 } onChange={ value => setAttributes( { value: value } ) } /> ``` ### BoxShadowControl [](#boxshadowcontrol) Choose box shadow in CSS [![BoxShadowControl](https://camo.githubusercontent.com/c0f6a0d097055854a81ebbcbfec697660efde7ce1c9f5a87d9bf92757345e9bb/68747470733a2f2f73332e75732d656173742d322e616d617a6f6e6177732e636f6d2f7374617469632e677574656e6765656b2e636f6d2f5468756d626e61696c732f426f78536861646f772e706e67)](https://wordpress.org/plugins/gtg-advanced-blocks/) ``` const [ device, setDevice ] = useState( 'desktop' ); ``` ``` setDevice( device ) } onChange={ value => setAttributes( { boxShadow: value } ) } /> ``` ### TransformControl [](#transformcontrol) All attribute transform in CSS ``` const [ device, setDevice ] = useState( 'desktop' ); ``` ``` setAttributes( { transform: value } )} device={ device} onChangeDevice={ ( device ) => setDevice( device ) } /> ``` ### ButtonGroupControl [](#buttongroupcontrol) 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, ``` setAttributes( { position: value } ) } /> ``` ### Dimension [](#dimension) Set padding & margin with Top, Right, Bottom & Left with options px, em, rem, % in CSS. ``` this.props.setDevice(device) } onChange={ value => setAttributes( { panelSpacing: value } ) } /> ``` ### ParallaxControls [](#parallaxcontrols) Enable/disable parallax control, event type, items #1 (select image, width, height, position, Speed, Duration, Index) ``` setAttributes({ parallax: { ...parallax, ...value } })}/> ``` ### Color [](#color) Pick a suitable color from pallet ``` setAttributes( { color: value } ) }/> ``` ### Media [](#media) Upload media to library or import media url. ``` setAttributes( { iconImg: media } ) } /> ``` ### TransitionControl [](#transitioncontrol) Attributes transition effects controls in CSS ``` setAttributes({ transition: value } )}/> ``` ### ResponsiveControl [](#responsivecontrol) Options for Hide/enable on devices as desktop, tablet, mobile ``` const [ device, setDevice ] = useState( 'desktop' ); const [ unit, setUnit ] = useState( 'px' ); ``` ``` setUnit( value ) } onChangeDevice={ ( value ) => setDevice( value ) }> { ( deviceMode ) => { return ( // return your children component ); } } ``` ### InspectorTabs & InspectorTab [](#inspectortabs--inspectortab) Split tab layout, style, advanced ``` // do something // do something // do something ``` ### Tabs & Tab [](#tabs--tab) Split tab hover, active state ``` setState( { state: value } )}> // do something // do something ``` ### URL [](#url) URL full option ``` // imageUrl: object setAttributes({ imageUrl: value })} /> ``` ### Health Score 25 — LowBetter than 35% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity9 Limited adoption so far Community12 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~27 days Total 2 Last Release 2167d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/ff612cd99dbf59cae629861040e95a40a20f521ca27fa0646140e25a1709cbfb?d=identicon)[gutengeekwp](/maintainers/gutengeekwp) --- Top Contributors [![duchn](https://avatars.githubusercontent.com/u/29883993?v=4)](https://github.com/duchn "duchn (62 commits)")[![duchndev](https://avatars.githubusercontent.com/u/29883993?v=4)](https://github.com/duchndev "duchndev (62 commits)")[![gutengeek](https://avatars.githubusercontent.com/u/66512225?v=4)](https://github.com/gutengeek "gutengeek (1 commits)") --- Tags gutenberggutenberg-componentsgutenberg-editorgutengeekgutengeek-tutorialwordpresswordpresscomponentslibrarygutenberggutengeekblock-controlsblock-components ### Embed Badge ![Health badge](/badges/gutengeek-components/health.svg) ``` [![Health](https://phpackages.com/badges/gutengeek-components/health.svg)](https://phpackages.com/packages/gutengeek-components) ``` ### Alternatives [maiorano84/shortcodes Implement Shortcode syntax anywhere 7766.0k5](/packages/maiorano84-shortcodes)[tiny-pixel/acorn-block-templates Block templates for Sage 10 191.3k](/packages/tiny-pixel-acorn-block-templates) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)