Một widget trong Customizer có thể được sử dụng một lần hay không (tức là bị vô hiệu hóa sau khi thêm 1 thể hiện)?

Tôi đang thực hiện một nhiệm vụ hàng đêm để xây dựng một tiện ích sử dụng một lần tùy chỉnh .

Ngay sau khi một phiên bản của nó đã được thêm vào bảng điều khiển bên trong Tùy biến , điều khiển của nó trên bảng Widgets có sẵn sẽ được hiển thị dưới dạng bị vô hiệu hóa (hoặc thay vào đó, biến mất hoàn toàn).

Đây là giao diện của nó (lưu ý tiện ích trực quan đã bị vô hiệu hóa ở bên phải):

Widget tùy chỉnh đã được đăng ký và tất cả, nhưng tôi bị kẹt ở yêu cầu sử dụng một lần.

Thông số kỹ thuật

• Quy mô không phải là một vấn đề. Chỉ có thể giả sử chỉ có 1 thanh bên được đăng ký. Cách tiếp cận có thể là giới hạn việc sử dụng widget ở mức 1 trên mỗi thanh bên hoặc 1 trên tất cả các sidebars đã đăng ký, cả hai đều ổn như nhau cho đến bây giờ.
• Trang Widgets ở mặt sau không phải là vấn đề. Điều này không bắt buộc để hoạt động tốt như nhau trên trang Widgets bên dưới Giao diện ở mặt sau. Nó chỉ phải làm việc trong Customizer.

Câu hỏi

1. Khoảng 250 năm trước, tất cả các vật dụng được sử dụng là một lần sử dụng. Có ai biết một cách hợp pháp để đưa những lần đó trở lại và làm cho một widget tùy chỉnh chỉ được sử dụng 1x thông qua API Widget không?
2. Nếu không (mà tôi giả sử sau khi đã đào qua một số lượng lớn các tệp cốt lõi), có lẽ tôi đã trì hoãn cách tiếp cận dựa trên CSS (các sự kiện con trỏ, lớp phủ phần tử giả, bất cứ điều gì). Bất kỳ loại linh hồn nào cũng giúp tôi hiểu biết về Trình tùy chỉnh / JavaScript rất hạn chế của tôi với cách tiếp cận cơ bản về cách thêm / xóa lớp CSS chuyên dụng vào điều khiển tiện ích trong bảng điều khiển có sẵn của Wap (bên phải) khi một ví dụ của tiện ích đã nói đã được thêm / xóa vào bảng điều khiển bên?

Những gì tôi đã cố gắng cho đến nay

• Đào qua một đoạn công bằng của các tập tin cốt lõi.
• Đọc cái này , cái này , nhưng không ai có vẻ thực tế.
• Tinkered với jQuery sự kiện widget-added, widget-updatedvà widget-synced, nhưng bỏ lỡ một sự kiện cho “phụ tùng đã xóa”.

Cảm ơn tấn trước!

Cập nhật: Dĩ nhiên, tôi chưa đưa bằng chứng về khái niệm của mình lên một repo công khai, tất nhiên sẽ làm được.

Giải pháp

Tôi đã gói giải pháp vui lòng chia sẻ bởi kraftner bên dưới trong một bằng chứng về plugin khái niệm trên GitHub .

Tiếp cận

Vì vậy, tôi đã xem xét điều này và cách tiếp cận của tôi là:

1. Khi khởi chạy trình tùy biến, hãy đi qua tất cả các thanh bên và tắt tiện ích ngay khi bạn tìm thấy bất kỳ việc sử dụng tiện ích nào
2. Bất cứ khi nào một thanh bên được thay đổi làm điều đó một lần nữa.

Khước từ

Điều này có những hạn chế sau:

1. Đây là lần đầu tiên tôi say mê chơi với API API của Trình tùy chỉnh. Vì vậy, tôi có thể đang làm những thứ không hiệu quả ở đây, nhưng này, nó hoạt động;)
2. Chỉ quan tâm đến Tùy biến (như đã nêu trong câu hỏi)
3. Không thực hiện bất kỳ loại xác nhận phía máy chủ. Nó chỉ che giấu giao diện người dùng, vì vậy nếu bạn lo lắng về việc ai đó phá vỡ giao diện người dùng thì điều này không đầy đủ / không an toàn.
4. Vô hiệu hóa widget là toàn cầu - bất kỳ việc sử dụng nào trong bất kỳ thanh bên nào đều vô hiệu hóa widget trên toàn cầu.

Mật mã

Bây giờ chúng ta đã hoàn thành Tuyên bố miễn trừ trách nhiệm, hãy xem mã:

(function() {
    wp.customize.bind( 'ready', function() {

        var api = wp.customize,
            widgetId = 'foo_widget',
            widget = wp.customize.Widgets.availableWidgets.findWhere( { id_base: widgetId } );

        /**
         * Counts how often a widget is used based on an array of Widget IDs.
         *
         * @param widgetIds
         * @returns {number}
         */
        var countWidgetUses = function( widgetIds ){

            var widgetUsedCount = 0;

            widgetIds.forEach(function(id){

                if( id.indexOf( widgetId ) == 0 ){
                    widgetUsedCount++;
                }

            });

            return widgetUsedCount;

        };

        var isSidebar = function( setting ) {
            return (
                0 === setting.id.indexOf( 'sidebars_widgets[' )
                &&
                setting.id !== 'sidebars_widgets[wp_inactive_widgets]'
            );
        };

        var updateState = function(){

            //Enable by default...
            widget.set('is_disabled', false );

            api.each( function( setting ) {
                if ( isSidebar( setting ) ) {
                    //...and disable as soon as we encounter any usage of the widget.
                    if( countWidgetUses( setting.get() ) > 0 ) widget.set('is_disabled', true );
                }
            } );

        };

        /**
         * Listen to changes to any sidebar.
         */
        api.each( function( setting ) {
            if ( isSidebar( setting ) ) {
                setting.bind( updateState );
            }
        } );

        updateState();

    });
})( jQuery );

Sidenote: Sử dụng customize_controls_enqueue_scriptshành động để thêm tập lệnh.

Bạn có thể có thể mở rộng điều này để giới hạn nó hoạt động trên cơ sở mỗi thanh bên thay vì trên toàn cầu. Tôi muốn nghe việc kích hoạt một thanh bên và sau đó đếm các vật dụng trong thanh bên đó. Nhưng tôi cũng không tìm thấy thời gian để xem xét điều đó.