On the live site my What’s going on? post failed to display either the Slideshare or YouTube embed. Now what’s going on?
Yesterday, the Cheltenham WordPress Meetup was a series of Show and Tell talks. Along the lines of Lightning talks, these are talks of approximately 10 minutes, where individuals share something they’ve been working on. There were 7 talks planned:
- Richard Bell @Rich Bell demoed Ray and Background WordPress processing,
- Mark Wilkinson @wpmark demoed his Just In Time CSS,
- Elliott Richmond @erichmond showed us how to run Xdebug using Visual Code Studio, setting breakpoints, watching variables and changing values on the fly,
- Ross Wintle @magicroundabout demoed his new CSS and PHP based spam pixel plugin to block spam bots
- Keith Devon @keithdevon showed us his work on CSS grid for block based themes
- We ran out of time before @Jonnyauk had a chance to show his latest work with template parts ( PHP version not FSE ).
- and somewhere in the middle of it I talked about 3 plugins I’ve written to help visualise my server side performance: oik-bwtrace sb-chart-block and slog.
This post is the annotated version of the slides.
An update on my long running endeavour to visualise the effect on server performance of changes to my WordPress websites.
Since 2015 I’ve been developing a routine to compare the effect on server response times of the top 12 WordPress plugins. I’m just about ready to publish some results.
OK. so I’ve demonstrated that my iPad can’t display WebP format images, so I’ll have to try the picture tag method as a polyfill.
<source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
This is the sample HTML copied from CSS Tricks: Using WebP Images.
So let’s try displaying
oik-types-banner-772x250.webp to browsers that support it and the JPEG version for those that don’t.
<source srcset="https://herbmiller.me/wp-content/uploads/2021/02/oik-types-banner-772x250-45.webp" type="image/webp">
<source srcset="https://herbmiller.me/wp-content/uploads/2021/02/oik-types-banner-772x250-45-1.jpg" type="image/jpeg">
<img src="https://herbmiller.me/wp-content/uploads/2021/02/oik-types-banner-772x250-45-1.jpg" alt="GIMP 45% - 21KB">
The WordPress Gutenberg project’s plan for internationalization (i18n) and localization (l10n) of Full Site Editing themes (FSE) has not yet been formulated. I’ve written a proposal, entitled Internationalization and localization: translating templates and template parts, raised as Feature request #27402.
I believe that very little needs to be done to Internationalize a file containing Gutenberg blocks and HTML, and that it can be translated and localized into a statically delivered file in the user’s required locale ( language and country ) using the process described in the feature request.
This post briefly discusses some of the challenges of translating rich text content.
Phase 2 of the development of the Gutenberg block editor introduces Full Site Editing ( FSE ). In order to document the 23 new blocks, I felt I had to embrace Full Site Editing and develop my own experimental theme, which I chose to call Fizzie. The requirements of Fizzie are:
- Implement Full Site Editing.
- Same look and feel as the Genesis-a2z theme.
- Support documentation / demonstration of each of the new blocks in Gutenberg.
- Find out what bits are missing from and/or not working on Gutenberg.
- Implement on blocks.wp-a2z.org, when stable.
I’ve been using GitHub since October 2012 but until recently I’ve had very little understanding of any working process that enables me to contribute to other projects using Pull Requests ( PRs ).
But now I’ve started to try to work with branches. Two reasons:
- To enable me to contribute to Gutenberg- for Full Site Editing improvements.
- To help others to learn about version control system by collaboratively developing repositories on wppompey.
In this post I’ll document the process I’m using for developing PRs against Gutenberg issues.
I read the instructions on WordPress.org. They all made sense, but I couldn’t work out how to create a PR that only contained the changes I’d intended to make. While the overall effect of my PRs were the change I intended, every Pull Request consisted of multiple commits, not just the one I wanted to apply. Obviously I was doing it wrong.
I read some Stack Overflow items ( thanks Angel for directing me to them ) and discovered the git commands that appear to do the job.
I’ve now created 4 or 5 PRs using this method. And so far I’ve not had any problems. This is a good thing. I’ve just re-read the Git Workflow process and realised it’s almost exactly the same.
Preparation – per repository
- Fork the repository in GitHub.
- Clone to the directory where you’re going to make your changes.
- Add the upstream repository.
- Fetch the latest versions.
cd \apache\htdocs\wordpress\wp-content\plugins git clone https://github.com/bobbingwide/gutenberg.git gutenberg-source cd gutenberg-source git remote add upstream https://github.com/WordPress/gutenberg.git git fetch --all
For each Issue / PR
Work in a new branch (
git checkout -b fix/%1 upstream/trunk
Now make and test changes in the new branch. Add files and commit as often as necessary, with a nice commit message, referencing the issue number each time?
git commit -m "good commit message 50-70 characters
When ready push the changes to your fork of the repository (
git push -u origin fix/%1
Theoretically this should work for any repository.
Then change back to the main branch
git checkout trunk
To keep the local repository up to date use
fetch --all. I believe this has to be done in
C:\apache\htdocs\wordpress\wp-content\plugins\gutenberg-source> git checkout trunk git fetch --all Fetching origin Fetching upstream remote: Enumerating objects: 3248, done. remote: Counting objects: 100% (3248/3248), done. remote: Compressing objects: 100% (273/273), done. Receiving objects: 100% ( Receiving objects: 100% (4749/4749), 51.99 MiB | 3.85 MiB/s, done. Resolving deltas: 100% (3648/3648), completed with 996 local objects. From https://github.com/WordPress/gutenberg ...
What I was doing wrong
For the 150 or so GitHub repositories under
bobbingwide I developed all my changes in the
main branch. It’s still called
master for many of them. Then I pulled the changes to a local version in
C:\github\bobbingwide\repository-name and pushed them from there.
I had two copies of each repository. One reason for this was protection against having the repository destroyed accidentally by WordPress updates or unpacking
.zip files into other development enviroments.
I started upgrading to WordPress 5.5 and soon began to experience a load of problems with core functionality. Things that should work no longer worked. I first noticed it on a client’s site when Media Library didn’t display anything.
Media Library not working in WordPress 5.5.
WordPress TRAC Issue #50993
This post summarises my investigations, some of the problems I encountered, the workaround and some notes about what I need to do in the future, which is a work in progress.
TL;DR – 25th August 2020
As far as team Yoast are concerned the problem should go away if I upgrade to WordPress SEO v14.8.1.
from the WordPres SEO v14.8.1 readme.txt file
With their fix being a workaround. Roll on WordPress 5.5.1
TL;DR – previous update
The problems that I documented last week were either due to a bug in WordPress or a bug in the Gutenberg plugin. There were two TRAC issues, and the problem had already been reported in Yoast’s GitHub repo.
The problem originally occurred with Gutenberg 8.7.1, WordPress SEO 14.7 and WordPress 5.5.
It appears that Gutenberg 8.8.0 has fixed the problem. There’s no longer a need to apply the patch developed for TRAC ticket #50999, nor, it seems, do I need the Enable jQuery Migrate Helper plugin.
The “what I need to do in the future” part is still a work in progress”. I’ve created a GitHub Project for it.
Today I delivered my first Single Block ( SB ) plugin to wordpress.org. It’s called SB Children block and it’s in the Block Directory.
I’ve written up some notes about the plugin. Suffice it to say there were a few challenges along the way. But I’ve left the details of these in the GitHub issues.
Having looked at a couple of solutions, I believe I’ll be able to achieve it having the table nested in a Group block, and providing the CSS styling using my CSS block.