[Resolved] Help with block editor and CSS ID's on select list

[Author]

Posts

[John Mac]

Tell us what you are trying to do?
I'm trying to work with the Toolset/WP Block editor. It's the worst crap I have ever worked with! I need some quick example or clarity on how I should use it to get the design I need.

Is there any documentation that you are following?
Not helping

Is there a similar example that we can see?
hidden link

What is the link to your site?
hidden link

[Waqar]

Hi John,

Thank you for sharing a detailed video and I'd be happy to assist.

Before moving to the specific question, it is important to explain the role of the new Blocks plugin. The new Blocks plugin is not an editor or page builder on its own but it offers a number of Blocks that are designed to extend WordPress' new Gutenberg editor ( https://wordpress.org/gutenberg/ ).

The goal behind the Gutenberg and Blocks is to minimize the need for custom code and reliance on third-party page builders like Divi, Elementor, etc.

Both, the Gutenberg editor and the Toolset Blocks are continuously being improved based on the community's input and they have in fact grown a lot from where they started.

This also means that any feedback and/or suggestions around the editor's interface should be directed towards WordPress, whereas we'll be eager to hear about any feedback and/or suggestions around the Toolset Blocks in that editor.
( you'll find the Toolset Blocks in orange color, under the Toolset tab - screenshot: hidden link )

As for showing different styles or content based on different select type custom field value, you can use Toolset's conditional block:
https://toolset.com/documentation/user-guides/gutenberg/using-toolset-conditional-block/

For each available select option in that field, you'll add a separate conditional block and set it to show when the value is equal to that respective target option. Any block enclosed inside will only show, when the condition is true.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[John Mac]

Hey Waqar

Okay, thanks for the explanation of the Blocks editor. I see what you mean. But it's still a hopeless building system. When making more advanced and custom designed sites, there must be better ways of accessing the features of Toolset?

Specifically, what other options for page-builders or design tools do I have that gives the same access to Toolset custom fields and post relations data?

Regarding custom colors for custom-field list values, do you mean I have to manually keep adding a Conditional block to check for every option in the custom field dropdown list?

I mean, why don't you just make this simple and add the option for us to give class names on the values at least? + generating a random number that stays fixed

I need that confirmed before I pile up a bunch of IF blocks.

[Waqar]

Hi John,

Thanks, for writing back.

Since the blocks based Gutenberg editor is the direction WordPress is heading in, we're also encouraging our users to use our specialized blocks in that editor.

But for someone who would prefer not to use that editor, these are the alternatives available:

1. You can keep using the classic editor for creating Toolset's content templates and views where HTML code and shortcodes are used to build the content.

OR

2. You can pick a third-party page builder like Elementor for designing the structure/layout of the page, and the Toolset's shortcodes can be placed in that content for the dynamic elements.

You'll find information on using Toolset with other page builders at:
https://toolset.com/documentation/user-guides/page-builders/

In summary, it all depends on which page builder/editor a user prefers and is comfortable with.

Your understanding is correct and if you're going to use the conditional block for showing content in different styles, then you'll be adding one block for each case (i.e. each select option's value).

If that sounds like too much work, one alternative is to create class names based on the select field values, and then add custom CSS code for targeted styling.

Suppose, I have a select field with slug "post-select", with 3 options having values "one", "two" and "three". And I'd like to show "Some Text" in different colors, based on the selected option.

The HTML part with the field's value will look like this:

<div class="special-cont-[types field='post-select' output='raw'][/types]">
Some Text
</div>

And the custom CSS code for each dynamic class name will look this:

.special-cont-one {
color: green; 
}

.special-cont-two {
color: blue; 
}

.special-cont-three {
color: yellow; 
}

regards,
Waqar

[John Mac]

I added classes to the values like you suggested. Works well, thanks.