Gutenberg is a brand new editor for WordPress that may completely exchange the present TinyMCE-powered editor. It’s an formidable mission that may arguably alternate WordPress in some ways and would have an effect on each common end-users and builders, in particular, those that rely at the editor display for operating on WordPress. This is the way it seems to be.
Gutenberg additionally introduces a brand new paradigm in WordPress known as “Block”.
“Block” is the summary time period used to explain devices of markup which might be composed shape the content material or format of a webpage. The speculation combines ideas of what in WordPress these days we reach with shortcodes, customized HTML, and embed discovery right into a unmarried constant API and consumer enjoy.
Learn Additionally: How to Customize WordPress Editor Styles
Environment Up the Mission
Understanding the truth that Gutenberg is constructed on best of React, some builders are fearful that the barrier is just too top for entry-level builders for growing Gutenberg.
Putting in place React.js may well be slightly time-consuming and complicated should you’ve simply getting began with it. You’ll want no less than, JSX transformer, Babel, relying in your code it’s possible you’ll want some Babel plugins, and a Bundler like Webpack, Rollup, or Parcel.
Thankfully, some other people inside WordPress neighborhood stepped-up and are seeking to make growing Gutenberg as simple as imaginable for everybody to practice. As of late, we now have a device that may generate a Gutenberg boilerplate so we will get started writing code straight away as an alternative of befuddling with the gear and the configurations.
Create Guten Block
The create-guten-block is an start up mission by means of Ahmad Awais. It’s a zero-configuration software equipment (#0CJS) that may will let you broaden Gutenberg block with some fashionable stacks preset together with React, Webpack, ESNext, Babel, ESLint, and Sass. Observe the instruction to get started with Create Guten Block.
The use of ES5 (ECMAScript 5)
The use of most of these gear to create a easy “hello-world” block would possibly appear simply an excessive amount of. In the event you love to stay your stacks lean, you’ll in reality broaden a Gutenberg block the usage of a simple just right ol’ ECMAScript 5 that it’s possible you’ll have already got familiarity with. You probably have WP-CLI 1.5.0 put in in your pc, you’ll merely run…
wp scaffold block[--title= ] [--dashicon=<dashicon>] [--category=<category>] [--theme] [--plugin=<plugin>] [--force]</pre> <p>…to <strong>generate the Gutenberg block boilerplate on your plugin or theme</strong>. This way is extra good, specifically, for current plugins and topics that you simply’ve evolved ahead of the Gutenberg generation.</p> <p>As an alternative of constructing a brand new plugin to deal with the Gutenberg blocks, it’s possible you’ll need to combine the blocks on your plugins or the subjects. And to make this educational simple to practice for everybody, <strong>we’ll be the usage of ECMAScript 5 with WP-CLI</strong>.</p> <h4>Registering a New Block</h4> <p>Gutenberg is lately evolved as a plugin and will likely be merged to WordPress 5.0 every time the group feels it’s able. So, in the interim, it is very important set up it from the <strong>Plugins web page in <code>wp-admin</code></strong>. After getting put in and activated it, run the next command within the Terminal or the Command Instructed should you’re on a Home windows device.</p> <pre class="bash"> wp scaffold block collection --title="HTML5 Sequence" --theme</pre> <p>This command will generate a Block to the lately energetic theme. Our Block will is composed of the next information:</p> <pre class="bash"> . ├── collection │  ├── block.js │  ├── editor.css │  └── taste.css └── collection.php </pre> <p>Let’s load the primary record of our blocks within the <code>purposes.php</code> of our theme:</p> <pre class="javascript"> if ( function_exists( 'register_block_type' ) ) { require get_template_directory() . '/blocks/collection.php'; } </pre> <p>Realize that we enclose the record loading with a conditional. This guarantees <strong>compatibility with earlier WordPress model that our block is most effective loaded when Gutenberg is provide</strong>. Our Block will have to now be to be had throughout the Gutenberg interface.</p> <figure><span class="img-ratio-placeholder"><IMG src="https://wpfixall.com/wp-content/uploads/2018/05/new-block-in-gutenberg.jpg" alt=""><img loading="lazy" decoding="async" src="image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" width="750" height="430"><span class="img-ratio-placeholder__fill" style="padding-bottom:57%;max-width:750px"></span></span></figure> <p>This the way it seems to be once we insert the block.</p> <figure><span class="img-ratio-placeholder"><IMG src="https://wpfixall.com/wp-content/uploads/2018/05/block-appearance-in-gutenberg.jpg" alt=""><img loading="lazy" decoding="async" src="image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" width="750" height="350"><span class="img-ratio-placeholder__fill" style="padding-bottom:46%;max-width:750px"></span></span></figure> <h3>Gutenberg APIs</h3> <p>Gutenberg introduces two units of APIs to sign in a brand new Block. If we have a look at the <code>collection.php</code>, we can to find the next code that registers our new Block. It additionally <strong>quite a bit the stylesheet and JavaScripts at the front-end and the editor</strong>.</p> <pre class="javascript">register_block_type( 'twentyseventeen/collection', array( 'editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'taste' => 'series-block', ) );</pre> <p>As we will see above, our Block is called <code>twentyseventeen/collection</code>, the Block identify will have to be distinctive and <a href="https://en.wikipedia.org/wiki/Namespace" target="_blank" rel="noopener">namespaced</a> to steer clear of collision with the opposite Blocks introduced by means of the opposite plugins.</p> <p>Moreover, <strong>Gutenberg supplies a collection of latest JavaScript APIs to have interaction with the “Block” interface</strong> within the editor. Because the API is slightly ample, we’ll be that specialize in some specifics that I believe you will have to know to get a easy but functioning Gutenberg Block.</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>First, we can be having a look into <code>wp.blocks.registerBlockType</code>. This serve as is used to <strong>sign in a brand new “Block” to the Gutenberg editor</strong>. It calls for two arguments. The primary argument is the Block identify which will have to practice identify registered within the <code>register_block_type</code> serve as within the PHP aspect. The second one argument is an <strong>Object defining the Block homes</strong> like name, class, and a few purposes to render the Block interface.</p> <pre class="javascript"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType( 'twentyseventeen/collection', { name: __( 'HTML5 Sequence' ), class: 'widgets', key phrases: [ 'html' ], edit: serve as( props ) { }, save: serve as( props ) { } } ); </pre> <h4><code>wp.part.createElement</code></h4> <p>This serve as permits you to create the part throughout the “Block” within the publish editor. The <code>wp.part.createElement</code> serve as is principally an abstraction of the <a href="https://reactjs.org/docs/react-api.html#createelement" target="_blank" rel="noopener">React <code>createElement()</code> function</a> thus it accepts the similar set of arguments. The primary argument takes the kind of the part as an example a paragraph, a <code>span</code>, or a <code>div</code> as proven underneath:</p> <pre class="bash">wp.part.createElement('div');</pre> <p>We will <strong>alias the serve as right into a variable</strong> so it’s shorter to write down. For instance:</p> <pre class="bash"> var el = wp.part.createElement; el('div');</pre> <p>In the event you <strong>desire the usage of the brand new ES6 syntax</strong>, you’ll additionally do it this fashion:</p> <pre class="bash"> const { createElement: el } = wp.part; el('div');</pre> <p>We will additionally <strong>upload the part attributes</strong> such because the <code>magnificence</code> identify or <code>identity</code> on the second one parameter as follows:</p> <pre class="javascript"> var el = wp.part.createElement; el('div', { 'magnificence': 'series-html5', 'identity': 'series-html-post-id-001' });</pre> <p>The <code>div</code> that we created would now not make sense with out the content material. We will <strong>upload the content material at the argument of the 3rd parameter</strong>:</p> <pre class="javascript"> var el = wp.part.createElement; el('p', { 'magnificence': 'series-html5', 'identity': 'series-html-post-id-001' }, 'This newsletter is a part of our "HTML5/CSS3 Tutorials collection" - devoted to help in making you a greater fashion designer and/or developer. Click on right here to peer extra articles from the similar collection' );</pre> <h4><code>wp.parts</code></h4> <p>The <code>wp.parts</code> include a choice of, because the identify implies, the Gutenberg parts. Those parts technically are <a target="_blank" href="https://reactjs.org/docs/components-and-props.html" rel="noopener">React custom components</a> which come with the Button, Popover, Spinner, Tooltip, and a number of others. We will <strong>reuse those parts into our personal Block</strong>. Within the following instance, we upload a button part.</p> <pre class="javascript"> var Button = wp.parts.Button; el( Button, { 'magnificence': 'download-button', }, 'Obtain' );</pre> <h4>Attributes</h4> <p>The Attributes is the best way to retailer the knowledge in our Block, this information may well be just like the content material, the colours, the alignments, the URL, and so on. We will get the attributes from the Houses handed at the <code>edit()</code> serve as, as follows:</p> <pre class="javascript"> edit: serve as( props ) { var content material = props.attributes.seriesContent; go back el( 'div', { 'magnificence': 'series-html5', 'identity': 'series-html-post-id-001' }, content material ); }</pre> <p>To replace the Attributes, we use the <code>setAttributes()</code> serve as. Normally we might alternate the content material on sure motion similar to when a button is clicked, an enter is stuffed, an possibility is chosen, and so on. Within the following instance, we use it so as to add a <strong>fallback</strong> content material of our Block in case one thing sudden took place to our <code>seriesContent</code> Characteristic.</p> <pre class="javascript"> edit: serve as( props ) { if ( typeof props.attributes.seriesContent === 'undefined' || ! props.attributes.seriesContent ) { props.setAttribute({ seriesContent: 'Hi Global! This is the fallback content material.' }) } var content material = props.attributes.seriesContent; go back [ el( 'div', { 'class': 'series-html5', 'id': 'series-html-post-id-001' }, content ), ]; } </pre> <h4>Saving the Block</h4> <p>The <code>save()</code> serve as works in a similar fashion to the <code>edit()</code>, except for it defines the content material of our Block to avoid wasting to the publish database. Saving the Block content material is slightly easy, as we will see underneath:</p> <pre class="javascript"> save: serve as( props ) { if ( ! props || ! props.attributes.seriesContent ) { go back; } var content material = props.attributes.seriesContent; go back [ el( 'div', { 'class': 'series-html5', 'id': 'series-html-post-id-001' }, content ), ]; } </pre> <h3>What’s Subsequent?</h3> <p>Gutenberg will alternate WordPress ecosystem for the simpler (or in all probability the more severe). It allows builders to <strong>undertake a brand new means of growing WordPress plugins and topics</strong>. Gutenberg is only a get started. Quickly the “Block” paradigm will likely be expanded to different spaces of WordPress such because the Settings APIs and the Widgets.</p> <p><a href="https://www.youtube.com/watch?v=KrZx4IY1IgU" target="_blank" rel="noopener">Learn JavaScript Deeply</a>; it’s the one technique to get into Gutenberg and keep related to the long run in WordPress business. In the event you’re already aware of the JavaScript fundamentals, the quirks, the purposes, the gear, the products and the bads, I’m actually positive you’re going to stand up to hurry with Gutenberg.</p> <p>As discussed, Gutenberg exposes an abundance of APIs, sufficient to do virtually anything else on your Block. You’ll be able to make a selection whether or not to <strong>code your Block with a simple previous JavaScript, JavaScript with ES6 syntax, React, and even Vue</strong>.</p> <h4>Concepts and Inspirations</h4> <p>I’ve created an overly (very) easy Gutenberg Block that you’ll to find within the <a href="https://github.com/hongkiat/wordpress-gutenberg-block" target="_blank" rel="noopener"> repository of our Github account</a>. Moreover, I’ve additionally put in combination a variety of repositories from the place you’ll pressure inspiration on development a extra advanced Block.</p> <ul> <li><a href="https://github.com/imath/gutenblocks" target="_blank" rel="noopener">Gutenblocks</a> – A choice of Blocks by means of Mathieu Viet written in JavaScript with ES5 Syntax</li> <li><a href="https://github.com/Automattic/jetpack/labels/Gutenberg" target="_blank" rel="noopener">Jetpack Gutenblocks Project</a> – a choice of Blocks bundled in Jetpack</li> <li><a href="https://gitlab.com/caldera-labs/gutenberg-examples" target="_blank" rel="noopener">A List of Examples of Gutenberg Implementation</a> together with with Vue.js</li> </ul> <h3>Additional Reference</h3> <ul> <li><a href="https://github.com/WordPress/gutenberg" target="_blank" rel="noopener">Gutenberg Official Repository</a></li> <li><a href="https://wordpress.org/gutenberg/handbook/" target="_blank" rel="noopener">Gutenberg Handbook</a></li> </ul> <p>The publish <a rel="nofollow noopener" href="https://www.hongkiat.com/blog/all-you-need-to-know-about-wordpress-gutenberg-editor/" target="_blank">Gutenberg: All You Need to Know About WordPress’ Latest Editor</a> gave the impression first on <a rel="nofollow noopener" href="https://www.hongkiat.com/blog" target="_blank">Hongkiat</a>.</p> <a href="https://collinmedia.com/website-design/wordpress-websites/" target="_blank" rel="noopener">WordPress Website Development</a> Source: <a href="https://www.hongkiat.com/blog/all-you-need-to-know-about-wordpress-gutenberg-editor/" target="_blank" rel="noopener">https://www.hongkiat.com/blog/all-you-need-to-know-about-wordpress-gutenberg-editor/</a><p><a href="https://www.hongkiat.com/blog/all-you-need-to-know-about-wordpress-gutenberg-editor/" target="_blank">[ continue ]</a></p> </div> <div class="et_post_meta_wrapper"> <section id="comment-wrap"> <div id="comment-section" class="nocomments"> </div> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title"><span>Submit a Comment</span> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/everything-else/gutenberg-all-you-wish-to-know-about-wordpress-newest-editor/#respond" style="display:none;">Cancel reply</a></small></h3><p class="must-log-in">You must be <a href="https://wpfixall.com/wp-login.php?redirect_to=https%3A%2F%2Fwpfixall.com%2Feverything-else%2Fgutenberg-all-you-wish-to-know-about-wordpress-newest-editor%2F">logged in</a> to post a comment.</p> </div><!-- #respond --> </section> </div> </article> </div> <div id="sidebar"> <div id="text-2" class="et_pb_widget widget_text"> <div class="textwidget"><p><a style="display:block; text-align: center; margin-bottom: 28px" title="WordPresss Maintenance and Updates" href="/#wordpress-maintenance">WordPress® Care Plans</a></p> </div> </div><div id="search-2" class="et_pb_widget widget_search"><form role="search" method="get" id="searchform" class="searchform" action="https://wpfixall.com/"> <div> <label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form></div> <div id="recent-posts-2" class="et_pb_widget widget_recent_entries"> <h4 class="widgettitle">Recent Posts</h4> <ul> <li> <a href="https://wpfixall.com/everything-else/9-highest-woocommerce-multi-dealer-plugins-when-compared/">9 Highest WooCommerce Multi-Dealer Plugins (When compared)</a> </li> <li> <a href="https://wpfixall.com/everything-else/wordpress-safety-tip-upload-google-authenticator-2-step-verification/">WordPress Safety Tip: Upload Google Authenticator 2-Step Verification</a> </li> <li> <a href="https://wpfixall.com/everything-else/contemporary-assets-for-internet-designers-and-builders-april-2024/">Contemporary Assets for Internet Designers and Builders (April 2024)</a> </li> <li> <a href="https://wpfixall.com/everything-else/opentowork-are-linkedin-photograph-frames-if-truth-be-told-useful/">#OpenToWork: Are LinkedIn Photograph Frames If truth be told Useful?</a> </li> <li> <a href="https://wpfixall.com/everything-else/amazon-fba-vs-dropshipping-the-best-possible-possibility-for-on-line-retail-outlets/">Amazon FBA vs. Dropshipping: The Best possible Possibility for On-line Retail outlets</a> </li> </ul> </div><div id="categories-2" class="et_pb_widget widget_categories"><h4 class="widgettitle">Categories</h4> <ul> <li class="cat-item cat-item-1"><a href="https://wpfixall.com/category/everything-else/">Everything Else</a> </li> <li class="cat-item cat-item-10"><a href="https://wpfixall.com/category/website-security/">Website Security</a> </li> <li class="cat-item cat-item-12"><a href="https://wpfixall.com/category/wordpress-backups/">WordPress® Backups</a> </li> </ul> </div> </div> </div> </div> </div> <footer id="main-footer"> <div id="et-footer-nav"> <div class="container"> <ul id="menu-footer-bar" class="bottom-nav"><li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-88"><a href="https://wpfixall.com/">Home</a></li> <li id="menu-item-299" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-299"><a href="/#pricing">Packages & Pricing</a></li> <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="https://wpfixall.com/partners/">Partners?</a></li> <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-89"><a href="https://wpfixall.com/wp/">WP News</a></li> <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="https://wpfixall.com/terms/">Terms</a></li> <li id="menu-item-303" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-303"><a href="https://wpfixall.com/privacy-policy/">Privacy Policy</a></li> <li id="menu-item-302" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-302"><a href="/#support">Support</a></li> <li id="menu-item-397" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-397"><a href="/wp-login.php?action=logout">Logout</a></li> </ul> </div> </div> <!-- #et-footer-nav --> <div id="footer-bottom"> <div class="container clearfix"> <p id="footer-info">Copyright © 1997 - 2024 <a href="https://collinmedia.com" target="_blank">CollinMEDIA</a> | CollinMEDIA creates <a href="https://collinmedia.com" target="_blank">Amazing Websites</a> | PROUDLY <a href="https://wordpress.org/" target="_blank">POWERED BY WORDPRESS®</a></p> </div> <!-- .container --> </div> </footer> <!-- #main-footer --> </div> <!-- #et-main-area --> </div> <!-- #page-container --> <style> #wpnp_previous{ background-image: url(https://wpfixall.com/wp-content/plugins/wpnextpreviouslink/assets/images/l_arrow_orange.png) ; top:50%; z-index:1 !important; } #wpnp_previous:hover{ background-image: url(https://wpfixall.com/wp-content/plugins/wpnextpreviouslink/assets/images/l_arrow_orange_hover.png); } #wpnp_next{ background-image: url(https://wpfixall.com/wp-content/plugins/wpnextpreviouslink/assets/images/r_arrow_orange.png) ; top: 50%; z-index:1 !important; } #wpnp_next:hover{ background-image: url(https://wpfixall.com/wp-content/plugins/wpnextpreviouslink/assets/images/r_arrow_orange_hover.png); } </style><a id="wpnp_previous_anchor" class="wpnp_anchor_js" href="https://wpfixall.com/everything-else/be-told-adobe-xd-for-unfastened-with-this-internet-information/" rel="prev"><span id="wpnp_previous" class="wpnp_previous_arrow_orange"> ← Be told Adobe XD For Unfastened with This Internet Information</span></a><a id="wpnp_next_anchor" class="wpnp_anchor_js" href="https://wpfixall.com/everything-else/divi-plugin-spotlight-divi-blurb-prolonged/" rel="next"><span id="wpnp_next" class="wpnp_next_arrow_orange"> ← Divi Plugin Spotlight: Divi Blurb Prolonged</span></a><script type="text/javascript" src="https://wpfixall.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://wpfixall.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" id="jquery-js-after"> /* <![CDATA[ */ jqueryParams.length&&$.each(jqueryParams,function(e,r){if("function"==typeof r){var n=String(r);n.replace("$","jQuery");var a=new Function("return "+n)();$(document).ready(a)}}); /* ]]> */ </script> <script type="text/javascript" src="https://wpfixall.com/wp-content/plugins/anti-spam/assets/js/anti-spam.js?ver=7.3.5" id="anti-spam-script-js"></script> <script type="text/javascript" src="https://wpfixall.com/wp-includes/js/comment-reply.min.js?ver=6.5.2" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" id="divi-custom-script-js-extra"> /* <![CDATA[ */ var DIVI = {"item_count":"%d Item","items_count":"%d Items"}; var et_builder_utils_params = {"condition":{"diviTheme":true,"extraTheme":false},"scrollLocations":["app","top"],"builderScrollLocations":{"desktop":"app","tablet":"app","phone":"app"},"onloadScrollLocation":"app","builderType":"fe"}; var et_frontend_scripts = {"builderCssContainerPrefix":"#et-boc","builderCssLayoutPrefix":"#et-boc .et-l"}; var et_pb_custom = {"ajaxurl":"https:\/\/wpfixall.com\/wp-admin\/admin-ajax.php","images_uri":"https:\/\/wpfixall.com\/wp-content\/themes\/Divi\/images","builder_images_uri":"https:\/\/wpfixall.com\/wp-content\/themes\/Divi\/includes\/builder\/images","et_frontend_nonce":"f61eb23d60","subscription_failed":"Please, check the fields below to make sure you entered the correct information.","et_ab_log_nonce":"3affeb02fc","fill_message":"Please, fill in the following fields:","contact_error_message":"Please, fix the following errors:","invalid":"Invalid email","captcha":"Captcha","prev":"Prev","previous":"Previous","next":"Next","wrong_captcha":"You entered the wrong number in captcha.","wrong_checkbox":"Checkbox","ignore_waypoints":"no","is_divi_theme_used":"1","widget_search_selector":".widget_search","ab_tests":[],"is_ab_testing_active":"","page_id":"3219","unique_test_id":"","ab_bounce_rate":"5","is_cache_plugin_active":"yes","is_shortcode_tracking":"","tinymce_uri":"https:\/\/wpfixall.com\/wp-content\/themes\/Divi\/includes\/builder\/frontend-builder\/assets\/vendors","accent_color":"#f37121","waypoints_options":[]}; var et_pb_box_shadow_elements = []; /* ]]> */ </script> <script type="text/javascript" src="https://wpfixall.com/wp-content/themes/Divi/js/scripts.min.js?ver=4.25.0" id="divi-custom-script-js"></script> <script type="text/javascript" src="https://wpfixall.com/wp-content/themes/Divi/includes/builder/feature/dynamic-assets/assets/js/jquery.fitvids.js?ver=4.25.0" id="fitvids-js"></script> <script type="text/javascript" src="https://wpfixall.com/wp-content/themes/Divi/core/admin/js/common.js?ver=4.25.0" id="et-core-common-js"></script> <script type="text/javascript" id="wpnextpreviouslink-public-js-extra"> /* <![CDATA[ */ var wpnextpreviouslink_public = {"ga_enable":"0","track_view":"1","track_click":"1","track_pbr":"1"}; /* ]]> */ </script> <script type="text/javascript" id="wpnextpreviouslink-public-js-before"> /* <![CDATA[ */ wpnextpreviouslink_public.title = "Gutenberg: All You Wish to Know About WordPress’ Newest Editor" ; /* ]]> */ </script> <script type="text/javascript" src="https://wpfixall.com/wp-content/plugins/wpnextpreviouslink/assets/js/wpnextpreviouslink-public.js?ver=2.7.1" id="wpnextpreviouslink-public-js"></script> <!-- Child theme custom CSS created by Divi Children - http://divi4u.com/divi-children-plugin/ --> <style type="text/css" media="screen"> #footer-widgets {padding-top:80px;} .footer-widget {margin-bottom:50px!important;} #main-footer { background-color:#ffffff!important;} .footer-widget .title {color:#bcbcbc!important;} .footer-widget .title {font-size:18px;} .footer-widget, .footer-widget li, .footer-widget li a {color:#ababab!important; font-size:14px;} .footer-widget li a:hover, #footer-widgets .et_pb_widget li a:hover {color:#0c71c3!important;} .footer-widget li:before {border-color:#0c71c3!important;} .footer-widget li:before {-moz-border-radius: 0!important; -webkit-border-radius: 0!important; border-radius: 0!important;} #footer-bottom { background-color:#ffffff;} #footer-bottom {padding:45px 0 30px;} #footer-info, #footer-info a {color:#bcbcbc;} #footer-info, #footer-info a {font-size:12px;} #footer-bottom ul.et-social-icons li a {color:#ffffff;} #footer-bottom ul.et-social-icons li a:hover {color:#0c71c3!important;} #footer-bottom ul.et-social-icons li a {font-size:18px;} #footer-bottom ul.et-social-icons li {margin-left:12px;} #main-content .container:before {display:none;} #sidebar h4.widgettitle {font-size:18px;} #sidebar li {padding: 0 0 4px 14px; position: relative; } #sidebar li:before {color:#0c71c3; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-style: solid; border-width: 3px; content: ""; position: absolute; top: 9px; left: 0;} #sidebar li, #sidebar li a {font-size:14px;} </style> <!-- End Child theme custom CSS --> </body> </html><!-- WP Fastest Cache file was created in 0.33394813537598 seconds, on 23-04-24 7:20:48 --><!-- need to refresh to see cached version -->