Categories
News

Twenty Twenty Release Candidate 3

As I am writing this, Ian has just packed the theme that will be included in Release Candidate 3 of WordPress 5.3.

This means that tonight alone, about 11 issues that we have worked on this week were closed.

I meant to write more regularly about the process, but I was not able to find the time. Both me and my partner had some health issues, and I was not able to help out with the theme as much as I wanted. This was also true for some of the people who has helped us out, so the pace slowed down a bit.

I don’t want to talk about burn out, -that’s not what I want to call it, but I think we will be happy to see the theme released, and work with the future updates a little less… intensely.

I have learnt a lot about the process of releasing a new WordPress version. This is knowledge that I wish I had when we started working on the theme.

What is a bug?

A whole lot of bug fixes, big and small, has been added in this version. Most of the fine tuning of the positioning and spacing of the block elements has been finished.

But what is a bug, and what is an enhancement? That is a question that I have asked myself many times the last two weeks, because only bug fixes can go into a release candidate.

It is important that our time is spent on fixing the right problem, on problems that can be fixed and tested in a timely manner, and then merged. What is important for one person, might not be such a big problem for someone else, so how do you choose? We all have our pet peeves.

Fixing accessibility issues

I have not always been able to communicate directly with the contributors about why something is or may be an accessibility issue.

We have had regressions because the accessibility has not been considered when pull requests has been added. This has meant that it has taken a long time for accessibility issues to be solved. And I see the same pattern with browser testing. I regret this but I still feel that I have done my best. Testing everything is hard.

To me, the main remaining accessibility issue is the sub menus of the desktop horizontal menu. Hopefully we can find some one to help us solve this soon.

-But this does not mean that there aren’t other things that needs to be improved for the theme to be more accessible. It just means that I have not found them.

If you find a problem, please report it and open a new issues. -For now, the theme is still being developed on Github.

Categories
News

Twenty Twenty week two

After a dissapointing doctors appointment on monday and an important work meeting on tuesday afternoon, I had to sleep 12 hours and missed a lot of the fun.

Luckily, Ian has been able to spend more time on the theme this week.

The JavaScript for the menu has been added, but it is not yet perfect especially not in IE11. Many awesome people contributed to improving the JS and removing jQuery depenendancy for the front.

More of the design has been added. Many block styles are still missing, as well as some styles for the comment area.

Color settings are being redone to assure a high enough contrast between background and text. The new accent color will be a hue setting and it is looking really good. The code for the color setting is under review right now and will be included soon.

We still have many github issues to go through and some that could be closed because they have already been fixed. Hopefully these will be looked at on thursday.

I also noticed that some things that already have been fixed once, has sneaked their way back in, and those issues needs to be reopened.

The first week, making decisions on open pull requests was fairly easy. This week it has become harder for me to make decisions on my own without discussing it with the other maintainers. This is probably the way it should be though!

Categories
News

Twenty Twenty Awesomeness

It has now been a whole week since Anders Norén introduced the new default theme.

The Twenty Twenty theme single post

And I’m helping!
As a representative for the Theme Review team, I’m here to help contributors follow the theme guidelines, and make sure that are no major requirement breaches, such as licensing problems.

Our first week has contained meetings, discussions regarding build tools, coding standards, accessibility, fonts and JS.

This is the first time I participate in a project like this, and I am excited, humbled, overwhelmed and honored, and I am already learning a lot.

Finding time to work together has been a little difficult this week, which is not surprising considering this time frame. I still feel that we have made progress with the theme.


When we started developing the theme, we did not start from scratch, but with the Chaplin theme by Anders. The version that we started with was a shell that had many of the extra options removed.

Because Chaplin had already been approved by the Theme Review team, we knew that the theme followed the theme requirements.
We also knew that the structure needed to change to match the vision for Twenty Twenty, and that the accessibility needed to be improved.

We had many contributors show up to help with the theme, we made some big changes and many smaller changes to get closer to the look and functionality that Anders have envisioned.

Personally, I have struggled with improving my Git and Github skills, but the members of the Theme Review Team, especially William Patton and Denis Žoljom have been incredibly helpful and positive.
I am thrilled that so many members of the Theme Review team has already contributed by opening issues, giving comments and advice, and pull requests.

Categories
News Review

Planning for keyboard navigation

The theme review team is requiring all themes to implement keyboard navigation in two months time, around the third of september 2019.

Because this may be a complex task for many authors, we encourage you to start planning for and working on this as soon as possible.

We want to point out that this requirement does not only include menus. All functionality should work using a keyboard only. Any action you can complete with a mouse must also be performable via keyboard.

Theme authors must provide visual keyboard focus highlighting in navigation menus and for form fields, submit buttons and text links. All controls and links must be reachable using the keyboard.

First, please read the requirement found here: https://make.wordpress.org/themes/handbook/review/accessibility/required/#keyboard-navigation

As well as the background for this requirement: Techniques for WCAG 2.0
G202: Ensuring keyboard control for all functionality

We would like to collect examples for the keyboard navigation, including menus. If you know of a good resource that is not already included, please add a comment and link.

Navigation menus and controls

Drop down menus and controls must be available when tabbing, using keyboard only.

Both forward and backwards tabbing must work. To test backwards tabbing, hold down Tab and Shift at the same time.

Controls also include open and close buttons for modals such as off canvas sidebars or search forms.

Form fields

Don’t break the browsers default focus by removing the outline. Other kinds of decorative changes are also allowed. Only showing the marker inside the field is not enough.

Submit buttons

Submit buttons may be hidden during it’s normal state but visible on focus.

A high contrast color change, an outline, a border, or a text decoration change will assure that visible submit buttons pass the requirements.

Text links

Make sure you can see visually which link is focused. Focus should either incorporate a visual change that is not based on color (background change, underline, shape) or a color change where the difference between the two colors meets the WCAG 2.0 level AA contrast ratio (4.5:1) .

Basically, don’t break or remove the browsers default focus by removing the outline.

Resources

https://make.wordpress.org/accessibility/handbook/test-for-web-accessibility/test-for-web-accessibility-frontend-code/#keyboard-navigation

For those interested in AMP:
https://amp-wp.org/documentation/playbooks/keyboard-accessible-navigation-menus/

Example menus:

https://wordpress.org/themes/twentynineteen/

https://wordpress.org/themes/twentyseventeen/

https://github.com/Automattic/_s ( https://underscores.me/ )

https://github.com/wprig/wprig/

Categories
News

Another just for fun theme -Mardi Gras

The Mardi Gras theme is now available on WordPress.org. Yes, another holiday theme!

Mardi Gras a fun, colorful theme for the carnival season. The theme has four widget areas, two menus including a social menu, and displays your posts in a 3 column grid. The default colors are the traditional New Orleans Mardi Gras colors green, purple and yellow. You can change the number of columns and select your favorite colors and fonts in the customizer. The theme is responsive and also supports the new block editor with wide and full width blocks.

Categories
News

My first custom block plugin

Well, my first ever plugin to be submitted to WordPress.org actually 🙂 .

Last Christmas, I added a custom, static image block with Christmas decorations to my theme Christmas Sweets. This was the first theme in the directory to include blocks for the new block editor.

Later, the Theme Review Team on WordPress.org decided that themes are not allowed to include blocks, and I removed them.

Now that WordPress 5.0 has been released, the plugin with updated blocks and a few additional images has been approved and added to the plugin directory. You can download the plugin here.

The blocks are basic and I did not need to change much of the code from last year to make them work again.

Unfortunately a lot of the documentation that is available is out of date, and I was not able to add alignment toolbars, so the images are now centered by default.

I admit that the mix of ES5/ESNext examples and tutorials that are available are confusing. (And I’m not a fan of React error messages.)

Even though I have taken Zac Gordons Block Development course, I ended up sticking with ES5 and build on the existing code instead of rebuilding the blocks.

Submitting the plugin to the directory was nothing but smooth, and it was approved after a few hours. I was able to use svn for the first time in many years to add the plugin files to the directory, so I’m happy with that :). Now I just need to add some images to market the plugin.

Categories
News

Spooky! A Halloween theme adoption

Last year, I released a Christmas theme, and I wanted to create a holiday theme this year as well.  While I was considering a name for my new theme, I found a theme in the WordPress.org theme directory called Spooky, that had not been updated since 2009.   I thought this was a great name for Halloween, and that it would be fun to see if I could revive it.

So I found the contact information to the themes creator, Esther, from webmatter.de in the themes readme file, and to my surprise, she soon replied back and said yes, I could adopt the theme!

To adopt a theme, you need to change the username of the author in the back end of the WordPress.org theme directory. So In order to do that, I contacted the Team Leads of the WordPress.org Theme Review Team who quickly transferred the theme over to my account.

When testing the original theme, I discovered a lot of PHP warnings, because of course it did not have any of the functions that have been added to WordPress in the last 9 years, that we take for granted today.

Because I only had a few days to spare before the holiday, I decide I would not be able to keep any of the original code and rewrite it, so instead, I started over with a fresh copy of underscores.

A screenshot of the original theme

But I definitely wanted to keep the theme in the same style, with the black background, grey text colors with orange details, a castle in the footer, and a moon at the top. 

I already had the moon that I could borrow from the Bunny theme, and I went through many of the Halloween themed images on pixabay before I chose this image for the footer:

I edited out the second moon behind the castle and also added some gradients to the themes footer and header area. In the end, I opted out of the sidebar so that it would be easier to use the wide and full width alignments in Gutenberg.

I tested a large number of menus with different spider animations, until I chose the narrower drop down menu with the cobwebs.

I am still struggling with getting the animations to work on Ipad, so if you have any tips, please e-mail me 🙂

For the screenshot, I choose The Raven, by Edgar Allan Poe.

The Screenshot of the new version of the theme

For 3 days of developing and testing, I am still pretty happy with how it turned out.

The downside to adopting a theme is that if the theme was already live, -as was the case for Spooky; it wont be on the latest themes list on WordPress.org.

If you want to dress up your blog for Halloween, you can download the theme here.

The theme as one menu, a footer widget area, support for full width images with the Gutenberg editor, and an orange and yellow color palette. There is also a color option in the customizer where you can replace the orange accent color.

Categories
News

Aaron is getting ready for the new editor

Two months ago,  I finally started the process of creating new demos for some of my existing themes. But after seeing very little actually being done 😉 I have realised I need a better plan for which themes I want to continue working on.

The first theme that has recieved an update in preparation for Gutenberg, and a new demo and information page, is Aaron.

While I continue the testing together with a couple of my theme users,  you can expect several smaller updates to fine tune the styling.  I want the editor and the front to match, but I still want it too look and feel like the same theme.

I am generally a fan of Gutenberg -I am writing this post on my mobile,  with the plugin installed – but the frequent changes has not made it easy for theme developers.

The following changes were made in version 3.2 of Aaron:

  • Made sure that the custom templates works for all pages, not only for the front page.
  • Made sure that the meta box options works with the Jetpack portfolio and testimonial post formats.
  • Added a testimonial widget. This widget requires the Jetpack testimonial functionality to be activated. (This widget is the same widget that has been added to some of my more recent themes)
  • Made sure that the excerpt_more filter returns the default value in the admin.
  • Included a footer link to the privacy policy page, if one is set up.
  • Minor style changes:
  • A left side border was added to the blockquote.
  • A border was removed from the footer widgets.
  • Matched font and styles used in the gutenberg editor.
  • I also updated the screenshot, to follow the new guidelines for the theme directory.

Version 3.3 is scheduled for mid october and will mostly be style changes.

If you have any suggestions and ideas for Aaron, you can email me or use the support forum.

Categories
News

GOAT

So, my latest child theme has nothing to do with goats*, but is inspired by the 2018 FIFA World Cup.
Sweden is out of the cup, but I have wanted to make a theme for SportsPress for a while and this was good opportunity to try it out. This is a basic theme, but together with the plugin you can set up team and player profiles, present upcoming games, statistics and results. If you are new to using SportsPress, they have lots of video tutorials to help you get started.

You can download GOAT from WordPress.org here.

*But if you love goats, my theme Farm has a goat header image :p .

Categories
News

Farm, a new child theme

Farm is a new child theme for Embla.
It is a basic blog theme with a romantic header font and just a hint of green.
Farm is responsive with a large header images and a two column grid layout.
Present your farm and your staff with the custom staff template, or sell your goods with the help of the WooCommerce plugin.

You can download Farm from WordPress.org.