WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#27666 closed enhancement (fixed)

Set/Get the current URL in the Theme Customizer

Reported by: TJNowell Owned by: ocean90
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.4
Component: Customize Keywords: has-patch commit
Focuses: javascript, administration Cc:

Description (last modified by westonruter)

When opening the theme customiser, the url query parameter sets the page shown in the preview pane, however a user can navigate away by clicking links in the preview pane.

This is fine for global background colours, but becomes a problem if you try to do anything contextual with the customiser controls.

It would be useful to also set this URL. For example, if I have a control that configures the layout of the category archive, it would make sense to provide a means to navigate to a category archive automatically.

I would suggest this be done using PostMessage, and be implemented in the preview, so that calls like this:

api.instance('my_control').previewer.refresh();

could be used like this:

api.instance('my_theme_options[footer_image]').previewer.getURL();

Attachments (1)

27666.diff (5.3 KB) - added by westonruter 2 years ago.
Export Previewer instance to wp.customize.previewer, and utilize for Widget Customizer. Commits also pushed to GitHub: https://github.com/x-team/wordpress-develop/pull/15

Download all attachments as: .zip

Change History (11)

#1 @johnbillion
2 years ago

  • Keywords needs-patch added
  • Type changed from enhancement to feature request
  • Version set to 3.4

#2 @westonruter
2 years ago

  • Component changed from Administration to Appearance
  • Description modified (diff)

#3 @westonruter
2 years ago

I think what is being requested here is actually already possible. In the context of a control, you can access the preview's current URL and update the preview's URL via the associated setting, and the setting's previewer value:

wp.customize.controlConstructor.foo = wp.customize.Control.extend( {
	ready: function() {
		var url, control = this;

		// Example: get the current URL
		url = control.getPreviewUrl();
		
		// Example: set URL of preview to homepage
		control.setPreviewUrl( location.protocol + '//' + location.host );
	},

	getPreviewUrl: function () {
		return this.setting.previewer.previewUrl();
	},

	setPreviewUrl: function ( url ) {
		this.setting.previewer.previewUrl( url );
	}
} );
Last edited 2 years ago by westonruter (previous) (diff)

#4 @westonruter
2 years ago

However, something that is currently not good in the Customizer is that the Previewer instance is stored in a variable contained within a closure. It gets exported when each setting is constructed, but outside the context of the settings the variable is not available (customize-controls.js):

$( function() {
    // ...
    previewer = new api.Previewer({ /* ... */ })

In the Widget Customizer, this has necessitated doing something ugly in customize-widgets.js:

	/**
	 * Capture the instance of the Previewer since it is private
	 */
	OldPreviewer = api.Previewer;
	api.Previewer = OldPreviewer.extend({
		initialize: function( params, options ) {
			api.Widgets.Previewer = this;
			OldPreviewer.prototype.initialize.call( this, params, options );
			this.bind( 'refresh', this.refresh );
		}
	} );

This then allows the Widget Customizer to access the Previewer instance irrespective outside the context of any settings.

Ideally, the instance of the previewer would be exported as a property of wp.customize, e.g. wp.cutomize.previewer. This would then allow any JS in the Customizer to directly access the URL of the current preview via:

url = wp.customize.previewer.previewUrl();

And to set it via:

wp.customize.previewer.previewUrl( url );

@westonruter
2 years ago

Export Previewer instance to wp.customize.previewer, and utilize for Widget Customizer. Commits also pushed to GitHub: https://github.com/x-team/wordpress-develop/pull/15

#5 @westonruter
2 years ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 4.0

#6 @westonruter
2 years ago

On a related note, I submitted #28536 and supplied a patch which adds browser history and deep linking for navigation in Customizer preview.

#7 @westonruter
2 years ago

  • Owner set to ocean90
  • Status changed from new to reviewing

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.


2 years ago

#9 @nacin
2 years ago

  • Keywords commit added
  • Type changed from feature request to enhancement

#10 @SergeyBiryukov
2 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 29048:

Customizer: Export Previewer instance to wp.customize.previewer, and utilize for Widget Customizer.

props westonruter.
fixes #27666.

Note: See TracTickets for help on using tickets.