1(function (blocks, editor, components, i18n, element) { 2 var __ = i18n.__ 3 var el = element.createElement 4 var registerBlockType = blocks.registerBlockType 5 var RichText = editor.RichText 6 var BlockControls = editor.BlockControls 7 var AlignmentToolbar = editor.AlignmentToolbar 8 var MediaUpload = editor.MediaUpload 9 var InspectorControls = editor.InspectorControls 10 var PanelBody = components.PanelBody 11 var TextControl = components.TextControl 12 13 registerBlockType('organic/profile-block', { // The name of our block. Must be a string with prefix. Example: my-plugin/my-custom-block. 14 title: __('Profile'), // The title of our block. 15 description: __('A custom block for displaying personal profiles.'), // The description of our block. 16 icon: 'businessman', // Dashicon icon for our block. Custom icons can be added using inline SVGs. 17 category: 'common', // The category of the block. 18 supports: { 19 align: true, 20 alignWide: true 21 }, 22 attributes: { // Necessary for saving block content. 23 title: { 24 type: 'array', 25 source: 'children', 26 selector: 'h3' 27 }, 28 subtitle: { 29 type: 'array', 30 source: 'children', 31 selector: 'h5' 32 }, 33 bio: { 34 type: 'string', 35 source: 'html', 36 selector: '.organic-profile-bio' 37 }, 38 mediaID: { 39 type: 'number' 40 }, 41 mediaURL: { 42 type: 'string', 43 source: 'attribute', 44 selector: 'img', 45 attribute: 'src' 46 }, 47 alignment: { 48 type: 'string', 49 default: 'center' 50 }, 51 facebookURL: { 52 type: 'string' 53 }, 54 twitterURL: { 55 type: 'string' 56 }, 57 instagramURL: { 58 type: 'string' 59 }, 60 linkedURL: { 61 type: 'string' 62 }, 63 emailAddress: { 64 type: 'string' 65 } 66 }, 67 68 edit: function (props) { 69 var attributes = props.attributes 70 var alignment = props.attributes.alignment 71 72 var onSelectImage = function (media) { 73 return props.setAttributes({ 74 mediaURL: media.url, 75 mediaID: media.id 76 }) 77 } 78 79 function onChangeAlignment (newAlignment) { 80 props.setAttributes({ alignment: newAlignment }) 81 } 82 83 return [ 84 el(BlockControls, { key: 'controls' }, // Display controls when the block is clicked on. 85 el('div', { className: 'components-toolbar' }, 86 el(MediaUpload, { 87 onSelect: onSelectImage, 88 type: 'image', 89 render: function (obj) { 90 return el(components.Button, { 91 className: 'components-toolbar-button has-icon', 92 onClick: obj.open 93 }, 94 // Add Dashicon for media upload button. 95 el('svg', { className: 'dashicon dashicons-edit', width: '20', height: '20' }, 96 el('path', { d: 'M2.25 1h15.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H2.25C1.56 19 1 18.44 1 17.75V2.25C1 1.56 1.56 1 2.25 1zM17 17V3H3v14h14zM10 6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm3 5s0-6 3-6v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V8c2 0 3 4 3 4s1-3 3-3 3 2 3 2z' }) 97 )) 98 } 99 }) 100 ), 101 // Display alignment toolbar within block controls. 102 el(AlignmentToolbar, { 103 value: alignment, 104 onChange: onChangeAlignment 105 }) 106 ), 107 el(InspectorControls, { key: 'inspector' }, // Display the block options in the inspector panel. 108 el(PanelBody, { 109 title: __('Social Media Links'), 110 className: 'block-social-links', 111 initialOpen: true 112 }, 113 el('p', {}, __('Add links to your social media profiles.')), 114 // Facebook social media text field option. 115 el(TextControl, { 116 label: __('Facebook URL'), 117 value: attributes.facebookURL, 118 onChange: function (newFacebook) { 119 props.setAttributes({ facebookURL: newFacebook }) 120 } 121 }), 122 // Twitter social media text field option. 123 el(TextControl, { 124 label: __('Twitter URL'), 125 value: attributes.twitterURL, 126 onChange: function (newTwitter) { 127 props.setAttributes({ twitterURL: newTwitter }) 128 } 129 }), 130 // Instagram social media text field option. 131 el(TextControl, { 132 label: __('Instagram URL'), 133 value: attributes.instagramURL, 134 onChange: function (newInstagram) { 135 props.setAttributes({ instagramURL: newInstagram }) 136 } 137 }), 138 // LinkedIn social media text field option. 139 el(TextControl, { 140 label: __('LinkedIn URL'), 141 value: attributes.linkedURL, 142 onChange: function (newLinkedIn) { 143 props.setAttributes({ linkedURL: newLinkedIn }) 144 } 145 }), 146 // Email address text field option. 147 el(TextControl, { 148 label: __('Email Address'), 149 value: attributes.emailAddress, 150 onChange: function (newEmail) { 151 props.setAttributes({ emailAddress: newEmail }) 152 } 153 })) 154 ), 155 el('div', { className: props.className }, 156 el('div', { 157 className: attributes.mediaID ? 'organic-profile-image image-active' : 'organic-profile-image image-inactive', 158 style: attributes.mediaID ? { backgroundImage: 'url(' + attributes.mediaURL + ')' } : {} 159 }, 160 el(MediaUpload, { 161 onSelect: onSelectImage, 162 type: 'image', 163 value: attributes.mediaID, 164 render: function (obj) { 165 return el(components.Button, { 166 className: attributes.mediaID ? 'image-button' : 'button button-large', 167 onClick: obj.open 168 }, 169 !attributes.mediaID ? __('Upload Image') : el('img', { src: attributes.mediaURL }) 170 ) 171 } 172 }) 173 ), 174 el('div', { className: 'organic-profile-content', style: { textAlign: alignment } }, 175 attributes.title && el(RichText, { 176 key: 'editable', 177 tagName: 'h3', 178 placeholder: 'Profile Name', 179 keepPlaceholderOnFocus: true, 180 value: attributes.title, 181 onChange: function (newTitle) { 182 props.setAttributes({ title: newTitle }) 183 } 184 }), 185 attributes.subtitle && el(RichText, { 186 tagName: 'h5', 187 placeholder: __('Subtitle'), 188 keepPlaceholderOnFocus: true, 189 value: attributes.subtitle, 190 onChange: function (newSubtitle) { 191 props.setAttributes({ subtitle: newSubtitle }) 192 } 193 }), 194 el(RichText, { 195 className: 'organic-profile-bio', 196 // key: 'editable', 197 tagName: 'p', 198 placeholder: __('Write a brief bio...'), 199 keepPlaceholderOnFocus: true, 200 value: attributes.bio, 201 onChange: function (newBio) { 202 props.setAttributes({ bio: newBio }) 203 } 204 }), 205 el('div', { className: 'organic-profile-social' }, 206 attributes.facebookURL && el('a', { 207 className: 'social-link facebook-link', 208 href: attributes.facebookURL, 209 target: '_blank' 210 }, 211 el('i', { className: 'fa fa-facebook' }) 212 ), 213 attributes.twitterURL && el('a', { 214 className: 'social-link twitter-link', 215 href: attributes.twitterURL, 216 target: '_blank' 217 }, 218 el('i', { className: 'fa fa-twitter' }) 219 ), 220 attributes.instagramURL && el('a', { 221 className: 'social-link instagram-link', 222 href: attributes.instagramURL, 223 target: '_blank' 224 }, 225 el('i', { className: 'fa fa-instagram' }) 226 ), 227 attributes.linkedURL && el('a', { 228 className: 'social-link linkedin-link', 229 href: attributes.linkedURL, 230 target: '_blank' 231 }, 232 el('i', { className: 'fa fa-linkedin' }) 233 ), 234 attributes.emailAddress && el('a', { 235 className: 'social-link email-link', 236 href: 'mailto:' + attributes.emailAddress, 237 target: '_blank' 238 }, 239 el('i', { className: 'fa fa-envelope' }) 240 ) 241 ) 242 ) 243 ) 244 ] 245 }, 246 247 save: function (props) { 248 var attributes = props.attributes 249 var alignment = props.attributes.alignment 250 var imageClass = 'wp-image-' + props.attributes.mediaID 251 252 return ( 253 el('div', { className: props.className }, 254 attributes.mediaURL && el('div', { className: 'organic-profile-image', style: { backgroundImage: 'url(' + attributes.mediaURL + ')' } }, 255 el('figure', { class: imageClass }, 256 el('img', { src: attributes.mediaURL, alt: __('Profile Image') }) 257 ) 258 ), 259 el('div', { className: 'organic-profile-content', style: { textAlign: alignment } }, 260 attributes.title && el(RichText.Content, { 261 tagName: 'h3', 262 value: attributes.title 263 }), 264 attributes.subtitle && el(RichText.Content, { 265 tagName: 'h5', 266 value: attributes.subtitle 267 }), 268 el(RichText.Content, { 269 className: 'organic-profile-bio', 270 tagName: 'p', 271 value: attributes.bio 272 }), 273 el('div', { className: 'organic-profile-social' }, 274 attributes.facebookURL && el('a', { 275 className: 'social-link facebook-link', 276 href: attributes.facebookURL, 277 target: '_blank', 278 rel: 'noopener noreferrer' 279 }, 280 el('i', { className: 'fa fa-facebook' }) 281 ), 282 attributes.twitterURL && el('a', { 283 className: 'social-link twitter-link', 284 href: attributes.twitterURL, 285 target: '_blank', 286 rel: 'noopener noreferrer' 287 }, 288 el('i', { className: 'fa fa-twitter' }) 289 ), 290 attributes.instagramURL && el('a', { 291 className: 'social-link instagram-link', 292 href: attributes.instagramURL, 293 target: '_blank', 294 rel: 'noopener noreferrer' 295 }, 296 el('i', { className: 'fa fa-instagram' }) 297 ), 298 attributes.linkedURL && el('a', { 299 className: 'social-link linkedin-link', 300 href: attributes.linkedURL, 301 target: '_blank', 302 rel: 'noopener noreferrer' 303 }, 304 el('i', { className: 'fa fa-linkedin' }) 305 ), 306 attributes.emailAddress && el('a', { 307 className: 'social-link email-link', 308 href: 'mailto:' + attributes.emailAddress, 309 target: '_blank', 310 rel: 'noopener noreferrer' 311 }, 312 el('i', { className: 'fa fa-envelope' }) 313 ) 314 ) 315 ) 316 ) 317 ) 318 } 319 }) 320})( 321 window.wp.blocks, 322 window.wp.editor, 323 window.wp.components, 324 window.wp.i18n, 325 window.wp.element 326)
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.