@ faustwp/ 块

@faustwp/blocks 为渲染WordPress块提供常规连接器组件.

由 Gutenberg 块提供者和查看器开始

快速启动

请确认您已完成 Faust 的初始设置 开始。 。 。 .

安装块包 :

npm i @faustwp/blocks

安装对等依赖 :

npm i @wordpress/style-engine

打开 _app.js 输入 WordPressBlocksProvider数字 :

import { WordPressBlocksProvider } from '@faustwp/blocks';

<FaustProvider pageProps={pageProps}>
  <WordPressBlocksProvider
    config={{
      blocks,
    }}>
    <Component {...pageProps} key={router.asPath} />
  </WordPressBlocksProvider>
</FaustProvider>

然后,在你的模板中,你需要传递 editorBlocks 数据 WordPressBlocksViewer。 。 。 .

帮助函数 flatListToHierarchical 从 @faustwp/core数字 :

import { flatListToHierarchical } from '@faustwp/core';
import { WordPressBlocksViewer } from '@faustwp/blocks';
import blocks from '../wp-blocks';

const { editorBlocks } = props.data.post;
const blocks = flatListToHierarchical(editorBlocks, {childrenKey: 'innerBlocks'});

return <WordPressBlocksViewer blocks={blocks}/>

默认情况下,API会将所有节点带回一个阵列中,而不是用自己的阵列组成一串单独的节点. 因此,我们使用 flatListToHierarchical 将列表转换回等级树类型.

示例 editorBlocks 图QL 查询片段 :

${components.CoreParagraph.fragments.entry}
editorBlocks {
  __typename
  name
  renderedHtml
  id: clientId
  parentClientId
  ...${components.CoreParagraph.fragments.key}
}

简单块示例

这是一个简单的块叫做 CoreParagraph块是一个 p 标签,将其内容设置为 attributes.content 从道具上传过来的.

CoreParagraph.fragments 执行 WPGraphQL 查询 content 财务报告和审定财务报表 cssClassName 把它当作碎片 CoreParagraphFragment。 。 。 .

import { gql } from '@apollo/client';
import React from 'react';

export default function CoreParagraph(props) {
  const attributes = props.attributes;
  return (
    <p
      className={attributes?.cssClassName}
      dangerouslySetInnerHTML={{ __html: attributes.content }}></p>
  );
}

CoreParagraph.fragments = {
  entry: gql`
    fragment CoreParagraphFragment on CoreParagraph {
      attributes {
        content
        cssClassName
      }
    }
  `,
  key: `CoreParagraphFragment`,
};

使用 Core 段落块的默认桶导出 index.js数字 :

import CoreParagraph from './CoreParagraph';
export default {
  'CoreParagraph': CoreParagraph,
};

这样,框架将匹配导出名称 CoreParagraph 与 __typename 或者说 name 字段中。 如果找到匹配的,它将解决与该名称相关的组件.

进一步学习

详细情况 Word PressBlocks 提供软件。 。 。 .

详细情况 Word PressBlocks 编辑器。 。 。 .

通过引用 示例工程行走结构.

请看 https://faustjs.org/docs/gutenberg/getting-started 互联网档案馆的存檔,存档日期2013-12-21 gutenberg Blocks的《开始指南》.