Website development (6)

Forced upgrade to all WordPress.com sites (!)

“Classic” editing on WordPress.com — change-over to the new “Block” editor — good features, bad features, and as yet unknown!

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. ( Full page version (with size criteria updated)

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 is reserved above and blow the Youtube for the play bar and the title, so the visual layout is totally unclean again.  Here is the result with two YouTube videos: (We needed to add ‘&w=290’ to the Youtube link as the result does not self-size). As can be seen, the reserved space above and below the 16×9 video remains on the edit page but in reality the result is perfect now !!!)

Screenshot 2021-02-16 at 24.47.35


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. It is possible to use a Youtube short code in the same way, our example further down . . .

Screenshot 2021-02-15 at 21.38.25

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.


Left image = blah

Right image = Blah2


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

Screenshot 2021-02-16 at 11.45.58


Full page version (with size criteria updated).


#

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.