Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP - 3.5 Customizer update #20

Open
wants to merge 10 commits into
base: master
from

Conversation

@johnregan3
Copy link
Owner

commented Aug 7, 2016

Adds:

  • Full Customizer support
  • Updated Codemirror JS, minified and includes only the specific module needed.
  • Removing a CSS rule in the customizer does not change the display visually.
  • Test for compatibility with WP 4.6
  • Flesh out true bi-drectional data binding
johnregan3 added 10 commits Aug 7, 2016
sprintf( 'var _simpleCustomCSSCustomizerExports = %s;', wp_json_encode( $exports ) )
);
wp_add_inline_script( $customizer_js, 'simpleCustomCSSCustomizer.init();', 'after' );

This comment has been minimized.

Copy link
@westonruter

westonruter Aug 12, 2016

You could eliminate the extra global _simpleCustomCSSCustomizerExports and instead do this:

wp_add_inline_script(
    $customizer_js,
    sprintf( 'simpleCustomCSSCustomizer.init( %s );', wp_json_encode( $exports ) ), 
    'after'
);

Then the init function can look at the argument instead of looking at the global. This is better for testing and encapsulation.

}

self.init = function() {
$( document ).ready( function() {

This comment has been minimized.

Copy link
@westonruter

westonruter Aug 12, 2016

Better to do api.bind( 'ready', function() { here because it ensures the Customizer is initialized, which happens after DOM ready.

});
};

self.loadCustomizer = function() {

This comment has been minimized.

Copy link
@westonruter

westonruter Aug 12, 2016

Shouldn't this short-circuit if the editor was already set up? Otherwise, the editor will be re-initialized every time the section is expanded.

// When our Customizer section is expanded, load CodeMirror.
api.section( control.section() ).container.on( 'expanded', function() {
self.loadCustomizer();
});

This comment has been minimized.

Copy link
@westonruter

westonruter Aug 12, 2016

Interesting use of expanded event here. I guess I forgot this was triggered. I think you should do this:

api.section( control.section(), function( section ) {
    // ... Now we're guaranteed that section exists.
} )

changeEvent = new UIEvent( 'change' );
self.textarea.dispatchEvent( changeEvent );
});

This comment has been minimized.

Copy link
@westonruter

westonruter Aug 12, 2016

I'm not seeing two-way data binding here. I only see an edit to the code editor being pushed into the setting. But what happens when the underlying setting is changed? Will the editor get updated? Like you should be able to open your console and be able to do: wp.customize( settingId ).set( 'body { color:red }' ) and this should result in the editor control also being updated.

self.textarea.value = editorVal;

changeEvent = new UIEvent( 'change' );
self.textarea.dispatchEvent( changeEvent );

This comment has been minimized.

Copy link
@westonruter

westonruter Aug 12, 2016

Since we have jQuery, probable better to do:

$( self.textarea ).val( editorVal ).trigger( 'change' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.