[ad_1] As always, I like to highlight some things on the lighter side of the WordPress world. We have had enough business acquisitions in the past week — the whole year, really — that we need to take a break and enjoy the more experimental developments that the community has to offer. Such as the case with WebArea’s latest plugin, Background Animation Blocks. It is a collection of six blocks with different animated effects. I am obsessed with all things space and night-sky related, so I was immediately drawn to the Stars block. It has an animated background of simple dots floating in the background. It is also the most advanced animation, following the mouse cursor of the end-user. Stars animated block. The Stars block has a size, scale, and color setting for the background effect. Each of the other blocks has unique options, depending on what it does. Some, such as Bubbles and Gradient, allow the end-user to control the animation speed. Others have multiple color inputs. In total, the plugin provides six individual blocks with unique animation effects for the background. Effectively, they behave like the Group block, serving as a simple container. Each of the blocks supports both wide and full alignment. They allow users to control the text and background colors. And, any other block can be placed inside of them, just like you would expect from the core Group or Container blocks. They do not support some of the newer layout features from the Gutenberg plugin that other container-type blocks have. There is no need yet because those features have not landed in WordPress, but it is something to watch out for in the future. It is easy enough to wrap these animated blocks inside of another Group block for those features, though. However, I prefer not to put the burden of nesting on the end-user if possible. There are some downsides to the approach the plugin developer took. The animated backgrounds could have been tacked onto the existing Group or Cover blocks for WordPress, essentially behaving as a settings extension. An alternative route would have also been to create a single “Animated Container” block and allow the user to choose the specific background effect. With this method, the plugin author could have used the variations API to make each of the animations searchable and appear via the block inserter. However, the individual block route has been done before. Automattic took the same approach via its Starscape and Waves blocks. They are simply shipped as separate plugins instead of bundled as a collection. I prefer this solution because it allows users to pick and choose only the blocks they want. Assuming the library of animated blocks grows in future versions of the plugin, it could become overkill. The second issue is the plugin does not make use of the theme color palette in some instances. It uses the standard text and background color options for its blocks, but any custom setting only displays a color picker. For those who want to use a theme-defined color in those cases, they must know the hex code. Or, simply eyeball it to get it close enough. Despite what are, at best, trivial issues, the plugin was fun to tinker with. The blocks do not have to be relegated to the zanier side of WordPress. It is easy enough to adjust their settings for more subtle effects that could work for business-related or other types of sites. Like this: Like Loading… [ad_2] Source link
Continue readingTag Archives: Adding
Proposal for Adding Badges and Other ‘Learner Achievements’ to WordPress Profiles – WP Tavern
[ad_1] In December 2020, WordPress launched its new “Learn” platform with free courses, workshops, and lesson plans. Since then, the Training Team has continued adding more material. The latest proposal is an open discussion for the community on adding participatory badges for completing coursework. “I’d like to nail down what kind of thing we would like to see regarding recognising learner achievements on profiles,” wrote WordPress community manager Hugh Lashbrooke in the announcement earlier this month. The proposal, which now has a GitHub ticket, includes showing the following on a user’s WordPress.org profile page: A course’s completion in the activity stream. The user’s average grade from Learn WordPress. A new “Learning” tab for displaying completed courses with dates and the possibility of individual completed lessons, relevant grades, and other learning data. A new “Learner” badge for anyone who has completed one course. Currently, there are only two courses available. “That is changing as we develop new content,” wrote Lashbrooke in the post. “So my hope is that we will have these rewards in place now, and as content is created, the rewards will flow naturally.” One downside to the proposal may be publicly showing a user’s grades. “I’d be against showing the learner’s average grade publicly because it could lead to anxiety, stress, etc., and maybe even stop some people from participating in the courses,” wrote Stephen Cronin in the comments. “Eg: ‘What if I only get a C, will anyone take me seriously? Will it harm my chances of getting a job in the WP space?’ etc. Some people will thrive on that sort of competition, some people … not so much. And I feel like we should be as inclusive as possible.” Lashbrooke responded that showing grades could be an opt-in feature. However, I would question why it would be necessary to show grades at all. Bragging rights? Maybe. If we could somehow make it shareable via social media, it might be a fun way to get more people to participate. Several people in the comments were encouraged by the idea of social sharing. Adam Warner even proposed adding the Learn badges to the oEmbed WordPress block, making it easy for users to share their accomplishments on their sites. However, the first step should be to provide badges for completing a course. It is an easy win and could be automated. Most user profile badges are for direct contributions to the project, such as writing code or working on a team. However, at least some user-based participatory badges are available already. For example, there is a “Test Contributor” badge for providing feedback on calls for testing. One side advantage of a Learn achievement system could be for employers who are looking through an applicant’s history. It may help potential employees show off their competency in specific areas of the WordPress platform. Courtney Engle Robertson, Web Design and Developer Advocate at GoDaddy, questioned Matt Mullenweg during 2020’s State of the Word Q&A session on the role of the Learn platform as it pertains to the job market. Mullenweg said the first step is organizing the platform and making high-quality educational material available. However, he seemed open to the idea of having a self or administered certification down the line. It would allow people to show that they have completed or tested out of a course. “It wouldn’t be a perfect system, but it could be a nice way for people to learn more about WordPress,” he said. “And, hopefully, as they go through, since WordPress is open-source, improve the materials as we go through it, both from the point of view of making it more intuitive or easier to understand and also translating, as well. Because there is a huge demand for WordPress really all over the world now.” View the clip below from the State of the Word Q&A: “As someone who hires WordPress professionals, I would love to have a request in the job application to link up their WP profile so we can see competency through that learning platform,” commented Chris Badgett, the founder and CEO of LifterLMS, on the proposal. He also agreed with Mullenweg that people should be able to test out of a course. It would not make sense for those who have already acquired specific skills or knowledge to go through the motions of completing coursework they are already proficient in. “Creating quizzes or ‘post tests’ in the LMS with a standard minimum passing requirement to earn the achievement badge would help fulfill this,” he said. For now, some simple gamification via profile badges could boost participation and, perhaps, get more people involved in contributing to the Learn platform. This could also be the first step toward a WordPress certification system. Like this: Like Loading… [ad_2] Source link
Continue readingAdding Custom HTML Attributes With the Block Attributes Plugin – WP Tavern
[ad_1] Earlier this week, websevendev released its fourth WordPress plugin to the official directory named Block Attributes. The extension allows end-users to add any HTML attribute to nearly any block. One of the problems with the WordPress editor is that it can be a bit fussy about customizing HTML. Blocks are built on a set of standards, and the markup is supposed to meet those expectations. If something does not fit, users see an invalid markup warning. However, there are times when users need to drop in a custom HTML attribute for various reasons. For example, I sometimes need to add a custom data- attribute for working with a bit of JavaScript. Since I know my way around code well enough, I typically write out the HTML in those situations via the Custom HTML block. But, that does not make sense when minor attribute additions are called for. WordPress currently allows users to add classes and IDs (called an “HTML anchor” in the admin) to almost every block. It does not allow for direct input of the dozens of other possible attributes that HTML supports. The use cases for the average user are few and far between. For those scenarios where some users could use the extra feature, the Block Attributes plugin is handy. The plugin is straightforward to use. It adds a new field named “Additional attributes” under the Advanced tab of every block. Users can add the attribute name and click the “Add” button. From there, it creates a new field for adding the attribute value. Adding an onclick attribute to a Button block. The plugin also supports multiple attributes. Once you add one, you simply use the same input field to create more. For my first test drive, I added a simple onclick attribute with a value of myFunction(). Then, I hopped over to my theme and created that function via JavaScript to output a simple message in the console. Everything looked good under the hood, and it worked. HTML view and console with custom JS for a Button block. Most of the use cases I have in mind are for integrating with JavaScript, and this was a simple example of what is possible. There are far more complex things a developer could do with such a feature. That is reason enough to keep this plugin in the toolbox — sometimes you need a wrench instead of a hammer. I could also see Block Attributes being used for adding ARIA attributes in other situations where it might aid accessibility. Users could add custom styles to a specific block via a style attribute with the plugin. However, unless this is a simple one-off, I would recommend against it. For more advanced use cases, Blocks CSS is a far more suitable plugin. It has a built-in syntax highlighter. Plus, a textarea is friendlier than a one-line text input box. The only downside to Block Attributes I have seen is upon deactivation. You will see the dreaded “this block contains unexpected or invalid content” message in the editor if you have added any custom attributes. The editor has managed to resolve any issues I have run into with the core blocks. Resolving block warning after deactivating plugin. Deactivating the plugin should not affect the front-end output. Because the custom attributes are a part of the HTML markup, they will still be there. The error message should only show in the editor. Like this: Like Loading… [ad_2] Source link
Continue reading