Как работать в blocky wordpress

Создание стартового блока Gutenberg из командной строки при помощи @wordpress/create-block

Начну с того, что сколько себя помню, я всегда игнорировал использование стартовых тем в WordPress, и разрабатывал темы для WordPress с нуля. Возможно это объясняется тем, что количество проектов за промежуток времени у меня всегда было не очень большим, чаще это были супер-крупные или свои проекты, которыми я занимался на протяжении нескольких лет, и поэтому мне не казалось запарным создать каждый файлик вручную и потратить на это на полчаса больше времени.

С блоками для Gutenberg история начала повторяться, ещё в 2019-м успел полностью разобраться в создании блоков Gutenberg и запилить видеокурс по ним и только потом обратил внимание на утилиту @wordpress/create-block (ранее она называлась create-guten-block ).

Я решил подробно рассказать вам о ней, потому что она очень лёгкая в освоении и может действительно облегчить вам весь процесс создания блока. Хотя бы как минимум потому, что вам не придётся настраивать сборку проекта.

Создание стартового блока

Прежде всего нам понадобится Node.js и npm версии 5.2 или выше. Команды рекомендую запускать из папки wp-content/plugins , потому что в этом примере подразумеваем, что наш кастомный блок будет в виде плагина. Но он может быть также и частью темы WordPress.

1. Переходим в папку плагинов командой cd .
2. Проверяем текущую версию npm командой npm -v .

Подробнее про работу с командной строкой есть в уроке про настройку Webpack и про WP CLI.

Всего есть два способа работы с командой @wordpress/create-block – в первом мы запускаем её и отвечаем на все вопросы, которые будет задавать нам утилита в командной строке, а во втором – запускаем команду сразу со всеми параметрами и готово.

1-й способ

Тут мы будем указывать параметры блока в командной строки непосредственно в процессе создания блока. Записал для вас пример видео:

По шагам, что происходит на видео:

1. Перехожу в терминале в папку с плагинами на моём тестовом сайте, который находится в MAMP командой cd .
2. Чекаю версию npm -v (каждый раз это делать не нужно разумеется).
3. Запускаю установку блока командой npx @wordpress/create-block
4. Указываю различные настройки блока.
5. «Do you want to customize WordPress plugin» – если указать Y (что я и сделал), то тулса попросит указать все метаданные плагина.
6. Далее запускается установка, нужно минутку подождать.
7. Когда установка завершиться, в командной строке отобразятся команды для запуска сборки блока. Если коротко, то нужно будет перейти в директорию блока командой cd прежде всего. А потом внутри уже используем либо npm start либо npm run build . Чуть подробнее об этом рассказывал в уроке про Webpack и в уроке про пакеты @wordpress/scripts.

После того, как всё проделали, вы сможете найти новый блок в админке, не забудьте только активировать новый появившийся плагин сначала!

По факту у нас получается изишный блок, который всего-навсего выводит статический текст, но главное не это, главное, что у нас есть заготовка блока Gutenberg с уже настроенной сборкой.

2-й способ

Можно кстати ускорить процесс создания стартового блока, отказавшись от диалога с командной строкой и указав все необходимые параметры сразу же в виде ключей.

npx @wordpress/create-block misha-super-block --title "Misha Super Block" --short-description "Какое-то описание" --category "theme"

Параметры, которые я использовал в команде выше:

Ключ	Описание
—title	Название блока (и плагина)
—short-description	Описание блока (и плагина)
—category	Категория в инсертере, где будет отображаться блок. По умолчанию доступны следующие значения:

– text
– media
– design
– widgets
– theme
– embed

Файловая структура

Если вы перейдёте в папку wp-content/plugins и найдёте наш плагин блока там, то его файловая структура будет следующей:

/build /node_modules /src block.json edit.js editor.scss index.js save.js style.scss .editorconfig .gitignore misha-super-block.php package-lock.json package.json readme.txt

• misha-super-block.php – основной файл плагина. В нашей ситуации ничего особенного не содержит – только информацию о плагине и функцию регистрации блока register_block_type() .
• /build – CSS и JS в скомпилированном виде, непосредственно так, как они подключаются в админке.
• block.json – содержит метаданные блока.
• edit.js – содержит компонент редактирования блока, подробнее в уроке.
• editor.scss – стили блока в редакторе.
• index.js – тут вы найдёте код регистрации блока функцией registerBlockType() , подробнее про неё в этом видеоуроке.
• save.js – содержит компонент сохранения блока, подробнее в видеоуроке.
• style.scss – стили блока непосредственно на сайте.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Пять способов расширения функциональности стандартных блоков в WordPress

Стандартные блоки в WordPress позволяют создавать страницы разной сложности. От простейших текстовых до сложных с многоколоночной структурой, изображениями, аудио и видеоконтентом.

Но бывают ситуации, когда стандартных блоков недостаточно. Например, блоку нужно добавить отступ, или обернуть блок в дополнительный div . Бывает и наоборот, стандартный блок предоставляет слишком много опций, которые лучше спрятать от клиента.

После того как мы добавили код из примера выше, в редакторе должен появиться дополнительный стиль для блока Группа:

Вкратце рассмотрим, как зарегистрировать новый паттерн. Допустим мы часто используем следующую структуру страницы:

Заключение

В этой статье мы разобрали пять способов расширения блоков WordPress. Подводя итог, повторим когда какой способ использовать

• Дополнительный CSS — небольшая модификация на одной-двух страницах.
• Стиль блока — повторяющаяся на нескольких страницах модификация блока. Каждый блок может иметь только один активный стиль.
• Вариация блока — повторяющаяся на нескольких страницах модификация блока, с более сложной структурой. Может включать стиль блока, заполнять атрибуты, и иметь внутренние блоки.
• Паттерн блока — похож на вариацию но может включать несколько блоков верхнего уровня. Подходит для создания полных страниц.
• Фильтр блока — позволяет добавлять и отключать некоторые свойства блоков, а так же редактировать маркап стандартных блоков.

Полезные ссылки

• Extending the Block Editor
• Filter reference
• Как начать работать с Gutenberg
• How to Use Block Variations in WordPress
• A Crash Course in WordPress Block Filters
• Работа с паттернами в WordPress

Как работать в blocky wordpress

Unfortunately, the plugin doesn’t support Java, Kotlin, Flutter nor XML syntax, making it completely useless for anyone in the Android development field.

A+ Once I figured out the BLOCKS part!

I don’t normally use WP Blocks and so I could not figure out why this plugin broke for certain code syntax (PHP -> HTML -> PHP for example) and why saving sometimes broke the previously-saved syntax. Maddening. Then I switched back to the block editor. AHA! It works beautifully. That’s probably why it says «Block» in the plugin name, duh. Thank you very much for this wonderful plugin. I love that we can also upload our own prism.js files. Cool.

Thank you!

Exactly what I was looking for. thanks alot!

I use this plugin a lot

Shihab Ul Haque 26.11.2022 7 ответа

The plugin developer and the plugin itself are very good. Wish them all the best. Being a developer takes a huge time, effort, money & sacrifice. If you’re a user of this plugin like me, do not just leave your negative feedback unless you talked to the support. Also, if you were a backbencher like me and if you’re still a backdated who uses an older version of PHP (just like me), please feel free to use this plugin with peace of mind. Enjoy!

Good Effort, Keep up the work ♥

Thanks for the amazing work. Please work on the Performance like Asset Size and try to merge them into a single JS and CSS.

Участники и разработчики

«Highlighting Code Block» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

«Highlighting Code Block» переведён на 4 языка. Благодарим переводчиков за их работу.

Заинтересованы в разработке?

Журнал изменений

2.0.1

• Some text of setting items has been changed.

2.0.0

• Support for WordPress 6.4.
• Support for PHP 8.2.
• The CSS and Block UI have been significantly adjusted.
• CSS custom properties have also been renamed and cleaned up overall.
• Added data-start attribute settings to blocks.

1.7.0

• Support for WordPress 6.2.
• The style loading process has been fine-tuned.
• Added aria-label to the Copy Code button.

1.6.1

• Support for WordPress 6.1.

1.6.0

• Support for WordPress 6.0.

1.5.5

• Fixed the version number.

1.5.4

1.5.3

• Fixed a bug.

1.5.2

• Fixed the problem of misaligned lines in some themes.

1.5.1

• Fixed a bug.

1.5.0

• Support for WordPress 5.9.
• Refactored the CSS.

1.4.1

• Fixed a bug where changing the settings in the languages list did not change the choices in the block.

1.4.0

• Fixed a bug that amplified the class of the block.
• Fixed a bug that caused clipboard.js to be loaded even when it was not needed.

1.3.0

• Support for WordPress 5.8.
• Required WordPress version raised to 5.6.

1.2.9

• Fixed a bug that the number of lines is not displayed.

1.2.8

• Support for WordPress 5.7.
• Fixed spelling mistakes. («plane» to «plain»)
• Code fixes.

1.2.7

• Added copy button function.
• Code refactoring.
• Support for WordPress 5.6.

1.2.6

Fixed file icon 404 error.

1.2.5

• Made the code lighter.
• Changed handle name of CSS and JS.

1.2.4

Fixed register block.

1.2.3

Fixed block.json file.

1.2.2

• Adjustments for registering «block libraries».
• Abolished the block width adjustment function.
• Abolished the ability to remove «br» tag from the «code» tag.

1.2.1

Change the code to register the script.

1.2.0

• Fixed a bug that CSS cannot be read depending on the server.
• It is now possible to set whether to display the language name for each block.
• Even if the language name is set to hidden, it will be displayed if the file name is entered.
• You can now preview the display of language names and file names in the block editor.

1.1.0

Fixed translation file.

1.0.9

Fixed translation file.

1.0.8

English is supported.

1.0.7

• Compatible with WordPress5.3.
• Deleted the left and right margins of the HCB code block, and left it to the theme.
• Enabled conversion with core «source code block».

1.0.6

• Compress CSS file to read.
• Changed to load some CSS with style tag in head.
• Fixed a bug that font family settings were not reflected.
• Code cleanup for CSS and JS

1.0.5

• Move reading script to wp_footer.
• Changed HCB block logo.
• You can now set font-family for code blocks.

1.0.4

• Support for WordPress 5.2.1
• Changed font-family of code block.
• The file name can be set to the code block.

1.0.3

Support for WordPress 5.1.1

Блок «Классический»

Блок «Классический» повторяет интерфейс редактирования в редакторе блоков WordPress. В этом руководстве показано, как его можно использовать на сайте.

В этом руководстве

1. Добавление блока «Классический»
2. Панель инструментов блока
   1. Преобразование в блоки
   2. Дополнительные опции

   Добавление блока «Классический»

   Чтобы добавить блок «Классический», щёлкните значок + Вставка блоков и выполните поиск по ключевому слову «классический». Щёлкните его, чтобы добавить блок в запись или на страницу.

   Чтобы быстро добавить новый блок «Классический», в новой строке можно также набрать «/классический» и нажать Enter.

   

   Вы можете ознакомиться с подробными инструкциями по добавлению блоков.

   После добавления блока работать с текстом можно так же, как и в классическом редакторе, используя имеющиеся инструменты.

   Панель инструментов блока

   После того как вы щёлкнете блок, поверх него появится панель инструментов со следующими опциями:

   

   На панели инструментов блока «Классический» доступны следующие опции:

   Преобразование в блоки

   Вы можете заменить всё содержимое блока «Классический» отдельными блоками для редактирования. Это может помочь при добавлении большего количества функций, предоставляемых редактором блоков, например Колонки, Кнопки, Галереи и многое другое.

   При преобразовании записи или страницы в классическом редакторе она по умолчанию появится в блоке «Классический». Вы можете продолжить преобразование в блоке «Классический» или выполнить преобразование в отдельные блоки.

   Дополнительные опции

   Если щёлкнуть три точки на панели инструментов, появятся дополнительные опции, включая настройки для редактирования содержимого как HTML. Подробнее о дополнительных опциях.

   Редактирование в блоке «Классический»

   Блок «Классический» содержит те же опции, что и классический редактор, поэтому ознакомьтесь с нашим руководством по классическому редактору, чтобы получить подробные сведения о каждой опции, описанной здесь:

   Похожие публикации:

   1. Как найти аирподс через айфон
   2. Как накрутить шаги в вк ios
   3. Как написать html код в виде обыкновенного текста
   4. Как разрешить доступ к микрофону в дискорде