Page Builder Framework 2.0

[mapsteps]

Hey everyone,

Page Builder Framework 2.0 and the Premium Add-On 1.12 are now in Beta! 🎉 If you have any feedback, suggestions or run into issues, let's discuss it here.

Resources:

Download Page Builder Framework 2.0 Beta Download Premium Add-On 1.12 Beta Full Changelog Announcement Post

[gbruzzo]

Hello there, thank you so very much. All works smoothly on our test site

One matter noted: when hovering over the top menu entry with a submenu in offcanvas menu (mobile), the arrow is not highlighted. It only is when hovering over the arrow. On previous stable incarnations of the Framework, overing over the top menu would result in both the name and the arrow being highlighted.

[gbruzzo]

A few questions

1. About the Pagebuilder itself

There is currently a hook wpbf_content_open/close and a hook wpbf_inner_content_open/close

it would be very nice to get two further couples of hooks (I am referencing the page-sidebar.php template), First couple one below <div class="wpbf-grid wpbf-main-grid wpbf-grid-<?php echo esc_attr( $grid_gap ); ?>"> but above <?php do_action( 'wpbf_sidebar_left' ); ?> and a specular one after <?php do_action( 'wpbf_sidebar_right' ); ?> but above the closing div of <div class="wpbf-grid wpbf-main-grid wpbf-grid-<?php echo esc_attr( $grid_gap ); ?>">

Any content put here would be wrapped with both the container divs and the main-grid divs, yet sit on top of the sidebars

Second couple one just after <main id="main" class="wpbf-main wpbf-medium-2-3<?php echo wpbf_singular_class(); // WPCS: XSS ok. ?>"> and before <?php wpbf_title(); ?>

and a specular one after <?php wpbf_title(); ?> and before </main>

Any content placed at these hooks would be placed above/below main content. (there is a Wordpress hook for that, of course, but I'd rather assign content to hooks in an uniform way (e.g. using your custom sections), this way the architecture would not change as Gutenberg and other block editors evolve.

2. About the premium:

Why were the offcanvas menu hooks removed? We were hoping to put a widget there (a login, for example).

3. More General Question: will you make Custom Sections Gutenberg compatible in future (I gather Rest API is not enabled on these CPTs).

Cheers

Giacomo

[mapsteps]

Fixed https://github.com/MapSteps/Page-Builder-Framework/issues/14#issuecomment-470061714 with 0847bc92c92f0a2febd082b82f86c6621819b5e0

[gbruzzo]

Thank you very much for the change your implemented.

Now, if you hover over the first the whole changes bar inclusive of the arrow changes colour. As you hover over the downarrow, though, the css condition

.wpbf-mobile-menu > .menu-item a:not(.wpbf-submenu-toggle):hover {
    background-color: #xxxxx;
}

is not triggered anymore, and the background-color reverts to normal Ideally One would like a single hover condition to apply to both the first and the second (the menu link and the downarrow)

Might it be possible to wrap both in some div and apply the hover condition to that?

One could always then apply further conditions / transformations to the individual parts (say making the downarrow bold when hovering specifically above it etc).

2) Another matter I have noticed now, in the Customizer

Header > Mobile Navigation > Hover (hover font colour) governs simultaneously the colour of fonts when the mouse is hovering over the menu item but also the colour of fonts associated with 'current menu item'

could the two be separated?

[gbruzzo]

HI,

Allow me to also explain why I am asking for new hooks in https://github.com/MapSteps/Page-Builder-Framework/issues/14#issuecomment-470067166 (and originally here https://github.com/MapSteps/Page-Builder-Framework/issues/6)

Currently I can add widget or widget area shortcodes to the four hooks (and associated custom sections) you have in place (wpbf_content_open/close and wpbf_inner_content_open/close. I can wrap these shortcodes with the necessary divs to maintain all paddings and margins in order systematically across the pages or posts.

Shortcodes in custom sections associated with wpbf_content_open/close would be wrapped as follows:

<div class="wpbf-container wpbf-container-center">
<div class="wpbf-grid wpbf-main-grid wpbf-grid-small">
[shortcode]
<div>
</div>

Shortcodes in custom sections associated with wpbf_inner_content_open/close would be wrapped as follows:

<div class="wpbf-grid wpbf-main-grid wpbf-grid-small">
[shortcode]
</div>

I would very much like to have access to a hook that was within those divs, but sat above the sidebars. My thinking is - in future we might not be able to put a shortcode in a standard editor, but might need to use gutenberg blocks - adding divs to these might not be as simple a proposition, so having access to fully styled hooks would be useful

[mapsteps]

Hi @gbruzzo,

regarding the deprecated hooks – they have been replaced, not removed entirely. The hooks markup is now similar to the other menu variations which makes a lot more sense.

Here's how the markup now looks like for the off-canvas menu:

<div class="wpbf-menu-off-canvas wpbf-menu-off-canvas-right wpbf-visible-large">

    <?php do_action( 'wpbf_before_main_menu' ); ?>

    <nav id="navigation" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement" aria-labelledby="wpbf-menu-toggle">

        <?php do_action( 'wpbf_main_menu_open' ); ?>

        <?php do_action( 'wpbf_main_menu' ); ?>

        <?php do_action( 'wpbf_main_menu_close' ); ?>

    </nav>

    <?php do_action( 'wpbf_after_main_menu' ); ?>

    <i class="wpbf-close wpbff wpbff-times" aria-hidden="true"></i>

</div>

Regarding the sub-menu arrow – I think the problem in general is, that the sub-menu arrows became links. Thanks for pointing this out! :)

I'm going to change that back by turning them into buttons - so we're back at the old behaviour which I'd like to maintain for backwards compatibility.

[gbruzzo]

Hi there - uploaded the changes, structure is now

<li>
<a></a>
<button></button>
</li>

but the hover still only affects , not

through

.wpbf-mobile-menu > .menu-item a:hover {
background-colour: #xxxxx;
}

you target , not the

is it possible to wrap both and in a div and target that?

Cheers

[mapsteps]

Hi @gbruzzo,

I'm not sure what you mean. What I've done is, I brought back the behaviour as it was prior 2.0. The sub-menu arrow didn't have specific hover settings nor inherited the link color settings.

There's a color setting in the customizer to change the arrow color specifically.

[gbruzzo]

You are right - checking them (I have a parallel installation going with 1.0 code, and yes it was a span instead of a button then, but no hover settings, you are right) All is fine then, as far as the menus are concerned.

please let me know about the hooks though, if you find the time.

Thanks for the changes.

Giacomo