style.js
90 lines
| 1 | /** |
| 2 | * site-logo block extension |
| 3 | * |
| 4 | * Add an option to output the site logo wrapper as <h1> only on the front page. |
| 5 | * フロントページのみサイトロゴの最外殻を <h1> として出力するオプションを追加する拡張。 |
| 6 | */ |
| 7 | import { __ } from '@wordpress/i18n'; |
| 8 | import { addFilter } from '@wordpress/hooks'; |
| 9 | import { PanelBody, ToggleControl } from '@wordpress/components'; |
| 10 | import { createHigherOrderComponent } from '@wordpress/compose'; |
| 11 | import { InspectorControls } from '@wordpress/block-editor'; |
| 12 | |
| 13 | /** |
| 14 | * Internal dependencies |
| 15 | */ |
| 16 | import { VkPanelIcon } from '@vkblocks/components/vk-icon'; |
| 17 | |
| 18 | const isSiteLogoBlock = (name) => name === 'core/site-logo'; |
| 19 | |
| 20 | export const enhanceSiteLogoBlock = createHigherOrderComponent((BlockEdit) => { |
| 21 | return (props) => { |
| 22 | const { attributes, setAttributes } = props; |
| 23 | const { isFrontPageH1 } = attributes; |
| 24 | |
| 25 | if (!isSiteLogoBlock(props.name) || !props.isSelected) { |
| 26 | return <BlockEdit {...props} />; |
| 27 | } |
| 28 | |
| 29 | return ( |
| 30 | <> |
| 31 | <BlockEdit {...props} /> |
| 32 | <InspectorControls> |
| 33 | <PanelBody |
| 34 | title={__('Site Logo Tag Setting', 'vk-blocks')} |
| 35 | icon={<VkPanelIcon isActive={isFrontPageH1} />} |
| 36 | initialOpen={false} |
| 37 | > |
| 38 | <ToggleControl |
| 39 | label={__( |
| 40 | 'Use <h1> tag on the front page', |
| 41 | 'vk-blocks' |
| 42 | )} |
| 43 | checked={!!isFrontPageH1} |
| 44 | onChange={(checked) => { |
| 45 | setAttributes({ isFrontPageH1: checked }); |
| 46 | }} |
| 47 | help={__( |
| 48 | 'When enabled, this site logo is output as <h1> only on the front page. On other pages it is output as <div>.', |
| 49 | 'vk-blocks' |
| 50 | )} |
| 51 | /> |
| 52 | </PanelBody> |
| 53 | </InspectorControls> |
| 54 | </> |
| 55 | ); |
| 56 | }; |
| 57 | }, 'addVkSiteLogoFrontPageH1Control'); |
| 58 | |
| 59 | /** |
| 60 | * Extend the core/site-logo block with the isFrontPageH1 attribute and |
| 61 | * inspector control. |
| 62 | * |
| 63 | * @param {Object} settings Block settings. |
| 64 | * @param {string} name Block name. |
| 65 | * @return {Object} Modified settings. |
| 66 | */ |
| 67 | const extendSiteLogoBlock = (settings, name) => { |
| 68 | if (!isSiteLogoBlock(name)) { |
| 69 | return settings; |
| 70 | } |
| 71 | |
| 72 | return { |
| 73 | ...settings, |
| 74 | attributes: { |
| 75 | ...settings.attributes, |
| 76 | isFrontPageH1: { |
| 77 | type: 'boolean', |
| 78 | default: false, |
| 79 | }, |
| 80 | }, |
| 81 | edit: enhanceSiteLogoBlock(settings.edit), |
| 82 | }; |
| 83 | }; |
| 84 | |
| 85 | addFilter( |
| 86 | 'blocks.registerBlockType', |
| 87 | 'vk-blocks/extend-site-logo-block', |
| 88 | extendSiteLogoBlock |
| 89 | ); |
| 90 |