Categories
CSS Web development

Order pseudoclasses

The order of definition of pseudoclasses for the anchor tag is crucial.

In Firefox I noted that if you define :visited after :hover, you may not get the style you expect when hovering over an <a> element. That’s logical, if you think of it. But it can be confusing because the Inspector seems to ignore the style for :visited, leaving us clueless.

Looking for clues I checked Chrome too. The problem did not occur there, but that was because I hadn’t visited the page the link was pointing to yet.

The recommended order is

  • :link
  • :visited
  • :hover
  • :active
Categories
Gutenberg Wordpress

Setting up a block

Just a note on the way I currently like to set up development of a Gutenberg block. Basically these are the steps mentioned in the WordPress block editor handbook, that uses the @wordpress/package to work with the webpack and Babel libraries, without too much hassle.

Assumed Node.js and npm are installed, enter

mkdir new-block
cd new-block
npm init

Next install the WordPress packages and all their dependencies. This may take a while.

npm install --save-dev --save-exact @wordpress/scripts

Add the following code to package.json:

"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
},

To start watching files and building the JavaScript while developing your block, type

npm start

To create the production code, enter the command

npm run build

Trouble shooting

When continuing development after an interruption, I often forget to restart watching/compiling with npm start and wonder why any change in the code fails to make any change in the output.

Categories
Gutenberg Wordpress

Use Gutenberg Group blocks for full-width containers

With the WordPress Gutenberg editor it is easy to create full-width blocks. If it isn’t already, we can activate this feature for the theme with the following line in functions.php:

add_theme_support('align-wide');

Combined with Group blocks, this allows us to create a full-width section where the inner content aligns with the content in blocks with regular width. The full-width containers can be used to show an alternative background color or image. Very useful for headers, footers, navigation bars etc.

The group block is present in Gutenberg Core since WordPress 5.3.

Step by step

  1. Create a Group block that will serve as our container.
  2. Make the block full-width.
  3. In the Advanced panel of the Inspector controls, set an additional CSS class, for example my-full-width-container.
  4. Use this class to style the full-width container.
.my-full-width-container {
    background: red;
    padding-left: 0;
    padding-right: 0;
} 
  1. The group block very conveniently adds an inner container with class .wp-block-group__inner-container. Match margins and padding of the inner container with those of the regular content blocks, for example:
.wp-block-group__inner-container {         
    max-width: 80%;        
    margin: 0 10%;        
    padding: 0 60px;    
}

Now we can put children blocks inside the full-width Group block that will align with the content in regular blocks.

Categories
Patterns

Vibrant dots

Dots on the move?
Categories
Patterns

Circles I

A circle thing