README

什么是Peach Schnapps

Peach Schnapps是我们基于roots.io堆栈构建的WordPress站点模板，利用Bedrock构建站点结构，并使用新的WP Block Theme功能构建主题。

堆栈

Lando
Bedrock
AlpineJS
TailwindCSS
Parcel
使用Twig进行模板化

先决条件

Lando
Composer
在家目录中有一个包含ACF Pro密钥的auth.json文件，更多信息请参阅此处，例如~/.composer/auth.json

{
  "http-basic": {
    "connect.advancedcustomfields.com": {
      "username": "your-key-here",
      "password": "http://wp-playground.lndo.site"
    }
  }
}

模块

Peach Schnapps由几个不同的模块组成，旨在单独更新，以简化未来的开发和项目支持。

这些模块包括

导航
- 简化了WordPress中导航菜单的创建和模板化，以避免使用wp_nav_menu()
Twiglet
- 允许在主题中使用Twig模板，以简化与块的工作
图像
- 更灵活地处理/显示图像的方式。你只需输出你想要的尺寸的图像，它会自动调整大小/裁剪。此外，允许轻松转换为webp。你不再需要依赖于add_image_size()。允许创建带有图像尺寸字段的块 - 你可能可以从预设列表中选择，或者最终用户可以输入一些数字，很简单。
块
- 简化了Gutenberg块的创建、注册和渲染
查询
- 围绕WP_Query的包装，简化查询帖子
路由
- 围绕wp_register_rest_route的包装，简化使用

主题文件夹结构

/
/acf-json
/build
/build/blocks
/dist
/parts
/src
/src/Blocks
/src/Components
/src/fonts
/src/Patterns

块

Peach Schnapps中的块由giantpeach/blocks库处理。这个库包含一些简单的包装，用于块创建/注册/渲染，使生活更轻松，并允许混合使用ACF块和直接使用WordPress Block API的块。

以下块包含

Logo
横幅
列
- 列
图像
按钮

创建块

简单方式

有一个create-block WP CLI命令，可以使用lando wp create-block <blockname>运行来构建块。

手动方式

可以使用ACF块或WordPress Block API轻松创建更多块。最简单的方法是使用ACF块，并且有一个BlockInterface PHP类接口和几个示例来帮助（例如横幅块）。

对于任何需要更多控制编辑器中标记的块，你可能需要使用WordPress Block API。两种方式创建的块完全兼容。

所有块都需要添加到Giantpeach\Schnapps\Blocks类中的$blocks变量中，才能进行注册。

创建ACF块

可以通过在src/blocks文件夹中创建一个包含block.json和PHP类的新的文件夹来轻松创建额外的ACF块。

block.json应包含以下内容

{
  "name": "giantpeach/banner",
  "title": "Banner",
  "description": "Banner Block",
  "category": "formatting",
  "icon": "admin-comments",
  "keywords": ["banner"],
  "acf": {
    "mode": "preview",
    "renderCallback": "Giantpeach\\Blocks\\Banner\\Banner::display"
  },
  "align": "full",
  "supports": {
    "jsx": true
  }
}

PHP类需要实现BlockInterface，以下是一个最小示例

<?php

namespace Giantpeach\Blocks\Banner;

use Giantpeach\Blocks\BlockInterface;

class Banner extends Block implements BlockInterface
{
  public $slides;

  public function __construct($slides)
  {
    $this->slides = $slides;
  }

  public static function display()
  {
    $banner = new Banner(get_field('slides'));
    $banner->render();
  }
}

然后您就可以前往ACF > 字段组，并将您喜欢的任何字段附加到块上。

创建Wordpress块

创建Wordpress块涉及更多步骤，需要您熟悉Wordpress块API，并且还需要额外的构建步骤。

这些块在Wordpress块编辑器之外难以重复使用。

块类

Giantpeach\Schnapps\Theme\Blocks\Blocks类负责处理所有块和图案的注册。将您的块添加到$blocks数组中，它们将在网站上注册并可使用。

图案目前需要在registerPatterns方法中手动初始化。您可以在Giantpeach\Schnapps\Theme\Patterns\TitleLinkColumn类中看到一个示例。

块类

Giantpeach\Schnapps\Blocks\Block类处理块注册、渲染twig模板，并提供一些用于处理字体大小和块间距的类。您使用create-block命令创建的每个块都将设置成继承这个类，但您也可以根据项目的特定要求创建一个继承它的特定类。

类属性

$blockName - 例如 'giantpeach/block'

$isAdmin - 如果在块编辑器中则为true，如果在前端查看块则为false。如果您需要在管理员中应用特定的样式，这很有用。

$blockSpacing - 一个用于块的不同填充的数组

$classes - 用于模板的类数组，例如 {{ classes.block.spacing }}

类方法

getClasses() - 构建了$classes数组

render() - 如果找到，则渲染view.twig模板，否则渲染template.php模板

getBlockName() - 返回块名称

registerBlock() - 加载并注册block.json

display() - 用于在块编辑器中创建和渲染块

getBlockNameFromDir()

图案

图案是您可以将其拖放到页面上的块集合。您点击图案，构成图案的块将被插入到页面中，以便您进行编辑。

您也可以通过代码或通过管理员界面（它将被保存在数据库中）创建新的图案。

Wordpress块编辑器

Wordpress使用JS和React在CMS中创建组件。您可以使用src/Editor/editor.js文件进行更改。

要编译编辑器脚本，请使用npm run dev-editor命令。它将文件输出到/dist/editor。这些文件通过Schnapps.php文件中的blockEditorScripts函数与CMS连接。

giantpeach / schnapps

维护者

详情