WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#36600 closed defect (bug) (invalid)

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

Reported by: helloguna1 Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.5
Component: Customize Keywords: reporter-feedback
Focuses: javascript Cc:

Description

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.

Change History (8)

#1 @DrewAPicture
4 years ago

  • Focuses javascript added

#2 @westonruter
4 years ago

  • Keywords reporter-feedback added

@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.

#3 @helloguna1
4 years ago

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.
---

#4 @westonruter
4 years ago

@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( /* ... */ ) );
                }
        } );
} );

#5 @helloguna1
4 years ago

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.

#6 @westonruter
4 years ago

@helloguna1 so this ticket can be closed now?

#7 @helloguna1
4 years ago

heloo @westonruter,

Yes, thanks a lot!

#8 @westonruter
4 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.