带滑块的自定义古腾堡块

Question

我正在使用 Boostrap 为滑块创建一个 Gutenberg 块。我不知道如何才能仅在循环内的第一个 post 上插入“活动”class，如有任何建议，我们将不胜感激。

这是我的编辑文件：

import { Component, RawHTML } from "@wordpress/element";
import { RichText, BlockControls, InspectorControls, AlignmentToolbar} from "@wordpress/editor";
import { __ } from "@wordpress/i18n";
import { withSelect } from "@wordpress/data";
import { decodeEntities } from "@wordpress/html-entities";
import { Toolbar, PanelBody, BaseControl, ColorPicker, FontSizePicker, RangeControl, TextControl, SelectControl } from "@wordpress/components";
import { dateI18n, format, __experimentalGetSettings } from '@wordpress/date';


class SliderEdit extends Component {

    onChangeCategories = (categories) => {
        this.props.setAttributes({postCategories: categories.join(',')})
    }
    onChangeNumberOfPosts = (numberOfPosts) => {
        this.props.setAttributes({numberOfPosts})
    }

    render() {
       
        const { className, attributes, setAttributes, categories, posts} = this.props;
        const { 
            postCategories,
            numberOfPosts,
        } = attributes;
        const dateFormat = __experimentalGetSettings().formats.date;  
     
        return(
            <>
                <InspectorControls>
                    <PanelBody
                        title={__('Loop Settings', 'df-slider-b')}
                    >
                        <div class="df-cat-multiple">
                            <SelectControl
                                multiple
                                label={__("Categories","df-blocks")}
                                help={__('You can select multiple categories!','df-blocks')}
                                onChange={this.onChangeCategories}
                                options={categories && categories.map(category => ({value: category.id, label: category.name}))}
                                value={postCategories && postCategories.split(',')}
                            />
                        </div>
                        <RangeControl
                            label={__("Number of Posts","df-blocks")}
                            help={__('Set -1 to get all posts','df-blocks')}
                            value={ numberOfPosts }
                            onChange={ this.onChangeNumberOfPosts }
                            min={-1}
                            max={10}
                        />
                    </PanelBody>
                </InspectorControls>

                {(posts && posts.length > 0) ?
                    <div id="carouselDFControls" class="df_height_carousel_block carousel slide" data-ride="carousel">
                        <div class="carousel-inner"> 
                            {posts.map( post=> (  
                                <>
                                    {post && post._embedded && post._embedded['wp:featuredmedia'] &&
                                        <div class="carousel-item active"> 
                                            <img src={ post._embedded['wp:featuredmedia'][0].source_url } /> 
                                        </div>          
                                    }
                                </>
                            ))} 
                            <a class="carousel-control-prev df-carousel-control-prev" href="#carouselDFControls" role="button" data-slide="prev">
                                <i class="icon-arrow-left"></i>
                            </a>
                            <a class="carousel-control-next df-carousel-control-next" href="#carouselDFControls" role="button" data-slide="next">
                                <i class="icon-arrow-right"></i>
                            </a>
                        </div>  
                    </div>   
                    : <div>{posts ? __("No posts found","df-blocks") : __("Loading...","df-blocks")}</div>
                }
            </>
        )
    }
}

export default withSelect(

    (select, props) => {
        const { attributes } = props;
        const { numberOfPosts, postCategories } = attributes;
        let query = { per_page: numberOfPosts}
        if(postCategories) {
            query['categories'] = postCategories;
        }
        
        return {
            posts: select('core').getEntityRecords('postType', 'post',{_embed: true} ),
            posts: select('core').getEntityRecords('postType', 'post', query ),
            categories: select('core').getEntityRecords('taxonomy','category', {per_page: -1})
        }
    }
)(SliderEdit);

如果我不在第一个 post 中添加“活动”class，轮播将无法工作。

此致

丹尼斯

Answer 1

您可以在 map 函数中使用 index 参数。如果索引是 0 它是循环中的第一项。

{ posts.map( ( post, index ) => (
    <div className={ `carousel-item${ index === 0 ? ' active' : '' }` }>
        ...
    </div>
) }

此外，您想在 React 中使用 className 而不是 class。

带滑块的自定义古腾堡块

Custom Gutenberg Block with Slider

block

gutenberg-blocks