First release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3799904,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3799904,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3799904,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3799904,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3799904,"resolution":"1","location":"assets","locale":"","width":1280,"height":960},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3799904,"resolution":"2","location":"assets","locale":"","width":1280,"height":720}},"screenshots":{"1":"Select a word, choose Retype in the formatting toolbar, type the words to cycle through, and set the speed, the pause and the caret color for that word if you like.","2":"On the site, the word is erased and retyped letter by letter, with a blinking caret in the chosen color, and the rest of the sentence follows it."}},"plugin_section":[],"plugin_tags":[148857,12737,157671,30049,32626],"plugin_category":[],"plugin_contributors":[289531],"plugin_business_model":[],"class_list":["post-403577","plugin","type-plugin","status-publish","hentry","plugin_tags-block-editor","plugin_tags-rich-text","plugin_tags-text-animation","plugin_tags-typewriter","plugin_tags-typing-effect","plugin_contributors-fyrins","plugin_committers-fyrins"],"banners":{"banner":"https:\/\/ps.w.org\/fyrins-retype\/assets\/banner-772x250.png?rev=3799904","banner_2x":"https:\/\/ps.w.org\/fyrins-retype\/assets\/banner-1544x500.png?rev=3799904","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/fyrins-retype\/assets\/icon-128x128.png?rev=3799904","icon_2x":"https:\/\/ps.w.org\/fyrins-retype\/assets\/icon-256x256.png?rev=3799904","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/fyrins-retype\/assets\/screenshot-1.png?rev=3799904","caption":"Select a word, choose Retype in the formatting toolbar, type the words to cycle through, and set the speed, the pause and the caret color for that word if you like."},{"src":"https:\/\/ps.w.org\/fyrins-retype\/assets\/screenshot-2.png?rev=3799904","caption":"On the site, the word is erased and retyped letter by letter, with a blinking caret in the chosen color, and the rest of the sentence follows it."}],"raw_content":"\n
https:\/\/www.youtube.com\/watch?v=909NcozD1TU<\/p>\n\n
Retype adds one entry to the formatting toolbar of the block editor, in the \"More\" dropdown next to Highlight and Inline code. Select a word in a heading or a paragraph, choose Retype, type a few words separated by commas, and apply. The same popover can set, for that word only, the typing speed, the pause on each word and the color of the caret.<\/p>\n\n
On the front end the selected word is shown first. After a pause it is erased letter by letter, the next word of the list is typed in its place, and the cycle goes on. A thin caret blinks at the end of the word while it types.<\/p>\n\n
We help every <baker, potter, beekeeper> find their customers.\n<\/code><\/pre>\n\nThere is no settings page, no option in your database, no account and no outgoing request.<\/p>\n\n
How it behaves<\/strong><\/p>\n\n\n- The word takes its real width as it is typed, so the text that follows it moves along with the writing.<\/li>\n
- A word that is entirely bold, italic or a link keeps that formatting while it is retyped. A word formatted only in part is left still.<\/li>\n
- Words added to the page after it loads, by a \"load more\" button for instance, are animated too.<\/li>\n
- The animation pauses when the browser tab is hidden or the word is scrolled out of view, and resumes when it comes back.<\/li>\n
- Nothing loads on pages that do not use the format. Where it is used, the front end gets a script of about 5 KB, loaded with
defer<\/code> in the footer, and a stylesheet under 1 KB.<\/li>\n- The words are inserted as text, never as HTML.<\/li>\n
- The saved markup is a plain
<span><\/code> with a class and a data attribute. If you deactivate the plugin, the selected word simply stays in the sentence, and no block is invalidated.<\/li>\n<\/ul>\n\nAccessibility<\/strong><\/p>\n\nNo plugin can make a site accessible on its own, and this one does not claim to. What it does, within its scope:<\/p>\n\n
\n- Screen readers are given the original word, once. The letters being typed are hidden from them, so a screen reader user hears a normal sentence rather than a stream of changes.<\/li>\n
- Visitors who ask their system to reduce motion see the original word, with no animation and no blinking caret. If they turn the setting on while reading, the animation stops and the original word comes back.<\/li>\n
- Without JavaScript, the original word is shown as plain text.<\/li>\n<\/ul>\n\n
The animation loops for as long as the word is on screen, and the plugin offers no pause button. Moving content that starts on its own is something to use sparingly: one animated word per page, short words, and not in the middle of text people need to read. Whether it fits your site and its obligations is your call.<\/p>\n\n