標準の枠線機能を任意の要素に適用する

August 20, 2023

Table of Contents

__experimentalSelectorで対象の要素を指定 __experimentalSkipSerializationをtrueにすることでuseBlockPropsでborder関連のstyle,classnameを除外できる

import {
	__experimentalUseBorderProps as useBorderProps,
} from '@wordpress/block-editor';

borderのスタイル取得

const borderProps = useBorderProps(attributes);

"__experimentalBorder": {
    "color": true,
    "width": true,
    "radius": true,
    "__experimentalSelector": ".wm-hoge",
    "__experimentalSkipSerialization": true,
    "__experimentalDefaultControls": {
    "color": true,
    "width": true
    }
},