WordUp Pompey! Live

This post was created during the Portsmouth WordPress Meetup as part of a Lean Coffee discussion on the Block Editor in WordPress 5.0 / Gutenberg. During the discussion a number of points were raised and we tried to have a look at them. We overran the 10-minutes per item by a long margin. I’m going to try to update this post to reflect most of the discussion points. Where necessary we’ll investigate whether each issue raised is a known problem and if there’s an acceptable workaround.

Points raised

• Buttons have underscores on the links.
• I don’t want a new paragraph every time I press enter.
• I just want to write an essay with pictures.
• I want to be able to write JavaScript.
• Small devices make it hard to see what I’m writing.
• There’s too much white space between blocks.
• Preview takes a long time.
• Preview failed to display anything other than the animated WordPress logo.
• Deleting a duplicated Reusable block deleted the original. Undo could not recover it.
• We restored it by changing the post type registration and removing it from trash.
• Some blocks that have been developed to replace shortcodes are easier to use.
• Herb demonstrated the UK Tides block that’s significantly easier to use than the original shortcode.
• anything else you can think of?
• List items expand while Saving! – NEW today
• The Columns block is much better than it used to be ( responsive up to a point), but still really tricky to use. Block Navigation helps a bit
• Autosave goes wild.
• Updates not appearing to take effect.

Buttons with underscores

The first problem was that the button block’s link was underlined. This was in TwentyFourteen. The problem still exists with v2.3.

The Button block is OK in this child theme of TwentySeventeen. Here’s a link to the TRAC that I raised.

Enter = new paragraph

Some users are used to writing content as lines, pressing enter between them. They don’t like the fact that a new paragraph is created every time they press enter. Nor do they like having to press Shift-Enter to get a line break.
One reason is because they want to be able to see the content. The vertical spacing between paragraphs is considered to be excessive. And it doesn’t represent the front end.

Workaround

• Use Classic editor block
• Use the Classic Editor

Essay with pictures

I’m not trying to create buttons. I just want to write an essay with pictures. Well I think the block editor has got that covered. It’s OK when the images are just inserted as image blocks.

But things are a bit trickier if you want to mess about with image size or placement. Especially if you want to see the text being wrapped around the images.

I partially failed to achieve this with my iPad. I didn’t manage to get any wrapping until I’d saved the post.

Writing JavaScript

Is it possible to write inline JavaScript? Will it survive the round trip?

Answer

You can use the HTML block. It’s tricky getting the right characters when using an iPad with a Logitech keyboard since single and double quotes get texturised automatically.

Small devices – no room to write

We suggested a number of approaches for dealing with narrow screens

• Top Toolbar
• Fullscreen Mode
• Spotlight Mode
• Hide settings

Note: The demo was being done with the screen ‘s resolution set to 1024 x 768. We were using a child theme of Twenty Seventeen ( wppompey/wp-pompey ) and the Twenty Nineteen theme ( local install ). Both sites were using WordPress 5.0.2.

Updates to this post were made using an iPad in landscape, with a similar resolution to the demo and a laptop. With a laptop you can scale the content smaller and large. An iPad can scale larger.

You can use Content structure and Block Navigation to see how your post is structured and easily switch between sections.

Preview takes a long time

The jury were out on this one. We’ll have to record a session. The big problem with preview at present is that it’s not showing the latest changes! Others have also experienced this. We’ll have to check later. Issue 12617

Preview never ended

We experienced at least one time where the Preview page never appeared. Another user has reported this but without any useful info. It may have been related to a failed update, an issue which was also reported without useful info… neither from the user nor from WordPress. I’ve been able to reproduce the problem very easily on my iPad, but have not tried in an easily debuggabe environment.

Explanation

Code in a plugin was causing updates to fail.

Deleting a duplicated reusable block

During a brief demo of saved blocks I duplicated one within the post, changed it then accidentally deleted it… trying to convert it back from reusable. I don’t remember seeing the message. The original block was also deleted. The User Experience was not good. Undo couldn’t undelete the original block. We found a way to get to the admin interface for the wp_block post type and were able to restore the block from the trash.

Already raised as 12791. In this issue there is mention of the Reusable blocks screen, which you can get to through Manage reusable blocks. But this link isn’t available when all your reusable blocks have been trashed.

Managing reusable blocks

I used a convoluted method in order to Undelete the deleted reusable block. Using my oik-types plugin I changed the definition of the wp_blocks post type to make it accessible from the dashboard. The easier way to get to the Manage reusable blocks page is to choose the All Pages menu item and change the URL altering the post_type parameter from page to wp_block.

Shortcode replacement blocks easier

Some blocks have been developed to build on the code already implemented by shortcodes. These blocks provide easier to use controls to set shortcode parameter options. The underlying PHP code for server side rendered blocks is unchanged. So the shortcodes can still be used if required.

Examples: CSV block to display data input as Comma Separated Values in multiple forms: table, unordered list, ordered list.

UK tides block much easier than the shortcode

The UK Tides block is a front end to the bw_tides shortcode, which expects a complicated tideurl parameter that takes two different forms depending on the source site for the tide times and heights. Here we see the output for Portsmouth for both source sites.

The block is much easier to use since the selection of Site and Port is now done from a selection list.

Columns block much better

In the example above the tide times and heights are displayed using the Columns block. It’s a lot better now, but still nowhere as advanced as some page builders.

Auto save goes wild

After a certain amount of editing the post is continually being auto saved, every 10 seconds or so, even though no content changes have been made. It’s not been confirmed to be associated with the Preview problem.

Updates not taking effect

Changes did not appear to have been saved. This is easily reproducible on this site. Preview does not show the latest content. It doesn’t show any of the additions that haven’t been explicitely saved.

To be investigated.