Jak przedłużyć blok galerii w Gutenberg?

Gram z Gutenbergiem przed włączeniem go do rdzenia i chciałbym wiedzieć, jak rozszerzyć istniejący blok galerii, aby zmienić jego wyświetlanie. Na przykład zamiast siatki miniatur chciałbym wyświetlić pokaz slajdów z obrazami. Czy to możliwe? Jeśli tak to jak? Każda pomoc będzie mile widziana.

Ok, bawiłem się tym przez chwilę i udało mi się zmienić wyjście bloku Galerii, z następującymi zastrzeżeniami:

• Podgląd nie pasuje do wyniku. Myślę, że jest to możliwe, ale wydaje się być bardziej zaangażowane.
• Niektóre klasy i znaczniki są wymagane w danych wyjściowych, aby blok mógł przeanalizować zawartość i umożliwić jej edytowanie. Klasy te mają style front-end, z którymi trzeba będzie sobie poradzić. W tej chwili nie jestem pewien, czy istnieje sposób na filtrowanie, jak blok to robi. Gdyby było to możliwe, może nawet nie być dobrym pomysłem, jeśli oznacza to, że bloki galerii są zepsute, gdy motyw lub wtyczka są wyłączone. Całkowicie nowy blok byłby prawdopodobnie najlepszym rozwiązaniem w sytuacjach, w których byłoby to konieczne.
• Nie jestem do końca pewien, jak działają rozmiary obrazów na tym etapie.
• Zastosowana metoda haków JavaScript może nie być odpowiednia w ostatecznej wersji. Gutenberg używa @wordpress/hookspodczas dyskusji o tym, co układ haki do wykorzystania w Rdzeń jest w toku .
• Ponieważ dane wyjściowe bloków są zapisywane w formacie HTML, a nie jako krótki kod ani meta, modyfikacja danych wyjściowych istniejących galerii nie będzie możliwa bez ich edycji.

Pierwszą rzeczą, którą musimy zrobić, to zarejestrować skrypt. Odbywa się to za pomocą wp_enqueue_scripts(), ale na enqueue_block_editor_assetshaku.

Skrypt powinien mieć wp-blocksskrypt jako zależność. Jest prawie na pewno już załadowany w edytorze, ale uczynienie z niego zależności prawdopodobnie gwarantuje, że zostanie załadowane przed naszym skryptem.

function wpse_298225_enqueue_block_assets() {
    wp_enqueue_script(
        'wpse-298225-gallery-block',
        get_theme_file_uri( 'block.js' ),
        ['wp-blocks']
    );
}
add_action( 'enqueue_block_editor_assets', 'wpse_298225_enqueue_block_assets' );

HTML dla wyjścia bloku jest obsługiwany przez save()metodę bloku. Możesz zobaczyć blok galerii w tym pliku .

Na tym etapie (marzec 2018) Gutenberg obsługuje filtr Zachowaj metodą bloków blocks.getSaveElement. Możemy dodać do tego haka w JavaScript w następujący sposób:

wp.hooks.addFilter(
    'blocks.getSaveElement',
    'wpse-298225',
    wpse298225GallerySaveElement
)

Pierwszy argument to nazwa haka, drugi argument to - jak sądzę - przestrzeń nazw, a ostatni argument to funkcja zwrotna.

Ponieważ zastępujemy save()metodę bloku, musimy zwrócić nowy element. Nie jest to jednak normalny element HTML, który musimy zwrócić. Musimy zwrócić element React .

Gdy spojrzysz na save()metodę oryginalnego bloku , zobaczysz JSX. React, którego Gutenberg używa pod maską, obsługuje go do renderowania elementów. Więcej informacji na ten temat znajduje się w tym artykule .

JSX zwykle wymaga kroku kompilacji, ale ponieważ nie wprowadzam kroku kompilacji dla tego przykładu, potrzebujemy sposobu na utworzenie elementu bez JSX. React zapewnia to createElement(). WordPress zapewnia opakowanie dla tej i innych funkcji reagowania w postaci wp.element. Więc do korzystania createElement()używamy wp.element.createElement().

W funkcji oddzwaniania blocks.getSaveElementotrzymujemy:

• element Oryginalny element utworzony przez blok.
• blockType Obiekt reprezentujący używany blok.
• attributesWłaściwości instancji bloku. W naszym przykładzie obejmuje to obrazy w galerii i ustawienia takie jak liczba kolumn.

Nasza funkcja oddzwaniania musi:

• Zwróć oryginalny element dla galerii nieblokowanych.
• Weź atrybuty, szczególnie obrazy, i utwórz z nich nowy element React reprezentujący galerię.

Oto kompletny przykład, który po prostu wyprowadza a ulz klasą, my-galleryi lis dla każdego obrazu z klasą my-gallery-itemi dla imgkażdego z srczestawem adresu URL obrazu.

function wpse298225GallerySaveElement( element, blockType, attributes ) {
    if ( blockType.name !== 'core/gallery' ) {
        return element;
    }

    var newElement = wp.element.createElement(
        'ul',
        {
            'className': 'wp-block-gallery my-gallery',
        },
        attributes.images.map(
            function( image ) {
                return wp.element.createElement(
                    'li',
                    {
                        'className': 'blocks-gallery-item my-gallery-item',
                    },
                    wp.element.createElement(
                        'img',
                        {
                            'src': image.url,
                        }
                    )
                )
            }
        )
    )

    return newElement
}

Niektóre rzeczy do zapamiętania:

• Oryginalny blok galerii znajduje obrazy, szukając ul.wp-block-gallery .blocks-gallery-item, więc ten znacznik i te klasy są wymagane do edycji bloku, aby było możliwe. Ten znacznik jest również używany do domyślnego stylu.
• attributes.images.mapzapętla każdy obraz i zwraca tablicę elementów potomnych jako treść dla głównego elementu. Wewnątrz tych elementów znajduje się inny element potomny dla samego obrazu.

Tutaj, aby podać zaktualizowaną odpowiedź. Uważam, że ten post jest bardzo pomocny w odpowiedzi na pytanie, jak rozszerzyć Blok Galerii.

Krótko mówiąc, wskazane jest, aby po prostu utworzyć nowy blok zamiast rozszerzać istniejący. Z postu w moim linku powyżej:

jeśli zmodyfikujesz kod HTML bloku [poprzez rozszerzenie], nie zostanie on rozpoznany jako oryginalny blok. Zamiast próbować manipulować blokiem podstawowym, wydaje się, że wyrejestrowanie bloku podstawowego i zarejestrowanie nowego bloku zastępczego w jego miejscu byłoby bezpieczniejszym podejściem - w ten sposób zapewniasz użytkownikom witryny korzystanie z Twojej konkretnej, spersonalizowanej galerii, która zostanie zweryfikowana, ponieważ definiuje własną strukturę HTML.

Powyższy link odwołuje się również do wtyczki Create-Guten_Block, która jest narzędziem wiersza polecenia, które wygeneruje wszystko, czego potrzebujesz, aby rozpocząć tworzenie bloku. Narzędzie jest bardzo łatwe w użyciu i łatwe w konfiguracji.

Dzięki tym zasobom udało mi się szybko opracować niestandardowy blok galerii