The Icon Block

Описание

Плагин The Icon Block добавляет единый, простой в использовании блок, который позволяет добавлять пользовательские SVG-значки и графику в редакторе блоков WordPress (Gutenberg).

Плагин также включает в себя полную библиотеку значков WordPress с 290+ SVG-значками на выбор.

Ключевые возможности

  • 290+ нативных значков WordPress, включая логотипы социальных сетей
  • Используйте любой пользовательский SVG-значок или изображение
  • Вставьте значки из вашей библиотеки файлов, если поддерживается загрузка файлов в формате SVG
  • Включает в себя удобные элементы управления значками (ссылки, поворот, выравнивание, цвета, границы, отступы, поля и т.д.).
  • Полностью совместим с редактором сайта
  • Библиотека блоков не требуется 🎉
  • Почти полностью построен с использованием только встроенных компонентов WordPress
  • Получит дополнительную функциональность по мере добавления ее в ядро WordPress
  • Зарегистрируйте свою собственную библиотеку пользовательских значков. Узнать больше

Оставайтесь на связи

Скриншоты

  • The Icon Block включает в себя библиотеку иконок WordPress, позволяющую вставлять 270+ графических изображений.
  • Создавайте свои собственные пользовательские значки, просто скопировав/вставив SVG-код. Затем настройте значок в соответствии с вашими потребностями.
  • The Icon Block включает в себя множество элементов управления значками, таких как цвет, поворот, выравнивание, отступы и радиус углов.
  • Независимо от того, нужен ли вам большой значок или маленький, блок значков адаптируется к вашему макету.
  • Используйте "быструю вставку", чтобы быстро выбрать нужный вам значок WordPress.
  • Окно библиотеки значков WordPress дополнено функциями категорий, поиска и предварительного просмотра размера.
  • Пользовательские значки добавляются с помощью окна вставки с большим текстовым полем ввода и возможностью предварительного просмотра SVG-кода.
  • Вы не ограничены стандартными значками. Любая графика на основе SVG также будет работать. Блок будет соответствовать любым жестко заданным значениям цвета/заливки в предоставленном SVG.

Блоки

Этот плагин предоставляет 1 блок.

  • Icon Insert an SVG icon or graphic.

Установка

  1. У вас есть несколько вариантов:
    • Перейдите в раздел «Плагины» → «Добавить новый» и найдите «Icon Block». Как только вы найдете его, нажмите «Установить».
    • Скачайте The Icon Block с сайта wordpress.org и убедитесь, что папка помещена в zip-архив. Затем загрузите архив с помощью «Плагины» → «Добавить новый» → «Загрузить».
    • Откройте вставку блоков в редакторе блоков (Gutenberg) и найдите «значок» или «icon». Плагин должен появиться и позволить вам установить его напрямую. Пропустите шаги 2 и 3.
  2. Активируйте плагин в разделе «Плагины» в WordPress.
  3. Найдите блок в редакторе блоков (Gutenberg) и начните его использовать.

Часто задаваемые вопросы

Где я могу получить больше значков?

В настоящее The Icon Block включает в себя только стандартную библиотеку значков WordPress. Тем не менее, плагин позволяет вам вставлять любой значок на основе SVG, просто скопировав/вставив код значка в текстовое поле ввода при использовании опции «Добавить пользовательский значок»! Смотрите скриншоты для справки. Это дает вам полную гибкость и позволяет использовать практически любой значок, который вы хотите. Отличным источником бесплатных SVG-значков являются проекты Google Material Icons, Font Awesome и Iconic, и это лишь некоторые из них.

The Icon Block также позволяет вам зарегистрировать свою собственную пользовательскую библиотеку блоков. Это следует сделать в вашей теме или с помощью плагина. Так обеспечивается полная гибкость в отношении значков, доступных в плагине. Узнать больше.

Почему мой значок не меняет цвет?

The Icon Block включает в себя элементы управления цветом значка и фоном. Однако, если ваш значок SVG имеет жестко заданные значения цвета/заливки, плагин будет учитывать их, а не любые примененные пользовательские цвета.

Почему я не могу добавить значки SVG из своей библиотеки файлов?

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

Почему блок не работает для определенных пользователей?

WordPress позволяет только администраторам и редакторам сохранять «нефильтрованный HTML» контент, который включает в себя SVG. Блок значков не будет работать должным образом для пользователей, которые находятся на уровне автора или ниже.

Обратите внимание, что режим мультисайта WordPress имеет дополнительные ограничения. «Нефильтрованный HTML» доступен только суперадминистраторам мультисайта. Чтобы включить «нефильтрованный HTML» контент для администраторов и редакторов дочерних сайтов, вам нужно использовать сниппет, плагин Unfiltered MU или что-то подобное. К сожалению, это ограничение WordPress, и его необходимо обходить за пределами блока значков.

Отзывы

20.10.2023 1 ответ
This is one of the missing pieces in gutenberg editor. that said this plugin is a must have plugin in my opinion. well and clean coded with a great gutenberg implementation. very intuitive to use.
15.02.2023 1 ответ
This is one of those lovely plugins, which without bells and whistles simply do, what they promise—in this case to easily insert icons into your posts or pages. The plugin uses the wordpress icon library which includes no less than 276 icons in total. As no third party font is used, European users don't need to worry about violation of the GDPR. Instead all icons are provided as scalable svg-icons, hosted from your own website if you use them in your posts and pages. Cool. You miss an icon or don't like a particular shape? Don't worry. The plugin lets you use your own svg-files (or any free svg-file which you find in the web). And in the unlikely event, this isn't enough, the plugin developer describes in a web page, how you can add your own icon library. How awesome is that? Can we have more plugins like this, please?
09.01.2023 1 ответ
works like a charm. slim, high performance, no disturbing ads. perfect. thank you!
Посмотреть все 19 отзывов

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

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

Участники

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

Перевести «The Icon Block» на ваш язык.

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

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

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

1.6.0 — 2023-07-29

Added

  • Add Threads and WhatsApp social icons.
  • Add Core icons new in WordPress 6.2: Border, Caption, Chevron Up/Down, Comment Edit Link, Copy, Drawer Left, Drawer Right, Filter, Justify Stretch, Line Dashed, Line Dotted, Line Solid, List Item, Lock Outline, Lock Small, Seen, Shadow, Shuffle, and Unseen

Changed

  • Update minimum required WordPress version to 6.2. We want to be utilizing the latest functionality in WordPress.
  • Update to block API v3 for better 6.3 compatibility.
  • Disable dimension and border default controls for better 6.3 compatibility.
  • Move color controls to the native «color» panel. (#35)
  • Simplify transform CSS. (#32)

1.5.0 — 2023-03-09

Added

  • Add dropzone support for media library uploads and custom SVGs.
  • Add support for style elements in custom SVGs.
  • Add the ability to insert an SVG icon from the Media Library if SVG uploads are enabled on the website.
  • Add the ability to clear the current icon.

Changed

  • Update the block inspector panels for WordPress 6.2 compatibility.
  • Update the replace dropdown to use the native DropDownMenu component for improved WordPress 6.2 compatibility.

Fixed

  • Fix invalid DOM properties error. Thanks @DeoThemes for reporting this issue and suggesting a solution! (#25)
  • Fix a few minor CSS issues for WordPress 6.2 compatibility.

1.4.0 — 2023-01-03

Added

  • Add icon height control.

Changed

  • Update WordPress version requirement to 6.0+.
  • Update icon color handling to better support Global Styles.
  • Update icon width control to support additional units.
  • Update settings panel to mirror Core ToolsPanel implementations and support setting resets.

1.3.2 — 2022-10-17

Fixed

  • Fix incorrect class specification.
  • Fix placeholder background color in prep for WordPress 6.1.

1.3.1 — 2022-10-01

Fixed

  • Fix alignment classes not getting applied in the correct spot.

1.3.0 — 2022-09-20

Added

  • Add the ability to toggle icon color fill. Useful for SVG icons that use stroke.
  • Add the ability to disable custom icons using the iconBlock.enableCustomIcons filter.
  • Add title attribute support.
  • Add alternative Reddit icon to match WordPress core.
  • Add new WordPress icon: title

Changed

  • Update block architecture to support features in WordPress 6.1.
  • Update block placeholder to be more consistent with core placeholders.
  • Improve support for custom icons without a fill color.
  • Improve the UI in various places.

Removed

  • Remove deprecated WordPress icons: archiveTitle, commentTitle, postTitle, and queryTitle

Fixed

  • Fix bug where icon color and fill were overridden by theme colors.
  • Fix visual inconsistency between the frontend and Editor due to box-sizing not getting applied in the Editor.

1.2.0 — 2022-05-02

Added

  • Add alpha support for icon and background colors.
  • Add link rel support.
  • Add support for custom icon types.
  • Add new WordPress icons: post, postTerms, queryTitle, removeSubmenu, and row

Changed

  • Remove deprecated WordPress icons: alignJustifyAlt, cogAlt, and trashFilled

1.1.2 — 2022-01-27

Fixed

  • Fix bug where custom SVG icons with style attributes would not render correctly. Thanks @endres for reporting this issue.

1.1.1 — 2022-01-25

Changed

  • Include both theme and WordPress default color palettes in the icon and background color picker.

1.1.0 — 2022-01-25

Added

  • Add additional border support (color, width, style)
  • Add margin support
  • Add the ability to set an aria-label on the icon and link.
  • Add the core Unlock icon.
  • Add the core Comment Author Avatar icon.
  • Add the core Comment Author Name icon.
  • Add the core Comment Content icon.
  • Add the core Comment Edit Link icon.
  • Add the core Comment Reply Link icon.

Changed

  • Update inserter modal components to use isFullScreen to better resemble core modals.
  • Update styling on inserter modals for improved mobile responsiveness.
  • Import the Align None, Color, Reset, and Styles icons directly from @wordpress/icons.
  • Remove the custom search component in favor of the core component from @wordpress/components.
  • Restructure stylesheets to better conform with block standards.

Fixed

  • Fix bug where hyphens and colons would be incorrectly stripped from attribute names in custom icons. Thanks @stokesman for the PR. (#5)

1.0.0 — 2021-10-06

Added

  • Added the WordPress icon library featuring 270+ icons.
  • Add new placeholder and quick icon insertion experience.
  • Added new custom icon editing modal for an improved insertion experience.

0.1.2 — 2021-09-27

Added

  • Added scale transform on the frontend when an icon is linked to improve a11y. This matches the hover styling in the core WordPress Social Icons block. Future improvements are planned, including dedicated hover/focus settings within the block itself.

Fixed

  • Fixed translation file.
  • Fixed version in block.json so block can be added to the Block Directory.

0.1.1 — 2021-09-25

Fixed

  • Fixed SVG sanitization for non-standard SVGs.

0.1.0 — 2021-09-25

  • Initial release 🎉