{"id":18615598,"url":"https://github.com/hex-digital/sage-blade-block-renderer","last_synced_at":"2025-04-11T01:31:17.909Z","repository":{"id":56983984,"uuid":"386659151","full_name":"hex-digital/sage-blade-block-renderer","owner":"hex-digital","description":"Generate blade partials to render native gutenberg blocks with Sage 10","archived":false,"fork":false,"pushed_at":"2021-07-19T07:56:27.000Z","size":36,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-08-17T22:33:24.107Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hex-digital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"jamiewarb"}},"created_at":"2021-07-16T14:09:34.000Z","updated_at":"2024-07-29T08:37:12.000Z","dependencies_parsed_at":"2022-08-21T12:50:07.644Z","dependency_job_id":null,"html_url":"https://github.com/hex-digital/sage-blade-block-renderer","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hex-digital%2Fsage-blade-block-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hex-digital%2Fsage-blade-block-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hex-digital%2Fsage-blade-block-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hex-digital%2Fsage-blade-block-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hex-digital","download_url":"https://codeload.github.com/hex-digital/sage-blade-block-renderer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248325112,"owners_count":21084870,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-07T03:30:43.888Z","updated_at":"2025-04-11T01:31:12.899Z","avatar_url":"https://github.com/hex-digital.png","language":"PHP","funding_links":["https://github.com/sponsors/jamiewarb"],"categories":[],"sub_categories":[],"readme":"# Sage: Blade Block Renderer \n\n![Latest Stable Version](https://img.shields.io/packagist/v/hex-digital/sage-blade-block-renderer.svg?style=flat-square)\n![Total Downloads](https://img.shields.io/packagist/dt/hex-digital/sage-blade-block-renderer.svg?style=flat-square)\n![Build Status](https://img.shields.io/github/workflow/status/hex-digital/sage-blade-block-renderer/Compatibility%20Checks?style=flat-square)\n\nThe Blade Block Renderer for Sage allows the easy registration of blade partials for the render function\nof native Gutenberg blocks.  \nUseful when you want to edit a block in React, but render with Blade.\n\n## Features\n\n- 🔥 Use all your blade components and PHP functions immediately in your native Gutenberg blocks. \n- 🔥 Instantly generate a working render_callback, powered by Blade with a native Sage 10 feel for passing view data.\n- 🔥 All blocks support `InnerBlocks` content\n\n## Requirements\n\n- [Sage](https://github.com/roots/sage) \u003e= 10.0\n\n## Installation\n\nInstall via Composer:\n\n```bash\n$ composer require hex-digital/sage-blade-block-renderer\n```\n\n## Usage\n\n### Create your native block\n\nCreate your Gutenberg block as you normally would, with one small change.\n\nInstead of adding HTML to the `save` function of your block, instead define it as one of the following:\n\n```js\n// If you have InnerBlocks content:\nsave: function (props) {\n  return \u003cInnerBlocks.Content/\u003e;\n}\n\n// If there is no InnerBlocks content:\nsave: function() {\n  return null;\n}\n```\n\nAnd that's it! When your block is saved, Gutenberg will save the settings to the database.\nWhen it comes time to render your block, the settings will be given to the Blade Block Renderer,\nand your blade template will be used, along with any attributes, classNames or Inner Blocks given.\n\nIf you prefer to use Blade for both the `edit` and `save` HTML, you would benefit from using \n[Log1x's ACF Composer package](https://github.com/log1x/acf-composer) instead. This similarly\nprovides Blade support for blocks, but utilises ACF's Blocks instead, which will be much more powerful.\n\n### Rendering a Block with a blade-powered render callback\n\nTo create your first rendered block, start by running the following generator command from your theme directory:\n\n```bash\n$ wp acorn blade-block Example\n```\n\nThis will create `app/BladeBlocks/Example.php` which is where you will create and manage your first blade block:\n\n```php\n\u003c?php\n\nnamespace Example;\n\nuse BladeBlock\\BladeBlock;\n\nclass Example extends BladeBlock\n{\n    /**\n     * The block slug. Should match the slug given to your registered block.\n     *\n     * @var string\n     */\n    public $slug = 'example';\n\n    /**\n     * Data to be passed to the block before rendering.\n     *\n     * @param BladeBlock $block\n     * @return array\n     */\n    public function with($block)\n    {\n        return [\n            'data' =\u003e 'dummy data',\n        ];\n    }\n}\n```\n\nYou'll see it has a familiar `with()` function for passing data to your block. However,\nit is also given the block object as the first parameter.\n\nThis allows you to get any attribute, setting or content from the block, as required.\n\nFor example, `$block-\u003econtent` will give the Inner Blocks content, and `$block-\u003eimage_id` would give\nthe value of an attribute called `image_id` that was defined on the block in JavaScript.\n\nA `View` is also generated in the `resources/views/blocks` directory:\n\n```blade\n\u003cdiv class=\"{{ $block-\u003eclasses }}\"\u003e\n  @if ($data)\n    \u003cp\u003e{!! $data !!}\n  @else\n    \u003cp\u003eNo data found!\u003c/p\u003e\n  @endif\n\n  @if ($content)\n    {!! $content !!}\n  @endif\n\u003c/div\u003e\n```\n\nThe `$content` variable will contain the HTML for any InnerBlocks added in the editor.  \nThe `$blockClass` variable will contain the base class for the block, for use with BEM class naming.  \nThis is in the form `\"wp-block-$prefix-$slug\"` E.G. `wp-block-hex-page-header`.  \nThese can then be outputted as required into the blade partial.\n\nAll block data is available on the `$block` object, which is the same as that passed to the\nBladeBlock `with()` function. All data returned from the `with()` function is also available.\n\n#### Block Preview View\n\nIn the view file, you can use `$block-\u003epreview` for conditionally modifying your block when shown in the editor.\n\nYou can also load a different blade partial by duplicating your existing view and prefixing it with `preview-` \n(e.g. `preview-example.blade.php`).\n\nHowever, if you're using the blade partial for both the `edit` and `save` HTML, you would benefit from using\n[Log1x's ACF Composer package](https://github.com/log1x/acf-composer) instead. This similarly\nprovides Blade support for blocks, but utilises ACF's Blocks instead, which will be much more powerful.\n\n### Modifying your Block\n\nYour Block has a few options available to it to modify. Add these as member variables to your\ngenerated block class to define and use them.\n\nYour block's class will default to `\"wp-block-$prefix-$slug\"`, where the prefix has the trailing slash trimmed.\nThis block class is available in the view as `$blockClass` for easy use with BEM class naming.\n\n```php\n/**\n * The block prefix. Should match the prefix given to your block\n *\n * @var string\n */\npublic $prefix = 'hex/';\n\n/**\n * The block slug. Should match the slug given to your registered block.\n *\n * @var string\n */\npublic $slug = '';\n\n/**\n * The block view. Same format as given to the blade `include()` function. A dot-separated path where the root is `resources/views`.\n * If left blank, defaults to `'blocks.' . $this-\u003eslug`.\n *\n * @var string\n */\npublic $view;\n```\n\n## Bug Reports\n\nIf you discover a bug in Sage Blade Block Renderer, please [open an issue](https://github.com/hex-digital/sage-blade-block-renderer/issues).\n\n## Contributing\n\nContributing, whether through PRs, reporting an issue, or suggesting an idea, is encouraged and extremely appreciated.\n\n## License\n\nWe provide the Sage Blade Block Renderer under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhex-digital%2Fsage-blade-block-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhex-digital%2Fsage-blade-block-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhex-digital%2Fsage-blade-block-renderer/lists"}