block.json
1 month ago
class-vk-blocks-check-using-vk-page-content-block.php
2 months ago
edit.js
2 months ago
icon.svg
2 months ago
index.js
2 months ago
index.php
2 months ago
edit.js
118 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { PanelBody, BaseControl, SelectControl } from '@wordpress/components'; |
| 3 | import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; |
| 4 | import ServerSideRender from '@wordpress/server-side-render'; |
| 5 | import { useSelect } from '@wordpress/data'; |
| 6 | |
| 7 | // usePosts は本ブロック専用のためローカル定義 |
| 8 | const usePosts = (postType, query) => { |
| 9 | return useSelect( |
| 10 | (select) => { |
| 11 | return ( |
| 12 | select('core').getEntityRecords( |
| 13 | 'postType', |
| 14 | postType.slug, |
| 15 | query |
| 16 | ) || [] |
| 17 | ); |
| 18 | }, |
| 19 | [postType, query] |
| 20 | ); |
| 21 | }; |
| 22 | |
| 23 | const getPageLabel = (page) => { |
| 24 | let label = page.title.rendered; |
| 25 | if (page.status === 'private') { |
| 26 | label += ` (${__('Private', 'vk-blocks')})`; |
| 27 | } |
| 28 | if (page.password) { |
| 29 | label += ` (${__('Password Protected', 'vk-blocks')})`; |
| 30 | } |
| 31 | return label; |
| 32 | }; |
| 33 | |
| 34 | const getPagesSelect = (pages, currentTargetPost) => { |
| 35 | const defaultSelect = [ |
| 36 | { |
| 37 | label: __('Unspecified', 'vk-blocks'), |
| 38 | value: -1, |
| 39 | }, |
| 40 | ]; |
| 41 | |
| 42 | // 選択リストから非� |
| 43 | �開・パスワード保護のページを除外する（現在選択中のページは除く） |
| 44 | const availablePages = pages.filter( |
| 45 | (page) => |
| 46 | (page.status === 'publish' && !page.password) || |
| 47 | page.id === currentTargetPost |
| 48 | ); |
| 49 | |
| 50 | // 利用可能なページから選択オプションを作成する |
| 51 | const pagesSelect = availablePages.map((page) => ({ |
| 52 | label: |
| 53 | page.status === 'private' || page.password |
| 54 | ? getPageLabel(page) |
| 55 | : page.title.rendered, |
| 56 | value: page.id, |
| 57 | })); |
| 58 | |
| 59 | return defaultSelect.concat(pagesSelect); |
| 60 | }; |
| 61 | |
| 62 | export default function PageContentEdit({ attributes, setAttributes }) { |
| 63 | const { TargetPost } = attributes; |
| 64 | |
| 65 | const pages = usePosts( |
| 66 | { slug: 'page' }, |
| 67 | { per_page: -1, status: 'private,publish' } |
| 68 | ); |
| 69 | |
| 70 | const pagesSelect = getPagesSelect(pages, TargetPost); |
| 71 | |
| 72 | let editContent; |
| 73 | if (TargetPost === -1) { |
| 74 | editContent = ( |
| 75 | <div className="alert alert-warning text-center"> |
| 76 | {__( |
| 77 | 'Because no post is selected, The block Will not render', |
| 78 | 'vk-blocks' |
| 79 | )} |
| 80 | </div> |
| 81 | ); |
| 82 | } else { |
| 83 | editContent = ( |
| 84 | <ServerSideRender |
| 85 | block="vk-blocks/page-content" |
| 86 | attributes={attributes} |
| 87 | /> |
| 88 | ); |
| 89 | } |
| 90 | |
| 91 | const blockProps = useBlockProps(); |
| 92 | |
| 93 | return ( |
| 94 | <> |
| 95 | <InspectorControls> |
| 96 | <PanelBody |
| 97 | title={__('Page Setting', 'vk-blocks')} |
| 98 | initialOpen={true} |
| 99 | > |
| 100 | <BaseControl id={'vb-call-01'}> |
| 101 | <SelectControl |
| 102 | label={__('Select Page', 'vk-blocks')} |
| 103 | value={TargetPost} |
| 104 | options={pagesSelect} |
| 105 | onChange={(value) => |
| 106 | setAttributes({ |
| 107 | TargetPost: parseInt(value, 10), |
| 108 | }) |
| 109 | } |
| 110 | /> |
| 111 | </BaseControl> |
| 112 | </PanelBody> |
| 113 | </InspectorControls> |
| 114 | <div {...blockProps}>{editContent}</div> |
| 115 | </> |
| 116 | ); |
| 117 | } |
| 118 |