Adding Meta Fields to a Widget Sidebar Section in the Customizer

On the Post Status Slack, an interesting question was raised by Richard Buff: Another customizer question: I’m trying to add a custom control that’s meant to customize the appearance of a specific widget area (like change the background color). Example: And I can do it, by passing the section id of that particular widget area (“sidebar-widgets-front-page-1”) … Continue reading Adding Meta Fields to a Widget Sidebar Section in the Customizer

Things I’ve learned from my first year working from home

I’ve been working for XWP since late 2015, and this has been my first job where I’ve worked remotely. Going from a job of daily face-to-face interactions in an office to fully remote has been challenging, to say the least. If I’m not intentional about it I can easily go for days on end with … Continue reading Things I’ve learned from my first year working from home

Achieving Higher Quality Sleep

Your quality of sleep is much more important than how much you sleep. In order to feel rested, achieving deep sleep matters more than the amount of time you spend in bed sleeping. Temperature Your temperature is higher during the day, and if you exercise your peak temperature will increase above that. In order to get deep sleep … Continue reading Achieving Higher Quality Sleep

How you can contribute to WordPress (yes, 👉 YOU!)

Me: Do you regularly use WordPress? 📇

You: Yes, I love it, it’s fantastic! 😍

Me: Have you ever thought about helping contribute to WordPress? 💡

You: No, I am not a developer. 😢

Me: Well, good news, you do not have to be! 🎉

You: Ok, tell me more… 🤔

Whether you have considered it or not, I am so certain that you CAN contribute to WordPress that I will personally offer to help you find a way to do so. I will outline some options below, but feel free to reach out to me directly and I promise to help! Continue reading How you can contribute to WordPress (yes, 👉 YOU!)

Previewing Themes with Adaptive Designs in the Customizer

In WordPress 4.5 the customizer introduced device preview buttons for resizing the window to see what the theme looks like in desktop, tablet, and mobile (see #31195): This feature is specifically intended for themes that implement responsive web design (RWD) that applies the device-specific layouts via CSS media queries. Most themes should take this RWD … Continue reading Previewing Themes with Adaptive Designs in the Customizer

Reviewing a Subset of Commits in a GitHub Pull Request

For many years now, GitHub has provided a compare view to see the differences between any two commits, taking the form of: http://github.com/<USER>/<REPO>/compare/[<START>…]<END> This has been useful in the context of long-running pull requests to see just a subset of the changes. But there has been a big problem with this view: you cannot comment on such a compare … Continue reading Reviewing a Subset of Commits in a GitHub Pull Request

Resetting the Customizer to a Blank Slate

Sometimes it is desirable to be able to load the customizer without any of the panels, sections, controls, or settings that would normally be registered by core, themes, or plugins. For instance, in Customize Posts there is the ability to open the customizer via the “Preview” button from the edit post screen. When the customizer … Continue reading Resetting the Customizer to a Blank Slate

Test-driven Development of a Backbone.js App. Part 3.


Please note that you will find all 3 parts of this article as well as the source code of the tutorial in the project’s GitHub repository.


Creating Backbone.js View

In the previous part of the series, we have created our first Backbone.js model using TDD principles.

The third and last part of the article is going to show you a process of developing a Backbone.js view, that will render the markup, handle the user input and reflect model’s state in the UI. Of course, this time we will use the test-driven development principles as well.

Just as it was with the ControlColor model, we will first write some tests in tests/views/control-color.js to make sure our view is defined and possesses Backbone-specific functions in its prototype:

QUnit.module( 'views/control-color.js', function() {
  QUnit.test( 'Color control view exists and is Backbone view', function( assert ) {
     var View = window.ControlColorView;

     assert.ok( ! _.isUndefined( View ), 'View is defined' );
     assert.ok( _.isFunction( View.prototype.setElement ) && _.isFunction( View.prototype.delegateEvents ), 'View is Backbone view' );
  } );
} );

The tests are failing, so we’ll define the ControlColorView in the src/views/control-color.js file like:

window.ControlColorView = Backbone.View.extend( {} );

From the red phase we rapidly moved to the green phase. There’s nothing to refactor so far, so we’ll now take care of rendering the markup based on model’s state.

Continue reading Test-driven Development of a Backbone.js App. Part 3.