The Icon Block

وەسف

پێوەکراوی (The Icon Block) بڵۆکێکی ئاسان بۆ بەکارهێنان تۆمار دەکات، کە ڕێگەت پێدەدات وێنۆچکەی (SVG) دەستکرد زیادبکەیت بۆ دەستکاریکەری وۆردپرێس (گوتنبێرگ).

هەروەها پێوەکراوەکە ژێدەرگەیەکی فراوانی وێنۆچکەی لەگەڵە کە زیاتر لە 290 وێنۆچکەی (SVG) لەخۆدەگرێت.

گرنگترین تایبەتمەندییەکان

  • زیاتر لە 290 وێنۆچکەی ڕەسەنی وۆردپرێس، لەگەڵ نیشانەی پێناسی تۆڕە کۆمەڵایەتییەکان
  • هەر (SVG)ەکی دەستکرد کە دەتەوێت بەکاری بهێنە
  • وێنۆچەکان لە ژێدەرگەی ڕەنگاڵەکەتەوە بهێنە ئەگەر بارکردنی (SVG) پشتگیریی کرابوو
  • چەند کۆنترۆڵێکی بەسوودی وێنۆچکەی لەگەڵە وەکو (بەستەر، سووڕاندن، لاگرتن، ڕەنگەکان، سنوور، ناوەخن، کەنار و زیاتر)
  • بەتەواویی کاردەکات لەگەڵ دەستکاریکەری ماڵپەڕ
  • هیچ ژێدەرگەیەکی بڵۆک پێویست نییە 🎉
  • بەتەواویی دروستکراوە لەگەڵ پێکهێنەرە ڕەسەنەکانی وۆردپرێس
  • تایبەتمەندیی تری بۆ بۆ زیاد دەکرێت کاتێک تایبەتمەندییەکان زیاد دەکرێن بۆ خودی وۆردپرێس
  • ژێدەرگەی وێنۆچکەی دەستکردنی خۆت تۆماربکە. زیاتر بزانە

هەمیشە پەیوەست بە

سکرین شۆتەکان

  • ژێدەرگەی وێنۆچکەی وۆردپرێسی لەخۆگرتووە کە ڕێگەت دەدات زیاتر لە 270 وێنۆچکە هەڵبژێریت.
  • وێنۆچکەی دەستکردی خۆت دروستبکە بە ڕوونووسکردن\لکاندنی کۆدی (SVG). دواتر دەتوانیت بەپێی پێداویستییەکانت وێنۆچکەکە دەستکاری بکەیت.
  • پێوەکراوەکە چەندین کۆنترۆڵی وێنۆچکەی لەگەڵدایە وەکو ڕەنگ، سووڕاندن، لاگرتن، ناوەخن، هەروەها نیوەتیرەیی سنوور.
  • پێوەکراوی (The Icon Block) دەگونجێت لەگەڵ گەڵاڵەبەندییەکەت، ئایا وێنۆچکەیەکی بچووکت دەوێت یان گەورە.
  • تێخستنی خێرا بەکاربهێنە بۆ هەڵبژاردنی وێنۆچکەی وۆردپرێس بەخێرایی.
  • ژێدەرگەی وێنۆچکەی وۆردپرێس تەواوە لەگەڵ هاوپۆل، گەڕان، تایبەتمەندیی پێشبینینی قەبارە.
  • وێنۆچکە دەستکردەکان زیاد دەکرێت لە ڕێگەی شوێنی تایبەتی تێخستن، کە ناوچەیەکی دەقی گەورەیە لەگەڵ توانای پێشبینینی کۆدی (SVG).
  • تۆ سنووردار نەکراویت بە وێنۆچکە نەریتییەکان. هەموو وێنۆچکەیەکی (SVG) کار دەکات. بڵۆکەکە بەتەواوییش کار بە هەر بەهایەکی ڕەنگ دەکات کە لەناو کۆدی (SVG)ەکەدا بێت.

بڵۆکەکان

ئەم پێوەکراوە 1 بڵۆک دابین دەکات.

  • Icon Insert an SVG icon or graphic.

Installation

  1. You have a couple of options:
    • بڕۆ بۆ پێوەکراوەکان ← زیادکردنی پێوەکراوی نوێ، پاشان بگەڕێ بۆ “Icon Block”. کاتێک دۆزیتەوە، کرتە بکە لە “دامەزراندن”.
    • پێوەکراوەکە دابگرە لە (wordpress.org) و دڵنیابەرەوە کە بوخچەکە (zip) کراوە. پاشان پێوەکراوەکە باربکە لە پێوەکراوەکان ← زیادکردنی پێوەکراوی نوێ ← بارکردن.
    • تێخەری بڵۆک بکەرەوە لە دەستکاریکەری بڵۆک (گوتنبێرگ) پاشان بگەڕێ بۆ “وێنۆچکە”. پێوەکراوەکە دەبێت دەربکەوێت و ڕێگەت بدات ڕاستەوخۆ دایبمەزرێنیت. هەنگاوەکانی 2 و 3 بپەڕێنە.
  2. پێوەکراوەکە چالاک بکە لە ڕێگەی شاشەی ‘پێوەکراوەکان’ لە وۆردپرێس.
  3. گەڕان بکە بۆ بڵۆکەکە لە دەستکاریکەری بڵۆک (گوتنبێرگ) دەستبکە بە بەکارهێنانی.

پهد

لە کوێ دەتوانم وێنۆچکەی زیاتر بەدەستبهێنم؟

لە ئێستادا پێوەکراوەکە تەنیا ژێدەرگەی وێنۆچکەی وۆردپرێسی لەخۆگرتووە. بەڵام پێوەکراوەکە ڕێگەت دەدات هەر وێنۆچکەیەکی (SVG) زیاد بکەیت بە ڕوونووسکردن\لکاندنی کۆدەکە بۆ ناوچەی دەقی وێنۆچکەکە، بە بەکارهێنانی هەڵبژاردەی “زیادکردنی وێنۆچکەی دەستکرد” تەماشای وێنەکانی سەرەوە بکە بۆ زانیاریی زیاتر. ئەمە ڕێگەت دەدات هەر وێنۆچکەیەکت بوێت زیادی بکەیت. چەندین پڕۆژەی مەزن هەن بۆ وێنۆچکە بێبەرانبەرەکان.

پێوەکراوەکە ڕێگەت دەدات ژێدەرگەی بڵۆکی دەستکردی خۆت زیاد بکەیت. ئەمە دەبێت بە شێوەیەکی دەرەکیی لە ڕووکارەکەت ئەنجام بدرێت یان لە ڕێگەی پێوەکراوێکەوە بەڵام دەستکراوەیی تەواوت دەداتێ لە وێنۆچکە بەردەستەکانی پێوەکراوەکە. زیاتر بزانە.

بۆچی وێنۆچکەکەم ڕەنگەکەی ناگۆڕدرێت؟

پێوەکراوەکە کۆنترۆڵی پێویستی لەگەڵدایە بۆ ڕەنگ و پاشبنەمای وێنۆچکە. بەڵام ئەگەر کۆدی وێنۆچکەکەی خۆت بەهای ڕەنگی خۆی لەگەڵ بێت، پێوەکراوەکە ئەوە بەکاردەبات لەجیاتی هەر ڕەنگێکی دەستکردی بەکاربراو.

بۆچی ناتوانم وێنۆچکەی (SVG) زیادبکەم لە ژێدەرگەی ڕەنگاڵەکەمەوە؟

بە شێوەیەکی بنەڕەت، وۆردپرێس ڕێگەت نادات پەڕگەکانی (SVG) زیادبکەیت بۆ ژێدەرگەی ڕەنگاڵەکەت، بەڵام دەتوانیت ئەم تایبەتمەندییە چالاک بکەیت بە بەکارهێنانی پێوەکراوەکانی وەکو Safe SVG. ئەگەر بارکردنی (SVG) چالاککرا، ئەوە هەڵبژاردەیەک دەبینیت بۆ تێخستنی وێنۆچکەکان لە ژێدەرگەی ڕەنگاڵەوە لە بڵۆکی وێنۆچکە.

بۆچی بڵۆکەکە لای هەندێک لە بەکارهێنەران کار ناکات؟

وۆردپرێس تەنیا ڕێگە بە بەڕێوەبەران و دەستکاریکەران دەدات بۆ پاشەکەوتکردنی ناوەڕۆکی “Unfiltered HTML”، کە ئەمە (SVG)ش لەخۆدەگرێت. پێوەکراوی (The Icon Block) بەتەواویی کار ناکات بۆ ئەو بەکارهێنەرانەی ڕۆڵەکانیان نووسەر و خوارترە.

تێبینیی ئەوە بکە کە دامەزراندنەکانی فرە ماڵپەڕی وۆردپرێس ڕێگرییەکی تریشیان هەیە. “Unfiltered HTML” ڕێگەپێنەدراوە بۆ بەڕێوەبەرەکانی فرە ماڵپەڕ. بۆ چالاککردنی ناوەڕۆکی “Unfiltered HTML” بۆ بەڕێوەبەران و دەستکاریکەران، دەبێت ئەم کۆدی پوختە بەکاربهێنیت، پێوەکراوی Unfiltered MU، یان شتێکی هاوشێوە. ئەمە شتێکە پەیوەندیی بە وۆردپرێسەوە هەیە و دەبێت لە دەرەوەی (the Icon Block) چارەسەر بکرێت.

پێداچوونەوەکان

شوبات 22, 2024
This block is what every web designer have been waiting for. A couple of ideas to enhance it: Add hover / focus color: especially useful when a link is defined Add padding support: so we can set 48px for wrapper and a smaller size for the icon itself Support for block button: maybe WP 6.5 could allow it but not sure Thanks!
كانونی دووه‌م 3, 2024
Works & feels like a native block, perfect.
تشرینی یه‌كه‌م 20, 2023 1 reply
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.
Read all 23 reviews

بەشداربووان و گەشەپێدەران

“The Icon Block” نەرمەواڵەیەکی سەرچاوە کراوەیە. ئەم کەسانەی خوارەوە بەشدارییان تێدا کردووە.

بەشداربووان

“The Icon Block” has been translated into 4 locales. Thank you to the translators for their contributions.

Translate “The Icon Block” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

  • 1.8.0 = 2024-03-24

زیادکردن

  • The Icon Block can now be added to Navigation blocks (requires WordPress 6.5 or Gutenberg 17.6+)
  • Add Playground blueprint for live preview in the Plugin Directory.

گۆڕین

  • Update “Tested up to” to WordPress 6.5.
  • Update “Requires at least” to WordPress 6.3.

1.7.0 – 2024-01-02

زیادکردن

  • Add X social icon.

گۆڕین

  • Bump the “Tested up to” version to WordPress 6.4.
  • Update hover styles in icon pickers to match Core styling.
  • Remove custom placeholder illustration.

چارەسەرکردن

  • Fix the text area height in the custom icon editor modal.

1.6.0 – 2023-07-29

زیادکردن

  • 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

گۆڕین

  • 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

زیادکردن

  • 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.

گۆڕین

  • 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.

چارەسەرکردن

  • 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

زیادکردن

  • Add icon height control.

گۆڕین

  • 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

چارەسەرکردن

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

1.3.1 – 2022-10-01

چارەسەرکردن

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

1.3.0 – 2022-09-20

زیادکردن

  • 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

گۆڕین

  • 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.

لابردن

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

چارەسەرکردن

  • 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

زیادکردن

  • 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

گۆڕین

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

1.1.2 – 2022-01-27

چارەسەرکردن

  • 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

گۆڕین

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

1.1.0 – 2022-01-25

زیادکردن

  • 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.

گۆڕین

  • 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.

چارەسەرکردن

  • 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 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 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 translation file.
  • Fixed version in block.json so block can be added to the Block Directory.

0.1.1 – 2021-09-25

چارەسەرکردن

  • Fixed SVG sanitization for non-standard SVGs.

0.1.0 – 2021-09-25

  • Initial release 🎉