[Resuelto] Support for new shortcode structure in post layouts created in the Divi Library

[Autor]

Mensajes

[herreV]

Hello I'm a Divi user and have been using Toolset & Divi together from Divi's first release.

Those days it needed lots of customisation, but with the growth in popularity lot's of plugins became available making development / designing easier and easier for this combination.

One of these Plugins in the Custom Post Type Injector from Sean Barton (see: hidden link and hidden link).

What this plugin basically does is offering an interface where you can use divi library layouts for custom post types.

When using the standard wordpress interface for these posts, the divi layout set by the CTP Layoyut Injector is used... but when activating the Divi builder on this post, the Divi Builder design will be used. So this offers the best from both words... a standardised look and feel... which could still be overwritten with using the Divi Builder.

The only issue is, the new Types shortcodes don't work in this setup. You need to transform them back with the [ and ] ...

It would be great that the new shortcodes would also work in this setup... as this offers the possibility to add links in the modules and more.

I can provide you with a test version of this CPT plugin if needed... or if you need more info... please shoot.

Thanks in advance,
Herre

[Beda]

The new ShortCode syntax is used when you insert the ShortCodes in a page-builder or with the Toolset ShortCodes button on the WP Admin Bar.

They should always be executed, since Toolset recognizes the particular syntax perfectly fine and we added this new syntax because of issues surging when the ShortCodes where executed too early.

Now, as far I understand from the description, the new syntax is used when you insert our ShortCodes within elements created by the plugin you mention. And as I understand, those are not executed after.
To confirm this, I need:

- a copy of the named plugin
- the steps to replicate the issue

I enable a private reply where you can share a Link to the Plugin you use (as example, thru Google Drive).

Thank you for the cooperation!

[Beda]

I understand the steps, thank you.

This is not how we suggest to use DIVI with Toolset.

The idea is to create the "repeating" items with Toolset - this means you create for example Content Templates, which you apply to Post types or single posts, and in them you style and design with DIVI provided editors.

Your approach is somewhat doing the opposite.
It uses DIVI layouts as the "repeating" item and then Toolset as the inner styling and designing elements.
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/#displaying-custom-content-on-front-end
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/create-templates-for-custom-post-types-with-divi-builder-and-toolset/

We also added features where you can control Content Templates with DIVI settings.

As you see, the supported workflow is somehow the exact "other" way around as you used it.
We do not officially support the usage of DIVI layouts and Toolset Contents this way.

There is one more detail:
The Layout Injector.
The name suggests it injects the layout late, very late, on the Front End only.
This will break probably every ShortCode, no matter whether from Toolset or even a Custom ShortCode.
It's too late to execute it, at this point.

To confirm this I installed both the Plugin and Theme, and replicated this situation.
I see the issue, but can easily solve it by using the classic syntax.

This means you can use [types field='field-slug'][/types] instead of {!{types field='field-slug'}!}{!{/types}!}

What I will do is confirm with the Developers that they are aware of this - and I agree that for the sake of usability we either would need to print the correct Syntax with the GUI, or add support for the new Syntax instead in those global layouts - but as said, this might be not possible due to the nature of how the Layout is applied.

I will discuss this - you can rest assured that we will evaluate this and I will update you here with any news I will get.

For now I suggest to either use only the suggested approaches or change the syntax of the ShortCodes

[herreV]

Hi Beda,
thank you for your detailed reply...

I understand what you're trying to tell me about how you would use Toolset in combination with Divi. But to be honest... that simply doens't work the way it should.

Toolset Content Templates aren't loaded the way Divi loads the Divi Builder Layouts. Please have a look at the attached images.

I'm a Toolset user for many years and love your product. I'm also a Divi user since its first release. I've been combining Divi and Toolset from day one. I love the combination. With the Toolset supporting the use of the Divi Builder in content template, I was jumping up sky high / glad... but sadly it didn't work out as I was hoping. You can see the differences in the attached images.
In the past (when Divi was released, I would create Toolset Content Temaplates containing Divi Builder Shortcodes. Combined with custom single-{post_type}.php it worked out great. But as you probably can imagine it was a hell of a job when layout changes had to be made.

Then Sean Barton came up with the CPT Layout Injector. That was a huge time saver... As you can see, you use Divi Library Layouts. Even better, when you're activating the Page Builder in a custom post, it uses that design... when you don't enable the divi builder in the post... it uses the layout set with the CPT Layout injector.
So from that moment on, our projects could be finished in a much shorter time frame... a small change could be made in the layouts.
For some modules that needed settings from toolset, i would still create a toolset content layout and add the Divi builder shortcode in it.

When Toolset anounched the new short code structure... I was even jumping higher that last time... making a dance throught the office.. as you can image, it would be the time saver of the year. It would be possible to add Toolset shortcodes in the Divi Builder Modules. Think about image urls etc. But nope... it doen't work... 🙁

I directly discovered that the old shortcodes do work in the CPT Layout Injector... so that is how I'm still using it. But with every new project... I was sad... that it doesn't work as what I was hoping too...

So that's why I decided to open this topic...

Please have a look at the images, then you should directly see why I don't use the Toolset way..

INFO ON THE IMAGES:
builder layout.jpg --> this is the layout created with Toolset Content Template (use divi builder option)
Toolset Layout Settings.jpg --> the settings, there you can see i've chosen full width etc...
Toolset.jpg --> this is the output of the Layout.

What you can see, the layout is loaded within a container that isn't full width... it contains padding / margins on all sides.

CPT injector.jpg --> Output of the exact same layout, but now loaded using the layout injector. This is what an experienced Divi user would expect... full width... no margins / paddings around the sections etc.

Best regards,
Herre

[Beda]

I unterstand.

Let me help you sort this out, as I now analyzed this in depth.

1. We have a number of BUGs with the DIVI theme integration.
https://toolset.com/known-issues/?wpv_post_search=divi&wpv_aux_current_post_id=399043&wpv_view_count=401205-TCPID399043&errata-status%5B%5D=1

Some of them you mention as well.

2. There are style issues surging from how DIVI HTML is coded, we are aware of this, but cannot solve it right now:
https://toolset.com/forums/topic/style-conflicts-with-bootstrap-and-3rd-party-plugins-or-themes/

3. We do not suggest to use DIVI and Toolset this way.

The correct way, and this also works with the DIVI Layouts, is this:
- create a CPT with Types
- create some CF's with Types
- create your Layout with the DIVI builder (use the new syntax)
- create a CT with Views
- edit the CT with the Builder
- apply the layout created with Builder previously to the Content Template (inserted from the DIVI library).

This is how it works, and also what we suggest.

I understand that in light of the BUGs that make all these suggestions rather redundant, you chose another solution.

What I can suggest for now are either of both solutions:
- the suggested approach or
- use manually edited ShortCodes

I will ask to add a Checkbox to the GUI, where you can choose what syntax to use.
That could eventually also come in handy in other situations, I think.

[herreV]

Beda,

Thank you for your detailed response, however I have the feeling we won’t come to a solution as your point of view is fully focused on point “3. We do not suggest to use Divi and Toolset this way”

I’ve been a Divi user since it’s first release, have been using Toolset in combination with Divi from the first release of Divi. This works fine, can be managed with no problems at all.

I’ve been using the CPT Layout Injector also since it’s first release, as this simply saves a huge amount of time. This plugin handles the need of creating predefined Divi Layouts and use them as default on Post Types, but at the same time allowing the user to enable the divi builder for themselves and create a post using the Divi Builder. In other words, when not using the Divi Builder and simply adding a title, content and when present also post fields, these will be used with the standard Divi Layout set by the CPT Layout Injector.
But when the user activates the Divi Builder, then the default layout won’t be used. Then simply the Divi Layout created with the Divi Builder when creating the post will be used.
But I think you already figured this out.

This approach has been used in lot’s of my projects which I simply can’t change and there is no need for it to change… as like you already mentioned, the old shortcodes can be used. Although these can’t be used as Divi Module values en for those modules I still need to create Content Templates to output the desired content / look and feel.

Let me respond to your points:
“1. We have a number of BUGs with the DIVI theme integration.”
Indeed, and that’s one of the reasons I am not using this new functionality. There are simply to many issues to use it in our ongoing projects. The Divi settings are a great idea, but they simply don’t come near the wanted effect.

“2. There are style issues surging from how DIVI HTML is coded, we are aware of this, but cannot solve it right now”
Like I mentioned in the previous response, full width? Not working… Paddings (also with Toolset not loading Bootstrap) not as wanted. So that means lots and lots of custom CSS work which I don’t need at all when using my current work-around.

By the way, thank you for those topics, as I didn’t read them yet.

“3. We do not suggest to use DIVI and Toolset this way.”
Well the reason for my way of working is already mentioned at you own responses… There are BUGs with Divi Theme Integration… There are style issues how Divi is coded… well it isn’t how Divi is coded… it is how Divi / Toolset / Bootstrap is coded. There are conflicts on ID’s and Classes that both or even the three of them used I guess.
You already tried to push me in the direction of this process in an earlier response:
- create a CPT with Types
- create some CF's with Types
- create your Layout with the DIVI builder (use the new syntax)
- create a CT with Views
- edit the CT with the Builder
- apply the layout created with Builder previously to the Content Template (inserted from the DIVI library).

But as you know, this does not have the wanted output. Full width isn’t full width…
- there are additional unwanted margins / paddings…
- there are alsomissing paddings / margins missing

Please have a look at the attached images…

Image 1. Toolset.jpg
This is the output of your approach.
The Divi settings set in the CT are fullwidth and show no Title.
As you can see, it isn’t full with at all!! The blue section is still in the middle… ?!?
Also the padding above the blue section shouldn’t be there, even when the top and bottom margins of the blue section have been set at 0px. (while this shouln’t be needed at all, have a look at Image 2. Divi.jpg)

Image 2. Divi.jpg
This is how the post would look like when using the Divi Bulder on a Post…

Image 3. CPT Layout Injector.jpg
This is how the Posts looks when using my current approach , the CPT Layout Injector.

So search for the differences and you can guess why I use which approach….

I fully understand that a Toolset Supporter / Developer etc wants to push me into using the Toolset approach. But come on, you can’t be serious if you see these differences.

Hopefully you can forward my requests to the developers and maybe there will be a solution in the future. But I have the feeling we won’t come to the same level in terms of agreeing on the current approach / needed output.

REMARK: has there been a change in approach of enabling the new shortcodes? I created a new wordpress install to create these images and didn’t see the new shortcode structure… the old ones where being used. Latest Divi and Toolset Plugins were used.

Regards,
Herre

[Beda]

Herre, I had prepared a reply as long as 2 pages, but then I recognized that here, I seem to have misunderstood what is happening.

1. We introduced a new ShortCode Syntax, and silly me believed this is ensuring a later execution of our ShortCodes.
2. This is not entirely true. It is not about execution, as ShortCodes obviously use do_shortcode() or our own wrapper, wpv_do_shortcode(). No matter what syntax you use, finally.
3. It is, in truth, about sanitization.

Please read this document:
https://toolset.com/version/views-2-5/ > New supported syntax for shortcodes

I am sorry the whole trouble, this was based on my misunderstanding of why the ShortCode syntax is used (or, how).

It does not invalidate what I said about the way to use Toolset with the builders or DIVI in general.

The problem here seems that by injecting the layout somehow the conversion back to [shortcode] syntax does not happen.

I need to analyze this as to me it seems a compatibility issue and not something that we should wait for a feature to be implemented.

Let me see together with the 2nd Tier Mohammed what we can find.

Eventually adding a choice what syntax to output just would hide the error or conflict.

We will see what is the best solution to this and feedback to you.

PS
No, there have not been any changes, I just used the DIVI / Injector and it inserts the new syntax.

[herreV]

Hi Beda,
looking forward to the results 😉

I fully understand your approach and way you would like me / us to work with toolset... but as long as the Content Templates aren't outputting the same way as Divi normally would... this approach not working for me as we need to use lots of custom CSS that conflicts again when we want to use other approaches.

The Full width option etc in the Content Templates isn't working as it should. Let me say it in other words, if the Content Templates would output the same html / look and feel as when using the CPT Layout Injector or simply said the same as the Divi Builder would... then I would already be using the Toolset Approach. That is the approach I would normally follow for WordPress Projects, but for Divi this simply isn't working out of the box as we would love to see.

Keep up the great work guys!

Regards,
Herre

[Beda]

Mohammed Debugged this, and as it turns out this is a problem that can be adjusted in the named Plugin.

We use the "the_content" filter to get the '{!{' and replace them with '['.
This means we convert the new syntax to the "normal" syntax so it works just like a normal shortcode.

It seems this plugin should adjust it's code to allow the ShortCode to be executed in their "the_content" filter.

We will try to contact them about this, it can be helpful if you can notify the developers about the issue as well.

[herreV]

Hi Beda & team...

Today I noticed that I didn't reply last week... I was sure I've pressed the send button...

What I wanted to let you all know is that I really do appreciate your help, time and effort!

Last Thursday I've opened a ticket at the plugin developer, hopefully you guys also did. Looking forward to their reply also.

Best regards,
Herre

[Beda]

I am about to.

I will keep you in the loop here.

[herreV]

Just a status update...

I've added a comment to my own ticket at the plugin developer support... as i didn't receive any response at all.

So i was wondering if you guys already contacted the plugin developer and if you already received an answer or not.

Regards,
Herre

[Beda]

The author of the plugin created an updated version of the plugin that will be released soon (if it's not already released).
The updated version fixes the issue.

We can close this ticket.

[herreV]

Hi Beda,
Thank you... !

Indeed I already had contact with Sean and het already mailed me the edited beta-version which seems to be working. Thank you for your support.

regards,
Herre