BlockControls.js
4 years ago
ComponentCSS.js
4 years ago
HeadlineContentRenderer.js
4 years ago
InspectorControls.js
4 years ago
ToolbarGroup.js
4 years ago
InspectorControls.js
469 lines
| 1 | import PanelArea from '../../../components/panel-area'; |
| 2 | import { SelectControl, ToggleControl } from '@wordpress/components'; |
| 3 | import { __ } from '@wordpress/i18n'; |
| 4 | import { applyFilters } from '@wordpress/hooks'; |
| 5 | import getIcon from '../../../utils/get-icon'; |
| 6 | import { Fragment } from '@wordpress/element'; |
| 7 | import TypographyControls from '../../../components/typography'; |
| 8 | import DimensionsControl from '../../../components/dimensions'; |
| 9 | import DimensionsGroup from '../../../components/dimensions-group'; |
| 10 | import ColorGroup from '../../../components/color-group'; |
| 11 | import IconPicker from '../../../components/icon-picker'; |
| 12 | import { InspectorControls } from '@wordpress/block-editor'; |
| 13 | import NumberControl from '../../../components/number-control'; |
| 14 | |
| 15 | export default ( props ) => { |
| 16 | const { |
| 17 | attributes, |
| 18 | setAttributes, |
| 19 | deviceType, |
| 20 | blockState, |
| 21 | computedStyles, |
| 22 | } = props; |
| 23 | |
| 24 | const { |
| 25 | element, |
| 26 | marginTop, |
| 27 | marginRight, |
| 28 | marginBottom, |
| 29 | marginLeft, |
| 30 | icon, |
| 31 | iconLocation, |
| 32 | iconLocationTablet, |
| 33 | iconLocationMobile, |
| 34 | iconVerticalAlignment, |
| 35 | iconVerticalAlignmentTablet, |
| 36 | iconVerticalAlignmentMobile, |
| 37 | iconSizeUnit, |
| 38 | inlineWidth, |
| 39 | inlineWidthTablet, |
| 40 | inlineWidthMobile, |
| 41 | removeText, |
| 42 | isCaption, |
| 43 | } = attributes; |
| 44 | |
| 45 | return ( |
| 46 | <InspectorControls> |
| 47 | <PanelArea |
| 48 | { ...props } |
| 49 | id={ 'headlineElement' } |
| 50 | state={ blockState } |
| 51 | showPanel={ |
| 52 | 'Desktop' === deviceType && |
| 53 | ! isCaption |
| 54 | } |
| 55 | > |
| 56 | <SelectControl |
| 57 | label={ __( 'Tag Name', 'generateblocks' ) } |
| 58 | value={ element } |
| 59 | options={ [ |
| 60 | { label: 'h1', value: 'h1' }, |
| 61 | { label: 'h2', value: 'h2' }, |
| 62 | { label: 'h3', value: 'h3' }, |
| 63 | { label: 'h4', value: 'h4' }, |
| 64 | { label: 'h5', value: 'h5' }, |
| 65 | { label: 'h6', value: 'h6' }, |
| 66 | { label: 'paragraph', value: 'p' }, |
| 67 | { label: 'div', value: 'div' }, |
| 68 | { label: 'figcaption', value: 'figcaption' }, |
| 69 | ] } |
| 70 | onChange={ ( value ) => { |
| 71 | setAttributes( { |
| 72 | element: value, |
| 73 | } ); |
| 74 | |
| 75 | if ( ! marginTop && ! marginRight && ! marginBottom && ! marginLeft ) { |
| 76 | if ( 'p' === value ) { |
| 77 | setAttributes( { marginUnit: 'em' } ); |
| 78 | } else { |
| 79 | setAttributes( { marginUnit: generateBlocksDefaults.headline.marginUnit } ); |
| 80 | } |
| 81 | } |
| 82 | } } |
| 83 | /> |
| 84 | |
| 85 | { applyFilters( 'generateblocks.editor.controls', '', 'headlineElement', props, blockState ) } |
| 86 | </PanelArea> |
| 87 | |
| 88 | <PanelArea |
| 89 | { ...props } |
| 90 | title={ __( 'Typography', 'generateblocks' ) } |
| 91 | initialOpen={ false } |
| 92 | icon={ getIcon( 'typography' ) } |
| 93 | className={ 'gblocks-panel-label' } |
| 94 | id={ 'headlineTypography' } |
| 95 | state={ blockState } |
| 96 | showPanel={ ! removeText || false } |
| 97 | > |
| 98 | <TypographyControls |
| 99 | { ...props } |
| 100 | deviceType={ deviceType } |
| 101 | options={ [ 'fontWeight', 'textTransform', 'fontSize', 'lineHeight', 'letterSpacing', 'fontFamily' ] } |
| 102 | computedStyles={ computedStyles } |
| 103 | /> |
| 104 | |
| 105 | { applyFilters( 'generateblocks.editor.controls', '', 'headlineTypography', props, blockState ) } |
| 106 | </PanelArea> |
| 107 | |
| 108 | <PanelArea |
| 109 | { ...props } |
| 110 | title={ __( 'Spacing', 'generateblocks' ) } |
| 111 | initialOpen={ false } |
| 112 | icon={ getIcon( 'spacing' ) } |
| 113 | className={ 'gblocks-panel-label' } |
| 114 | id={ 'headlineSpacing' } |
| 115 | state={ blockState } |
| 116 | > |
| 117 | <DimensionsGroup |
| 118 | { ...props } |
| 119 | deviceType={ deviceType } |
| 120 | dimensions={ |
| 121 | [ |
| 122 | { |
| 123 | type: 'padding', |
| 124 | label: __( 'Padding', 'generateblocks' ), |
| 125 | units: [ 'px', 'em', '%' ], |
| 126 | }, |
| 127 | { |
| 128 | type: 'margin', |
| 129 | label: __( 'Margin', 'generateblocks' ), |
| 130 | units: [ 'px', 'em', '%' ], |
| 131 | computedStyles, |
| 132 | }, |
| 133 | { |
| 134 | type: 'borderSize', |
| 135 | label: __( 'Border Size', 'generateblocks' ), |
| 136 | units: [ 'px' ], |
| 137 | }, |
| 138 | { |
| 139 | type: 'borderRadius', |
| 140 | label: __( 'Border Radius', 'generateblocks' ), |
| 141 | units: [ 'px', 'em', '%' ], |
| 142 | }, |
| 143 | ] |
| 144 | } |
| 145 | /> |
| 146 | |
| 147 | { 'Desktop' === deviceType && ( |
| 148 | <Fragment> |
| 149 | <ToggleControl |
| 150 | label={ __( 'Inline Width', 'generateblocks' ) } |
| 151 | checked={ !! inlineWidth } |
| 152 | onChange={ ( value ) => { |
| 153 | setAttributes( { |
| 154 | inlineWidth: value, |
| 155 | } ); |
| 156 | } } |
| 157 | /> |
| 158 | </Fragment> |
| 159 | ) } |
| 160 | |
| 161 | { 'Tablet' === deviceType && ( |
| 162 | <Fragment> |
| 163 | <ToggleControl |
| 164 | label={ __( 'Inline Width', 'generateblocks' ) } |
| 165 | checked={ !! inlineWidthTablet } |
| 166 | onChange={ ( value ) => { |
| 167 | setAttributes( { |
| 168 | inlineWidthTablet: value, |
| 169 | } ); |
| 170 | } } |
| 171 | /> |
| 172 | </Fragment> |
| 173 | ) } |
| 174 | |
| 175 | { 'Mobile' === deviceType && ( |
| 176 | <Fragment> |
| 177 | <ToggleControl |
| 178 | label={ __( 'Inline Width', 'generateblocks' ) } |
| 179 | checked={ !! inlineWidthMobile } |
| 180 | onChange={ ( value ) => { |
| 181 | setAttributes( { |
| 182 | inlineWidthMobile: value, |
| 183 | } ); |
| 184 | } } |
| 185 | /> |
| 186 | </Fragment> |
| 187 | ) } |
| 188 | |
| 189 | { applyFilters( 'generateblocks.editor.controls', '', 'headlineSpacing', props, blockState ) } |
| 190 | </PanelArea> |
| 191 | |
| 192 | <PanelArea |
| 193 | { ...props } |
| 194 | title={ __( 'Colors', 'generateblocks' ) } |
| 195 | initialOpen={ false } |
| 196 | icon={ getIcon( 'colors' ) } |
| 197 | className={ 'gblocks-panel-label' } |
| 198 | id={ 'headlineColors' } |
| 199 | state={ blockState } |
| 200 | showPanel={ 'Desktop' === deviceType || false } |
| 201 | > |
| 202 | <ColorGroup |
| 203 | { ...props } |
| 204 | colors={ |
| 205 | [ |
| 206 | { |
| 207 | group: 'background', |
| 208 | label: __( 'Background', 'generateblocks' ), |
| 209 | items: [ |
| 210 | { |
| 211 | attribute: 'backgroundColor', |
| 212 | alpha: true, |
| 213 | }, |
| 214 | ], |
| 215 | }, |
| 216 | { |
| 217 | group: 'text', |
| 218 | label: __( 'Text', 'generateblocks' ), |
| 219 | items: [ |
| 220 | { |
| 221 | attribute: 'textColor', |
| 222 | }, |
| 223 | ], |
| 224 | }, |
| 225 | { |
| 226 | group: 'link', |
| 227 | label: __( 'Link', 'generateblocks' ), |
| 228 | items: [ |
| 229 | { |
| 230 | attribute: 'linkColor', |
| 231 | }, |
| 232 | { |
| 233 | tooltip: __( 'Hover', 'generateblocks' ), |
| 234 | attribute: 'linkColorHover', |
| 235 | }, |
| 236 | ], |
| 237 | }, |
| 238 | { |
| 239 | group: 'border', |
| 240 | label: __( 'Border', 'generateblocks' ), |
| 241 | items: [ |
| 242 | { |
| 243 | attribute: 'borderColor', |
| 244 | alpha: true, |
| 245 | }, |
| 246 | ], |
| 247 | }, |
| 248 | { |
| 249 | group: 'icon', |
| 250 | label: __( 'Icon', 'generateblocks' ), |
| 251 | items: [ |
| 252 | { |
| 253 | attribute: 'iconColor', |
| 254 | alpha: true, |
| 255 | }, |
| 256 | ], |
| 257 | }, |
| 258 | { |
| 259 | group: 'highlight', |
| 260 | label: __( 'Highlight', 'generateblocks' ), |
| 261 | items: [ |
| 262 | { |
| 263 | attribute: 'highlightTextColor', |
| 264 | }, |
| 265 | ], |
| 266 | }, |
| 267 | ] |
| 268 | } |
| 269 | /> |
| 270 | </PanelArea> |
| 271 | |
| 272 | <PanelArea |
| 273 | { ...props } |
| 274 | title={ __( 'Icon', 'generateblocks' ) } |
| 275 | initialOpen={ false } |
| 276 | icon={ getIcon( 'icons' ) } |
| 277 | className={ 'gblocks-panel-label' } |
| 278 | id={ 'headlineIcon' } |
| 279 | state={ blockState } |
| 280 | showPanel={ 'Desktop' === deviceType || !! icon ? true : false } |
| 281 | > |
| 282 | |
| 283 | { 'Desktop' === deviceType && |
| 284 | <IconPicker |
| 285 | { ...props } |
| 286 | attrIcon={ 'icon' } |
| 287 | attrRemoveText={ 'removeText' } |
| 288 | attrAriaLabel={ 'ariaLabel' } |
| 289 | /> |
| 290 | } |
| 291 | |
| 292 | { 'Desktop' === deviceType && !! icon && |
| 293 | <Fragment> |
| 294 | { ! removeText && |
| 295 | <Fragment> |
| 296 | <SelectControl |
| 297 | label={ __( 'Icon Location', 'generateblocks' ) } |
| 298 | value={ iconLocation } |
| 299 | options={ [ |
| 300 | { label: __( 'Inline', 'generateblocks' ), value: 'inline' }, |
| 301 | { label: __( 'Above', 'generateblocks' ), value: 'above' }, |
| 302 | ] } |
| 303 | onChange={ ( value ) => { |
| 304 | setAttributes( { |
| 305 | iconLocation: value, |
| 306 | iconPaddingRight: 'inline' === value ? '0.5' : '', |
| 307 | iconPaddingBottom: 'above' === value ? '0.5' : '', |
| 308 | } ); |
| 309 | } } |
| 310 | /> |
| 311 | |
| 312 | { 'inline' === iconLocation && |
| 313 | <SelectControl |
| 314 | label={ __( 'Icon Alignment', 'generateblocks' ) } |
| 315 | value={ iconVerticalAlignment } |
| 316 | options={ [ |
| 317 | { label: __( 'Top', 'generateblocks' ), value: 'top' }, |
| 318 | { label: __( 'Center', 'generateblocks' ), value: 'center' }, |
| 319 | { label: __( 'Bottom', 'generateblocks' ), value: 'bottom' }, |
| 320 | ] } |
| 321 | onChange={ ( value ) => { |
| 322 | setAttributes( { |
| 323 | iconVerticalAlignment: value, |
| 324 | } ); |
| 325 | } } |
| 326 | /> |
| 327 | } |
| 328 | |
| 329 | <DimensionsControl |
| 330 | { ...props } |
| 331 | device={ deviceType } |
| 332 | type={ 'iconPadding' } |
| 333 | label={ __( 'Padding', 'generateblocks' ) } |
| 334 | units={ [ 'px', 'em', '%' ] } |
| 335 | /> |
| 336 | </Fragment> |
| 337 | } |
| 338 | </Fragment> |
| 339 | } |
| 340 | |
| 341 | { 'Tablet' === deviceType && !! icon && |
| 342 | <Fragment> |
| 343 | { ! removeText && |
| 344 | <Fragment> |
| 345 | <SelectControl |
| 346 | label={ __( 'Icon Location', 'generateblocks' ) } |
| 347 | value={ iconLocationTablet } |
| 348 | options={ [ |
| 349 | { label: __( 'Inherit', 'generateblocks' ), value: '' }, |
| 350 | { label: __( 'Inline', 'generateblocks' ), value: 'inline' }, |
| 351 | { label: __( 'Above', 'generateblocks' ), value: 'above' }, |
| 352 | ] } |
| 353 | onChange={ ( value ) => { |
| 354 | setAttributes( { |
| 355 | iconLocationTablet: value, |
| 356 | iconPaddingRightTablet: 'inline' === value ? '0.5' : '', |
| 357 | iconPaddingBottomTablet: 'above' === value ? '0.5' : '', |
| 358 | } ); |
| 359 | } } |
| 360 | /> |
| 361 | |
| 362 | { 'inline' === iconLocationTablet && |
| 363 | <SelectControl |
| 364 | label={ __( 'Icon Alignment', 'generateblocks' ) } |
| 365 | value={ iconVerticalAlignmentTablet } |
| 366 | options={ [ |
| 367 | { label: __( 'Inherit', 'generateblocks' ), value: '' }, |
| 368 | { label: __( 'Top', 'generateblocks' ), value: 'top' }, |
| 369 | { label: __( 'Center', 'generateblocks' ), value: 'center' }, |
| 370 | { label: __( 'Bottom', 'generateblocks' ), value: 'bottom' }, |
| 371 | ] } |
| 372 | onChange={ ( value ) => { |
| 373 | setAttributes( { |
| 374 | iconVerticalAlignmentTablet: value, |
| 375 | } ); |
| 376 | } } |
| 377 | /> |
| 378 | } |
| 379 | |
| 380 | <DimensionsControl |
| 381 | { ...props } |
| 382 | device={ deviceType } |
| 383 | type={ 'iconPadding' } |
| 384 | label={ __( 'Padding', 'generateblocks' ) } |
| 385 | units={ [ 'px', 'em', '%' ] } |
| 386 | /> |
| 387 | </Fragment> |
| 388 | } |
| 389 | </Fragment> |
| 390 | } |
| 391 | |
| 392 | { 'Mobile' === deviceType && !! icon && |
| 393 | <Fragment> |
| 394 | { ! removeText && |
| 395 | <Fragment> |
| 396 | <SelectControl |
| 397 | label={ __( 'Icon Location', 'generateblocks' ) } |
| 398 | value={ iconLocationMobile } |
| 399 | options={ [ |
| 400 | { label: __( 'Inherit', 'generateblocks' ), value: '' }, |
| 401 | { label: __( 'Inline', 'generateblocks' ), value: 'inline' }, |
| 402 | { label: __( 'Above', 'generateblocks' ), value: 'above' }, |
| 403 | ] } |
| 404 | onChange={ ( value ) => { |
| 405 | setAttributes( { |
| 406 | iconLocationMobile: value, |
| 407 | iconPaddingRightMobile: 'inline' === value ? '0.5' : '', |
| 408 | iconPaddingBottomMobile: 'above' === value ? '0.5' : '', |
| 409 | } ); |
| 410 | } } |
| 411 | /> |
| 412 | |
| 413 | { 'inline' === iconLocationMobile && |
| 414 | <SelectControl |
| 415 | label={ __( 'Icon Alignment', 'generateblocks' ) } |
| 416 | value={ iconVerticalAlignmentMobile } |
| 417 | options={ [ |
| 418 | { label: __( 'Inherit', 'generateblocks' ), value: '' }, |
| 419 | { label: __( 'Top', 'generateblocks' ), value: 'top' }, |
| 420 | { label: __( 'Center', 'generateblocks' ), value: 'center' }, |
| 421 | { label: __( 'Bottom', 'generateblocks' ), value: 'bottom' }, |
| 422 | ] } |
| 423 | onChange={ ( value ) => { |
| 424 | setAttributes( { |
| 425 | iconVerticalAlignmentMobile: value, |
| 426 | } ); |
| 427 | } } |
| 428 | /> |
| 429 | } |
| 430 | |
| 431 | <DimensionsControl |
| 432 | { ...props } |
| 433 | device={ deviceType } |
| 434 | type={ 'iconPadding' } |
| 435 | label={ __( 'Padding', 'generateblocks' ) } |
| 436 | units={ [ 'px', 'em', '%' ] } |
| 437 | /> |
| 438 | </Fragment> |
| 439 | } |
| 440 | </Fragment> |
| 441 | } |
| 442 | |
| 443 | { !! icon && |
| 444 | <NumberControl |
| 445 | { ...props } |
| 446 | label={ __( 'Icon Size', 'generateblocks' ) } |
| 447 | attributeName="iconSize" |
| 448 | units={ [ 'px', 'em' ] } |
| 449 | device={ deviceType } |
| 450 | presets={ |
| 451 | [ |
| 452 | { |
| 453 | unit: 'em', |
| 454 | data: [ 0.7, 1, 1.5, 2 ], |
| 455 | }, |
| 456 | ] |
| 457 | } |
| 458 | presetUnit="em" |
| 459 | min="1" |
| 460 | step={ 'em' === iconSizeUnit ? .1 : 1 } |
| 461 | /> |
| 462 | } |
| 463 | |
| 464 | { applyFilters( 'generateblocks.editor.controls', '', 'headlineIcon', props, blockState ) } |
| 465 | </PanelArea> |
| 466 | </InspectorControls> |
| 467 | ); |
| 468 | }; |
| 469 |