README

Sage的Blade Block Renderer允许轻松注册用于渲染原生Gutenberg块渲染功能的blade部分。
当你想在React中编辑一个块，但用Blade进行渲染时很有用。

功能

🔥 立即在你的原生Gutenberg块中使用所有blade组件和PHP函数。
🔥 利用Blade生成一个工作的render_callback，带有原生Sage 10的感觉，用于传递视图数据。
🔥 所有块都支持InnerBlocks内容

要求

Sage >= 10.0

安装

通过Composer安装

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

使用

创建你的原生块

按照常规方式创建你的Gutenberg块，有一点小的变化。

不是向你的块添加HTML到save函数，而是将其定义为以下之一

// If you have InnerBlocks content:
save: function (props) {
  return <InnerBlocks.Content/>;
}

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

这样就完成了！当你的块保存时，Gutenberg会将设置保存到数据库中。当需要渲染你的块时，这些设置将传递给Blade Block Renderer，并使用你的blade模板，以及任何提供的属性、类名或Inner Blocks。

如果你希望使用Blade同时编辑和保存HTML，则建议使用Log1x的ACF Composer包。它同样为块提供Blade支持，但使用ACF的Blocks，这将更强大。

使用Blade渲染回调渲染块

要创建你的第一个渲染块，首先从你的主题目录运行以下生成器命令

$ wp acorn blade-block Example

这将在app/BladeBlocks/Example.php创建，你将在其中创建和管理你的第一个blade块

<?php

namespace Example;

use BladeBlock\BladeBlock;

class Example extends BladeBlock
{
    /**
     * The block slug. Should match the slug given to your registered block.
     *
     * @var string
     */
    public $slug = 'example';

    /**
     * Data to be passed to the block before rendering.
     *
     * @param BladeBlock $block
     * @return array
     */
    public function with($block)
    {
        return [
            'data' => 'dummy data',
        ];
    }
}

你会发现它有一个熟悉的with()函数用于传递数据到你的块。然而，它也提供了块对象作为第一个参数。

这允许你获取所需的所有属性、设置或内容。

例如，$block->content将给出Inner Blocks内容，而$block->image_id将给出在JavaScript中定义的名为image_id的属性的值。

在resources/views/blocks目录中生成了一个View

<div class="{{ $block->classes }}">
  @if ($data)
    <p>{!! $data !!}
  @else
    <p>No data found!</p>
  @endif

  @if ($content)
    {!! $content !!}
  @endif
</div>

$content变量将包含编辑器中添加的任何InnerBlocks的HTML。
$blockClass变量将包含块的基类，用于BEM类命名。
这具有以下形式："wp-block-$prefix-$slug"，例如：wp-block-hex-page-header。
然后可以根据需要将其输出到blade部分。

所有块数据都可在$block对象上，它与传递给BladeBlock with()函数的对象相同。从with()函数返回的所有数据也都可以使用。

块预览视图

在视图文件中，你可以使用$block->preview有条件地修改在编辑器中显示的块。

你也可以通过复制现有的视图并在前面加上preview-前缀（例如：preview-example.blade.php）来加载不同的blade部分。

然而，如果您同时使用 blade 分部视图来处理 edit 和 save HTML，那么使用 Log1x 的 ACF Composer 包将会更有益。这个包同样提供了对块的支持，但它使用 ACF 的块，这将更加强大。

修改您的块

您的块有一些可用的选项来修改。将这些选项作为成员变量添加到生成的块类中，以定义和使用它们。

您的块类默认为 "wp-block-$prefix-$slug"，其中前缀的斜杠已被删除。这个块类在视图中可用为 $blockClass，便于使用 BEM 类命名。

/**
 * The block prefix. Should match the prefix given to your block
 *
 * @var string
 */
public $prefix = 'hex/';

/**
 * The block slug. Should match the slug given to your registered block.
 *
 * @var string
 */
public $slug = '';

/**
 * The block view. Same format as given to the blade `include()` function. A dot-separated path where the root is `resources/views`.
 * If left blank, defaults to `'blocks.' . $this->slug`.
 *
 * @var string
 */
public $view;

错误报告

如果您在 Sage Blade Block Renderer 中发现错误，请创建一个问题。

贡献

鼓励并非常感谢通过 PR、报告问题或提出建议的方式进行贡献。

许可协议

我们提供 Sage Blade Block Renderer 的许可协议为 MIT 许可协议。

hex-digital / sage-blade-block-renderer

维护者

详细信息