PHPackages                             hex-digital/sage-blade-block-renderer - 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. [Templating & Views](/categories/templating)
4. /
5. hex-digital/sage-blade-block-renderer

ActivePackage[Templating & Views](/categories/templating)

hex-digital/sage-blade-block-renderer
=====================================

Generate blade partials to render native gutenberg blocks with Sage 10

v1.0.0(4y ago)52.2kMITPHPPHP ^7.3|^8.0

Since Jul 16Pushed 4y ago2 watchersCompare

[ Source](https://github.com/hex-digital/sage-blade-block-renderer)[ Packagist](https://packagist.org/packages/hex-digital/sage-blade-block-renderer)[ GitHub Sponsors](https://github.com/jamiewarb)[ RSS](/packages/hex-digital-sage-blade-block-renderer/feed)WikiDiscussions main Synced today

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

Sage: Blade Block Renderer
==========================

[](#sage-blade-block-renderer)

[![Latest Stable Version](https://camo.githubusercontent.com/dcdd408aaba02976b40ac1168836a8e8a36ecfca29d82f5667c8dadbc7e66e5c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6865782d6469676974616c2f736167652d626c6164652d626c6f636b2d72656e64657265722e7376673f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/dcdd408aaba02976b40ac1168836a8e8a36ecfca29d82f5667c8dadbc7e66e5c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6865782d6469676974616c2f736167652d626c6164652d626c6f636b2d72656e64657265722e7376673f7374796c653d666c61742d737175617265)[![Total Downloads](https://camo.githubusercontent.com/54477c0df77d7bb6e334d896f4168e9547e67db3a14bfb39fe6c0fa71971b806/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6865782d6469676974616c2f736167652d626c6164652d626c6f636b2d72656e64657265722e7376673f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/54477c0df77d7bb6e334d896f4168e9547e67db3a14bfb39fe6c0fa71971b806/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6865782d6469676974616c2f736167652d626c6164652d626c6f636b2d72656e64657265722e7376673f7374796c653d666c61742d737175617265)[![Build Status](https://camo.githubusercontent.com/a5a1fb6086eff083c4a5fbec5ec8cf7943c3174940ff912c017fa7720d56a0cd/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f6865782d6469676974616c2f736167652d626c6164652d626c6f636b2d72656e64657265722f436f6d7061746962696c697479253230436865636b733f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/a5a1fb6086eff083c4a5fbec5ec8cf7943c3174940ff912c017fa7720d56a0cd/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f6865782d6469676974616c2f736167652d626c6164652d626c6f636b2d72656e64657265722f436f6d7061746962696c697479253230436865636b733f7374796c653d666c61742d737175617265)

The Blade Block Renderer for Sage allows the easy registration of blade partials for the render function of native Gutenberg blocks.
Useful when you want to edit a block in React, but render with Blade.

Features
--------

[](#features)

- 🔥 Use all your blade components and PHP functions immediately in your native Gutenberg blocks.
- 🔥 Instantly generate a working render\_callback, powered by Blade with a native Sage 10 feel for passing view data.
- 🔥 All blocks support `InnerBlocks` content

Requirements
------------

[](#requirements)

- [Sage](https://github.com/roots/sage) >= 10.0

Installation
------------

[](#installation)

Install via Composer:

```
$ composer require hex-digital/sage-blade-block-renderer
```

Usage
-----

[](#usage)

### Create your native block

[](#create-your-native-block)

Create your Gutenberg block as you normally would, with one small change.

Instead of adding HTML to the `save` function of your block, instead define it as one of the following:

```
// If you have InnerBlocks content:
save: function (props) {
  return ;
}

// If there is no InnerBlocks content:
save: function() {
  return null;
}
```

And that's it! When your block is saved, Gutenberg will save the settings to the database. When it comes time to render your block, the settings will be given to the Blade Block Renderer, and your blade template will be used, along with any attributes, classNames or Inner Blocks given.

If you prefer to use Blade for both the `edit` and `save` HTML, you would benefit from using [Log1x's ACF Composer package](https://github.com/log1x/acf-composer) instead. This similarly provides Blade support for blocks, but utilises ACF's Blocks instead, which will be much more powerful.

### Rendering a Block with a blade-powered render callback

[](#rendering-a-block-with-a-blade-powered-render-callback)

To create your first rendered block, start by running the following generator command from your theme directory:

```
$ wp acorn blade-block Example
```

This will create `app/BladeBlocks/Example.php` which is where you will create and manage your first blade block:

```