I'm creating a WP archive search to use with Woocommerce. on the page I have a bunch of search check boxes. Inside the block editor there doesn't seam to be anyway to change the markup of those checkboxes like there is in the classic editor when making a custom search view. This means the <checkbox><label><input></input></label></checkbox> markup is all I can get... I am not sure why this is the default as it is extremely limiting as far as styling goes. Having markup such as bootstraps lien caché would allow some much more easily styled checkboxes without the use of JS to apply a checked class to the label, because when you check an input it has a :checked attribute, however having the input nested inside of the label prevent any styling of the label to be affected by the :checked state and since you can not have ::before or ::after on an input, styling the checkbox with CSS only becomes impossible 🙁
Is there anyway to modify that checkbox markup, I recall in the classic views having that option, but inside this archive template I am out of luck.
Hi, if you go to Toolset > Settings > General tab, there is a section with Bootstrap settings. If you choose one of the Bootstrap 4 options "Toolset should load Bootstrap 4" or "The theme or another plugin is already loading Bootstrap 4", you should see the search filter markup adjusted on the front-end to implement sibling labels for checkbox inputs instead of parent labels for checkbox inputs.
Will this work in your case?
Oh wow, ok I didn't realize that adding Bootstrap would change some of the outputted markup from toolset. That will work fine for this site, is there any harm in using the " The theme or another plugin is already loading Bootstrap 4 " even when I am not, if all I want is the adjusted markup? . It would be awesome if there was just a toggle on the block element that say "enable bootstrap friendly markup" on the elements that change, because what would happen if someone styled there whole site based on the existing markup and then had to enable bootstrap in toolset for something else and didn't realize that the markup of some elements were changed? Also if we are going as far as changing the markup to be bootstrap friendly, would it not make sense to have a dropdown for "bootstrap style" and have "basic,circled" etc for the element, because if added the bootstrap css I would still have to manually add CSS to get the effect of a bootstrap checkbox because I can't add a class to the correct wrapping element anyways.
Oh wow, ok I didn't realize that adding Bootstrap would change some of the outputted markup from toolset.
Yes, the changes may not be apparent just from observing the results on the front-end of the site. You would have to inspect the page source or the source code to see the full scope of these configuration differences.
is there any harm in using the " The theme or another plugin is already loading Bootstrap 4 " even when I am not, if all I want is the adjusted markup?
"Harm" is totally subjective here and very much dependent upon your existing CSS styles. Anytime markup structure changes like this and your CSS selectors involve HTML elements and/or descendent selectors, there could be some impact.
It would be awesome if there was just a toggle on the block element that say "enable bootstrap friendly markup" on the elements that change, because what would happen if someone styled there whole site based on the existing markup and then had to enable bootstrap in toolset for something else and didn't realize that the markup of some elements were changed? Also if we are going as far as changing the markup to be bootstrap friendly, would it not make sense to have a dropdown for "bootstrap style" and have "basic,circled" etc for the element, because if added the bootstrap css I would still have to manually add CSS to get the effect of a bootstrap checkbox because I can't add a class to the correct wrapping element anyways.
Okay sounds like the Bootstrap 4 configuration isn't ideal for what you'd like to achieve. The legacy editor is probably the most practical solution here because there is no template editor for filter markup produced by the Block Editor.
"Harm" is totally subjective here and very much dependent upon your existing CSS styles. Anytime markup structure changes like this and your CSS selectors involve HTML elements and/or descendent selectors, there could be some impact.
Sorry I guess what I meant here is does selecting this bootstrap is already loaded, just change things like the markup of certain elements or is it going to actually be trying to register stylesheets that will error out? I have no problem working around the bootstrap markup as all my CSS on the theme is custom anyway.
Okay sounds like the Bootstrap 4 configuration isn't ideal for what you'd like to achieve. The legacy editor is probably the most practical solution here because there is no template editor for filter markup produced by the Block Editor.
Ya probably right, I keep trying to use the block editor and I get 90% there and realize I should have used the classic, if for no other reason than it it a million times more responsive making edits 🙁 it's a shame, and I wish that you guys would call it the "Advanced editor" instead of "legacy" because not all of the features are available in the block editor but legacy gives the impression that we should be switching.
sorry I should have also added what I meant for the bootstrap css. If I add bootstrap it's loading all the CSS for things like these checkboxes lien caché , however if I want my toolset inputs styled this way I need to target them like this in my theme. SCSS example... but what I was getting at is that I am now simply duplicating CSS that is already included in bootstrap and enqueued by toolset but toolset can not use it because I can't put .checkbox-circle class on my .form-group div! would the legacy editor allow me to do this I haven't tested that.
.wpv-custom-search-filter__input {
.form-check {
position: relative;
padding-left: 30px;
margin-bottom: 5px;
input {
opacity: 0;
position: absolute;
margin-left: -30px;
z-index: 1;
cursor: pointer;
&:checked + label::before {
background-color: #86c6ba;
border-color: #86c6ba;
}
}
input:checked + label::after {
font-family: 'FontAwesome';
content: "\f00c";
color: #fff;
display: inline-block;
position: absolute;
width: 30px;
height: 30px;
left: -8px;
top: 5px;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
}
label {
cursor: pointer;
position: relative;
&::before {
border-radius: 50%;
content: "";
display: inline-block;
position: absolute;
width: 20px;
height: 20px;
left: 0;
top: 2px;
margin-left: -30px;
border: 1px solid #cccccc;
background-color: #fff;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
&::after {
}
}
}
}
Sorry I guess what I meant here is does selecting this bootstrap is already loaded, just change things like the markup of certain elements or is it going to actually be trying to register stylesheets that will error out?
Selecting this option does not register any additional stylesheets or script files that will error out. The markup and classes applied to form elements may change, though.
but what I was getting at is that I am now simply duplicating CSS that is already included in bootstrap and enqueued by toolset but toolset can not use it because I can't put .checkbox-circle class on my .form-group div! would the legacy editor allow me to do this I haven't tested that.
Yes, you can add arbitrary CSS classes to the form-group div in the Custom Search editor panel after you insert custom search fields. The markup looks like this (I added .add-your-css-class-here):
<div class="form-group add-your-css-class-here">
<label for="wpv-book-tax">[wpml-string context="wpv-views"]Book Taxes[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="book-tax" type="checkboxes" url_param="wpv-book-tax"]
</div>
ok, great. just to be clear though that would only work in the legacy editor not for an archive search in a WordPress Archive template setup using the Custom Search Filter block?? I'm trying to use the block editor but I'm not really even sure why when I can comfortably write PHP, I think just that term of legacy made me feel I should use the blocks but for advanced layouts it's a lot slower to work in as you have to wait for much more server intensive page loads.
There is no way to convert a content template over to the legacy editor after it has already been setup is there?
It would be nice if there was a spreadsheet comparing features of the block editor and classic views so you could make a decision based on that on what to use, as I have felt a lot of pressure to move over and each time I do, I regret it. Will the classic view be supported for ever or is the plan to phase it out overtime?
just to be clear though that would only work in the legacy editor not for an archive search in a WordPress Archive template setup using the Custom Search Filter block??
The HTML markup changes introduced by turning on the Bootstrap 4 setting will still apply whether you use the Block Editor or legacy experience to create the WP Archive. However, additional arbitrary classes on the .form-group element are not possible in the Block Editor. That part of the generated filter output is not manageable in the editor. You have the ability to add arbitrary CSS classes to a different ancestor element using the Advanced configs for the filter block (see the attachment), but you cannot add to the .form-group element, its siblings or its descendant elements, using the built-in options available for the custom search filter block.
There is no way to convert a content template over to the legacy editor after it has already been setup is there?
I've created a new ticket to discuss this. Our policy is one topic per ticket, and the topic of conversion between editors is complex enough to discuss in a separate thread.
Will the classic view be supported for ever or is the plan to phase it out overtime?
The plan is to continue supporting the classic editor experience as long as our clients use it. I suspect fewer new features will be added to the legacy editor experience as time goes on. More new features will be added to the Block Editor experience over time, and those may be more or less compatible with the legacy editor. You can see that is already the case with some features like Masonry loops and custom collage loops.
