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