Convert posts from Classic to Block Editor — how to convert X shortcodes without ruining the layout?

[TipMaster]

I have an old blog that I’d like to update and then use more in future. To this end, I’d like to convert all the existing posts and visual approach from the Classic Editor to the Block Editor. However, for the life of me I can’t work out how to do this because some things are nested with the old X shortcodes and I can’t see how to do something similar with the Block Editor because these things don’t nest anymore.

Please see here for example of an old post I want to convert: https://tipsunzipped.com/407/use-confluence-to-version-control-office-documents-best-practices

Note that all the blue boxes in this example are built from X shortcodes. The last blue box is inside an ordered list, and it includes both text and an image with its caption.

The problem is, when I try to convert to the Block Editor, the blocks split things up so that the image is no longer inside the blue box, but after it instead (and the final paragraph adopts the tiny caption text style too).

How do I convert these old posts, and how should I do this sort of thing in future with the Block Editor? It doesn’t seem possible to nest things anymore, so how are we supposed to create more advanced panels like this? I’ve tried various advanced block plugins, but none of them seem to do what I want (ideally, I’d have not only a coloured background and mixture of text/lists/images, but also an icon and a title — for warnings, tips, examples and such.)

[TipMaster]

Before conversion from Classic to Block Editor, nesting with shortcode:

[TipMaster]

After conversion from Classic to Block Editor, nesting broken and seemingly no way to recreate the original effect:

[tristup]

Hi @TipMaster,
Thanks for reaching out.

From example URL and the given screenshots, it’s very hard to investigate the cause behind this issue, I would like to request you to share the credentials of the site where you are having the issue.
So it can be compared with the example URL which you have given here. Please provide the following site details in a secure note.

– WordPress Site URL & Admin URL
– Exact Page/Post URL where the issue can be found
– WordPress Admin username / password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[TipMaster]

Righto, I’ll set up a staging copy with the access you need shortly. To create your Admin account I’ll need to enter an email address - what email address should I enter?

[marc_a]

Hi @TipMaster,

You can use any dummy email address to create an account and give us the username and password with an administrator role in the secure note.

Hope that helps.

Thank you.

[TipMaster]

Details above, as requested. To replicate the issue:

1. Go to post ID 407 and edit in Block Editor: https://staging2.tipsunzipped.com/wp-admin/post.php?post=407&action=edit

2. Note the [x_alert type=“info”] shortcode near the end of the content, and the following facts:

• The shortcode is nested inside an ordered list.
• Both text and an image (with caption) are nested inside the shortcode.

3. Convert the Classic block to Blocks. Note that the nesting is broken. I can’t work out how to achieve anything like the original result through Blocks.

[ruenel]

Hey @TipMaster,

The given credentials do not work for us. Can you please double-check it.

Thanks.

[TipMaster]

Sorry, not sure what happened there. New (working) password posted in latest secure note.

[ruenel]

Hello @TipMaster,

Are you referring to this alert box?

It is using this shortcode:

[x_alert type="info"]<sup>†</sup>To get the current version number: In the <strong>Attachments</strong> page, click the 'twisty' arrow (highlighted yellow, 1) — Confluence lists the versions with their numbers, with the latest version at the top (2).

[caption id="attachment_424" align="aligncenter" width="175"]<img class="size-thumbnail wp-image-424" src="https://staging2.tipsunzipped.com/wp-content/uploads/2019/09/confluence-attachment-version-history-175x180.jpg" alt="Confluence attachment version history" width="175" height="180" /> Confluence attachment version history.[/caption]

[/x_alert]

The problem with the new Gutenberg block editor is that there is a separate paragraph block and shortcode block. This is why when you mix your shortcode in a text content, it will not display correctly in the block preview. Meanwhile, the editor does not display the shortcodes in the preview as well.

Hope this helps.

[TipMaster]

Yes, but my question is how on earth are we meant to convert old content like this to work with the new Block editor? X hasn’t replaced the old shortcodes with anything comparable for the Block editor — and it doesn’t seem to be possible to nest things like we used to be able to do.

So am I missing something obvious? Or, if we want to use the Block editor, are we forced to design things in a completely different way that doesn’t use any nesting? That seems… odd — and seems to make it even harder for non-programmers to design advanced content that mixes step-by-step instructions with images, examples, warnings and so on. Surely I must be missing something obvious, it can’t be this limited now… can it?

[tristup]

Hi @TipMaster,

The Gutenberg and the Cornerstone are two different page builders and they have certain pre-defined structures on their own. It may not be possible for the builders to support each and every element of other builders.

As you know, the Cornerstone/Content page builder is now used to construct the pages, but in the near future, you can have full control over blog layouts, posts, index pages, and archive pages using Layout Builder. More details about the Layout Builder was posted in our June Status Report here: https://theme.co/content/status-report-june-02-2020

Thanks

[TipMaster]

@tristup

Okay, if I understand this right:

X shortcodes were useful and flexible in the old Classic Editor, not only in Cornerstone - but that was a bonus, not a central feature as far as Themeco was concerned. Fair enough. As a user it is frustrating to lose this flexibility in the migration from Classic to Block editor; but I can understand that this might not have been a part of the core mission in X.

So, it seems that I need to find a completely new approach to lay things out, because blocks are very limited in the way that visual elements can be nested. Frustrating, but a limitation of the Block Editor and not a fault with X.

On the plus side, this gives me a reason to redesign - I wasn’t especially happy with the dense look of information that I had anyway. I’m just not entirely sure how to achieve what I want with blocks - I can’t be the first to be baffled by this problem. But I’ve looked at a number of block packages and none of them really achieve what I’m looking for. So I’ll have to take a very different approach to what I expected. Anyway, that’s for me to figure out - not your problem.

As for the Layout Builder, it sounds interesting. But it sounds like it will help us to design the overall template for posts - not to design the visual appearance of the actual content (like we do with blocks)? So, a good thing for sure, but a solution to a different problem than the one I’ve posed here? (Though I may have misunderstood completely.)

[prakash_s]

Hello @TipMaster,

You are quite correct on this. But I can assume that you are trying to redesign or format the content of the posts using our content builder. If that case, I will suggest you go to your Dashboard -->X-Settings-->General

You can enable content builder for the posts from here

Please have a look at the given screenshot

Thanks

[TipMaster]

Thanks, but I never use Cornerstone content builder as the editor for Post content because:

(a) Many plugins use meta boxes that I can’t access while I’m editing in Cornerstone - so it is not convenient.

(b) It still isn’t obvious to me how I would create the nested visuals that I want - I daresay I could figure out something acceptable with custom HTML/CSS in the Content area element, but then I might as well use custom HTML in the Block editor, where I also have access to the meta boxes of other plugins.

I’d love to discover that I’m missing something really simple, but it seems like no matter which editor I use I have to work surprisingly hard to build visuals that are commonplace in technical writing (such as an instructional step which also has an information and/or example box which then contains icon, title, text, list and image).

[tristup]

Hi @TipMaster,

As suggested in the previous thread, I would also like to suggest you go through the Cornerstone and the elements it has. I strongly believe that you may find a good solution for you.
Here is the link to documentation where you can find the elements by searching: https://theme.co/docs

Thanks

[TipMaster]

I’m afraid I just don’t understand what you’re telling me.

I use the Cornerstone content editor to design major pages such as ‘About’ and ‘Home’. That’s fine — it can be used to craft some nice layouts.

But while you are using Cornerstone, you can’t see and access the metaboxes etcetera that are present when you edit with the Classic or Block editors. For this reason, it seems like Cornerstone is a non-starter for posts, irrespective of the nesting issue. That is, I don’t use Cornerstone for posts, because so many plugins depend upon the user having easy access to the metaboxes while they work.

Am I missing the point?

[christian]

Hey @TipMaster,

The meta boxes that will be available within Cornerstone are the ones X provides. That is because it isn’t feasible to take into account all the meta boxes of the 3rd party plugins.

If you need to configure a meta box, you simply need to use the WordPress Post Editor. You still can access that even if you’re using Cornerstone for Posts. You understandably need to go out of Cornerstone though.

Hope that helps.

[TipMaster]

@christian

That’s what I thought. Okay, thanks for clarifying, at least now I know I’m not missing anything daft.

But as I say… editing posts with Cornerstone feels like a non-starter to me, because there are just too many useful plugins where it is important to have convenient access to the metaboxes — and being forced to switch out of Cornerstone and back into the WordPress editor to check or change things in metaboxes is not convenient.

It isn’t just the metaboxes either. Many plugins allow the user to insert content into the posts (such as affiliate plugins which can insert product image, affiliate URL, buy now button, and so on). These plugins aren’t in the Cornerstone UI of course, so as far as I can tell it isn’t possible to use those plugins with post content created in Cornerstone, even if the metaboxes weren’t a problem.

I’d love to use a single editor for my whole site — but post editing seems to demand too many sacrifices when it comes to posts, for all the reasons I mention above. As it is, Cornerstone is great for pages but I find it hard to imagine that anyone uses it for posts unless they have simple sites that don’t/won’t really use content plugins.

That seemed odd, which is why I thought I might be missing something. But if that is just how it is then that’s how it is — but I think you should be careful about advising people to use Cornerstone for posts given such big drawbacks. (And it still wouldn’t solve the nesting issue I started with in this thread.)

[christian]

Hey @TipMaster,

We only recommended Cornerstone because the post layout you described could only be done easily using it.

I’d recommend that you wait for our Layout Builder to be released as that allows for the creation of custom single post templates so you basically can setup areas within your own custom template to plug other content whether static or dynamic. It’s still outside of the WordPress editor though so if you really need the WordPress editor but still want a builder, you need to find a 3rd party plugin for that or have a developer create one for your needs.