I decided to brush up on my website building skills and deepen my understanding of the new gutenberg system – a change up from the classic wordpress editor from 7 years ago.
I’ve been a long-time fan of wordpress, and my first website was built on it with a free wordpress.com account. I eventually went on to build corporate, multi-lingual, ecommerce and personal websites with domain + host + wordpress CMS.
WordPress remains the most versatile CMS with extendability of plugins, and I was keen to gain further understanding of the tool.
This is a record of what was done, and any tips for people looking to learn Gutenberg and wordpress.
10 Days of Gutenberg Challenge
I completed the 10 days of gutenberg challenge with Riad Mahmud, who has created an exceptional series which I will link below:
Youtube: https://youtu.be/MIp4KsAbxAU?si=HMPUlWpdxKYXso7B
My practise pages: Days 2 and Advanced Grid
I’ve also gained knowledge on how to transfer from Figma design to Gutenberg, which was highly useful.
Tips Regarding the Challenge
The link to the figma files are here.
Figma Shortcuts:
Ctrl+click – to select element
Hold Option to check spacing between elements
i to select colour
Apps:
Apple’s native Colour Digital Meter app – Command+shift+c to copy any website colour without compromising and showing data to colour plugins
Break-points:
Gutenberg is limited in break points and the way certain containers are coded and updated by wordpress makes for interesting behaviours that can be frustrating.
Grid vs Columns for Responsive Design
Grid – relies on rem-based auto spacing, if manual spacing of 3 columns was corrected, will cause smaller screens to still have 3 columns and there will be not flowing and stacking elements.
Columns – this was in fact the better option – it has automatic break-points that will stack elements if it gets undreadable at 3 columns.
Correct Use of Padding in Gutenberg:
Understanding where to add padding correctly is good practise can keep your styles consistent. For example, for a dark background section (Group element) with 3 cards within it (Grid element rem 20), and you want some padding for the top and bottom of the section. The padding should be added to the section (Group element) NOT the cards (Grid element).
Secondly, a mobile-responsive design should also have padding in the content (Grid) section to ensure the content is presented as accurately to design as possible. An investigation into this article will show that modern design breakpoints are pretty much hard coded for the best effect. The responsive effect can be done in pixel with reference to the figma transfer, however, a rem-based or custom css-based will be better.
Defining Content Width for Responsive Design in Gutenberg:
A good mobile responsive design includes appropriate wide-width overall restrictions (either in pixel/rem/%). Note that wide-width restriction does not replace inner content padding.
The wide-width restrictions defines content space can be default wordpress wide width (mobile) or can be defined in pixel/rem/% (need to be tested) . Pixel can create precise details while rem/% is fluid.
Some common screen sizes and content widths (Chatgpt):
| Category | Screen Width (px) | Content Width (px) | Content Width (rem) |
|---|
| Small laptop | ~1280px | 960–1100px | 60–69rem |
| Standard laptop | ~1440px | 1000–1150px | 62–72rem |
| Large screen | ~1920px | 1100–1280px | 69–80rem |
| Ultrawide | 2560px+ | 1200–1440px | 75–90rem |
If going for defined pixel/rem/% wide width instead of wordpress-wide width, then a rem-based approach is better than pixel. See image below for wordpress width inputs. You can set 63 rem for content width and 78 rem for wide width for the perfect size. If working in pixel, 79%~80% is ideal for content width and 57% almost works for wide width.
Conclusion
I completed an invaluable and easy-to-follow course by Riad Mahmud, which taught the basic building blocks of Gutenberg Group, Row, Stack & Grids. The next step is to complete a course on the design-flow of a full website website, specifically defining global colours and texts to prevent changing individual elements so much.