deprecated
2 months ago
block.json
1 month ago
edit.js
2 months ago
icon.svg
2 months ago
index.js
2 months ago
index.php
2 months ago
mediaUpload.js
2 months ago
save.js
2 weeks ago
style.scss
2 months ago
utils.js
2 months ago
edit.js
333 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { useEffect } from '@wordpress/element'; |
| 3 | import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode'; |
| 4 | import { |
| 5 | PanelBody, |
| 6 | BaseControl, |
| 7 | TextControl, |
| 8 | CheckboxControl, |
| 9 | RadioControl, |
| 10 | } from '@wordpress/components'; |
| 11 | import { |
| 12 | InspectorControls, |
| 13 | RichText, |
| 14 | ColorPalette, |
| 15 | useBlockProps, |
| 16 | } from '@wordpress/block-editor'; |
| 17 | import { |
| 18 | getContainerClass, |
| 19 | getButtonClass, |
| 20 | getLinkClass, |
| 21 | getLinkStyle, |
| 22 | getFontawesomeIcon, |
| 23 | } from './utils'; |
| 24 | import { PrContentMediaUploadEdit } from './mediaUpload'; |
| 25 | import { FontAwesome } from '@vkblocks/utils/font-awesome-new'; |
| 26 | import { iconLabel } from '@vkblocks/utils/icon-label'; |
| 27 | import parse from 'html-react-parser'; |
| 28 | |
| 29 | export default function PrcontentEdit({ attributes, setAttributes, clientId }) { |
| 30 | const { |
| 31 | title, |
| 32 | titleColor, |
| 33 | content, |
| 34 | contentColor, |
| 35 | url, |
| 36 | buttonType, |
| 37 | buttonColor, |
| 38 | buttonColorCustom, |
| 39 | buttonText, |
| 40 | buttonTarget, |
| 41 | Image, |
| 42 | ImageBorderColor, |
| 43 | layout, |
| 44 | fontAwesomeIconBefore, |
| 45 | fontAwesomeIconAfter, |
| 46 | } = attributes; |
| 47 | useEffect(() => { |
| 48 | const fixes = {}; |
| 49 | if (fontAwesomeIconBefore) { |
| 50 | const fixed = fixBrokenUnicode(fontAwesomeIconBefore); |
| 51 | if (fixed !== fontAwesomeIconBefore) { |
| 52 | fixes.fontAwesomeIconBefore = fixed; |
| 53 | } |
| 54 | } |
| 55 | if (fontAwesomeIconAfter) { |
| 56 | const fixed = fixBrokenUnicode(fontAwesomeIconAfter); |
| 57 | if (fixed !== fontAwesomeIconAfter) { |
| 58 | fixes.fontAwesomeIconAfter = fixed; |
| 59 | } |
| 60 | } |
| 61 | if (Object.keys(fixes).length > 0) { |
| 62 | setAttributes(fixes); |
| 63 | } |
| 64 | }, [fontAwesomeIconBefore, fontAwesomeIconAfter]); |
| 65 | |
| 66 | const containerClass = getContainerClass(layout); |
| 67 | const btnClass = getButtonClass(buttonColorCustom); |
| 68 | const linkClass = getLinkClass(buttonColor, buttonColorCustom, buttonType); |
| 69 | const linkStyle = getLinkStyle(buttonColorCustom, buttonType); |
| 70 | const iconBefore = getFontawesomeIcon( |
| 71 | fontAwesomeIconBefore, |
| 72 | 'vk_button_link_before' |
| 73 | ); |
| 74 | const iconAfter = getFontawesomeIcon( |
| 75 | fontAwesomeIconAfter, |
| 76 | 'vk_button_link_after' |
| 77 | ); |
| 78 | |
| 79 | const blockProps = useBlockProps({ |
| 80 | className: containerClass, |
| 81 | }); |
| 82 | |
| 83 | return ( |
| 84 | <> |
| 85 | <InspectorControls> |
| 86 | <PanelBody |
| 87 | title={__('Color Setting', 'vk-blocks')} |
| 88 | initialOpen={false} |
| 89 | > |
| 90 | <BaseControl |
| 91 | id={`vk_prContent_titleColor-${clientId}`} |
| 92 | label={__('Title Color', 'vk-blocks')} |
| 93 | > |
| 94 | <ColorPalette |
| 95 | value={titleColor} |
| 96 | onChange={(value) => |
| 97 | setAttributes({ titleColor: value }) |
| 98 | } |
| 99 | /> |
| 100 | </BaseControl> |
| 101 | <BaseControl |
| 102 | id={`vk_prContent_contentColor-${clientId}`} |
| 103 | label={__('Content Color', 'vk-blocks')} |
| 104 | > |
| 105 | <ColorPalette |
| 106 | value={contentColor} |
| 107 | onChange={(value) => |
| 108 | setAttributes({ contentColor: value }) |
| 109 | } |
| 110 | /> |
| 111 | </BaseControl> |
| 112 | <BaseControl |
| 113 | id={`vk_prContent_image-borderColor-${clientId}`} |
| 114 | label={__('Image Border Color', 'vk-blocks')} |
| 115 | > |
| 116 | <ColorPalette |
| 117 | value={ImageBorderColor} |
| 118 | onChange={(value) => |
| 119 | setAttributes({ ImageBorderColor: value }) |
| 120 | } |
| 121 | /> |
| 122 | </BaseControl> |
| 123 | </PanelBody> |
| 124 | <PanelBody |
| 125 | title={__('Button Setting', 'vk-blocks')} |
| 126 | initialOpen={false} |
| 127 | > |
| 128 | <BaseControl |
| 129 | id={`vk_prContent_buttonText-${clientId}`} |
| 130 | label={__('Button Text', 'vk-blocks')} |
| 131 | > |
| 132 | <TextControl |
| 133 | value={buttonText} |
| 134 | onChange={(value) => |
| 135 | setAttributes({ buttonText: value }) |
| 136 | } |
| 137 | placeholder={'Input button text.'} |
| 138 | /> |
| 139 | </BaseControl> |
| 140 | <BaseControl |
| 141 | id={`vk_prContent_linkUrl-${clientId}`} |
| 142 | label={__('Link URL', 'vk-blocks')} |
| 143 | > |
| 144 | <TextControl |
| 145 | value={url} |
| 146 | onChange={(value) => setAttributes({ url: value })} |
| 147 | placeholder={'https://vektor-inc.co.jp/'} |
| 148 | /> |
| 149 | </BaseControl> |
| 150 | <CheckboxControl |
| 151 | label={__('Open link new tab', 'vk-blocks')} |
| 152 | checked={buttonTarget} |
| 153 | onChange={(checked) => |
| 154 | setAttributes({ buttonTarget: checked }) |
| 155 | } |
| 156 | /> |
| 157 | <BaseControl |
| 158 | id={`vk_prContent_buttonType-${clientId}`} |
| 159 | label={__('Button Type', 'vk-blocks')} |
| 160 | > |
| 161 | <RadioControl |
| 162 | selected={buttonType} |
| 163 | options={[ |
| 164 | { |
| 165 | label: __('Solid', 'vk-blocks'), |
| 166 | value: '0', |
| 167 | }, |
| 168 | { |
| 169 | label: __('Ghost', 'vk-blocks'), |
| 170 | value: '1', |
| 171 | }, |
| 172 | ]} |
| 173 | onChange={(value) => |
| 174 | setAttributes({ buttonType: value }) |
| 175 | } |
| 176 | /> |
| 177 | </BaseControl> |
| 178 | <RadioControl |
| 179 | label={__('Default Color:', 'vk-blocks')} |
| 180 | selected={buttonColor} |
| 181 | options={[ |
| 182 | { |
| 183 | label: __('Primary', 'vk-blocks'), |
| 184 | value: 'primary', |
| 185 | }, |
| 186 | { |
| 187 | label: __('Secondary', 'vk-blocks'), |
| 188 | value: 'secondary', |
| 189 | }, |
| 190 | { |
| 191 | label: __('Success', 'vk-blocks'), |
| 192 | value: 'success', |
| 193 | }, |
| 194 | { |
| 195 | label: __('Info', 'vk-blocks'), |
| 196 | value: 'info', |
| 197 | }, |
| 198 | { |
| 199 | label: __('Warning', 'vk-blocks'), |
| 200 | value: 'warning', |
| 201 | }, |
| 202 | { |
| 203 | label: __('Danger', 'vk-blocks'), |
| 204 | value: 'danger', |
| 205 | }, |
| 206 | { |
| 207 | label: __('Light', 'vk-blocks'), |
| 208 | value: 'light', |
| 209 | }, |
| 210 | { |
| 211 | label: __('Dark', 'vk-blocks'), |
| 212 | value: 'dark', |
| 213 | }, |
| 214 | ]} |
| 215 | onChange={(value) => |
| 216 | setAttributes({ buttonColor: value }) |
| 217 | } |
| 218 | /> |
| 219 | <BaseControl |
| 220 | id={`vk_prContent_buttonColor-${clientId}`} |
| 221 | label={__('Button Color', 'vk-blocks')} |
| 222 | > |
| 223 | <ColorPalette |
| 224 | value={buttonColorCustom} |
| 225 | onChange={(value) => |
| 226 | setAttributes({ buttonColorCustom: value }) |
| 227 | } |
| 228 | /> |
| 229 | </BaseControl> |
| 230 | <BaseControl id={`vk_prContent_icon-${clientId}`}> |
| 231 | <h4 className="mt-0 mb-2"> |
| 232 | {iconLabel(__('Icon', 'vk-blocks'))} |
| 233 | </h4> |
| 234 | <BaseControl |
| 235 | id={`vk_prContent_icon_beforeText${clientId}`} |
| 236 | label={__('Before text', 'vk-blocks')} |
| 237 | > |
| 238 | <FontAwesome |
| 239 | attributeName={'fontAwesomeIconBefore'} |
| 240 | {...{ |
| 241 | attributes, |
| 242 | setAttributes, |
| 243 | }} |
| 244 | /> |
| 245 | </BaseControl> |
| 246 | <BaseControl |
| 247 | id={`vk_prContent_icon_afterText-${clientId}`} |
| 248 | label={__('After text', 'vk-blocks')} |
| 249 | > |
| 250 | <FontAwesome |
| 251 | attributeName={'fontAwesomeIconAfter'} |
| 252 | {...{ |
| 253 | attributes, |
| 254 | setAttributes, |
| 255 | }} |
| 256 | /> |
| 257 | </BaseControl> |
| 258 | </BaseControl> |
| 259 | </PanelBody> |
| 260 | <PanelBody |
| 261 | title={__('Layout Setting', 'vk-blocks')} |
| 262 | initialOpen={false} |
| 263 | > |
| 264 | <RadioControl |
| 265 | label={__('Layout Type', 'vk-blocks')} |
| 266 | selected={layout} |
| 267 | options={[ |
| 268 | { |
| 269 | label: __('Right', 'vk-blocks'), |
| 270 | value: 'right', |
| 271 | }, |
| 272 | { |
| 273 | label: __('Left', 'vk-blocks'), |
| 274 | value: 'left', |
| 275 | }, |
| 276 | ]} |
| 277 | onChange={(value) => setAttributes({ layout: value })} |
| 278 | /> |
| 279 | </PanelBody> |
| 280 | </InspectorControls> |
| 281 | <div {...blockProps}> |
| 282 | <div className="col-sm-6 vk_prContent_colImg"> |
| 283 | <PrContentMediaUploadEdit |
| 284 | ImageBorderColor={ImageBorderColor} |
| 285 | setAttributes={setAttributes} |
| 286 | Image={Image} |
| 287 | /> |
| 288 | </div> |
| 289 | <div className="col-sm-6 vk_prContent_colTxt"> |
| 290 | <RichText |
| 291 | tagName="h3" |
| 292 | className={'vk_prContent_colTxt_title'} |
| 293 | onChange={(value) => setAttributes({ title: value })} |
| 294 | value={title} |
| 295 | placeholder={__('Input title.', 'vk-blocks')} |
| 296 | style={{ color: titleColor }} |
| 297 | /> |
| 298 | <RichText |
| 299 | tagName="p" |
| 300 | className={'vk_prContent_colTxt_text'} |
| 301 | onChange={(value) => setAttributes({ content: value })} |
| 302 | value={content} |
| 303 | placeholder={__('Input content.', 'vk-blocks')} |
| 304 | style={{ color: contentColor }} |
| 305 | /> |
| 306 | {buttonText && ( |
| 307 | /* eslint react/jsx-no-target-blank: 0 */ |
| 308 | <div className={btnClass}> |
| 309 | <a |
| 310 | href={url} |
| 311 | className={linkClass} |
| 312 | target={buttonTarget ? '_blank' : undefined} |
| 313 | style={linkStyle} |
| 314 | rel={ |
| 315 | buttonTarget |
| 316 | ? 'noopener noreferrer' |
| 317 | : undefined |
| 318 | } |
| 319 | > |
| 320 | {parse(iconBefore)} |
| 321 | <span className="vk_button_link_txt"> |
| 322 | {buttonText} |
| 323 | </span> |
| 324 | {parse(iconAfter)} |
| 325 | </a> |
| 326 | </div> |
| 327 | )} |
| 328 | </div> |
| 329 | </div> |
| 330 | </> |
| 331 | ); |
| 332 | } |
| 333 |