David Morgan itsdavidmorgan
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div style="float: left; width: 50%; padding-right: 12px; box-sizing: border-box;"> | |
| <p>Column one content...</p> | |
| </div> | |
| <div style="float: left; width: 50%; padding-left: 12px; box-sizing: border-box;"> | |
| <p>Column two content...</p> | |
| </div> |
itsdavidmorgan
/ block-alignment-support.php
Last active
July 31, 2018 17:45
Gutenberg Block Alignment Theme Support
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function block_lite_setup() { | |
| /* | |
| * Enable support for wide alignment class for Gutenberg blocks. | |
| */ | |
| add_theme_support( 'align-wide' ); | |
| } | |
| add_action( 'after_setup_theme', 'block_lite_setup' ); |
itsdavidmorgan
/ index-enqueue.php
Last active
May 14, 2018 14:55
Enqueue Scripts and Styles Gutenberg Block
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function organic_profile_block() { | |
| // Register the block with WP using our namespacing | |
| // We also specify the scripts and styles to be used in the Gutenberg interface | |
| register_block_type( 'profile/block', array( | |
| 'editor_script' => 'organic-profile-block-script', | |
| 'editor_style' => 'organic-profile-block-editor-style', | |
| 'style' => 'organic-profile-block-frontend-style', | |
| ) ); |
itsdavidmorgan
/ index-registration.php
Last active
April 24, 2024 08:22
Register Scripts and Styles Gutenberg Block
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function organic_profile_block() { | |
| // Scripts. | |
| wp_register_script( | |
| 'organic-profile-block-script', // Handle. | |
| plugins_url( 'block.js', __FILE__ ), // Block.js: We register the block here. | |
| array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ), // Dependencies, defined above. | |
| filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ), | |
| true // Load script in footer. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| save: function (props) { | |
| var attributes = props.attributes | |
| var alignment = props.attributes.alignment | |
| var facebookURL = props.attributes.facebookURL | |
| var twitterURL = props.attributes.twitterURL | |
| var instagramURL = props.attributes.instagramURL | |
| var linkedURL = props.attributes.linkedURL | |
| var emailAddress = props.attributes.emailAddress | |
| return ( |
itsdavidmorgan
/ editElements.js
Last active
November 12, 2018 18:35
Setup Block Elements For Editor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| el('div', { className: props.className }, | |
| el('div', { | |
| className: attributes.mediaID ? 'organic-profile-image image-active' : 'organic-profile-image image-inactive', | |
| style: attributes.mediaID ? { backgroundImage: 'url(' + attributes.mediaURL + ')' } : {} | |
| }, | |
| el(MediaUpload, { | |
| onSelect: onSelectImage, | |
| type: 'image', | |
| value: attributes.mediaID, | |
| render: function (obj) { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="components-block-description"> | |
| <p>Add links to your social media profiles.</p> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| el( 'div', { className: 'components-block-description' }, | |
| el( 'p', {}, i18n.__( 'Add links to your social media profiles.' ) ), | |
| ), |
itsdavidmorgan
/ editInspectorControls.js
Last active
November 12, 2018 18:34
Inspector Options For The Profile Block
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| el(InspectorControls, { key: 'inspector' }, // Display the block options in the inspector panel. | |
| el(components.PanelBody, { | |
| title: i18n.__('Social Media Links'), | |
| className: 'block-social-links', | |
| initialOpen: true | |
| }, | |
| el('p', {}, i18n.__('Add links to your social media profiles.')), | |
| // Facebook social media text field option. | |
| el(TextControl, { | |
| type: 'url', |
itsdavidmorgan
/ editBlockControls.js
Last active
November 12, 2018 18:26
Setup Block Controls For Profile Block
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| el(BlockControls, { key: 'controls' }, // Display controls when the block is clicked on. | |
| el('div', { className: 'components-toolbar' }, | |
| el(MediaUpload, { | |
| onSelect: onSelectImage, | |
| type: 'image', | |
| render: function (obj) { | |
| return el(components.Button, { | |
| className: 'components-icon-button components-toolbar__control', | |
| onClick: obj.open | |
| }, |