add-item.js
2 months ago
delete-item-button.js
2 months ago
index.js
2 months ago
preview.js
2 months ago
index.js
381 lines
| 1 | /** |
| 2 | * WordPress dependencies |
| 3 | */ |
| 4 | import { __, sprintf } from '@wordpress/i18n'; |
| 5 | import { useContext, createInterpolateElement } from '@wordpress/element'; |
| 6 | import { |
| 7 | CheckboxControl, |
| 8 | BaseControl, |
| 9 | PanelBody, |
| 10 | FontSizePicker, |
| 11 | ToggleControl, |
| 12 | ColorPalette, |
| 13 | TextControl, |
| 14 | } from '@wordpress/components'; |
| 15 | import { getColorObjectByColorValue } from '@wordpress/block-editor'; |
| 16 | |
| 17 | /** |
| 18 | * Internal dependencies |
| 19 | */ |
| 20 | import { AdminContext } from '@vkblocks/admin/index'; |
| 21 | import { vkColorPalette } from '@vkblocks/admin/utils/settings'; |
| 22 | import { colorSlugToColorCode } from '@vkblocks/admin/utils/color-slug-to-color-code'; |
| 23 | import { TextStylePreview } from '@vkblocks/admin/custom-format/preview'; |
| 24 | import { AddItemButton } from '@vkblocks/admin/custom-format/add-item'; |
| 25 | import { DeleteItemButton } from '@vkblocks/admin/custom-format/delete-item-button'; |
| 26 | import { CodeMirrorCss } from '@vkblocks/components/code-mirror-css'; |
| 27 | |
| 28 | /*globals vkBlocksObject */ |
| 29 | const FONT_SIZES = [...vkBlocksObject.fontSizes]; |
| 30 | |
| 31 | export default function AdminCustomFormat() { |
| 32 | const { vkBlocksOption, setVkBlocksOption } = useContext(AdminContext); |
| 33 | |
| 34 | const onChange = (key, value, index) => { |
| 35 | const newItems = vkBlocksOption.custom_format_lists; |
| 36 | newItems[index] = { |
| 37 | ...vkBlocksOption.custom_format_lists[index], |
| 38 | [key]: value, |
| 39 | }; |
| 40 | setVkBlocksOption({ |
| 41 | ...vkBlocksOption, |
| 42 | custom_format_lists: [...newItems], |
| 43 | }); |
| 44 | }; |
| 45 | |
| 46 | return ( |
| 47 | <> |
| 48 | <section> |
| 49 | <h3 id="custom-format-setting"> |
| 50 | {__('Custom Format Setting', 'vk-blocks')} |
| 51 | </h3> |
| 52 | <p> |
| 53 | {__( |
| 54 | 'You can apply commonly used formatting on the block toolbar.', |
| 55 | 'vk-blocks' |
| 56 | )} |
| 57 | </p> |
| 58 | {Object.keys(vkBlocksOption.custom_format_lists).map( |
| 59 | (key, index) => { |
| 60 | const textStyleListObj = |
| 61 | vkBlocksOption.custom_format_lists[key]; |
| 62 | return ( |
| 63 | <div className="custom_format_item" key={index}> |
| 64 | <TextStylePreview |
| 65 | textStyleListObj={textStyleListObj} |
| 66 | /> |
| 67 | <div className="custom_format_item_control"> |
| 68 | <PanelBody |
| 69 | title={__('Custom Format', 'vk-blocks')} |
| 70 | > |
| 71 | <BaseControl id="custom-format"> |
| 72 | <TextControl |
| 73 | className="custom_format_item_name" |
| 74 | name={`vk_blocks_options[custom_format_lists][${index}][title]`} |
| 75 | id={`vk_blocks_custom_format_${index}_title`} |
| 76 | label={__( |
| 77 | 'Toolbar title', |
| 78 | 'vk-blocks' |
| 79 | )} |
| 80 | onChange={(value) => |
| 81 | onChange( |
| 82 | 'title', |
| 83 | value, |
| 84 | index |
| 85 | ) |
| 86 | } |
| 87 | value={ |
| 88 | textStyleListObj.title ?? '' |
| 89 | } |
| 90 | /> |
| 91 | {!textStyleListObj.title && ( |
| 92 | <p className="custom_format_item_name_warning"> |
| 93 | {__( |
| 94 | '※ Required If no title is entered, it will not appear on the toolbar.', |
| 95 | 'vk-blocks' |
| 96 | )} |
| 97 | </p> |
| 98 | )} |
| 99 | <DeleteItemButton |
| 100 | index={index} |
| 101 | textStyleListObj={ |
| 102 | textStyleListObj |
| 103 | } |
| 104 | /> |
| 105 | </BaseControl> |
| 106 | </PanelBody> |
| 107 | <PanelBody |
| 108 | title={__( |
| 109 | 'Format Setting', |
| 110 | 'vk-blocks' |
| 111 | )} |
| 112 | initialOpen={false} |
| 113 | > |
| 114 | <BaseControl id="format-setting"> |
| 115 | <CheckboxControl |
| 116 | name={`vk_blocks_options[custom_format_lists][${index}][font_weight_bold]`} |
| 117 | label={__('Bold', 'vk-blocks')} |
| 118 | checked={ |
| 119 | textStyleListObj.font_weight_bold |
| 120 | } |
| 121 | onChange={(value) => |
| 122 | onChange( |
| 123 | 'font_weight_bold', |
| 124 | value, |
| 125 | index |
| 126 | ) |
| 127 | } |
| 128 | /> |
| 129 | <CheckboxControl |
| 130 | name={`vk_blocks_options[custom_format_lists][${index}][font_italic]`} |
| 131 | label={__( |
| 132 | 'Italic', |
| 133 | 'vk-blocks' |
| 134 | )} |
| 135 | checked={ |
| 136 | textStyleListObj.font_italic |
| 137 | } |
| 138 | onChange={(value) => |
| 139 | onChange( |
| 140 | 'font_italic', |
| 141 | value, |
| 142 | index |
| 143 | ) |
| 144 | } |
| 145 | /> |
| 146 | <CheckboxControl |
| 147 | name={`vk_blocks_options[custom_format_lists][${index}][font_strikethrough]`} |
| 148 | label={__( |
| 149 | 'Strikethrough', |
| 150 | 'vk-blocks' |
| 151 | )} |
| 152 | checked={ |
| 153 | textStyleListObj.font_strikethrough |
| 154 | } |
| 155 | onChange={(value) => |
| 156 | onChange( |
| 157 | 'font_strikethrough', |
| 158 | value, |
| 159 | index |
| 160 | ) |
| 161 | } |
| 162 | /> |
| 163 | <CheckboxControl |
| 164 | name={`vk_blocks_options[custom_format_lists][${index}][nowrap]`} |
| 165 | label={__( |
| 166 | 'Nowrap', |
| 167 | 'vk-blocks' |
| 168 | )} |
| 169 | checked={ |
| 170 | textStyleListObj.nowrap |
| 171 | } |
| 172 | onChange={(value) => |
| 173 | onChange( |
| 174 | 'nowrap', |
| 175 | value, |
| 176 | index |
| 177 | ) |
| 178 | } |
| 179 | /> |
| 180 | <FontSizePicker |
| 181 | __nextHasNoMarginBottom |
| 182 | fontSizes={FONT_SIZES} |
| 183 | onChange={(value) => |
| 184 | onChange( |
| 185 | 'font_size', |
| 186 | value, |
| 187 | index |
| 188 | ) |
| 189 | } |
| 190 | value={ |
| 191 | textStyleListObj.font_size |
| 192 | } |
| 193 | /> |
| 194 | </BaseControl> |
| 195 | </PanelBody> |
| 196 | <PanelBody |
| 197 | title={__('Color', 'vk-blocks')} |
| 198 | initialOpen={false} |
| 199 | > |
| 200 | <BaseControl |
| 201 | id="text-color" |
| 202 | label={__( |
| 203 | 'Text Color', |
| 204 | 'vk-blocks' |
| 205 | )} |
| 206 | > |
| 207 | <ColorPalette |
| 208 | clearable |
| 209 | colors={vkColorPalette} |
| 210 | value={colorSlugToColorCode( |
| 211 | textStyleListObj.color |
| 212 | )} |
| 213 | onChange={(value) => { |
| 214 | const ColorValue = |
| 215 | getColorObjectByColorValue( |
| 216 | vkColorPalette, |
| 217 | value |
| 218 | ); |
| 219 | const newValue = |
| 220 | ColorValue !== undefined |
| 221 | ? ColorValue.slug |
| 222 | : value; |
| 223 | onChange( |
| 224 | 'color', |
| 225 | newValue, |
| 226 | index |
| 227 | ); |
| 228 | }} |
| 229 | /> |
| 230 | </BaseControl> |
| 231 | <BaseControl |
| 232 | id="background-color" |
| 233 | label={__( |
| 234 | 'Background Color', |
| 235 | 'vk-blocks' |
| 236 | )} |
| 237 | > |
| 238 | <ColorPalette |
| 239 | clearable |
| 240 | colors={vkColorPalette} |
| 241 | value={colorSlugToColorCode( |
| 242 | textStyleListObj.background_color |
| 243 | )} |
| 244 | onChange={(value) => { |
| 245 | const ColorValue = |
| 246 | getColorObjectByColorValue( |
| 247 | vkColorPalette, |
| 248 | value |
| 249 | ); |
| 250 | const newValue = |
| 251 | ColorValue !== undefined |
| 252 | ? ColorValue.slug |
| 253 | : value; |
| 254 | onChange( |
| 255 | 'background_color', |
| 256 | newValue, |
| 257 | index |
| 258 | ); |
| 259 | }} |
| 260 | /> |
| 261 | </BaseControl> |
| 262 | <BaseControl |
| 263 | id="highlighter" |
| 264 | label={__( |
| 265 | 'Highlighter Color', |
| 266 | 'vk-blocks' |
| 267 | )} |
| 268 | > |
| 269 | <ToggleControl |
| 270 | name={`vk_blocks_options[custom_format_lists][${index}][is_active_highlighter]`} |
| 271 | id={`vk_blocks_custom_format_lists_${index}_is_active_highlighter`} |
| 272 | label={__( |
| 273 | 'Activate Highlighter', |
| 274 | 'vk-blocks' |
| 275 | )} |
| 276 | checked={ |
| 277 | textStyleListObj.is_active_highlighter |
| 278 | } |
| 279 | onChange={(value) => |
| 280 | onChange( |
| 281 | 'is_active_highlighter', |
| 282 | value, |
| 283 | index |
| 284 | ) |
| 285 | } |
| 286 | /> |
| 287 | {textStyleListObj.is_active_highlighter && ( |
| 288 | <ColorPalette |
| 289 | colors={vkColorPalette} |
| 290 | onChange={(value) => { |
| 291 | // clearボタンを押した時 |
| 292 | if ( |
| 293 | value === undefined |
| 294 | ) { |
| 295 | value = |
| 296 | vkBlocksObject.highlighterColor; |
| 297 | } |
| 298 | onChange( |
| 299 | 'highlighter', |
| 300 | value, |
| 301 | index |
| 302 | ); |
| 303 | }} |
| 304 | value={ |
| 305 | textStyleListObj.highlighter |
| 306 | } |
| 307 | /> |
| 308 | )} |
| 309 | </BaseControl> |
| 310 | </PanelBody> |
| 311 | <PanelBody |
| 312 | title={__('Custom CSS', 'vk-blocks')} |
| 313 | initialOpen={false} |
| 314 | > |
| 315 | <BaseControl id="class-name-setting"> |
| 316 | <span> |
| 317 | {__('CSS class', 'vk-blocks')}: |
| 318 | <code> |
| 319 | . |
| 320 | { |
| 321 | textStyleListObj.class_name |
| 322 | } |
| 323 | </code> |
| 324 | </span> |
| 325 | <CodeMirrorCss |
| 326 | className="vk-codemirror-block-editor" |
| 327 | value={ |
| 328 | textStyleListObj.custom_css |
| 329 | ? textStyleListObj.custom_css |
| 330 | : '' |
| 331 | } |
| 332 | onChange={(value) => |
| 333 | onChange( |
| 334 | 'custom_css', |
| 335 | value, |
| 336 | index |
| 337 | ) |
| 338 | } |
| 339 | /> |
| 340 | <p> |
| 341 | {createInterpolateElement( |
| 342 | sprintf( |
| 343 | /* translators: If selector is specified, it will be replaced by a unique CSS class (<code>.%s</code>); CSS selectors other than selector may affect the entire page. */ |
| 344 | __( |
| 345 | 'If selector is specified, it will be replaced by a unique CSS class (<code>.%s</code>); CSS selectors other than selector may affect the entire page.', |
| 346 | 'vk-blocks' |
| 347 | ), |
| 348 | textStyleListObj.class_name |
| 349 | ), |
| 350 | { |
| 351 | code: <code />, |
| 352 | } |
| 353 | )} |
| 354 | </p> |
| 355 | <p>{__('Example:', 'vk-blocks')}</p> |
| 356 | <pre |
| 357 | className="vk-custom-css-sample-code" |
| 358 | style={{ |
| 359 | whiteSpace: 'pre-wrap', |
| 360 | padding: '16px', |
| 361 | display: 'block', |
| 362 | background: '#f5f5f5', |
| 363 | }} |
| 364 | > |
| 365 | { |
| 366 | 'selector {\n background: #f5f5f5;\n}' |
| 367 | } |
| 368 | </pre> |
| 369 | </BaseControl> |
| 370 | </PanelBody> |
| 371 | </div> |
| 372 | </div> |
| 373 | ); |
| 374 | } |
| 375 | )} |
| 376 | <AddItemButton /> |
| 377 | </section> |
| 378 | </> |
| 379 | ); |
| 380 | } |
| 381 |