内联编辑保存在多个中继器中不起作用

Question

代码只是一个简单的小部件。这里我只是添加了两个带有文本控件的中继器，我想对其进行内联编辑。现在，在小部件中内联编辑工作正常，但无法保存。 但是，当我仅使用一个中继器时，它就可以完美地进行内联编辑和保存。 现在我使用这个 add_inline_editing_attributes 进行内联编辑。那么要保存两个中继器的内联编辑文本我应该做什么？

protected function register_controls() {
    $this->start_controls_section(
        'content_section',
        [
            'label' => esc_html__( 'Test Plugin', 'test-plugin-td' ),
            'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
    );

    $repeater = new Repeater();
    $repeater->add_control(
        'text',
        [
            'label' => __( 'Business Hour', 'test-plugin-td' ),
            'type' => \Elementor\Controls_Manager::TEXT,
            'label_block' => true,
            'placeholder' => __( 'First Name', 'test-plugin-td' ),
            'default' => __( 'First Name', 'test-plugin-td' ),
            'dynamic' => [
                'active' => true,
            ],
        ]
    );
    $this->add_control(
        'business_hours',
        [
            'label' => __( 'Test Plugin', 'test-plugin-td' ),
            'type' => \Elementor\Controls_Manager::REPEATER,
            'fields' => $repeater->get_controls(),
            'default' => [
                [
                    'text' => __( 'First Name', 'test-plugin-td' ),
                ],
                [
                    'text' => __( 'Last Name', 'test-plugin-td' ),
                ],
            ],
            'title_field' => '{{{ text }}}',
        ]
    );

    $this->end_controls_section();


    $this->start_controls_section(
        'content_2section',
        [
            'label' => esc_html__( 'Test Plugin', 'test-plugin-td' ),
            'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
    );

    $repeskeater = new Repeater();
    $repeskeater->add_control(
        'text2',
        [
            'label' => __( 'Business Hour', 'test-plugin-td' ),
            'type' => \Elementor\Controls_Manager::TEXT,
            'label_block' => true,
            'placeholder' => __( 'First Name', 'test-plugin-td' ),
            'default' => __( 'First Name', 'test-plugin-td' ),
            'dynamic' => [
                'active' => true,
            ],
        ]
    );
    $this->add_control(
        'business_2hours',
        [
            'label' => __( 'Test Plugin', 'test-plugin-td' ),
            'type' => \Elementor\Controls_Manager::REPEATER,
            'fields' => $repeskeater->get_controls(),
            'default' => [
                [
                    'text' => __( 'First Name', 'test-plugin-td' ),
                ],
                [
                    'text' => __( 'Last Name', 'test-plugin-td' ),
                ],
            ],
            'title_field' => '{{{ text2 }}}',
        ]
    );

    $this->end_controls_section();
}

protected function render() {
    $settings = $this->get_settings_for_display();
    echo '<ul class="test-plugin-td">';
    foreach ( $settings['business_hours'] as $index => $item ) :
        $text_key = $this->get_repeater_setting_key( 'text', 'business_hours', $index );
        $this->add_inline_editing_attributes( $text_key );
        ?>
        <li class="business-hour-item">
            <span <?php $this->print_render_attribute_string( $text_key ); ?>>
                <?php echo esc_html( $item['text'] ); ?>
            </span>
        </li>
        <?php
    endforeach;
    echo '</ul>';

    echo '<ul class="test-plugin-td">';
    foreach ( $settings['business_2hours'] as $index => $item ) :
        $text_key = $this->get_repeater_setting_key( 'text2', 'business_2hours', $index );
        $this->add_inline_editing_attributes( $text_key );
        ?>
        <li class="business-hour-item">
            <span <?php $this->print_render_attribute_string( $text_key ); ?>>
                <?php echo esc_html( $item['text2'] ); ?>
            </span>
        </li>
        <?php
    endforeach;
    echo '</ul>';
}

Answer 1

我建议一些修复：

1. 使用中继器的唯一密钥： 每个中继器的项目必须具有不同的密钥以避免冲突。确保“text”和“text2”等控制键在各自的中继器中是唯一的。

2. 注册内联编辑以获得正确的键： 当您调用 add_inline_editing_attributes 时，您必须确保它引用适当的中继器和控制键。

3. 确保中继器设置键是唯一的： 适当地使用 get_repeater_setting_key 为每个特定的中继器和控件注册内联编辑属性。

并更新了渲染功能：

protected function render() {
$settings = $this->get_settings_for_display();

// Render the first repeater
echo '<ul class="test-plugin-td">';
foreach ( $settings['business_hours'] as $index => $item ) {
    $text_key = $this->get_repeater_setting_key( 'text', 'business_hours', $index );
    $this->add_inline_editing_attributes( $text_key, 'none' );
    ?>
    <li class="business-hour-item">
        <span <?php $this->print_render_attribute_string( $text_key ); ?>>
            <?php echo esc_html( $item['text'] ); ?>
        </span>
    </li>
    <?php
}
echo '</ul>';

// Render the second repeater
echo '<ul class="test-plugin-td">';
foreach ( $settings['business_2hours'] as $index => $item ) {
    $text2_key = $this->get_repeater_setting_key( 'text2', 'business_2hours', $index );
    $this->add_inline_editing_attributes( $text2_key, 'none' );
    ?>
    <li class="business-hour-item">
        <span <?php $this->print_render_attribute_string( $text2_key ); ?>>
            <?php echo esc_html( $item['text2'] ); ?>
        </span>
    </li>
    <?php
}
echo '</ul>';}