README

gutenberg的可折叠/手风琴块

安装

所有JS部分通过NPM

> npm i @gebruederheitz/wp-block-collapsible

所有PHP部分通过Composer

> composer require gebruederheitz/wp-block-collapsible

用法

在编辑器中

import Block from '@gebruederheitz/wp-block-collapsible';

Block.register();

您可以提供自定义属性、方法/组件等。

import {register, attributes} from '@gebruederheitz/wp-block-collapsible';
import {MyIconComponent} from 'your/icon/components/path';

const customAttributes = {
    newAttr: {
        type: 'string',
        default: 'default value',
    },
    ...attributes,
};

const edit = ({attributes: {newAttr}}) => {
    return (
        <p>{newAttr}</p>
    );
};

register({
    attributes: customAttributes,
    edit,
    icon: <MyIconComponent />,
});

在前端

为了让块正常工作，您需要将初始化脚本添加到前端脚本包中。

import { Collapsible } from '@gebruederheitz/wp-block-collapsible';

// Find all collapsible blocks and initialize them
Collapsible.factory();

渲染块的输出

在所有情况下都需要在后台注册块。

通过PHP动态地

如果您使用的是“动态”保存方法（默认方法），您还必须提供一个模板来渲染输出。该库的composer部分（gebruederheitz/wp-block-collapsible）将为您处理这些。

new \Gebruederheitz\GutenbergBlocks\Collapsible\Collapsible();

您可以通过将替代模板文件放入 wp-content/themes/your-theme/template-parts/blocks/collapsible.php 来覆盖默认模板。查看原始模板以获取一些灵感。请注意，如果您更改块的标记，可能需要更改前端脚本。

通过Gutenberg的React“静态”地

此库提供了一种替代的保存方法，该方法通过在“发布时间”静态渲染标记来避免对每个请求动态处理块的内容。

import {register, saveStatic} from '@gebruederheitz/wp-block-collapsible';

register({
    save: saveStatic,
});

当然，您也可以用自己的静态渲染器组件替换预包装的组件。

样式

您可以在自己的(S)CSS中使用并扩展此包提供的默认样式和主题。

// Your frontend SASS file

// Import the stylesheet
@use 'node_modules/@gebruederheitz/wp-block-collapsible/scss/collapsible';
// or one of the preconfigured themes
@use 'node_modules/@gebruederheitz/wp-block-collapsible/scss/theme-colorful';
@use 'node_modules/@gebruederheitz/wp-block-collapsible/scss/theme-grey-boxes';

// Your editor SASS file

// Import the stylesheet
@use 'node_modules/@gebruederheitz/wp-block-collapsible/scss/collapsible';

或使用预编译的CSS文件

<link 
  rel="stylesheet"
  href="/path/to/node_modules/@gebruederheitz/wp-block-collapsible/dist/collapsible.css"
/>
<!-- or a theme -->
<link 
  rel="stylesheet"
  href="/path/to/node_modules/@gebruederheitz/wp-block-collapsible/dist/theme-grey-boxes.css"
/>

创建自定义主题

SCSS样式表严重依赖于默认的SCSS变量来简化主题。一种基本的方法是修改现有主题的参数。

$my-theme-text-color: #101510;
$title-color: $my-theme-text-color;
$title-color: #333 !default;

@use 'node_modules/@gebruederheitz/wp-block-collapsible/scss/theme-grey-boxes' with (
    $title-color: $title-color,
    $title-font: null,
    $title-font-size: 1em,
    $title-text-transform: none,
    $subtitle-color: lighten($title-color, 0.3),
    $subtitle-font-size: 0.9em,
    $subtitle-font-weight: 400,
    $border-color: #eee,
    $indicator-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c0c0c0' viewBox='0 0 27 15'%3E%3Cpath d='M14.313 14.361l12-12c.5-.5.5-1.2 0-1.7s-1.2-.5-1.7 0l-11.1 11.2-11.2-11.2c-.5-.5-1.2-.5-1.7 0-.2.2-.3.5-.3.8 0 .3.1.7.3.9l12 12a1.2 1.2 0 001.7 0z'/%3E%3C/svg%3E"),
    $toggle-hover-background: #eee,
);

@use 'node_modules/@gebruederheitz/wp-block-collapsible/scss/collapsible' with (
    $base-font-size: 1rem,

    $title-color: #4a4d4a,
    $title-hover-color: #0080c8,
    $title-active-color: #73b128,
    $title-font: null,
    $title-active-font: null,
    $title-font-size: 1.125em,
    $title-text-transform: uppercase,
    
    $subtitle-color: $title-color,
    $subtitle-font-size: null,
    $subtitle-font-weight: null,
    
    $show-line: true,
    $line-color: #e7e7e7,
    $line-thickness: 2px,
    $line-space: 1em,
    
    $indicator-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a0a0a0' viewBox='0 0 27 15'%3E%3Cpath d='M14.313 14.361l12-12c.5-.5.5-1.2 0-1.7s-1.2-.5-1.7 0l-11.1 11.2-11.2-11.2c-.5-.5-1.2-.5-1.7 0-.2.2-.3.5-.3.8 0 .3.1.7.3.9l12 12a1.2 1.2 0 001.7 0z'/%3E%3C/svg%3E"),
    $indicator-hover-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230080c8' viewBox='0 0 27 15'%3E%3Cpath d='M14.313 14.361l12-12c.5-.5.5-1.2 0-1.7s-1.2-.5-1.7 0l-11.1 11.2-11.2-11.2c-.5-.5-1.2-.5-1.7 0-.2.2-.3.5-.3.8 0 .3.1.7.3.9l12 12a1.2 1.2 0 001.7 0z'/%3E%3C/svg%3E"),
    $indicator-active-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2373b128' viewBox='0 0 27 15'%3E%3Cpath d='M14.313 14.361l12-12c.5-.5.5-1.2 0-1.7s-1.2-.5-1.7 0l-11.1 11.2-11.2-11.2c-.5-.5-1.2-.5-1.7 0-.2.2-.3.5-.3.8 0 .3.1.7.3.9l12 12a1.2 1.2 0 001.7 0z'/%3E%3C/svg%3E"),
    $indicator-width: 1.5em,
    $indicator-height: 0.8125em,
    $indicator-transform: none,
    $indicator-open-transform: rotate(180deg),
    
    $toggle-show-border: false,
    $toggle-border-color: $title-color,
    $toggle-border-width: 1px,
    $toggle-background: transparent,
    $toggle-hover-background: $toggle-background,
    $toggle-active-background: $toggle-background,
    
    $margin: 1em 0,
    $toggle-button-padding: 0.625em 0,
    
    $panel-border-color: $title-active-color,
    $panel-border-width: 2px,
    $panel-border-show-top: false,
    $panel-border-show-right: false,
    $panel-border-show-bottom: false,
    $panel-border-show-left: true,
    $panel-padding: 0 0 0 2em,
    $panel-open-margin: 2em 0 4em 0,
    $panel-max-height: 1080px,
);

开发

依赖关系

PHP >= 7.3
Composer 2.x
NVM和nodeJS LTS（v16.x）以及npm
可选：GNU Make（或替代品）

快速入门

您可以使用监视任务

$> npm run watch
# or
make
# or, more explicitly
make dev

在修改脚本或样式后，运行

$> make
# or
$> make build
# or, more explicitly
$> nvm use            # Once, to make sure you're using the correct node version
$> npm run build

在dist/创建样式表和ES模块包。

运行make release发布新版本。release-it将引导您完成此过程。

运行make test或make lint将检查所有源脚本和样式表。

gebruederheitz / wp-block-collapsible

维护者

详细信息