SRD75

Hero Block

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

×