style.js
157 lines
| 1 | /** |
| 2 | * navigation block extension |
| 3 | * |
| 4 | * Add an option to display the menu item description on the core/navigation block. |
| 5 | * core/navigation ブロックにメニュー� |
| 6 | 目の説明を表示するオプションを追加する拡張。 |
| 7 | */ |
| 8 | import { __ } from '@wordpress/i18n'; |
| 9 | import { addFilter } from '@wordpress/hooks'; |
| 10 | import { PanelBody, ToggleControl } from '@wordpress/components'; |
| 11 | import { createHigherOrderComponent } from '@wordpress/compose'; |
| 12 | import { InspectorControls } from '@wordpress/block-editor'; |
| 13 | import classnames from 'classnames'; |
| 14 | |
| 15 | /** |
| 16 | * Internal dependencies |
| 17 | */ |
| 18 | import { VkPanelIcon } from '@vkblocks/components/vk-icon'; |
| 19 | |
| 20 | // トグル ON 時にブロックの最外殻へ付与するブロック単位クラス |
| 21 | // Block-scoped class added to the block wrapper when the toggle is ON. |
| 22 | export const VK_NAV_SHOW_DESCRIPTION_CLASS = 'vk-navigation-show-description'; |
| 23 | |
| 24 | const isNavigationBlock = (name) => name === 'core/navigation'; |
| 25 | |
| 26 | /** |
| 27 | * Add the inspector control (PanelBody + ToggleControl) to the |
| 28 | * core/navigation block. |
| 29 | * |
| 30 | * core/navigation ブロックにインスペクター（PanelBody + ToggleControl）を追加する。 |
| 31 | */ |
| 32 | export const enhanceNavigationBlock = createHigherOrderComponent( |
| 33 | (BlockEdit) => { |
| 34 | return (props) => { |
| 35 | const { attributes, setAttributes } = props; |
| 36 | const { showDescription } = attributes; |
| 37 | |
| 38 | if (!isNavigationBlock(props.name) || !props.isSelected) { |
| 39 | return <BlockEdit {...props} />; |
| 40 | } |
| 41 | |
| 42 | return ( |
| 43 | <> |
| 44 | <BlockEdit {...props} /> |
| 45 | <InspectorControls> |
| 46 | <PanelBody |
| 47 | title={__('Menu Item Description', 'vk-blocks')} |
| 48 | icon={<VkPanelIcon isActive={showDescription} />} |
| 49 | initialOpen={false} |
| 50 | > |
| 51 | <ToggleControl |
| 52 | label={__( |
| 53 | 'Show menu item description', |
| 54 | 'vk-blocks' |
| 55 | )} |
| 56 | checked={!!showDescription} |
| 57 | onChange={(checked) => { |
| 58 | setAttributes({ showDescription: checked }); |
| 59 | }} |
| 60 | help={__( |
| 61 | 'When enabled, the description set for each menu item is displayed. Depending on your theme, the description may be shown regardless of this setting.', |
| 62 | 'vk-blocks' |
| 63 | )} |
| 64 | /> |
| 65 | </PanelBody> |
| 66 | </InspectorControls> |
| 67 | </> |
| 68 | ); |
| 69 | }; |
| 70 | }, |
| 71 | 'addVkNavigationShowDescriptionControl' |
| 72 | ); |
| 73 | |
| 74 | /** |
| 75 | * Add the block-scoped class to the editor block wrapper so that the |
| 76 | * description preview works inside the editor as well. |
| 77 | * |
| 78 | * エディタープレビューでも説明が表示されるよう、ブロックの最外殻へ |
| 79 | * ブロック単位クラスを付与する。 |
| 80 | */ |
| 81 | export const addNavigationEditorClass = createHigherOrderComponent( |
| 82 | (BlockListBlock) => { |
| 83 | return (props) => { |
| 84 | const { name, attributes } = props; |
| 85 | |
| 86 | if (!isNavigationBlock(name) || !attributes?.showDescription) { |
| 87 | return <BlockListBlock {...props} />; |
| 88 | } |
| 89 | |
| 90 | // 既存の wrapperProps.className を保持しつつブロック単位クラスを追加。 |
| 91 | // classnames が falsy 値を無視するため null/undefined でも安� |
| 92 | �。 |
| 93 | const wrapperProps = { |
| 94 | ...props.wrapperProps, |
| 95 | className: classnames( |
| 96 | props.wrapperProps?.className, |
| 97 | VK_NAV_SHOW_DESCRIPTION_CLASS |
| 98 | ), |
| 99 | }; |
| 100 | |
| 101 | return <BlockListBlock {...props} wrapperProps={wrapperProps} />; |
| 102 | }; |
| 103 | }, |
| 104 | 'addVkNavigationShowDescriptionEditorClass' |
| 105 | ); |
| 106 | |
| 107 | /** |
| 108 | * Extend the core/navigation block with the showDescription attribute. |
| 109 | * |
| 110 | * Only the attribute registration is handled here. The inspector control is |
| 111 | * added separately via the `editor.BlockEdit` filter, because wrapping |
| 112 | * `settings.edit` does not render the panel for core/navigation. |
| 113 | * |
| 114 | * showDescription 属性の登録のみを� |
| 115 | う。インスペクターは別途 |
| 116 | * `editor.BlockEdit` フィルタで追加する。core/navigation では |
| 117 | * `settings.edit` のラップではパネルが描画されないため。 |
| 118 | * |
| 119 | * @param {Object} settings Block settings. |
| 120 | * @param {string} name Block name. |
| 121 | * @return {Object} Modified settings. |
| 122 | */ |
| 123 | const extendNavigationBlock = (settings, name) => { |
| 124 | if (!isNavigationBlock(name)) { |
| 125 | return settings; |
| 126 | } |
| 127 | |
| 128 | return { |
| 129 | ...settings, |
| 130 | attributes: { |
| 131 | ...settings.attributes, |
| 132 | showDescription: { |
| 133 | type: 'boolean', |
| 134 | default: false, |
| 135 | }, |
| 136 | }, |
| 137 | }; |
| 138 | }; |
| 139 | |
| 140 | addFilter( |
| 141 | 'blocks.registerBlockType', |
| 142 | 'vk-blocks/extend-navigation-block', |
| 143 | extendNavigationBlock |
| 144 | ); |
| 145 | |
| 146 | addFilter( |
| 147 | 'editor.BlockEdit', |
| 148 | 'vk-blocks/navigation-show-description', |
| 149 | enhanceNavigationBlock |
| 150 | ); |
| 151 | |
| 152 | addFilter( |
| 153 | 'editor.BlockListBlock', |
| 154 | 'vk-blocks/navigation-editor-class', |
| 155 | addNavigationEditorClass |
| 156 | ); |
| 157 |