Fixing WordPress Website Infected by .ico Malware

 More cases of WordPress websites being infected by .ico Malware are showing up and it is a difficult job to get rid of it completely and make sure site safe again, but it's not impossible. 

I wrote an article on fixing this virus problem before and it is recommended you check it first, it explains how to get rid of the virus by manual process simply by finding the strange looking PHP files and the .ico files which are spread across different folders, it makes it very hard to find if you are not someone who deals with these sort of things on a regular basis.

Just recently multiple websites were again infected by this malware, which in all instances caused the website's to go down and returned error messages like "There has been critical error on your website."

What does the malware do?

The malware may have originated from a compromised plugins (it happens a lot often on WordPress platform) which have now infected your whole server with strange looking PHP files in different folders which includes the core WordPress files and also the plugin files, when it does that a faulty plugin file can lead to your site going down, in some cases your admin dashboard won't be accessible in some cases the main site, and sometimes both. 

What to do now?

It depends on your experience in cleaning up sites and detecting infected files. If you are not a tech savvy person it might be difficult, best option is to hire somebody to do it for you and get it fixed completely. I have a lot of experience in this and if you want my help you can email me at depy45631@gmail.com and we can take it forward. 

For the developers, read this article, the cleanup process involves finding the strange files, you will know when you see one and also files with .ico extensions. Along with that I would definitely recommend the plugin MalCure which can save you a lot of time by helping you find the infected files so that you can clean it up yourself completely. 

Getting Rid of WordPress Malware (.ico Backdoor Malware)

Recently major malware campaigns on WordPress were launched, infecting and exposing vulnerabilities in many popular plugins which effectively affected hundreds of thousands of WordPress sites.

In this post we talk about a malware that affects the site by injected malicious .ico files at random locations, as well as index.php files and code snippets in core WordPress files.




One of the sites that I manage was affected by this malware, first course of action was to look for the problem being faced by other people, this article came up which was one of the very few links online that discussed the issue we face:

https://www.getastra.com/e/malware/infections/favicon-ico-malware-backdoor-in-wordpress-drupal

As discussed this hack injects files with .ico extensions in different folders. These ico files contain malicious PHP code which does all of the malicious tasks it is supposed to do, one is to spread the malware and infect further files.  Primary function of this malware is to redirect incoming traffic to some shady websites.

Steps that were taken

But did not work.

I tried finding the root cause, where it came from, which plugin caused but it was not very clear. However, I decided to take some steps to clean it which was to look for .ico files on the server, because some core files like wp-config.php, index.ph, wp-settings.php had the code these @include.. PHP which referenced to the actual files I was able to search for its location by decoding the Unicode text.




Using FTP I found the files which were in a deep folder:



After removing it we believed the problem was solved, but 2 days later the same problem was back, this time the .ico file was added to a different random location and the code injected into different core files.

What Worked

So far it was frustrating, like many on the forums who discussed this issue who woke up daily in the morning and checked for such files and cleaned it we too were doing just that, the malware kept coming back. 

Updating / removing plugins did not worked either. 

What work was cleanup of the core WordPress files completely. These WordPress files are files that are supposed to be intact and does not change with our changes. Follow these stes:

1. Make sure you have FTP access to your site, also take backup of your files (any customized theme, plugins etc.)
   
   
2. Delete these folders completely:
   wp-admin
wp-includes
   
   
3. When you delete the folders, also remove core files in the root folder where files like wp-config.php, index.php etc. reside. Make sure to copy contents of wp-config.php file as it contains details of your server / database.
   
4. Download WordPress files from here: https://wordpress.org/download/ - unzip it and place it somewhere on your system.
   
5. Now one by one first upload the files using FTP that you deleted from the root folder, make sure to replace important content in wp-config.php file.
   
6. Now, it is time for uploading the entire wp-admin and wp-includes folder back. Use your FTP software to upload all the files. 

If everything is done right you should be able to access your site.

At this point all we can do is wait and see if the malware returns. In our case this method fixed the problem which makes it apparent that somewhere inside the core WordPress files the malware was injected and went unnoticed by security plugins like Sucuri and WordFence.

If you still face the issue even after trying this let us know in the comments. 

Show A COVID-19 / Corona Virus Update Message on your Blogger Blog

The World is in a lock-down, we are all aware of it. Due to many factors you may want to show some message on your Blogger.com blog to notify your readers about what's going on for you.


In this quick tutorial I will quickly show a simple and efficient way to display a message on your blog / website hosted with Blogger. You do not need any coding experience, just basic knowledge of copy-pasting work.

<script type='text/javascript'>
var covid19msg = (function(){

  /* Edit values here */
  var covid19msg = {
    'message': 'Hello readers, due to the COVID-19 outbreak you may see some delays in our regular updates. Kindly bear with us for the time-being.',

    'background-color': '#333',
    'text-color': '#fff',
    'position': '' // set to 'fixed' if you want the msg to be displayed always
  };


  /* Don't edit anything below this */  
  var newElm = document.createElement('div');
  var theMsg = covid19msg.message;
  var fixedClass = '';
  
  if ( covid19msg.position == 'fixed' ) {
    fixedClass = 'msg-fixed';
  }



  var covid19html = '<div class="covid19-message '+ fixedClass +'"><div class="inner">'+ theMsg +'</div></div><style>.covid19-message { position: relative; padding: 20px; text-align: center; background: #333; color: #fff; } .covid19-message.msg-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 99; } .covid19-message { background-color: '+ covid19msg['background-color'] +';color: '+ covid19msg['text-color'] + '; }</style>';
  
  newElm.innerHTML = covid19html;
  var theBody = document.getElementsByTagName('body')[0];
  theBody.insertBefore(newElm, theBody.firstChild);
  
});

covid19msg();
</script>

Copy this code and then go to your Blogger Dashboard -> Layout ->  Add A Gadget on any area on the layout



Click on the plus sign next to the "HTML/JavaScript" widget



Now paste the code from above in the content area, and make sure the option on the top right shows "Rich Text", this means that we are currently in HTML mode.



We do not need to enter any title for the widget. Save it.

If you know a bit of JS coding you may be able to edit the configuration of the message by altering some variables in the code. In any case you will still want to edit the message that it shows, so before you save the code you can edit the message part in the code.

Solving "Preload key requests" point on PageSpeed for WordPress sites

Getting a good score on Google PageSpeed is important if you want to rank higher and in the process provide a better experience to your users. However with the constantly updating system of PageSpeed you have to tackle new issues. One of the recent updates now focuses on preloading key requests on your site.


Update 3rd Jan 2020 : Modified the code to support extra attributes like crossorin and type that is required for some other types of content such as Fonts file. 

Browsers are smart and to make use of it there's something called pre-loading of requests, that is you tell the browser to already pre-load a set of resources ahead of time which you know will be used in the future.

This tutorial is focused towards WordPress sites but the technique is same for any site, it's just a few lines of HTML that goes on top of the <head> of your website.

I won't discuss what's preloading a request is in detail but if you would like to know more check this out: https://web.dev/uses-rel-preload/

Note: There is another point that sounds very similar, it is "preconnect", it is for pre-fetching DNS that we know will be required.  There will be another similar tutorial for that, so stay tuned.

It looks something like this in the PageSpeed report:

/*
* Preload the s**t out of Google
*/

function stramaxon_preload_requests_html() {
    $preloadRequests = array(
        array(
            'as'   => 'style',
            'href' => '/wp-content/themes/example/style.css',
            'type' => 'text/css'
        ),
        array(
            'as'   => 'script',
            'href' => '/wp-content/themes/example/main.js',
            'type' => 'text/javascript'
        ),
        array(
            'as'   => 'font',
            'href' => '/wp-content/themes/example/font.woff2',
            'type' => 'font/woff2',
            'crossorigin' => 'crossorigin'
        ),

    $linksHtml = '';

    foreach ($preloadRequests as $val) {

    	$attrs = '';

    	foreach ($val as $key => $att ) {
    		$attrs .= $key . '="' . $att . '" ';
    	}

        $linksHtml .= '<link '. $attrs .' rel="preload">';
    }
 
    echo $linksHtml;
}

add_action('wp_head', 'stramaxon_preload_requests_html', -100);

The above code will go into your theme's functions.php file. All you have to do here it add elements to the array  $preloadRequests and define the href and as value as required.

Are you looking to solve another Google PageSpeed x WordPress problem? Let us know in the comments, we will be happy to write a blog post for that as well.

A Review of the Blogger App for Android

Used and loved by millions of bloggers and content creators around the World, it is just very natural and obvious for Blogger to bring out an Android App to let its users to what they love on the go, but is it really worth the install?


I have been away from Blogger and blogging for quite a while now, but just recently heard about the official Blogger app for Android, well, there was one some few years back but it was a nightmare from what I remember.

The new app looks sleek, the design blends with the roundish material design of the latest Android UIs, and overall looks very, dull. Yes, while other Google apps, like Gmail, Messages etc. are pretty useful in the kind of design and layout they possess Blogger doesn't.

For a Blogging app the design is bland, features that should be there on a blogging app are missing. It looks more like a note keeping app. Of-course you get a mobile optimized writing experience but you can do pretty much the same thing by visiting Blogger.com on your mobile browser.

While I think the app is a good step for people who are more comfortable with using apps for most of their work, it still isn't enough to urge a person from not using the desktop version of the platform on their mobile browser - after-all you trade scale of the site for a lot of features you need on a blogging app.


Google needs to do a lot more work on the app to make it look, feel and work like a real Blogger app and less like a note keeping app.

Multiple Descriptions Tab for Shopify Product Pages without any Apps

It's a very common practice for e-commerce websites to have not just a single description text under your product but more than that, each part of description categorized under different tabs.



This is not very easily achievable in Shopify, unless you are ready to spend a lot of money on trying apps, and even then it doesn't always bring results and customization option you may have needed, other option left is to learn coding, but even if you are already a coder, it is not something you will do in a snap of a finger, you will need good planning of how things are going to work and then code it. Quite a tedious job.

Good news is that I have already done that, I did it for a Shopify site specifically but later found that with a few changes in my code I can make it available for everyone to use in their own.

A note to remember: While I have made this tutorial simple to understand for even non-coders to try it is still recommended not to proceed without at least taking up your theme's backup. Just in case.

Things you will need

• A theme that has jQuery added to it. Our custom code requires JavaScript cod that uses jQuery functions, so it is important we have it. 
• Preferably a nice code editor, such as Sublime Text, it will make handling snippets of code easier. 

Now let's go ahead and do some coding. 

Find the JS file

The JavaScript code is the major part of this whole tutorial, it is what does all the work of taking a plain HTML description text and converting it into an interactive tabbed product description body.

For our code to work we need to put it below wherever the jQuery code is in our theme. You can do that by following this method:

1. Go to your Shopify admin panel
2. Click on "Online Store" on the left pane
3. Then on "Themes" under it
4. Now on the theme preview section you will see a drop down button called "Action", click on it and choose "Edit Code"
   
   

The above steps took you to your theme code editor, on the left panel you will see the list of all files that makes up your entire theme, assets files, sections, snippets and layout templates of different pages like product, cart etc. 

What we are looking for is the JavaScript file, now if you are using a custom theme the structure of the files may vary, but it is mostly a standard to put the  JS codes inside files like vendor.js or script.js and maybe even main.js

For me it was vendor.js, you will find those files below "Assets" section on the theme code editor



Open the files with .js extensions and look for mention of "jQuery" in the files, if you find it, it means you can append the custom code I am about to give you right into this file and it will work,.

The JS Snippet

Here's the custom JS code we need to place at the bottom of the file we just found to have jQuery in it.

 /*
 * product tab js
 * @author: Deepak Kamat (https://stramaxon.com)
 */

 $( document ).ready(function(){

  var productDescriptionHTML = $(".product-single__description").html();
  var toPutContentIn = "";
  var productTabCount = 0;

  $(".product-single__description > *").each(function(){
   // Check if this is a tab
   if ( $(this)[0].tagName == "P" && (/^--[a-zA-Z]+--$/.test( $(this).text() ))  ) {
    var tabname = removeHyphens($(this).text());
    // Insert Product tab link
    var dataTarget = "product-tab-" + myslugify( tabname.trim() );
    var newLink = "<a href='#' data-target='"+ dataTarget +"'>" + tabname + "</a>";
    $(".product-description-tabs .tabs-link-btns").append( newLink );

    var newTabContent = "<div class='product-tab-content' id='"+ dataTarget +"'></div>";
    $(".product-description-tabs .description-tabs-content").append( newTabContent );
    toPutContentIn = dataTarget;
    productTabCount++;
   } else {
    if ( toPutContentIn.length ) {
     $("#" + toPutContentIn).append( $(this) );
    }
   }
  });

  if ( productTabCount ) {
   $(".template-product .content-block").hide();
   $(".product-description-tabs").show();

   changeProductTabFocus( $(".product-description-tabs .tabs-link-btns > a").data("target") );
  }


  $("body").on("click", ".product-description-tabs .tabs-link-btns > a", function(e){
   $(this).parent().find("a").removeClass("active");
   $(this).addClass("active");
   var thisTarget = $(this).data("target");

   $(".product-description-tabs .description-tabs-content .product-tab-content").removeClass("active");

   $("#" + thisTarget).addClass("active");

   e.preventDefault();
  });

 });

 function myslugify(text) {
   return text.toString().toLowerCase()
     .replace(/\s+/g, '-')           // Replace spaces with -
     .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
     .replace(/\-\-+/g, '-')         // Replace multiple - with single -
     .replace(/^-+/, '')             // Trim - from start of text
     .replace(/-+$/, '');            // Trim - from end of text
 }

 function removeHyphens(str){
  return str.replace("--", "").replace("--", "");
 }

 function changeProductTabFocus( target ) {
  $("a[data-target='"+ target +"']").parent().find("a").removeClass("active");
  $("a[data-target='"+ target +"']").addClass("active");
  $(".product-description-tabs .description-tabs-content .product-tab-content").removeClass("active");
  $("#" + target).addClass("active");
 }  

Copy the entire code and place it inside of a code editor or text editor program of your choice.

On line number 8 you will see this code statement:

var productDescriptionHTML = $(".product-single__description").html();

The .product-single__description is the class name selector for out existing product description container, it is important that we have it correct since this is where our code will fetch the original description text. Now in most themes .product-single__description is standard for the container of product description, but in case it is something different on your theme you may have to replace it with the class name of according to your theme.

A bit of HTML now

With the above steps you have the JavaScript code that we needed in place, but it needs an HTML skeleton which will be used as a container for the product description tab's HTML. We will put that where we want our product descriptions tab to show up. 

In most themes, the structure of product description text is like this:

But in case of a product description tabs, we may want to put it at a different location, likely below the product page's top columns, like this:

Where your product description tabs will appear solely depends on where you put the following HTML in your product template files. 

Copy the HTML we will need:

<div class="product-description-tabs" style="display: none;">
  <div class="tabs-link-btns">
  </div>
  
  <div class="description-tabs-content rte">
  </div>
</div>

This is a barebone markup, no content, nothing, because the JS code we earlier installed will run on page load and fill it with the content.


Where to put it? You have to check the code in product-template.liquid / product.liquid and see where your description code is, under there you can place the above code and save it. I know the explanation is a little vague, but all themes may different in file names and it is not possible for me to have one common instruction for everyone, so you have to figure out, either with the help of an expert or yourself (contact me on depy45631@gmail.com if you want professional help at low costs.)

Styling of the tabs

The final part is to give the tabs a good look. Right now, without the CSS it may look like a mess. With the following CSS you will change that. 

Copy the CSS

.product-description-tabs {
    padding: 20px;
    margin: 20px auto;
}

.product-description-tabs .tabs-link-btns {
    margin-bottom: 00px;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;

}
.product-description-tabs .tabs-link-btns a  {
    position: relative;
    display: block;
    font-weight: 600;
    padding: 10px 20px;
    background-color: #fff;
    color: #252f56;
    border-radius: 5px 5px 0 0;
    color: #333;
    text-decoration: none;
    margin-right: 10px;
}


.product-description-tabs .tabs-link-btns a:hover,
.product-description-tabs .tabs-link-btns a.active {
    background-color: #eee;
}

.product-description-tabs .description-tabs-content {
    background: transparent;
}
.product-description-tabs .description-tabs-content .product-tab-content {
    padding: 20px;
    border: 1px solid #eee;
    display: none;
    
}
  
.product-description-tabs .description-tabs-content .product-tab-content.active {
   display: block;
}
  
/* Theme 2 */
.theme-2.product-description-tabs .tabs-link-btns a  {
  background-color: transparent;
  font-weight: 400;
  margin: 0;
}

.theme-2.product-description-tabs .tabs-link-btns a:hover,
.theme-2.product-description-tabs .tabs-link-btns a.active {
  font-weight: 700;
}


/* Theme 3 */
.theme-3.product-description-tabs .tabs-link-btns a  {
  background-color: transparent;
  font-weight: 400;
  margin: 0;
  border-radius: 0;
  margin-bottom: 10px;
  background-color: #03a9f4;
  color: #fff;
  margin-right: 15px;
  line-height: 1;
}

.theme-3.product-description-tabs .tabs-link-btns a span {
  position: relative;
  z-index: 1;
}

.theme-3.product-description-tabs .tabs-link-btns a:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 15px;
  height: 15px;
  background-color:#03a9f4;
  transform: translateX(-50%) rotate(45deg) translateY(-5px);
  opacity: 0;
  transition: 0.1s all ease-in-out;
}

.theme-3.product-description-tabs .tabs-link-btns a.active::after,
.theme-3.product-description-tabs .tabs-link-btns a:hover::after{
  opacity: 1;
   transform: translateX(-50%) rotate(45deg) translateY(0px);
}

.theme-3.product-description-tabs .tabs-link-btns a.active {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}


.theme-3.product-description-tabs .description-tabs-content .product-tab-content {
  background-color: #fff;
  border: 0 solid;
  box-shadow: 0 12px 20px rgba(0,0,0,0.15);
  padding: 20px 30px;
}

The CSS code can be added in any CSS file from the assets files in your theme code.  Find a .css file, you will have to make sure that CSS file is the main CSS file for the theme or a CSS that is used in the theme, so that the CSS code does apply on the live site.

At the end of the found CSS file, paste the above code and save it.

Now in the CSS code I have given three themes that you can use, one is default, other two are theme-2 and theme-3, to change the look you will have to add a class name to the barebone HTML we added in the last step.

Theme 1 (Default):

<div class="product-description-tabs" style="display: none;">

Theme 2

<div class="product-description-tabs theme-2" style="display: none;">

Theme 3

<div class="product-description-tabs theme-3" style="display: none;">

Final step, formatting your description

The final step is to format your description text for your products so that the JS code can parse it and convert it into a tabbed element. And for that you do not have to do any coding there, all you have to do is write the description in a certain way, like this.

--Details--Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia arcu lectus, vel varius eros porta in. Fusce in tortor tincidunt, interdum mauris ut, fermentum nunc.

--Additional Info--Curabitur nec lacinia odio, ut interdum risus. Quisque consectetur luctus diam et consectetur. Proin at nulla ligula. Quisque et urna leo. Donec eget turpis et diam sollicitudin iaculis. Phasellus sollicitudin ullamcorper sodales. Morbi laoreet ante at sapien pharetra, eu eleifend justo semper. Morbi nibh nibh, auctor et gravida eget, ornare eget nisi. Phasellus dictum volutpat pellentesque. Proin vitae tellus nec velit feugiat tincidunt eu sed dui. Vestibulum feugiat eros et porttitor dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis semper, leo sed maximus mattis, massa erat fringilla dui, in bibendum ante tellus id tellus.
--Another Tab--
Etiam vitae pharetra turpis, sed condimentum sem. Pellentesque gravida augue id justo ornare cursus. Donec vitae porta leo. Nam nec orci eu est fermentum consequat. Vestibulum mollis nisl et magna elementum, non semper turpis feugiat.

The text in the description editor will look like this. The tab title will be any text between -- -- for example --Details--

Anything below that and before the next line of text that matches the same pattern will become that tab's content.

Want help with setup? Let's talk!

If you are looking for help with setting up this code or you are looking to customize the looks and function of this product description tabs according to your liking then you can hire me to do the job for you, email me on depy45631@gmail.com to discuss. 

Setting up InspectorControl with Color Selection in Gutenberg | Gutenberg Series

If you have recently gotten on the bandwagon and have been trying out your hands with the Gutenberg editor and its developer interface then you may have spent good amount of time on already learn about the editor and creating your own blocks.

This tutorial however is not about creating blocks, I assume you have already created a block and now are looking to add option for the user to control color of something in your block, for e.g the background or text color.

I will write an article on creating an editable Gutenberg block from scratch using the best practices.




I started off with a very simple block, it has a block of text, just that, I also added predefined styles using the `styles` option, but I wanted the user to have extra control on how the block should look and so I wanted to add color selection option and reflect what they chose on the block, both on the editor and the front-end. Due to lack of documentation and guides on Gutenberg it took me a while to figure out how to do it correctly, but here we are. So let's start.

A few things to note:

• I am using ESNext, it's just easier to write JSX in it, however if you know JS well you might already know how to convert an ESNext code to good 'ol JavaScript.
• Also, this site uses some ancient syntax highlighter so bear with me until I get a new one.

Get the dependencies first

From wp.editor we need these:

const {
    InspectorControls,
    PanelColorSettings,
    ColorPalette,
} = wp.editor;

The above is what we need for Inspector Control and color selection, you might have others on your list as well, so that's okay. 

Then from wp.components get these:

const {
    PanelBody,
    PanelRow,
} = wp.components;

It's not very crucial for the whole color setting thing but still a good practice to get these components in order to make the inspector control look cleaner.

InspectorControl can be anywhere

Since it is something that appears in the sidebar and not as part of the content of block it doesn't matter where we place it in the code, it can be anywhere inside of the main wrapper of the block. Do note it goes inside of `edit` function of your block though.

I personally prefer assigning the JSX to a constant / variable and then use it conveniently in the `edit` function. So here's the code for outputting a simple color selection in the Inspector Controls.

const myInspectorControls = (
 <InspectorControls>
  <PanelBody>
   <PanelColorSettings
    title={ __( 'Block Background Color' ) }
    colorValue={ blockBackgroundColor }
    initialOpen={ false }
    colorSettings={ [ {
     value: blockBackgroundColor,
     onChange: onChangeBackgroundColor,
     colors: backgroundColors,
     label: __( 'Choose a background color' ),
    } ] }
   >
   </PanelColorSettings>
  </PanelBody>
 </InspectorControls>
);

That's it. You are done. Have a good one!

No, I am not leaving you in the middle, if you want help with understanding the code and also seeing an example `save` and `edit` function then read on.

What's going on? The tag <InspectorControl> defines the, of course, inspector controls, <PanelBody> is just a container component to contain our various settings.

<PanelColorSettings> is the real deal. It's the editor component that is responsible for bringing up the color selector and as you can see it contains quite a lot attributes, so let's go through it as well.

• title: The title is what shows up as the control's title. 
• colorValue: This is important one, you assign to it the value, i.e the color it will have. `{ blockBackgroundColor }` is the attribute that's been set-up when registering the block (we will come back to it later, if you do not understand how it will work then keep on reading.)
• initialOpen: boolean, whether the panel should be open by default. 
• colorSetting: it is an array of objects with four keys namely value, onChange, colors, and label
      value: The same color value blockBackgroundColor
      onChange: callback when the color is changed
      colors: This takes an object of color names and hex values and shows it on the color settings before the color picker. So you can show a few preset of colors if you want.

Now there can be multiple colorSettings in the array.

Let's see how we can make use of the new Inspector control we just added. First step is to declare an attribute for the block that will hold the value of the selected color as a string, we will name it blockBackgroundColor

attributes: {
    blockBackgroundColor: {
        type: string,
        default: '#000' // is optional
    }
}

And then bring that in your edit function

edit ( props )  {
 const { attributes: { blockBackgroundColor }, setAttributes } = props;
 // other code..

Remember we set onChangeBackgroundColor to the onChange event? So let's create that as well.

function onChangeBackgroundColor( newBackground ) {
 setAttributes( { blockBackgroundColor: newBackground } );
}

Cool. Now we have a working inspector control that you can use to choose a color. However, it's of no use if you are not applying the selected color somewhere. Let's take a look at a simple example on using the selected color in both the edit and save function.

edit( props ) {

 // all the other codes...


 const myInspectorControls = ( <InspectorControls>...</InspectorControls> );


 return(
  <div 
      className="my-simple-block"
      style={
       {
        backgroundColor: blockBackgroundColor
       }
  }>
    { myInspectorControls }
    <RichText/>
  </div>
 );

}

save( props ) {

 return(
  <div className="my-simple-block"
      style={
       {
        backgroundColor: props.attributes.blockBackgroundColor
       }
  }>
     // something
  </div>
 );
}

Here's a screenshot of working example of a simple block with color setting




I have just uploaded a very simple Gutenberg block's plugin code that registers a block with color settings, you can find it here StramaXon Gutenberg Blocks

Stay tuned for more Gutenberg blocks tutorial, also let me know tutorial around which aspect of Gutenberg Blocks you want to see next, on my to-do list I have Alignment toolbar setting so do subscribe to get notified when it comes out.