README

查看 Sage 10 和 WordPress' Project Gutenberg 编辑器的组件和属性构建器。

再次完成工作

在淋浴时哭诉 2019 年上半年的事情？好吧，擦干身子，播放一些音乐，也许在你的 Mullenwag 射箭板上射几箭。因为现在是时候再次感到 流畅 了。

安装

• composer require tiny-pixel/block-compose
• 脚手架： app/Blocks 和 config/editor.php。

配置

目前，Block Compose 库的配置文件需要手动复制到 config/editor.php。

该文件的使用非常简单，并使用 Laravel 风格进行了注释。

编写块视图构建器

至少，块视图构建器包含 name、editor_script 和 view 参数，以及一个 attributes 方法。

namespace App\Blocks;

use \TinyPixel\BlockCompose\Composer;

class Starter extends Composer
{
    public $name = 'starter'; // block name
    public $editor_script = 'sage/starter'; // registered script
    public $view = 'blocks.starter'; // associate view
}

视图

块属性以以下格式在视图中提供： $block->attributes->attribute_name。

<div class="card">
  @if(isset($block->attributes->mediaURL))
    <img class="card-image" src="{!! $block->attributes->mediaURL !!}">
  @endif
  <div class="card-content">
    <div class="card__heading">{!! $block->attributes->heading !!}</div>
    <p class="card__copy">{!! $block->attributes->copy !!}</p>
  </div>
</div>

如果你在自定义块类型中使用 <InnerBlocks> 来组合嵌套块，该内容将由 BlockComposer 类自动从块数据中提取，并通过 $block->content 在你的视图中提供。

脚本

你不需要在 registerBlockType() 脚本中编写 save() 方法，但有例外：如果你使用 InnerBlocks，你必须注册一个 save() 处理程序。它不需要返回任何实质性的内容，但我发现至少需要一个元素来包装它。这应该足够了

// ...,
save: () => { return <div><InnerBlocks.Content /></div> }

否则，这是一个足够和功能性的示例

import { __ } from '@wordpress/i18n'
import { registerBlockType } from '@wordpress/blocks'
import { RichText } from '@wordpress/editor'

registerBlockType('sage/card', {
  title: __('Card', 'sage'),
  icon: 'wordpress',
  category: 'common',
  attributes: {
    heading: {
        type: 'string',
    },
    copy: {
        type: 'string',
    },
  },
  edit: ({ className, setAttributes, attributes }) => {
    return (
      <div className={className}>
        <RichText
          tagName="div"
          className="card-content__copy"
          value={attributes.copy}
          placeholder={__('Copy go here', 'sage')}
          onChange={value => { setAttributes({ copy: value }) }} />
      </div>
    )
  },
  save: () => { return null },
})

老实说，不编写那个 save 处理器会带来 巨大的变化。实际上，那大部分都是 HTML。

高级组合

你可以使用三个可选方法来处理解析你的块数据、块标记和视图变量模板

with 允许直接修改在编译之前与 Blade 一起编译的数据

withData 允许修改块源。请注意，块源会自动由 BlockCompose 插入为块属性（可用作 $block->attributes->source），因此目前可能没有太多用途。

namespace App\Blocks;

use \TinyPixel\BlockCompose\Composer;
use \TinyPixel\BlockCompose\Traits\Compose;

class Card extends Composer
{
    use Compose;

    // ...

    /**
     * Manipulate view data
     *
     * @return array associative
     */
    public function with($data)
    {
        return $data;
    }

    /**
     * Manipulate source block data
     */
    public function withData($block, $source)
    {
        return $block;
    }
}

感谢您查看这个仓库！

如果您想做出贡献，那真是太棒了。请在您的 PR 和问题中保持考虑周到。最重要的是，这个仓库仍然是每个人学习、贡献和使用的学习、贡献和资源的好地方。

我希望这能更容易地让您以生产性的方式启动编辑器。它仍然不像使用 Advanced Custom Fields 这样的工具那样快。但如果你想要直接使用编辑器进行构建，这将为您、您的客户和开发者生态系统打开许多真正酷的可能性。

如果您使用这项工作制作出酷或有价值的东西，请告诉我！我喜欢这类东西。

MIT 许可证。

© 2019 Kelly Mears