First release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3704082,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3704082,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3704082,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3704082,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3704082,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":{"sobol-image-icons\/icon":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"sobol-image-icons\/icon","version":"0.1.0","title":"Image Icon","category":"media","icon":"art","description":"Render any image as a single-colour icon that follows the text colour.","keywords":["icon","mask","svg","arrow"],"textdomain":"sobol-image-icons","attributes":{"url":{"type":"string","default":""},"mediaId":{"type":"number","default":0},"label":{"type":"string","default":""},"size":{"type":"string","default":"1em"},"ratio":{"type":"string","default":""},"align":{"type":"string","default":""},"original":{"type":"boolean","default":false},"presetColor":{"type":"string","default":""},"customColor":{"type":"string","default":""},"href":{"type":"string","default":""},"linkTarget":{"type":"string","default":""},"rel":{"type":"string","default":""}},"supports":{"html":false,"anchor":true,"spacing":{"margin":true}},"editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css"}},"tagged_versions":["0.1.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3704082,"resolution":"1","location":"assets","locale":"","width":1484,"height":532},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3704082,"resolution":"2","location":"assets","locale":"","width":938,"height":1398},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3704082,"resolution":"3","location":"assets","locale":"","width":1798,"height":1524},"screenshot-4.gif":{"filename":"screenshot-4.gif","revision":3704082,"resolution":"4","location":"assets","locale":"","width":878,"height":496},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3704082,"resolution":"5","location":"assets","locale":"","width":1218,"height":380}},"screenshots":{"1":"One icon file, four text colours. The shape comes from the image and the colour from the text.","2":"An icon dropped into a sentence, with its settings open on the icon itself.","3":"The Icon panel on the native WordPress Button block.","4":"Idle and hover animations, with their own timings.","5":"The same mark drawn in its own colours, with \"Keep the original colours\" switched on."}},"plugin_section":[],"plugin_tags":[1220,485,497,498,2904],"plugin_category":[50],"plugin_contributors":[281681],"plugin_business_model":[],"class_list":["post-371313","plugin","type-plugin","status-publish","hentry","plugin_tags-block","plugin_tags-button","plugin_tags-icon","plugin_tags-icons","plugin_tags-svg","plugin_category-media","plugin_contributors-lsobolew","plugin_committers-lsobolew"],"banners":{"banner":"https:\/\/ps.w.org\/sobol-image-icons\/assets\/banner-772x250.png?rev=3704082","banner_2x":"https:\/\/ps.w.org\/sobol-image-icons\/assets\/banner-1544x500.png?rev=3704082","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/sobol-image-icons\/assets\/icon.svg?rev=3704082","icon":"https:\/\/ps.w.org\/sobol-image-icons\/assets\/icon.svg?rev=3704082","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/sobol-image-icons\/assets\/screenshot-1.png?rev=3704082","caption":"One icon file, four text colours. The shape comes from the image and the colour from the text."},{"src":"https:\/\/ps.w.org\/sobol-image-icons\/assets\/screenshot-2.png?rev=3704082","caption":"An icon dropped into a sentence, with its settings open on the icon itself."},{"src":"https:\/\/ps.w.org\/sobol-image-icons\/assets\/screenshot-3.png?rev=3704082","caption":"The Icon panel on the native WordPress Button block."},{"src":"https:\/\/ps.w.org\/sobol-image-icons\/assets\/screenshot-4.gif?rev=3704082","caption":"Idle and hover animations, with their own timings."},{"src":"https:\/\/ps.w.org\/sobol-image-icons\/assets\/screenshot-5.png?rev=3704082","caption":"The same mark drawn in its own colours, with \"Keep the original colours\" switched on."}],"raw_content":"\n
Sobol Image Icons renders an image as a CSS mask instead of as a picture. The shape comes from the file,\nthe colour comes from your text. Change the text colour and the icon changes with it.<\/p>\n\n
One arrow file then works on a dark button, a light background and a coloured heading, without\nexporting three versions of it.<\/p>\n\n
You do not need an icon set.<\/strong> Most icon plugins hand you somebody else's library and stop there.\nThis one uses the images you already have. Drop your own arrow, your own logo mark, a shape a\ndesigner sent you - anything in the media library becomes an icon that matches your palette.<\/p>\n\n In a sentence.<\/strong> Pick the icon button in the editor toolbar and drop an icon into running text:\n\"Read more \u2192\". It scales with the font size, sits where you tell it to against the line, and takes\nthe colour of the words around it, the way a glyph would. Select it again and its settings open on\nthe icon itself - swap the image, resize it, set alternative text, or give it a colour of its own\nfrom your theme palette.<\/p>\n\n On a button.<\/strong> The native WordPress Button block gains an Icon<\/strong> panel. The plugin does not\nreplace the Button with one of its own, so block styles, colour settings, theme.json styling, the\nwidth controls and link handling all keep working exactly as before. Choose the side, the size and\nthe gap; the icon takes the button's proportions from the file, so a tall or wide mark is not\nsquashed into a square.<\/p>\n\n On its own.<\/strong> A dedicated block for an icon that stands by itself: size, colour from the theme\npalette, left\/centre\/right placement, an optional link, and the same option to keep the file's own\ncolours. Useful when the icon is the point rather than an ornament on something else - centred\nabove a heading, say.<\/p>\n\n Two independent settings, because they do different jobs.<\/p>\n\n An idle animation<\/strong> runs on its own to draw the eye - bounce, wiggle, pulse or spin - and you set\nhow often it plays. The movement is packed into the start of each interval and the icon rests for\nthe remainder, so \"every four seconds\" means an occasional flick of attention rather than something\nthat never stops moving.<\/p>\n\n A hover animation<\/strong> plays while somebody is on the button and takes over from the idle one:\nslide, rotate, spin, grow, bounce or wiggle, at a speed you choose. It runs for keyboard users too,\nwhen the button is focused, so the affordance is not reserved for people using a mouse.<\/p>\n\n Both are pure CSS, and both stop entirely for anybody whose system asks for reduced motion.<\/p>\n\n This is the part that usually goes wrong elsewhere.<\/p>\n\n WordPress strips Sobol Image Icons carries the mask in a CSS custom property, which survives the filtering, and resolves\nit in its own stylesheet. The test suite asserts it on every release, including a test that fails\nif anyone moves a mask declaration back into the markup.<\/p>\n\n An icon with alternative text is announced to screen readers. Leave it empty and the icon is\nmarked decorative and skipped, which is what you want when it sits beside text that already says\nthe same thing. Animations respect Everything in this plugin is human-readable except The source it was built from is at https:\/\/github.com\/lsobolew\/sobol-image-icons, tagged That writes No, and that is rather the point. Sobol Image Icons works with what is already in your media library, so\nyou can use your own marks and keep your own visual identity instead of adopting a library\neverybody else is using too.<\/p><\/dd>\n Because the image is used as a mask: only its shape is read, and the colour comes from the text.\nThat is what lets one file work anywhere. If you want the file drawn in its own colours instead,\nswitch on Keep the original colours<\/strong>.<\/p><\/dd>\n As a mask it will be flattened to a single colour. Either turn on Keep the original colours<\/strong>, or\nuse the Image block for artwork that needs its own palette.<\/p><\/dd>\n Yes, if your site accepts SVG uploads. WordPress refuses them by default, because an SVG is markup\nand can carry a script. A plugin that adds SVG support safely - by sanitising the file on upload -\nmakes them available here automatically, and the editor's own list of formats updates to match.<\/p><\/dd>\n It can, which is why idle animation is off by default and its interval is yours to set. Anybody\nwhose system asks for reduced motion sees no animation at all.<\/p><\/dd>\n There is no front-end JavaScript, and the stylesheet loads only on pages that actually contain an\nicon or one of the blocks that can hold one.<\/p><\/dd>\n CSS masks are supported by every current browser. A browser too old for them shows no icon rather\nthan a broken layout.<\/p><\/dd>\n\n<\/dl>\n\n\nThree places to put one<\/h4>\n\n
Animation, when it earns its place<\/h4>\n\n
It works for your authors, not only for administrators<\/h4>\n\n
mask-image<\/code> from inline styles for every user without the unfiltered_html<\/code>\ncapability - that is authors and contributors on a single site, and everybody except the super\nadmin on multisite. A plugin that writes the mask straight into the markup therefore works\nperfectly while you build the site and breaks for the people who actually write the posts, often\nonly noticed on a client's site weeks later.<\/p>\n\nDetails that matter<\/h4>\n\n
\n
em<\/code> so an icon beside text scales with that text.<\/li>\ncurrentColor<\/code>.<\/li>\nAccessibility<\/h4>\n\n
prefers-reduced-motion<\/code>, and hover effects are reachable from\nthe keyboard.<\/p>\n\nSource code<\/h3>\n\n
build\/icon\/index.js<\/code>, which is compiled and\nminified from TypeScript.<\/p>\n\nv0.1.0<\/code> for\nthis release. The block sources are in plugins\/sobol-image-icons\/blocks\/<\/code>, and the build is reproduced\nwith:<\/p>\n\nnpm ci && npm run build in `plugins\/sobol-image-icons\/`\n<\/code><\/pre>\n\nbuild\/<\/code> from blocks\/<\/code> using the configuration in the same directory - no other step,\nand nothing fetched at build time beyond the locked dependencies.<\/p>\n\n\n\n
\/wp-content\/plugins\/<\/code> or install it from the Plugins screen.<\/li>\n\n
Do I need Font Awesome or another icon set?<\/h3><\/dt>\n
Why does my icon come out all one colour?<\/h3><\/dt>\n
Can I use a multi-coloured logo?<\/h3><\/dt>\n
Does it work with SVG?<\/h3><\/dt>\n
Will an animation annoy my visitors?<\/h3><\/dt>\n
Does it slow the site down?<\/h3><\/dt>\n
Will the icon still show on old browsers?<\/h3><\/dt>\n
0.1.0<\/h4>\n\n
\n