SRD75

Hero Block (new)

Feb 28th, 2021
775
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  * Block dependencies
  3.  */
  4. import icon from './icon';
  5. import './style.scss';
  6. import classnames from 'lodash/classnames'
  7.  
  8. /**
  9.  * Internal block libraries
  10.  */
  11. const { __ } = wp.i18n;
  12. const { registerBlockType } = wp.blocks;
  13. const {
  14.     RichText,
  15.     MediaUpload,
  16.     BlockControls,
  17.     BlockAlignmentToolbar,
  18. } = wp.editor
  19.  
  20. /**
  21.  * Register block
  22.  */
  23. export default registerBlockType(
  24.     'jsforwpblocks/heroblock',
  25.     {
  26.         title: __( 'Hero Block', 'jsforwpblocks' ),
  27.         description: __( 'Large block with hero image, text and buttons', 'jsforwpblocks' ),
  28.         category: 'common',
  29.         icon: {
  30.             background: 'rgba(254, 243, 224, 0.52)',
  31.             src: icon,
  32.         },  
  33.         keywords: [
  34.             __( 'Banner', 'jsforwpblocks' ),
  35.             __( 'Call to Action', 'jsforwpblocks' ),
  36.             __( 'Message', 'jsforwpblocks' ),
  37.         ],
  38.         attributes: {
  39.             message: {
  40.                 type: 'array',
  41.                 source: 'children',
  42.                 selector: '.message-body',
  43.             },
  44.             blockAlignment: {
  45.                 type: 'string',
  46.                 default: 'wide',
  47.             },
  48.             imgUrl: {
  49.                 type: 'string',
  50.                 default: 'http://placehold.it/500'
  51.             }
  52.         },
  53.         getEditWrapperProps( { blockAlignment } ) {
  54.             if ( 'left' === blockAlignment || 'right' === blockAlignment || 'full' === blockAlignment ) {
  55.                 return { 'data-align': blockAlignment };
  56.             }
  57.         },
  58.         edit: props => {
  59.             const { attributes: { message, blockAlignment, imgUrl }, className, setAttributes } = props;
  60.             const onChangeMessage = message => { setAttributes( { message } ) };
  61.  
  62.             function selectImage(value) {
  63.                 console.log(value);
  64.                 setAttributes({
  65.                     imgUrl: value.sizes.full.url,
  66.                 })
  67.             }
  68.  
  69.             return (
  70.                 <div className={ className }>
  71.                     <BlockControls>
  72.                         <BlockAlignmentToolbar
  73.                             value={ blockAlignment }
  74.                             onChange={ blockAlignment => setAttributes( { blockAlignment } ) }
  75.                         />
  76.                     </BlockControls>
  77.                     <RichText
  78.                         tagName="div"
  79.                         multiline="p"
  80.                         placeholder={ __( 'Add your custom message', 'jsforwpblocks' ) }
  81.                         onChange={ onChangeMessage }
  82.                         value={ message }
  83.                     />
  84.                     <div className="media">
  85.                         <MediaUpload
  86.                             onSelect={selectImage}
  87.                             render={ ({open}) => {
  88.                                 return <img
  89.                                     src={imgUrl}
  90.                                     onClick={open}
  91.                                     />;
  92.                             }}
  93.                         />
  94.                     </div>
  95.                 </div>
  96.             );
  97.         },
  98.         save: props => {
  99.             const { attributes: { message, blockAlignment, imgUrl } } = props;
  100.             return (
  101.                 <div
  102.                     className={classnames(
  103.                         `align${blockAlignment}`
  104.                     )}
  105.                     style={backgroundImage={imgUrl}}
  106.                 >
  107.                     <h2>{ __( 'Call to Action', 'jsforwpblocks' ) }</h2>
  108.                     <div className="message-body">
  109.                         { message }
  110.                     </div>
  111.                 </div>
  112.             );
  113.         },
  114.     },
  115. );
  116.  
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×