Blocks vs Panels

Differences

The differences between panels and blocks will be largely aesthetic. Under the hood, they work very differently, but what we’re interested in is: how are they different to work with?

Two different viewing modes

While you may be used to opening the Edit view and seeing a vertical list of all the panels, the Edit view will now show a visual representation of how the blocks will look on the frontend. This is the block’s Preview mode. In order to access the content and options, you’ll need to click on an existing block or select it from the “document overview” (if the preview of the block acts as a link).

If you have your Page/Block Settings open, you will see your block options over there (if the block is in Preview mode), or the options will open up in the block itself when you click into its Edit mode.

Positioning and Adding Blocks

Positioning blocks is different. When a block is clicked, an up and down arrow will show in its toolbar. Hover over each to see instructions, “move up” or “move down”.

Adding a new block is also different. If no blocks are currently selected (i.e. the Page is selected), any new block added will appear at the bottom of the page. If a block is selected, the new block will appear beneath it.

Hovering between to blocks will bring up a blue “+”, which can also be used to add a block in a particular spot. Or, click the blue “+” at top left of the page to drop down a menu of all available blocks. (Blocks can easily be searched by starting to type “/” + the name of the block you’re looking for — or something close).

Blocks within Blocks

Finally, some blocks can be embedded inside other blocks. A “columns” block is great for formatting groups of blocks into columns, for example.

Similarities

Some things will feel very familiar about blocks — particularly our custom St. Olaf blocks. That’s right — for every “Panel” that once existed, a corresponding “Block” has taken its place. But many other blocks also ship with WordPress Core. We’ll focus on those later.

Once inside a St. Olaf block’s Edit mode, things are set up under two main tabs: “Content” and “Settings“.

In addition, many such blocks will include a rich-text editor under the Content tab, with the familiar “Visual” or “Text” tabs, depending on how you want to view your text. You’ll still go to “Settings” for formatting the block’s title, and controlling the spacing around the block itself.

Why Blocks are Better

While Panels worked well as a precursor to the Block Editor, they were limited to a handful of theme-specific methods for displaying content.

Meanwhile, WordPress Core has developed and fine-tuned an entirely new system for editing and displaying content. Not only are blocks easier to use, they are part of a larger new blocks “ecosystem” that is the modern way of working in WordPress.

But that aside, blocks keep our content — and our users — safe. Blocks are built on modern code that will continue to be improved and supported for many years to come.

Learn more about blocks at WordPress.org.