README

提供基于Blade模板支持的模块化块构建的后端支持。

此框架处于积极开发中。

这是什么

• 一种简化块注册的方式
• 一种简化块资产注册的方式
• 为服务器端渲染的动态块提供Blade功能性和模板工具。

这不是什么

• 一种不使用javascript编写编辑器块的方式

入门

使用 composer 将包安装到您的项目中

composer require tiny-pixel/blocks

用法

查看仓库中的示例实现目录。

文件结构

demo
├── config
│   └── app.php # Plugin config
├── index.php # Plugin entrypoint
├── resources
│   ├── assets # JS and CSS assets
│   │   # Implementation is up to you
│   │
│   └── views # Place blade templates here
│       └── Demo # Should match block name
│           └── block.blade.php # Entry template
│      
└── src # Block classes
    └── Demo.php # Match name of views & class

在您的插件中，在 tinypixel/blocks/loaded 动作中挂钩。

它会传递给你库的一个实例。调用 main 来启动一切。您必须将配置目录的路径传递给 main。

add_action('tinypixel/blocks/loaded', function ($app) {
    $configPath = realpath(__DIR__ . '/config');
    $app->main($configPath);
});

在 config/app.php 中，您只需要做两件事

1. 将您的块添加到 blocks 键中的类中

   'blocks' => [
      \Foo\Demo::class,
   ],

1. 将 project.domain 键更改为与您的块命名空间匹配。不是PHP命名空间，而是在 register_block_type 中使用的块命名空间。

   'project' => [
        'domain' => 'foo',
        'base_path' => realpath(__DIR__ . '/../'),
        'base_url' => plugins_url('/', __DIR__),
        'dist' => 'dist',
   ],

您可以根据需要修改其他设置。它们大多是自我解释的，控制缓存存储的位置、编译后的资产存储的位置等。有一天这可能会被记录下来！

块定义

默认情况下，库将在 src/ 中查找块类。

此类名应与不带块命名空间的块名称匹配。例如，对于 foo/demo 命名空间，我们将注册类为 Demo。命名空间在 config.project.domain 中设置，如上所述。

使用 setupAssets 方法注册您的块脚本和样式。

除了下面的之外，您还可以使用 $this->addPublicScript 和 $this->addPublicStyle 注册前端脚本和样式。

<?php

namespace Foo;

use TinyPixel\Blocks\Block;

class Demo extends Block
{
    public function setupAssets(): void
    {
        $this->addEditorStyle(
            $this->makeAsset('editor/css')
                ->setUrl('dist/styles/editor.css')
        );

        $this->addEditorScript(
            $this->makeAsset('editor/js')
                ->setUrl('dist/scripts/editor.js')
        );
    }
}

最后一步（除了实际编写块JS之外，祝你好运！）是实现模板。默认模板路径是 resources/views。块模板应命名为 block.blade.php。它应位于以块名称命名的目录中。

任何块属性都作为 $attr 在模板中可用。这些属性作为对象传递给块。

除了 $attr 对象之外，您还可以访问 $content，它是块内容的 string。您还可以访问 $id 和 $className 变量，以便于使用。

$id 是块的唯一标识符。您可以使用它为块动态应用样式或调用JS函数。

$className 是块的类名。这是基于块名称的，遵循以下命名约定： wp-block-{namespace}-{name}。

作者说明

© 2019 Tiny Pixel Collective

许可 MIT.