PHPackages jankx/gutenberg-controls - 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. jankx/gutenberg-controls ActiveLibrary[Utility & Helpers](/categories/utility) jankx/gutenberg-controls ======================== 01.2kPHP Since Jun 24Pushed 3w agoCompare [ Source](https://github.com/jankx/gutenberg-controls)[ Packagist](https://packagist.org/packages/jankx/gutenberg-controls)[ RSS](/packages/jankx-gutenberg-controls/feed)WikiDiscussions master Synced today READMEChangelogDependenciesVersions (1)Used By (0) Jankx Gutenberg Controls ======================== [](#jankx-gutenberg-controls) **Extension layer for WordPress Gutenberg** — adds missing responsive, layout, and animation controls while maintaining 100% compatibility with WordPress core. > **Philosophy: Extend, Don't Replace** > > We enhance Gutenberg's native capabilities without breaking existing blocks or forking core functionality. What Makes This Different? -------------------------- [](#what-makes-this-different) ### WordPress Core → Jankx Extension Layer [](#wordpress-core--jankx-extension-layer) ``` WordPress Gutenberg (Core) ├─ Basic padding/margin controls (static values) ├─ No responsive visibility per device ├─ No column grid system ├─ No scroll animations └─ Basic background options ↓ Jankx Wraps & Enhances ↓ Jankx Gutenberg Controls (Extension) ├─ 🎨 Visual Spacing Control (drag handles, live preview) ├─ 📱 Responsive Control (hide/show per device, breakpoints) ├─ 📐 Grid System (1/2/3/4/6/12 columns, responsive) ├─ ✨ Animation Control (scroll triggers, 30+ effects) ├─ 🎭 Section Control (Flatsome-style with dividers/parallax) ├─ 🎨 Icon Picker (favorites, recent, categories) └─ ⚡ Preset System (1-click design templates) ``` **Result**: Same WordPress blocks, supercharged with Flatsome UX Builder capabilities. Installation ------------ [](#installation) ``` composer require jankx/gutenberg-controls ``` Quick Start ----------- [](#quick-start) ``` use Jankx\Gutenberg\Controls\ColorControl; use Jankx\Gutenberg\Controls\TypographyControl; // Register custom controls for your block add_filter('jankx/gutenberg/register-controls', function($controls) { $controls[] = new ColorControl([ 'name' => 'customBackground', 'label' => __('Background Color'), 'supports' => ['gradient', 'duotone'], ]); return $controls; }); ``` Architecture ------------ [](#architecture) ``` ┌─────────────────────────────────────────────────────────┐ │ Your Block (jankx/hero) │ ├─────────────────────────────────────────────────────────┤ │ AbstractBlockWithControls │ │ ├─ Auto-enqueues assets │ │ ├─ Generates CSS from control values │ │ └─ Renders with jankxControls attributes │ ├─────────────────────────────────────────────────────────┤ │ Jankx Controls (Extensions) │ │ ├─ VisualSpacingControl │ │ ├─ ResponsiveControl │ │ ├─ IconPickerControl │ │ └─ AnimationControl │ ├─────────────────────────────────────────────────────────┤ │ WordPress Core (Native) │ │ ├─ @wordpress/components │ │ ├─ @wordpress/block-editor │ │ └─ @wordpress/compose │ └─────────────────────────────────────────────────────────┘ ``` ### Key Principles [](#key-principles) 1. **Zero Breaking Changes**: Existing blocks work unchanged 2. **Progressive Enhancement**: Opt-in via `jankxControls` attribute 3. **CSS-Only Output**: No JavaScript required for frontend 4. **Native UI Patterns**: Uses WordPress component design system Available Controls ------------------ [](#available-controls) ### Layout Controls [](#layout-controls) ControlTypeDescriptionWordPress Equivalent`SectionControl`LayoutFlatsome-style sections with dividers, parallax, sticky❌ None`ResponsiveControl`LayoutDevice visibility, columns, order, flex per breakpoint❌ None`VisualSpacingControl`LayoutDrag-handle margin/padding with live preview⚠️ Basic (static)`RowControl`LayoutGrid row with gap, alignment⚠️ Group block (limited)### Style Controls [](#style-controls) ControlTypeDescriptionWordPress Equivalent`ColorControl`StyleColor + gradient + duotone + alpha + theme colors✅ Enhanced`TypographyControl`StyleFont library + fluid sizing + text effects✅ Enhanced`BorderControl`StyleBorder radius, style, color✅ Enhanced`ShadowControl`StyleBox shadows with presets❌ None`ImagePickerControl`MediaMedia library + focal point + overlays❌ None### Advanced Controls [](#advanced-controls) ControlTypeDescriptionWordPress Equivalent`AnimationControl`EffectsScroll-triggered animations❌ None`IconPickerControl`UIIcon library with favorites❌ None`PresetManager`System1-click design templates❌ None### Creating Blocks with Custom Controls [](#creating-blocks-with-custom-controls) Extend `AbstractBlockWithControls` to create blocks with Jankx controls: ``` use Jankx\Gutenberg\Blocks\AbstractBlockWithControls; use Jankx\Gutenberg\Controls\Layout\SectionControl; use Jankx\Gutenberg\Controls\Effects\AnimationControl; use Jankx\Gutenberg\Registry\BlockRegistry; class HeroBlock extends AbstractBlockWithControls { protected function getBlockName(): string { return 'jankx/hero'; } protected function getBlockTitle(): string { return __('Hero Section', 'jankx'); } protected function registerControls(): void { $this->addControl(new SectionControl([ 'name' => 'layout', 'label' => __('Layout', 'jankx'), ])); $this->addControl(new AnimationControl([ 'name' => 'animation', 'label' => __('Animation', 'jankx'), ])); } protected function renderBlockContent( array $attributes, string $content, $block, array $jankxControls ): string { // Custom rendering logic return '' . $content . ''; } } // Register the block add_action('init', function() { $registry = BlockRegistry::getInstance(); $registry->register(new HeroBlock()); }); ``` ### Block Bindings (WP 6.5+) [](#block-bindings-wp-65) ``` use Jankx\Gutenberg\Bindings\PostMetaBinding; // Register custom binding source add_action('init', function() { PostMetaBinding::register('jankx/post-meta', [ 'label' => __('Post Meta Field'), 'get_value' => function($args) { return get_post_meta(get_the_ID(), $args['key'], true); }, ]); }); ``` ### Full Site Editing Integration [](#full-site-editing-integration) ``` // Register template parts add_action('jankx/gutenberg/register-template-parts', function($registry) { $registry->register('jankx/header', [ 'title' => __('Jankx Header'), 'area' => 'header', ]); }); ``` Development ----------- [](#development) ### Requirements [](#requirements) - Node.js 16+ - WordPress 6.0+ - PHP 7.4+ ### Build [](#build) ``` npm install npm run build ``` ### Testing [](#testing) ``` npm test ``` How It Works ------------ [](#how-it-works) ### Control Rendering Flow [](#control-rendering-flow) ``` // 1. Block registration $controls = [ 'layout' => SectionControl::class, // Native WP doesn't have 'responsive' => ResponsiveControl::class, // Native WP doesn't have 'animation' => AnimationControl::class, // Native WP doesn't have ]; // 2. Editor: React components render in InspectorControls // Uses @wordpress/components as base, adds Jankx UX layer // 3. Frontend: PHP generates CSS from saved attributes // Output: WordPress-compatible CSS with responsive breakpoints ``` ### CSS Output Example [](#css-output-example) ``` /* WordPress generates base styles */ .wp-block-jankx-section { background: #fff; } /* Jankx adds responsive enhancement */ @media (max-width: 1024px) { .wp-block-jankx-section { padding: 20px; } } @media (max-width: 767px) { .wp-block-jankx-section { display: none; /* responsive hide */ flex-direction: column; /* auto-stack */ } } ``` Gap Analysis: WordPress vs Jankx -------------------------------- [](#gap-analysis-wordpress-vs-jankx) FeatureWordPress CoreJankx ExtensionImpact**Responsive Visibility**❌ Not available✅ Hide/show per deviceCritical for mobile design**Visual Spacing**⚠️ Static input fields✅ Drag handles, live preview10x faster workflow**Column Grid**⚠️ Column block (fixed)✅ 1/2/3/4/6/12 responsive colsFlexible layouts**Scroll Animations**❌ Not available✅ 30+ entrance effectsEngaging UX**Section Dividers**❌ Not available✅ SVG shapes, parallaxProfessional designs**Icon Picker**❌ Not available✅ Library with favoritesConsistent branding**Design Presets**⚠️ Patterns (static)✅ 1-click customizableRapid prototyping**Sticky Sections**❌ Not available✅ Sticky with offsetModern navigation**Total Enhancement**: 8 major features WordPress doesn't have natively. Compatibility ------------- [](#compatibility) WordPress VersionSupport Status6.5+Full support (Block Bindings API)6.4+Font Library, Style revisions6.0+Core controls and FSE basicsContributing ------------ [](#contributing) See [CONTRIBUTING.md](../../CONTRIBUTING.md) for guidelines. License ------- [](#license) MIT License - see [LICENSE](../../LICENSE) for details. --- **Note**: This package is designed to integrate seamlessly with the Jankx Theme Framework. For standalone usage, ensure WordPress block editor scripts are properly enqueued. ### Health Score 25 — LowBetter than 35% of packages Maintenance62 Regular maintenance activity Popularity19 Limited adoption so far Community6 Small or concentrated contributor base Maturity11 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure 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. ### Community Maintainers ![](https://www.gravatar.com/avatar/6a609a3b3a36dee9f36ef6f8d3b2b2dc91eebefc7644031e829e65bca4329799?d=identicon)[puleeno](/maintainers/puleeno) --- Top Contributors [![puleeno](https://avatars.githubusercontent.com/u/22538657?v=4)](https://github.com/puleeno "puleeno (11 commits)") ### Embed Badge ![Health badge](/badges/jankx-gutenberg-controls/health.svg) ``` [![Health](https://phpackages.com/badges/jankx-gutenberg-controls/health.svg)](https://phpackages.com/packages/jankx-gutenberg-controls) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)