标签： 古腾堡

使用wp-scripts自动重构多个块的JS文件（通过block.json）

首先需要在PHP文件中注册多个块

  • 路径后面会自动补全 block.json 文件
  • 路径需要为构建后输出文件的目录
function create_block_code_block_init()
{
    register_block_type(dirname(__FILE__) . '/build/block-one');
    register_block_type(dirname(__FILE__) . '/build/block-two');
}

add_action('init', 'create_block_code_block_init');

在 block.json 文件中的 editorScript 字段中，填入的是构建前的JS文件路径

例如 /src/block-one/block.json 

    ....
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"

wp-scripts 在自动构建后，在 build/block-one 目录下就有构建好的index.js文件、index.css和style-index.css文件

block-two 也这样填

WordPress 判断页面是否有块然后加载内容

这个方法适用于只想在文章页面加载

add_action('wp_enqueue_scripts','enqueue_if_block_is_present');

function enqueue_if_block_is_present(){
  if(is_singular()){
     $id = get_the_ID();
     if(has_block('my-awesome/block-type',$id)){
        wp_enqueue_script('my-awesome-script',$path_of_script,$needed_scripts,$version_of_script,$load_in_footer);
     }
  }
}

这个方法在所有页面中判断，是否含有块

add_filter('the_content','enqueue_my_awesome_script_if_there_is_block');

function enqueue_my_awesome_script_if_there_is_block($content = ""){
  if(has_block('my-awesome/block-type')){
        wp_enqueue_script('my-awesome-script',$path_of_script,$needed_scripts,$version_of_script,true);
     }
   return $content;
}
  • https://wordpress.stackexchange.com/questions/328536/load-css-javascript-in-frontend-conditionally-if-block-is-used

WordPress 制作自定义块(gutenberg block)

因为之前用的两个代码高亮插件不是很顺手，所以打算自己制作一个

先创建一个空的块插件

npx @wordpress/create-block gutenpride
cd gutenpride

如果电脑本来就有wordpress，则可以直接生成在 /wp-content/plugins 目录

如果没有，则可以使用 wp-env 工具，配合 docker ，生成一个专门调试插件的环境

继续阅读 “WordPress 制作自定义块(gutenberg block)”

WordPress 修改已有的块添加设置宽度的功能

主题 functions.php 文件中加入

function myguten_enqueue()
{
  
  wp_enqueue_script(
    'myguten-script',
    get_theme_file_uri() . '/myguten.js'
  );

}

add_action('enqueue_block_editor_assets', 'myguten_enqueue');

然后在 myguten.js 文件中加入

const { addFilter } = wp.hooks;

function filterCoverBlockAlignments(settings, name) {
    if (name === 'loos-hcb/code-block' || name === 'core/code') {
        return lodash.assign({}, settings, {
            supports: lodash.merge(settings.supports, {
                align: true,
            }),
        });
    }
    return settings;
}

addFilter(
    'blocks.registerBlockType',
    'intro-to-filters/cover-block/alignment-settings',
    filterCoverBlockAlignments,
);

上面的代码是为 loos-hcb/code-block 块（这个是我使用的代码高亮插件）和 core/code 块添加对宽度设置的支持

为古腾堡默认code块添加设置宽度功能

参考

https://css-tricks.com/a-crash-course-in-wordpress-block-filters/