Wordpress - Gutenberg icon block not showing in the edit but showing in the block panel and website - Stack Overflow

admin管理员组

文章数量:1245767

I am starting to build an Open Source and Free theme based on bootstrap.

Basic things as layout and using PHP to create a custom homepage, now I need to make custom blocks.

And here begins my problem... What I can't figure out is why my custom icons created with icomoon are not displayed inside the gutenberg editor, but they are displayed on the block panel and on my website...

├── assets
│   ├── bootstrap
│   │   ├── css
│   │   │   └── bootstrap.min.css
│   │   └── js
│   │       └── bootstrap.bundle.min.js
│   ├── fontawesome
│   │   ├── css
│   │   │   └── all.min.css
│   │   ├── webfonts
│   │   │   ├── fa-brands-400.ttf
│   │   │   ├── fa-brands-400.woff2
│   │   │   ├── fa-regular-400.ttf
│   │   │   ├── fa-regular-400.woff2
│   │   │   ├── fa-solid-900.ttf
│   │   │   ├── fa-solid-900.woff2
│   │   │   ├── fa-v4compatibility.ttf
│   │   │   └── fa-v4compatibility.woff2
│   │   └── LICENSE.txt
│   ├── icomoon
│   │   ├── fonts
│   │   │   ├── icomoon.eot
│   │   │   ├── icomoon.svg
│   │   │   ├── icomoon.ttf
│   │   │   └── icomoon.woff
│   │   └── icomoon.css
│   ├── javascript
│   │   └── navbar-scrolled.js
│   ├── default-banner.png
│   ├── default-logo.png
│   └── default-thumbnail.png
├── build
│   ├── row
│   │   ├── block.json
│   │   ├── index.asset.php
│   │   ├── index.css
│   │   ├── index.js
│   │   ├── index-rtl.css
│   │   ├── view.asset.php
│   │   └── view.js
│   └── service-card
│       ├── block.json
│       ├── index.asset.php
│       ├── index.js
│       ├── style-index.css
│       ├── style-index-rtl.css
│       ├── view.asset.php
│       └── view.js
├── node_modules  [932 entries exceeds filelimit, not opening dir]
├── src
│   ├── components
│   │   └── icon-picker
│   │       └── icon-picker.js
│   ├── row
│   │   ├── block.json
│   │   ├── edit.js
│   │   ├── editor.scss
│   │   ├── index.js
│   │   ├── save.js
│   │   ├── style.scss
│   │   └── view.js
│   └── service-card
│       ├── block.json
│       ├── edit.js
│       ├── editor.scss
│       ├── index.js
│       ├── save.js
│       ├── style.scss
│       └── view.js
├── 404.php
├── footer.php
├── functions.php
├── header.php
├── index.php
├── package.json
├── page.php
├── single.php
└── style.css

What I am trying to achieve is to create a row, insert one "Service Card" in it and just see my icon. The only thing is I can't see the icon (picto).

Here is the icon-picker I used from Gutenberg Tricks :

const icons = [
    {
        name: "Maintenance",
        value: "icon-Picto_Maintenance"
    }
]

const IconPicker = ({
    attrName,
    attrValue,
    setAttributes
}) => {
    return (
        <div className="icon-picker-wrapper">
            <h3>Icon Picker</h3>
            <div className="section-icon">
                <span className={`picto ${attrValue}`}></span>
            </div>
            <div className="icons-list">
                {
                    icons && icons.map((icon, index) => {
                        return (
                            <div key={index} className="icon-item">
                                <button onClick={() => setAttributes({
                                    [attrName]: icon.value
                                })}>
                                    <span className={ `picto ${icon.value}` }></span>
                                </button>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}

export default IconPicker;

And my service-card/edit.js file :

import { useBlockProps, InspectorControls, RichText } from '@wordpress/block-editor';
import { PanelBody } from '@wordpress/components';
import IconPicker from '../components/icon-picker/icon-picker';

export default function Edit( { attributes, setAttributes } ) {
    const { icon = "icon-Picto_Maintenance", title = "Service Title", description = "Service Description" } = attributes;

    return (
        <div {...useBlockProps({ className: "col-12 col-md-6 col-lg-4 mt-0 mb-5" })}>
            <div className="service-card card bg-transparent shadow-none mb-1 align-items-center">
                <div className="card-body text-center">
                    <p className="card-text">
                        <span className={`picto ${icon}`} ></span> { }
                    </p>
                    <RichText
                        tagName="h2"
                        className="card-title"
                        value={title}
                        onChange={(val) => setAttributes({ title: val })}
                        placeholder="Titre..."
                    />
                    <RichText
                        tagName="p"
                        className="card-description"
                        value={description}
                        onChange={(val) => setAttributes({ description: val })}
                        placeholder="Description..."
                    />
                </div>
            </div>

            <InspectorControls>
                <PanelBody title="Icône du bloc">
                    <IconPicker
                        icon={icon}
                        setAttributes={setAttributes}
                    />
                </PanelBody>
            </InspectorControls>
        </div>
    );
};

Te functions.php related to the blocks :

// Ajout des css et js pour l'éditeur de blocs
function timber_it_enqueue_editor_assets() {
    wp_enqueue_style(
        'icomoon', 
        get_template_directory_uri() . '/assets/icomoon/icomoon.css',
        [],
        filemtime(get_template_directory() . '/assets/icomoon/icomoon.css')
    );
    wp_enqueue_style(
        'timber-it', 
        get_template_directory_uri() . '/style.css',
        [],
        filemtime(get_template_directory() . '/style.css')
    );

    // Charger Bootstrap dans l'éditeur (s'il n'est pas déjà chargé globalement)
    wp_enqueue_style(
        'bootstrap-editor',
        get_template_directory_uri() . '/assets/bootstrap/css/bootstrap.min.css',
        [],
        false,
        'all'
    );

    wp_enqueue_script(
        'bootstrap-editor',
        get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.bundle.min.js',
        [],
        false,
        'all'
    );
}
add_action('enqueue_block_editor_assets', 'timber_it_enqueue_editor_assets');


// Enregistrer les blocs personnalisés
function timber_it_register_blocks() {
    $blocks_dir = get_template_directory() . '/build/';
    $block_folders = array_filter(glob($blocks_dir . '*'), 'is_dir');

    foreach ($block_folders as $block_folder) {
        register_block_type($block_folder);
    }
}
add_action('init', 'timber_it_register_blocks');

And an image to see it :

Results

I will try to release it soon so everyone can have it.

Thank you for any help.

本文标签：