WordPress.org

Make WordPress Core

Opened 10 months ago

Last modified 2 weeks ago

#37964 accepted enhancement

Allow customizer controls to be encapsulated by accepting pre-instantiated settings

Reported by: westonruter Owned by: westonruter
Milestone: 4.9 Priority: normal
Severity: normal Version: 3.4
Component: Customize Keywords: has-patch needs-unit-tests needs-testing
Focuses: javascript Cc:

Description (last modified by westonruter)

In #35926 the ability to add setting-less controls was made possible. The work here only went halfway, however. Consider wanting to re-use a control in a standalone context (see #29071), where the settings used in the control are just plain wp.customize.Value instances. Controls should allow pre-instantiated Value (Setting) objects to be passed in as params.settings. And when this is done, there would be no api( settingId... ) deferrals.

So one should be able to create a new control like this:

var control = new wp.customize.Control( 'product_color', {
    type: 'color',
    params: {
        settings: {
            'default': new wp.customize.Value( '#000000' )
        }
    }
} );

Instead of having to do:

wp.customize.create( 'product_color', 'product_color', '#000000', {} );
control = new wp.customize.Control( 'product_color', {
    type: 'color',
    params: {
        settings: {
            'default': 'product_color'
        }
    }
} );

The goal is to allow controls to be encapsulated and to be able to use them in standalone contexts or embedded inside of other controls.

Related:

Attachments (2)

37964.0.diff (5.2 KB) - added by westonruter 10 months ago.
37964.1.diff (8.8 KB) - added by westonruter 8 months ago.

Download all attachments as: .zip

Change History (23)

#1 @westonruter
10 months ago

  • Description modified (diff)
  • Keywords has-patch added

#2 @westonruter
9 months ago

Related: #38077 (Facilitating embedding customizer controls outside of sections)

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


9 months ago

#4 @celloexpressions
9 months ago

The patch looks like an improvement to me, although I haven't dug into this code before.

#5 @westonruter
9 months ago

  • Owner set to westonruter
  • Status changed from new to accepted

The patch for this is being tested and improved by @sayedwp.

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


9 months ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


8 months ago

#8 @westonruter
8 months ago

As part of this, we should also defer adding the elements with the input/setting links until the setting is actually ready, even if the settings all exist up front. This will ensure that delay embedding their contents (or use content template) until ready will also also work as expected with data-customize-setting-link.

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.


8 months ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


8 months ago

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


8 months ago

@westonruter
8 months ago

#12 @westonruter
8 months ago

  • Keywords needs-unit-tests needs-testing added

@sayedwp Would you give the latest patch a try?

#13 @sayedwp
8 months ago

Sure I will test it today

Last edited 8 months ago by sayedwp (previous) (diff)

#14 @sayedwp
8 months ago

@westonruter Since the setting less control would not have notifications set by default its throwing error that setting.notifications is undefined, so we probably want to add a condition for control.setupNotifications() ?

I am able to create control using api.DynamicControl using wp-customize-posts plugin without any errors however when I try to add a setting less control in other sections, the control is created and I can see that in console but it does not append/render in the section.

Here is the code I tried

(function( api ) {

	api.section.bind( 'add', function( section ) {
		if ( 'colors' === section.id ) {

			var addSettingLessControl = function addSettingLessControl() {
				var control, id = 'product_color';

				control = new api.Control( id, {
					type: 'color',
					params: {
						section: section.id,
						label: "Test Control",
						active: true,
						type: 'color',
						input_attrs: {
							'data-customize-setting-link': id
						},
						settings: {
							'default': new api.Value( '#000000' )
						}
					}
				} );

				api.control.add( control.id, control );
			};

			section.expanded.bind( function( expanded ) {
				if ( expanded ) {
					addSettingLessControl();
				}
			} );
		}
	} );

})( wp.customize );

Am I doing something wrong here?

Tested with "'4.7-alpha-38934'" and twenty-sixteen theme.

This ticket was mentioned in Slack in #core by stevenkword. View the logs.


8 months ago

#16 @westonruter
8 months ago

  • Milestone changed from 4.7 to Future Release

Sorry I ran out of time. 😞 We'll have to hit this in 4.8.

@sayedwp Any 4.7 checks you have in feature plugins should be bumped to 4.8.

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.


8 months ago

#18 @westonruter
5 months ago

  • Milestone changed from Future Release to 4.8

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


7 weeks ago

#20 @jbpaul17
7 weeks ago

  • Milestone changed from 4.8 to 4.8.1

Per yesterday's bug scrub, we're going to punt this to 4.8.1.

#21 @westonruter
2 weeks ago

  • Milestone changed from 4.8.1 to 4.9
Note: See TracTickets for help on using tickets.