Forem: Gareth Gillman

Creating a Gutenberg block using a function

Gareth Gillman — Thu, 13 Feb 2020 15:47:40 +0000

I am working on a members style plugin and needed a front end login form, WP has a pretty simple function to include the login form ( wp_login_form() ) which makes the process really easy but how do we get the form to show? WP has a lot of options including:

Use the_content filter
Use a page template
Use a shortcode

If I am to fully embrace WP's adoption of Gutenberg, I should delve into the building a block to handle this.

Create the plugin

Add the following to the top of a blank file:

<?php
/**
 * Plugin Name:       GB Login Block
 * Plugin URI:        https://example.com
 * Description:       My Gutenberg login block
**/

Save the file as login-block.php

Register Our block (php)

Next we need to register the block JS using the enqueue_block_editor_assets action.

Add the following to the plugin file above.

function login_block_func() {
  wp_enqueue_script(
    "login-block",
    plugin_dir_url(__FILE__) . "block.js",
    array( "wp-blocks","wp-editor" ),
    true
  );
}

add_action( "enqueue_block_editor_assets", "register_block_func" );

Registering our block (js)

Next we need to register the block using javascript, copy the code below and save the file as block.js

( function() {

  var __ = wp.i18n.__;
  var el = wp.element.createElement;
  var registerBlockType = wp.blocks.registerBlockType;

  registerBlockType(
    'block/login-block', {
      title: __( 'Login Form', '' ),
      icon: 'shield-alt',
      category: 'common',
      edit: function( props ) {
        return el(
          'p',
          { className: props.className },
          'The login form will be displayed here when viewed on the page.'
        );
      },
      save: function( props ) {
        return null
      },
    }
  );

})();

Rendering our function

Using register_block_type we can render php into our block, add the following to the login-block.php file we created earlier.

register_block_type(
  'block/login-block', array(
    'render_callback' => 'login_block_render'
  )
);

function login_block_render() {
  $login_args = array(
    'echo' => false, // This line is important
  );
  return wp_login_form( $login_args );
}

Finish

Zip up both files and upload the file to the wp admin and activate your new plugin. Create a new page and add a new block, under 'common' you will should see "login form". Add to the page and save. Now head to the page on the frontend to see your custom login form.

How I test a websites speed!

Gareth Gillman — Mon, 11 Nov 2019 22:00:50 +0000

Having your website load quicker than the human eye is every website owners goal but how would you test this as accurately as possible? I will explain the tools I use to test websites.

Understanding the issues

Before I start optimising the website, I want to understand what problems I may be faced with. Understanding the cause of a problem is a the quickest way to understand how to fix the problem.

I use a few different tools to get an understanding, these include:

All of the above are websites / apps used to measure a websites load time but they all have different uses (for me).

Common Speed problems

Some of the most common issues I come up against are:

uncompressed images, css and js files
no server and browser caching
video files = the website hasn't been compressed using Gzip or Brottli

My main goal when optimising a website is to make the website as small as possible without changing the content. I am paid to make the clients website faster and in most cases they don't want to remove functionality from their site even though it may affect their speed website. This guide doesn't go into optimising the server for speed purposes.

Find out the pain points

My first step is to build a list of the issues I need to look at, I will fire up each of the tools above to build my list of things to do.

My first test is using Pingdom, I don't recommend it's speed score but I use it for the UI of showing assets and page size.

Above are my results, I found out the following from the test:

the website is a beastly 3mb in size and has 165 assets
there is no minification or combining going on with the css and js
the website has external assets (facebook, twitter etc) which can be preloaded.
the websites images have been compressed quite well
the website has no browser caching enabled

The other test I use is webpagetest which is one of the most accurate speed tests available, it has tons of features from selecting location, connection speed and browser used. By default it does 3 concurrent tests to get a realistic speed.

As you can see we get a median of the 3 tests and I had 6.5 seconds load time for document complete and 9.6 seconds for fully loaded.

Google defines these terms as follows:

Document Complete: The metrics grouped together under the Document Complete heading are the metrics collected up until the browser considered the page loaded (onLoad event for those familiar with the javascript events). This usually happens after all of the images content have loaded but may not include content that is triggered by javascript execution.

Fully Loaded: The metrics grouped together under the Fully Loaded heading are the metrics collected up until there was 2 seconds of no network activity after Document Complete. This will usually include any activity that is triggered by javascript after the main page loads.

Optimising the website

I use both results as a guide, I will complete 1 task (such as minifying css) and run both test again to see what impact the task had on the results from a speed and statistic view. My main aim is to make the website faster but also leaner, the smaller a website is, the quicker it is to load especially on mobile devices. Depending on the website I would aim for the following statistics:

Less than 3 seconds document load time
Less than 1.5mb page weight
Less than 80 combined assets

But how do I make the changes you ask? I will go into that next time, hopefully this quick guide has given you an understanding on how to test your website and what to look for when using testing tools.

How I structure my CSS

Gareth Gillman — Tue, 08 Oct 2019 13:05:24 +0000

I am a "clean freak" and this goes for my code, everything has it's place, all of my css is built off a foundation which I then layer. This allows me to know where everything is when I need it or I need to show someone else how to amend my code.

I use SASS/SCSS, I am a relative newbie to it after being pushed by a work colleague but it's made my code much easier to manage, I now realise I was an idiot for not embracing it a long time ago.

Folders

My folder structure is quite simple, my scss folder has 3 folders and 1 scss file, each additional scss file I create would go into one of these folders.

Abstracts holds the pre-design CSS such as @font-face, body styling, mixins and variables.

Components holds the CSS which builds elements of the design such as header, footer etc

Layouts holds the rest of the CSS such as page styles.

My theme-styles.scss file contains the following:

// Abstracts

@import "abstracts/abstracts";

// Components

@import "components/components";

// Layouts

@import "layouts/__layouts";

Files

I have a base set of files I use in every project, hopefully every file is explanatory.

I use @import to add the files from each folder to the respective template file

CSS Structure

My CSS is organised in 3 parts:

1: the classes are in order of how they appear in the html
2: the css statements are ordered in alphabetical order
3: media queries are at the bottom of the file (while following the above rules)

Hopefully the above has given you some ideas on how to improve your project structures.

Why PluginVulnerabilities(.com) is harming the WordPress eco-system!

Gareth Gillman — Fri, 19 Apr 2019 15:28:54 +0000

Note: In this article I am talking about WordPress.org, the open source version of WordPress, not the hosted WordPress.com.

What is this about?

PluginVulnerabilities (PV) is a WordPress security service which (for a price) will check WordPress plugins for security vulnerabilities with prices starting from $250. I have no issue with this, this is a service which is needed to make sure products released into the public are as secure as they can be. PV do a great job of finding security issues in plugins but how PV are disclosing them, is where the issues start.

What have they done?

When PV find a security issue in a plugin (without being paid to do the review) they would go on the WordPress.org forums and post the security vulnerability on the very public forums while also promoting their review service. They ultimately got banned by the WordPress.org forum management team for spamming and not disclosing security issues responsibly. After having their main account banned, they kept up their methods by creating hundreds of new usernames to publish security vulnerabilities on the forums. This method ultimately got them banned permanently from the forums.

Responsible Disclosure

When a security reviewer finds an issue in software, they would either contact the developers directly or use a service like HackerOne (HO lets you get paid for disclosing security issues). This is called 'responsible disclosure' which lets the developers of the software release a fix before the issue can be used by persons with ill intent. Unfortunately PV have no intention of doing their disclosures responsibly so were using these security issues to promote their service(s).

What is the problem?

WordPress itself runs roughly 75 million websites, each website can install any plugin they like, a plugin could be in use on millions of websites. If a security issue is made public before it can be fixed, this can lead to potentially millions of websites left vulnerable to those with ill intent to take control of websites to steal data, inject malware or redirect users to nefarious websites. The implications of this could be huge for a company who uses Woocommerce to run their ecommerce store or run a high traffic website.

What are PV doing wrong?

What PV are doing isn't illegal but it's immoral, they are releasing security vulnerabilities to the public domain to embarass plugin developers into using their review service. By releasing the vulnerabilities before giving the developers time to fix the issue, they are giving developers no time to protect their users websites. On the 21st March, PV released a security vulnerability on their blog, within a few hours sites were being attacked using the methods in their post, they are actively giving people with ill intent access to attack WordPress websites. On the bottom of their "disclosure" they use the following wording:

*To make sure a plugin you are using or considering using has been properly secured you get a complete security review of it from us."

They are using security issues within open source plugins to promote their paid services while allowing innocent website owners to potentially lose their livelyhoods and be prosecuted by law enforcement because PV don't want to followi recommended 'responsible disclosure'.

Is there a solution?

Ultimately no, you can mitigate risks of security issues by installing a firewall (either through your webhost or a separate security company), a firewall can prevent attacks and be an extra layer of protection but unless the firewall knows of the attack method, it may not be able to block everything. There are WordPress security plugins which actively monitor and protect websites from new attacks, such as Sucuri and Wordfence but even these aren't 100% safe. Until every developer can code to not make mistakes in their code, vulnerabilities will happen.

PV would actually be giving themselves a better reputation if they responsibly disclosed their findings, plugin developers would be more interested in using a service from a company who has actively helped them secure their code. Because of their stance on how they disclose vulnerabilites, PV have and will be vilified for the way they act in the name of promoting their service(s). PV offer something the WordPress eco-system needs and plugin developers would use but they are doing the worst possible job of getting users on board.

Gutenberg - love or hate it, it's here to stay

Gareth Gillman — Sat, 13 Apr 2019 18:21:30 +0000

What is Gutenberg?

Gutenberg is the new post editor for WordPress websites released in V5, it totally replaced the old editing experience with a brand new, drag and drop editor.

Why do developers seem to hate it?

There can be a couple of reasons for this and the most obvious is the feeling among developers is the new editor was forced on them, some developers felt the old editor was perfect and didn't need replacing. Gutenberg also uses react, which means a lot of WordPress developers needed to learn a whole new code base to customise the new editor.

Why was Gutenberg introduced?

Gutenberg was created to make editing your WordPress content easier, the old editor was based on TinyMCE which had a limited editing experience for users. WordPress competitors such as Medium and Wix had much better editing experiences, WordPress was lagging behind massively.

My thoughts

As a developer, it was scary to learn a new language, a new editor and having to teach my clients a whole new editing experience but overall the editor has massively improved my clients editing experience with WP, they now have an easy to use editor which has it's faults but overall they enjoy using Gutenberg far more than the old editor. They rely on me less to help them update their website content and they have much more control on how their content looks.

The future

Gutenberg will continue to grow, the editing experience will get better and more users will begin to use it. More developers will get on board with it to expand it's functionality and ultimately both users and developers will wonder why it took so long for WP to replace the old editor.

What do you think?

Have you used Gutenberg? Did you enjoy the experience? What would you like to see from Gutenberg in the near future?

Simple WordPress Widget for your Dev.to Posts

Gareth Gillman — Sat, 13 Apr 2019 00:51:10 +0000

I was bored and saw some posts of the users making use of the dev.to api so I threw together my own little project, a widget for your posts.

It shows the latest 30 posts by using the following API call: https://dev.to/api/articles?username=ben

A view of the widget admin, super simple: https://imgur.com/a/r3bg67G

Live view (showing Ben Halpen's posts) - The widget comes with no styling so uses the default styling from your theme.

http:// wpthemes4u. co. uk/plugins/ (remove spaces)

You can download the widget from https://www.dropbox.com/s/ohkdmbk9arrzxoe/devto-widget.zip?dl=0, I will get it on Github when I get chance.

The API has a lot of data I can use to make the widget more interesting, what would you like to see? things I have considered are:

user card (with profile image, name, description & twitter url)
limit posts to a user defined number in the widget settings

Let me know any ideas to improve the widget or other ideas for WordPress integrations for Dev.to

Taking time out from freelancing

Gareth Gillman — Fri, 12 Apr 2019 18:59:37 +0000

6 weeks ago I took the step to look for a full time job, I have been freelancing for 10 years but needed a break from it, this post is my reasons why and how I feel i am fitting in.

About me

I am a WordPress developer in the uk, been freelancing for 10 years with hundreds of amazing projects completed.

My reasons

There are too many to list but my top 3 are:

Time - When you freelance your mind is always on work, it's hard to switch off and relax, you're either thinking about deadlines or chasing invoices, after 10 years I need a break to take some time out to not worry about work. You can't take time out for a holiday without a lot of planning and even then it will likely involve work.
Money - Unless you have side business where recurring income happens, you're forever chasing the next pay cheque, always thinking about what work you have coming in to keep the pot of money full, when it gets low you have to work twice as hard to refill it.
Learning - I felt I didn't have enough time in the day to handle all the work I had (fortunately was very busy) and to keep learning, I felt I was so far behind in where I wanted to be as a developer as I was concentrating on getting jobs completed and not improving myself.

The job

I have taken a role as a front end developer which is WordPress focused, I am mainly building WP themes and plugins (which is what I enjoy). I work a standard 9-5 so I have time to myself at weekends and in the evenings, I have a constant pay cheque at the end of the month and only one week in I have already started using SASS, it had been on my todo list for over 2 years.

The future

I am taking time out to enjoy life, I will finally have time to go to Wordcamps and other conferences, I can finally take a holiday next year without worrying about work, I will be able to save money a lot quicker to plan for the future.

I haven't stopped all freelancing, I am still doing bits here and there but they are projects I really want to do and on my terms. Will i go back full time freelancing? I don't know, I am taking each day as it