Web development (6) — full page

Forced upgrade to all WordPress.com sites (!)

“Classic” editing on WordPress.com — change-over to the new “Block” editor — good features, bad features, and some sizing differences between POST and PAGE.

Screenshot 2021-02-15 at 22.57.45

We had good warning, but hoped that it would not come to pass so soon. There was the option to accept the new “block editor” before it being forced upon us, but for those of us who did not sign up early we awoke one day in 2020 to the reality of the change.

It was always stated that we could still use the “classic” editor, and yes it is somewhat true, but in reality a lot of the classic flexibility, particularly within use of html code, has been lost. To begin with, a “classic block” has to be selected and that choice often disappears down the list of available blocks despite having used it frequently.

Then simple changes to code like use of “br” and removing paragraph spacing do not always remain in place.  Justified text option within classic mode is no longer listed, one has to open a text block to do that.

Now, it is true that there are many nice features within the new editor, but in comparison to the “Elementor” plug-in editor we use in our WordPress business plan, it has a long ways to go in terms of layout flexibility. Coding in the true classic sense would help to compensate, but without that, we can only hope that more goodies are coming along soon.  The new editing view is part of the problem – it no longer shows anything close to the real final result, the old view was much closer. So we need to move to a complete separate ‘preview’ tab to see what we will get, or use considerable guess-work along the way. And then comes the shock – it is VERY different – see our comparisons below.

Positive items.

We do applaud the options and visibility now given to responsive breakpoints (desktop/tablet/mobile); a look at the code shows the extent of this attention. There are now ‘widgets’ which can be used on a page or post (so not restricted to a side-bar) which allow embedding from social media as this example from Twitter. Really nice is to compare two images with a horizontal or vertical slider to move from one image to the next (last image on this Vevey model page).

But with layout, especially vertical spacing of videos, there are frustrating moments.

Blocks allow good, flexible, horizontal juxtaposition of images and text, or videos.  However, vertical spacing, particularly with videos is not intuitive and what we see on the editing page is far from useful. See our comparisons between edit page and actual update results below . . . first the editing page (white panel), which is spot-on to the result we were aiming at —and then the reality of what we get as output.

Screenshot 2021-02-14 at 18.40.27

Left image = blah

Right image = blah blah

Our next thought was maybe it could work better with Youtube, and in fact it does look better, but space above and blow the actual video remains, at least on the edit page, so the visual layout seems totally unclean again.  Youtube video does not self-size, but when we add ‘&w=450’ to the Youtube link (found by trial and error going back and forth between edit and preview) the 16×9 video takes up the full 16×9 space and all becomes well. The final result, using w=290 for a post and w=450 for a full width page, is good. WordPress edit page is very misleading and thus not helpful.

Screenshot 2021-02-15 at 23.52.59

Then we wondered if resizing our Vimeo examples also to w=400 would “help” the embedding. But the video blocks require a full URL and Vimeo doesn’t work that way for resizing within the URL, they use a shortcode instead. We discovered it is necessary to add a shortcode step prior to defining the video link – this next screenshot shows how the edit window looks for this shortcode block. This is all we get, there is NO actual video shown in the edit window! However, on a positive note, changing the video is much easier this way as the Vimeo (shortcode) reference remains visible and editable – so updating is a pleasure.

Screenshot 2021-02-16 at 15.10.43

Finally, our reward for persistence is we do get the desired results of close and consistent spacing between videos and the next block (photos in this case) using the Vimeo shortcodes. (Note: the video embed size needed to be 500 for this full width page)

Left image = blah

Right image = Blah blah

Youtube shortcode – using same youtube link as in the previous example above:

Screenshot 2021-02-16 at 14.21.02

Back to POST