¿Es posible extender WP Customize JS Methods?

Me pregunto si es posible extender los métodos del apiobjeto anónimo wp-admin/js/customize-control.js. Necesito sobrescribir uno de estos métodos con mi propia lógica personalizada, pero sospecho que no es posible ya que está envuelto en una expresión de función invocada de inmediato:

/* globals _wpCustomizeHeader, _wpMediaViewsL10n */
(function( exports, $ ){
// code
})( wp, jQuery );

Por lo que puedo ver, no puedo extender el prototipo desde el objeto de la ventana porque se ejecuta de forma anónima y no está disponible window.wp.customize. ¿Alguna idea de si tal cosa es posible? Incluso se menciona la anulación de esto en la documentación / descripción de los métodos .toggle (): https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-controls.js#L110 , pero yo No estoy seguro de si quieren decir simplemente bifurcando todo el archivo JS, quitando la versión de WP y colocando la suya propia o si significan algo diferente.

Tenga en cuenta que parece que debería ser posible con, wp.customize.{method}.extend({ foo: // replace method foo here })pero eso solo se aplica a las clases / objetos de base pública, no a las dewp-admin/js/customize-control.js

javascript front-end api theme-customizer Brian
fuente

Aunque apies anónimo, es solo un sinónimo de wp.customize(ver línea 3) que es accesible globalmente. Sin embargo, parece que el Modelo de otro objeto utilizado para los controles llama a la readyfunción, por initializelo que es posible que no tenga la oportunidad (es decir, siempre sea demasiado tarde) de sobrescribir los métodos: ¿qué está tratando de extender?

Bonger

En teoría, eso tiene sentido: sugerencia apreciada. En mi caso, sentí que este enfoque era bastante confuso y logré encontrar otra solución adecuada para mi caso de uso. Sin embargo, una respuesta con código de trabajo puede ser útil para alguien que no tiene otra opción para su caso de uso. El rendimiento con lo que estaba planeando hubiera sido horrible de todos modos.

Brian

No soy el experto JS. Pero agrego en un pequeño tema el script del personalizador para actualizar siempre mis extensiones. Trabajo wp.customizey agrego funciones a este objeto. vea aquí un ejemplo de fuente: github.com/bueltge/Documentation/blob/master/js/…

bueltge

Respuestas:

Mejoraré mi pequeño comentario sobre su pregunta. Pero de nuevo la pista; No soy un experto en JS. La siguiente fuente, sugerencias, solo se usó para jugar con el Personalizador para diferentes comprobaciones, ejemplos, como mi sandbox .

wp.customize

La comprensión de la interfaz del personalizador de temas de WP se centra en comprender el objeto wp.customize javascript. El wp.customizeobjeto es importante y debe configurarlo al inicio.

Ejemplo en vivo

El siguiente pequeño ejemplo demuestra esto. Al principio configuré la var apicon el objeto del personalizador. Después de esto, configuré mis campos personalizados en apiy los realicé con una pequeña fuente jQuery para actualizar el resultado para la vista previa en vivo.

( function( $ ) {
    var api = wp.customize;

    // Site title and description.
    api( 'blogname', function( value ) {
        value.bind( function( to ) {
            $( '#header h1 a, #footer a.site-name' ).html( to );
        } );
    } );

    api( 'blogdescription', function( value ) {
        value.bind( function( to ) {
            $( '#header p.site-description' ).html( to );
        } );
    } );

} )( jQuery );

Configuraciones y controles

Los objetos de control se almacenan wp.customize.controly los objetos de configuración se almacenan en wp.customize. La clase de valor tiene muchas funciones, allí puede ayudarlo.

instancia (id): obtenga un objeto de la colección con el id especificado.
has (id): devuelve verdadero, si la colección contiene un objeto con el id especificado y es falso de lo contrario.
add (id, value): agrega un objeto a la colección con un id y un valor especificados.
remove (id): elimina el objeto de la colección.
create (id): crea un nuevo objeto con el constructor predeterminado y agrégalo a la colección.
cada uno (devolución de llamada, contexto): itera sobre los elementos de la colección.

Ajustes personalizados

Con estas funciones podemos mejorar nuestra configuración personalizada.

var api = wp.customize,
    mysetting = api.instance( 'my_custom_setting' );

también utilizable para una matriz

var api = wp.customize,
    mysetting = api.instance( 'my_custom_settings[my_custom_setting_field]' );

Obtener

Ver el resultado en la consola.

console.log( api.instance( 'my_custom_settings[my_custom_setting_field]' ).get() );

Conjunto

También puede cambiar los valores de configuración mediante la función set.

api.instance( 'my_custom_settings[my_custom_setting_field]' ).set( 'my new value' ) );

Obtener con el control, como objeto

console.log( api.control.instance( 'my_custom_setting_field' ) );

Fuente útil

wp-admin / js / personalizar-controles.js
wp-Incluye / js / personalizar-vista previa.js
wp-Incluye / js / personalizar-base.js

bueltge
fuente