{"id":34622453,"url":"https://github.com/wpgaurav/block-editor-enhancements","last_synced_at":"2026-04-16T17:01:18.419Z","repository":{"id":328113053,"uuid":"1114261956","full_name":"wpgaurav/Block-Editor-Enhancements","owner":"wpgaurav","description":"Enhance the WordPress Block Editor with custom CSS/JS injection, Core Block Variations, editor width control, word count, and more – with options to run code on both backend and frontend.","archived":false,"fork":false,"pushed_at":"2025-12-11T08:46:13.000Z","size":124,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-26T04:43:40.694Z","etag":null,"topics":["gutenberg","wordpress","wordpress-development","wordpress-plugin"],"latest_commit_sha":null,"homepage":"https://gauravtiwari.org/snippet/block-editor-enhancements/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wpgaurav.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-11T05:58:40.000Z","updated_at":"2025-12-11T08:46:17.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/wpgaurav/Block-Editor-Enhancements","commit_stats":null,"previous_names":["wpgaurav/block-editor-enhancements"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wpgaurav/Block-Editor-Enhancements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpgaurav%2FBlock-Editor-Enhancements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpgaurav%2FBlock-Editor-Enhancements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpgaurav%2FBlock-Editor-Enhancements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpgaurav%2FBlock-Editor-Enhancements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wpgaurav","download_url":"https://codeload.github.com/wpgaurav/Block-Editor-Enhancements/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpgaurav%2FBlock-Editor-Enhancements/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31895650,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T11:36:10.202Z","status":"ssl_error","status_checked_at":"2026-04-16T11:36:09.652Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gutenberg","wordpress","wordpress-development","wordpress-plugin"],"created_at":"2025-12-24T15:33:37.926Z","updated_at":"2026-04-16T17:01:18.382Z","avatar_url":"https://github.com/wpgaurav.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Advanced Block Editor\n\nEnhance the WordPress Block Editor with custom CSS/JS injection, **Core Block Variations**, editor width control, word count, and more – **with options to run code on both backend and frontend**.\n\n![WordPress](https://img.shields.io/badge/WordPress-%3E%3D6.0-blue)\n![PHP](https://img.shields.io/badge/PHP-%3E%3D7.4-purple)\n![License](https://img.shields.io/badge/License-GPLv3-green)\n\n## Features\n\n### 🧩 Core Block Variations Manager (NEW!)\nCreate custom variations of any core WordPress block without writing code.\n- **Visual Interface**: Create variations directly in the Block Editor sidebar\n- **Preset Attributes**: Set default values for blocks (colors, typography, spacing)\n- **Custom Icons \u0026 Titles**: Make your variations easily identifiable\n- **Scope Control**: Choose where variations appear (inserter, block, transform)\n- **Inner Blocks Support**: Pre-configure nested block structures\n- **Enable/Disable**: Toggle variations on or off without deleting them\n\n### 💻 Advanced Custom Code Panel (NEW!)\nEnhanced code editor with fullscreen mode and dual-scope execution.\n- **Fullscreen Editor**: Distraction-free code editing experience\n- **CSS Selector Helper**: Click-to-insert common selectors reference\n- **Frontend + Backend**: Choose to run code in editor, frontend, or both\n- **Multiple Snippets**: Manage multiple independent code snippets\n- **Enable/Disable Toggle**: Turn snippets on/off without deletion\n- **Syntax Highlighting**: Dark-themed code editor with proper formatting\n\n### 🎨 Custom CSS Injection\nAdd custom styles to the Block Editor to match your theme or create a better editing experience.\n- **Inline CSS**: Write CSS directly in the admin settings\n- **External CSS File**: Load CSS from any URL or upload to media library\n\n### ⚡ Custom JavaScript Injection  \nExtend the Block Editor with custom JavaScript to add new functionality.\n- **Inline JavaScript**: Add custom scripts directly\n- **External JS File**: Load JavaScript from any URL or upload to media library\n\n### 📏 Editor Width Control\nAdjust the content area width to match your theme's content width.\n- Slider control in editor sidebar\n- Supports px, %, and vw units\n- Persists across sessions\n\n### 📊 Word Count Display\nReal-time word and character count shown at the top or bottom of the editor.\n\n### 🎯 Focus Mode\nDim non-active blocks to focus on your current content.\n\n### 🖥️ Fullscreen Control\nOption to disable fullscreen mode by default.\n\n## Installation\n\n### From GitHub\n\n1. Download or clone this repository\n2. Copy the `advanced-block-editor` folder to `/wp-content/plugins/`\n3. Activate the plugin in WordPress admin\n\n### Manual\n\n1. Download the latest release\n2. Upload via **Plugins → Add New → Upload Plugin**\n3. Activate the plugin\n\n## Usage\n\n### Settings Page\n\nNavigate to **Settings → Block Editor+** to configure:\n\n| Tab | Description |\n|-----|-------------|\n| **General** | Editor width, word count, focus mode, fullscreen settings |\n| **Custom CSS** | Add inline CSS or link external CSS file |\n| **Custom JS** | Add inline JavaScript or link external JS file |\n\n### Block Variations (Editor Sidebar)\n\n1. Open the Block Editor for any post or page\n2. Click the **Block Variations** icon in the editor toolbar/more menu\n3. Click **\"+ Create New Variation\"**\n4. Configure:\n   - **Block Type**: Select the core block to create a variation for\n   - **Name/Title**: Give your variation a unique identifier\n   - **Icon \u0026 Category**: Customize appearance in inserter\n   - **Default Attributes**: Set preset values (as JSON)\n   - **Scope**: Choose where the variation appears\n5. Save and use your variation from the block inserter!\n\n### Custom Code Panel (Editor Sidebar)\n\n1. Open the Block Editor\n2. Click the **Custom Code** icon (\u003c/\u003e) in the toolbar\n3. Click **\"+ CSS\"** or **\"+ JavaScript\"** to create a snippet\n4. Use the fullscreen editor for a better coding experience\n5. Choose execution scope:\n   - **Editor**: Code runs only in the Block Editor\n   - **Frontend**: Code runs on the public website\n   - **Both**: Code runs everywhere\n6. Toggle snippets on/off as needed\n\n## Development\n\n### Requirements\n\n- PHP 7.4+\n- WordPress 6.0+\n\n### Structure\n\n```\nadvanced-block-editor/\n├── advanced-block-editor.php  # Main plugin file\n├── includes/\n│   ├── class-block-variations.php  # Block Variations Manager\n│   └── class-custom-code.php       # Custom Code Manager\n├── assets/\n│   ├── admin/\n│   │   ├── css/admin.css      # Admin settings page styles\n│   │   └── js/admin.js        # Admin scripts (CodeMirror, media upload)\n│   └── editor/\n│       ├── css/editor.css     # Block Editor styles\n│       ├── js/editor.js       # Block Editor enhancements\n│       ├── js/block-variations.js  # Block Variations UI\n│       └── js/custom-code-panel.js # Custom Code Panel UI\n├── languages/                  # Translation files\n├── readme.txt                  # WordPress.org readme\n└── README.md                   # This file\n```\n\n### Creating Block Variations Programmatically\n\n```javascript\n// Access saved variations via localized data\nconst variations = window.abeVariations.variations;\n\n// Example: Register a variation manually\nwp.blocks.registerBlockVariation('core/button', {\n    name: 'cta-button',\n    title: 'CTA Button',\n    attributes: {\n        backgroundColor: 'vivid-cyan-blue',\n        textColor: 'white',\n        className: 'is-style-cta'\n    }\n});\n```\n\n### Available WordPress APIs in Custom JS\n\n```javascript\n// Access editor state\nwp.data.select('core/editor').getEditedPostContent();\n\n// Modify editor state  \nwp.data.dispatch('core/editor').editPost({ title: 'New Title' });\n\n// Register custom plugins\nwp.plugins.registerPlugin('my-plugin', { render: MyComponent });\n\n// Add filters to blocks\nwp.hooks.addFilter('blocks.registerBlockType', 'myPlugin/filter', filterFn);\n```\n\n## License\n\nGPL v3 or later. See [LICENSE](LICENSE) for full text.\n\n## Author\n\n**Gaurav Tiwari**\n- Website: [gauravtiwari.org](https://gauravtiwari.org)\n- GitHub: [@wpgaurav](https://github.com/wpgaurav)\n\n## Support\n\nFor bug reports and feature requests, please use the [GitHub Issues](https://github.com/wpgaurav/block-editor-enhancements/issues) page.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpgaurav%2Fblock-editor-enhancements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwpgaurav%2Fblock-editor-enhancements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpgaurav%2Fblock-editor-enhancements/lists"}