Selective refresh finds selected selector throughout the whole theme/site.

[helloguna1]

Hello,

As I was updating a theme to use $wp_customize->selective_refresh->add_partial, I noticed that if I were to have a CSS selector of let's say .portfolio-item, it will not only target the selector in the page that I'm viewing, but also everything that has the same selector in ALL pages.

This causes it to go "white", refresh, and go "white" again depending on how many items it has found with the selector.

The problem worsens as the callback function also applies to the items that were not intended to be used on.

For example,

Option for Home page:

  $wp_customize->selective_refresh->add_partial( 'section_portfolio_display_num_items', array(
      'selector'            => '.portfolio-items',
      'container_inclusive' => false,
      'render_callback'     => 'customize_partial_section_portfolio_items',
  ) );

Option for the portfolio page:

  $wp_customize->selective_refresh->add_partial( 'portfolio_page_display_num_items', array(
      'selector'            => '.portfolio-items',
      'container_inclusive' => false,
      'render_callback'     => 'customize_partial_portfolio_page_items',
  ) );

If I were to change section_portfolio_display_num_items setting, the .portfolio-items in the Portfolio page will be refreshed by the render_callback (of section_portfolio_display_num_items).

It this the intended result of selective refresh?

Thanks.

[westonruter]

@helloguna1 Welcome to Trac.

You should make sure the selector is as specific as possible to avoid refreshing items unnecessarily. If you only want the partial to be on the homepage, then conditionally add it if ! is_front_page().

It's hard to understand exactly what is going on with your example without seeing it. If you have a screencast that depicted the problem, that would be best.

[helloguna1]

Hello @westonruter,

Thanks for the feedback. You're getting my point exactly. I was wondering if it was a bug but it seems like it isn't.

---
"make sure the selector is as specific as possible"

I have tried nesting selectors..

selector' => '.page-template-portfolio .portfolio-items',

but it doesn't work.
---

[westonruter]

@helloguna1 and it doesn't work in that it causes a full page refresh unexpectedly? This would be due to the selector not matching anything and so the fallback_refresh behavior then kicks in.

You should only add this partial when this page template is being rendered. For example, wrap it in a is_page_template( 'page-template-portfolio.php' ) conditional. Like this:

<?php
add_action( 'customize_register', function( WP_Customize_Manager $wp_customize ) {
        add_action( 'wp', function() use ( $wp_customize ) {
                if ( is_page_template( 'page-no-sidebars.php' ) ) {
                        $wp_customize->selective_refresh->add_partial( 'portfolio_page_display_num_items', array( /* ... */ ) );
                }
        } );
} );

[helloguna1]

Thank you @westonruter, sorry I did not explain that clearly. It doesn't work as in nothing happens, not even a refresh.

As for trying to get things to work, I fully understand what I have to do now. I was trying to figure out if using CSS selectors to target pages would be better or I have to resort to functions like is_page_template() to get the job done.

Since selective refresh was meant to "reduce code", I thought CSS would be a shorter way to do so. Thanks again.

[westonruter]

@helloguna1 so this ticket can be closed now?

[helloguna1]

heloo @westonruter,

Yes, thanks a lot!