时间戳

首页 > 解决方案 > 是否可以链接到 add_theme_support( 'editor-color-palette' ) 中的数组文件；

wordpress - 是否可以链接到 add_theme_support( 'editor-color-palette' ) 中的数组文件；

问题描述

我正在构建一个简单的调色板插件，它将覆盖古腾堡颜色设置。

通常，您可以add_theme_support( 'editor-color-palette' );像这样在数组中添加颜色：

add_theme_support(
    'editor-color-palette',
    [
      [
        'name'  => esc_html__( 'Brown', 'udemy-plugin' ),
        'slug'  => 'brown',
        'color' => '#3a3335',
      ],
      [
        'name'  => esc_html__( 'Orange', 'udemy-plugin' ),
        'slug'  => 'orange',
        'color' => '#f0544f',
      ],
      [
        'name'  => esc_html__( 'Light Green', 'udemy-plugin' ),
        'slug'  => 'light-green',
        'color' => '#c6d8d3',
      ],

    ]
  );

但是，我想知道是否可以将数组部分链接到文件？像这样：

add_theme_support( 'editor-color-palette', $link-to-array );

如果可能，如何在插件中链接数组文件？到目前为止，我的插件文件夹是这样设置的：

-Plugin Folder
   -plugin.php (where my code is in)

标签： wordpresspluginswordpress-gutenberg

解决方案

在 WordPress 5.8 中，引入了theme.json作为一种更好地管理 Gutenberg 块的自定义 CSS 样式的方法，作为 .json 的替代方法add_theme_support()。给定您的示例代码，要在编辑器中为 Gutenberg 块定义和应用自定义颜色，theme.json 中的自定义属性和预设将非常适合。

例如。json: 'editor-color-palette' 只需要修改颜色 

[
    {
        "name": "Brown",
        "slug": "brown",
        "color": "#3a3335"
    },
    {
        "name": "Orange",
        "slug": "orange",
        "color": "#f0544f"
    },
    {
         "name": "Light Green",
         "slug": "light-green",
         "color": "#ffffff"
    }
]

WordPress 文档还包含有关创建基于块的主题的操作指南，这可能会有所帮助： https ://developer.wordpress.org/block-editor/how-to-guides/themes/create-block-theme/

由于 WordPress 和 Gutenberg 块仍在积极开发/更新中，请始终查看官方文档以获取最新语法和最新示例。

更新 这里是如何加载和解码theme.json

function wpdc_gutenberg_color_settings() {
...
    $dir = plugin_dir_path( __FILE__ );

    $theme_colors = json_decode(
        file_get_contents( $dir . "theme.json" ), // Returns contents of file as string
        true // Decodes the JSON string into an associative array
    );
add_theme_support('editor-color-palette', $theme_colors );
}

推荐阅读