components
1 year ago
css
2 years ago
attributes.js
3 years ago
block.js
1 year ago
deprecated.js
3 years ago
edit.js
2 years ago
editor.scss
1 year ago
element-icons.js
2 years ago
markformat.js
4 years ago
save.js
4 years ago
transforms.js
1 year ago
markformat.js
76 lines
| 1 | import { |
| 2 | __, |
| 3 | } from '@wordpress/i18n'; |
| 4 | |
| 5 | import { |
| 6 | Fragment, |
| 7 | } from '@wordpress/element'; |
| 8 | |
| 9 | import { |
| 10 | toggleFormat, |
| 11 | registerFormatType, |
| 12 | } from '@wordpress/rich-text'; |
| 13 | |
| 14 | import { |
| 15 | RichTextToolbarButton, |
| 16 | RichTextShortcut, |
| 17 | } from '@wordpress/block-editor'; |
| 18 | |
| 19 | import { |
| 20 | withSelect, |
| 21 | } from '@wordpress/data'; |
| 22 | |
| 23 | import { |
| 24 | ifCondition, |
| 25 | compose, |
| 26 | } from '@wordpress/compose'; |
| 27 | |
| 28 | const icon = <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" clipRule="evenodd" strokeLinejoin="round" strokeMiterlimit="1.414"><path d="M4.331,15.598l2.193,1.693c0,0 -0.813,1.215 -0.992,1.215c-1.129,0.003 -1.424,0.008 -2.603,-0.001c-0.741,-0.006 -0.04,-0.955 0.187,-1.269c0.502,-0.694 1.215,-1.638 1.215,-1.638Zm7.632,-14.107c0.364,-0.061 5.412,3.896 5.439,4.272c0.031,0.438 -4.887,8.469 -5.635,9.648c-0.251,0.397 -1.185,0.206 -2.064,0.472c-0.801,0.243 -1.89,1.336 -2.193,1.105c-1.047,-0.796 -2.217,-1.646 -3.117,-2.49c-0.367,-0.343 0.388,-1.241 0.405,-2.188c0.015,-0.811 -0.644,-2.029 -0.196,-2.575c0.836,-1.019 6.931,-8.172 7.361,-8.244Zm0.144,1.454l3.95,3.105l-4.972,8.1l-5.197,-4.053l6.219,-7.152Z" /></svg>; |
| 29 | const name = 'generateblocks/mark'; |
| 30 | |
| 31 | const GenerateBlocksMarkHightlightButton = function( props ) { |
| 32 | const onToggle = () => props.onChange( toggleFormat( props.value, { type: name } ) ); |
| 33 | |
| 34 | return ( |
| 35 | <Fragment> |
| 36 | <RichTextShortcut |
| 37 | type="primary" |
| 38 | character="m" |
| 39 | onUse={ onToggle } |
| 40 | /> |
| 41 | <RichTextToolbarButton |
| 42 | icon={ icon } |
| 43 | title={ __( 'Highlight', 'generateblocks' ) } |
| 44 | onClick={ onToggle } |
| 45 | isActive={ props.isActive } |
| 46 | shortcutType="access" |
| 47 | shortcutCharacter="m" |
| 48 | className={ `toolbar-button-with-text toolbar-button__${ name }` } |
| 49 | /> |
| 50 | </Fragment> |
| 51 | ); |
| 52 | }; |
| 53 | |
| 54 | const ConditionalButton = compose( |
| 55 | withSelect( function( select ) { |
| 56 | return { |
| 57 | selectedBlock: select( 'core/block-editor' ).getSelectedBlock(), |
| 58 | }; |
| 59 | } ), |
| 60 | ifCondition( function( props ) { |
| 61 | return ( |
| 62 | props.selectedBlock && |
| 63 | props.selectedBlock.name === 'generateblocks/headline' |
| 64 | ); |
| 65 | } ) |
| 66 | )( GenerateBlocksMarkHightlightButton ); |
| 67 | |
| 68 | const GenerateBlocksMarkHighlight = { |
| 69 | title: __( 'Highlight', 'generateblocks' ), |
| 70 | tagName: 'mark', |
| 71 | className: 'gb-highlight', |
| 72 | edit: ConditionalButton, |
| 73 | }; |
| 74 | |
| 75 | registerFormatType( name, GenerateBlocksMarkHighlight ); |
| 76 |