This Week In Web Design – February 4, 2022
…
German Court Fines Website Owner for Violating the GDPR by Using Google-Hosted Fonts
In late January, a Munich regional court ruled that a plaintiff was entitled to injunctive relief and damages of 100 € from an undisclosed website owner for passing on the visitor’s IP address to Google through the use of Google Fonts.
Since it is possible to use the fonts without connecting to Google, the court deemed this a violation of Europe’s GDPR (General Data Protection Regulation) because Google Fonts exposes the visitor’s IP address:
The defendant violated the plaintiff’s right to informational self-determination by forwarding the dynamic IP address to Google when the plaintiff accessed the defendant’s website.7
The automatic transmission of the IP address by the defendant to Google was an inadmissible encroachment on the plaintiff’s general personality rights under data protection law, since the plaintiff in this encroachment was undisputedly not in accordance with Section 13 (2) TMG old version, Art. 6 (1) a ) GDPR has consented.
Google Fonts FAQ discloses the data collection under a section about user privacy and states that it caches responses to minimize requests and serve the fonts faster. It does not specify exactly what data is collected but seems to imply that the information it collects is necessary to serve the fonts:
The Google Fonts API is designed to limit the collection, storage, and use of end-user data to only what is needed to serve fonts efficiently.
The German court’s ruling threatens a fine of €250,000.00 for each case of infringement or, alternatively, six months imprisonment, if the site owner does not comply and continues to provide Google with IP addresses through their use of Google Fonts.
More than 50 million websites use the Google Fonts API. Many site owners may not even know they are using them.
In consideration of those who may be subject to European courts, WordPress plugins and themes that use Google Fonts should offer a user-friendly option to self-host the fonts. If you want to continue using Google Fonts in a more privacy respecting way, there are many tutorials for self-hosting the fonts instead.
Nesting and Grids: Super List Block Supercharges Lists in WordPress
Freelance WordPress developer Aurooba Ahmed released the Super List Block plugin earlier today. Essentially, it is like the core WordPress List block — just supercharged. It is her first publicly-released extension on WordPress.org.
The primary use case for the plugin is adding other blocks within the list items. However, its options allow users to take it further by supporting grid-based layouts.
WordPress does not currently allow end-users to nest other blocks into list items via the editor. It is rich text or nothing, and it can be an irritating part of the editing experience when you need this seemingly run-of-the-mill feature. It is an issue that makes you wonder why we moved on to FSE before smoothing out the content experience. HTML list item elements are, after all, containers for other content.
For me, at least, it is not something I often need. When I do, I code it via the Custom HTML block. That works if the list’s content is simple but not when you want to nest more complex elements like other blocks.
The Super List block turns its nested Super List Item blocks into containers for pretty much anything. One typical use case would be to add multiple paragraphs or other text-based blocks like headings as single list items.
However, the plugin does not limit users to text. They can stick whatever they want in, even nesting a Super List within a Super List Item block. Unfortunately, its indentation is zeroed out in that scenario, so its items do not appear nested.
The plugin’s claim to fame may be its grid feature. The closest things in WordPress are the Columns and Gallery blocks. However, Columns are limited to a single row, and Gallery only allows images.
This is also where the Super List block needs a little refinement. When selecting the horizontal (“grid”) orientation, a new box appears to allow users to set the maximum width of all sub-list items.
Wanting to create a four-by-four grid (two rows of two columns), I immediately selected 50%. It made the most sense. However, I did not get any columns. The value was too large and did not account for the gutter space between the items. I then lowered it until I hit a number that worked: 47%. I could have looked at the page’s source code and simply did the math, but it would be a guessing game for the average end-user.
A more intuitive interface would be to switch the max-width option to a column-number setting. Technically, this would limit the flexibility of the block in a few scenarios. However, it would cover the vast majority of cases where users just want a grid of equal-width columns that span the width of their container.
This assumes that the plugin does not eventually allow users to micro-manage each list item in grid mode. There is an open ticket in the plugin’s repository to add the option to individual Super List Item blocks.
Whatever future direction the plugin goes, an easy-to-use block for quickly setting up a grid of items will likely land in many developer and site-owner toolboxes.
Three features make this plugin simpler to use than many core WordPress or third-party blocks. The first is when the user has the Super List selected in the editor. Instead of only the “+” icon to nest another block, it appends the text label “Add Super List Item.”
It is easy to get confused about where new blocks will be inserted after clicking the “+” editor icon. Super List Block’s text label makes it dead simple to understand. I would love to see WordPress and other third-party plugins take the same or a similar approach.
The other two nice-to-have features appear in the toolbar for the Super List Item block. The first is a “Settings” button for jumping back to the parent block. The second is a circular “+” icon for appending another item to the list.
Both options seemed to reduce misclicks when selecting blocks or buttons in the editor. However, I prefer WordPress’s approach to making some parent block settings available in the child block’s toolbar. Social Links is a prime example of this, allowing users to change justification and alignment without jumping back and forth.
Overall, I am impressed with Super List Block as a first release. I will be keeping my eye on it to see how it matures. It is well worth deploying on any site that requires its features now.
WP Career Summit Opens Registration, Calls for Speakers and Sponsors
WP Career Summit is a new event hosted by the Post Status community that will take place on April 8, 2022. The summit is the first of its kind in the WordPress space – an event entirely focused on job seekers and employers.
Attendees will have the opportunity to network with each other, check out job postings, visit live virtual sponsor tables, and connect with companies that are actively hiring.
“Back in 2020 I saw companies posting jobs and I saw friends posting a need for jobs, and I thought we needed to find a way to match those people with companies,” WP Career Summit organizer Michelle Frechette said. “So I built wpcareerpages.com and started tweeting a job thread every Wednesday.”
After awhile of regularly tweeting the Wednesday job thread, Frechette found that it started to take off. Depending on the week, her threads would get anywhere from 2k-18k impressions.
“Clearly, there is a need,” she said. “I’ve had people tell me they’ve found their new job through those tweets. As a result of that project and conversations with Allie Nimmons around underrepresentation, underrepresentedintech.com was born, and projects and people started getting paired up through that site.”
Frechette said when she first joined the team at Post Status, she was tasked with writing about underrepresentation and job-related content, topics for which she has a passion. She pitched the idea of a career conference to Cory Miller, the club’s new owner, and he loved it.
“My hope is that this summit is the start of even bigger conversations in the WordPress community about connecting talent with opportunity, especially for those graduating from training and education and starting their careers,” Frechette said. “If we can get younger talent into WordPress, in my opinion, we should see even more growth in our ecosystem.”
The call for speakers and sponsors is now open. Jonathan Wold is managing the sponsorship Aspect of the event and Post Status has hired Dan Maby from Big Orange Heart to run the tech part of the conference using the platform he developed and uses for WordFest.
Organizers are looking for speakers who are particularly adept at job hunting or who are knowledgeable about how to recruit and hire talent. Selected speakers will share their expertise in 30-minute recorded presentations and will receive a $200 stipend for participating. WP Career Summit will be a virtual event but will have 15 minutes of live Q&A time immediately following each session.
Registration is now open and is free, thanks to the event’s sponsors. Attendees will be emailed information about how to log in and participate closer to the event.
This Week In Web Design – January 21, 2022
…
This Week In Web Design – January 14, 2022
…
WordPress 5.9 to Introduce New API for Locking Blocks
The advent of block themes delivers more creative power into the hands of users, but there are times when theme authors may want to lock down key elements of a design and its designated content areas. First introduced in Gutenberg 11.6, the upcoming WordPress 5.9 release will include a new API for locking blocks.
Template level locking has been available in Gutenberg for a few years, allowing developers to lock the template on the UI so that users can’t manipulate the blocks. This new API offers more granular control that can be applied on the block level and override template locking.
“Instead of applying a lock to all inner blocks, you can apply it selectively to individual blocks via the lock attribute,” Marcus Kazmierczak said in the dev note. “The block level locking would supersede the inherited templateLock value. You can choose to lock moving or removing a block.”
One of the primary use cases for locking individual blocks, cited in the ticket proposing the new API, is where one might lock the “post-content” block of a single template so users can’t remove it.
“Another use case that we’re building for is having a Checkout Block with different blocks that act as fundamental steps, we don’t want people to delete or move those steps since they’re fundamental and their order is also important, but we want to allow people to select them, access settings, and insert blocks in between them,” WooCommerce engineer Seghir Nadir said.
Kazmierczak’s dev note demonstrates how developers can lock a specific block in a pattern and explained how block level locking is not inheritable.
“If a block is locked from being removed, its children can still be removed,” Kazmierczak said. “If you want to apply locking on children as well, add templateLock to the inner block component, or templateLock attribute to supporting blocks.”
For more information on the new locking mechanism, check out the Block Editor Handbook and the code examples in the dev note.
This Week In Web Design – January 7, 2022
…
Anariel Design Releases Bricksy, Its Third WordPress Block Theme
Yesterday, Anariel Design’s third block theme, Bricksy, went live in the WordPress.org directory. Ana Segota, the co-founder and self-proclaimed “creative motor” of the company, has almost become a master at block-based theme design at this point, and this project is just her showing off her skills.
I actually took the theme for a spin over the weekend when I saw it was waiting in the review queue, so I have had a few days to play around with it. Despite a few trivial issues, it has quickly become one of my favorite block themes.
While I have generally liked Anariel Design’s two previous block themes, Naledi and Clove, I could not see myself installing them on a real-world project. They were simply not my personal style. However, Bricksy is a theme I would definitely use if I had a project for it at the moment.
One of my favorite design elements is the cursive handwriting for the site logo, which is also used across various patterns.
The downside is that these are images, so they are not easily recreated by end-users without Photoshop chops. I would like to see the team reconsider using a handwriting-style font — maybe one from Google Fonts — that allows users to add custom text directly from the editor.
Bricksy has, hands down, some of the most beautifully-designed patterns I have seen in a block theme yet. In total, there are 32.
It is making an early bid for my favorite theme of 2022, but I will not get ahead of myself. We still have almost an entire 12 months to go before I make that call.
It even includes a custom social links layout. More and more themes are bundling their own takes on this pattern, but Bricksy’s color scheme and default Cover block image stand out.
With 32 patterns, I could dedicate an entire post to them all, but I am limited on time. For the most part, they are layout-focused rather than industry-focused patterns. This means they can be used on a vast range of sites. However, the pricing tables and team sections make sense for small businesses. Bricksy also supports WooCommerce.
The most striking thing about each pattern is that they all seem to fit within the theme’s overall design. Often, when themes include dozens of block patterns, some of them can feel like an additional option simply for the sake of adding one more thing in. And, that never feels like the case with Bricksy.
For long-form content, the theme is decent. However, it could be better. Its 720px content width and 18px font size can quickly grow hard to read. Cutting the width anywhere from 80px to 120px makes it much more comfortable. Bumping the font size up a couple of extra pixels works too.
When I first activated the theme, I thought it was utterly broken. I had wondered how it managed to slip through the review system. The theme’s header was outputting seemingly random demo content. But, it was also familiar. I was positive it was a test post from my install.
The issue was tough to hunt down. After everything from deactivating plugins to scrubbing templates from the database, I finally found it. The ref key for the Navigation block in the theme’s header.html template part was the culprit. Bricksy pointed to a specific post ID in the code:
<!-- wp:navigation {"ref":4790,"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /-->4790 is the ID of a literal post on my test install, so the Navigation block showed its content instead of a menu. Most likely, this was directly copied or exported from the site editor. Theme authors need to watch out for specific ID references in their code when building from the editor, making sure to remove them before shipping.
Aside from a couple of trivial issues and a single OMGBBQ one after activation, I enjoyed using the theme. It has found its place in my recommended-themes list.
WordPress 5.9 to Fix Lazy Loading Performance Regression, Resulting in 30% Faster Page Loads in Some Cases
WordPress sites may soon see a slight performance improvement on page loads, thanks to a fix for a performance regression in the core lazy loading feature. An analysis published in July 2021 showed that lazy loading applied too aggressively can have a negative impact on performance and that it’s better to eagerly load the images within the initial viewport.
WordPress’ default of lazy loading all images was causing slower performance on the Largest Contentful Paint metric (LCP) metric, which Google defines as “the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.”
Google-sponsored WordPress contributors wrote a fix that avoids lazy-loading images above the fold and thoroughly tested it as part of their efforts to evaluate the impact of various past performance initiatives. The delayed LCP will be fixed in WordPress 5.9.
“This can be improved by skipping addition of loading='lazy' for the first content image or iframe, which in the vast majority of cases will appear within the initial viewport,” Felix Arntz said in the dev note. “WordPress can only make educated guesses around that and not be 100% certain, but an analysis taking into account 50 popular themes showed that the enhancement brought LCP improvements across the board, up to 30% faster page load.”
In the future, this implementation may be able to drill down further into the block content on the page and eagerly load whatever images the theme identifies as being within the viewport.
“Have you thought about how we could have more precise heuristics going forwards that can take the semantics and structure of blocks into account to get a sense for what is actually deferrable?” Matias Ventura commented on the ticket in process. “For example, an image block or a site logo used in a header template part would be strong indicatives of being above the fold. ‘The first image of the content’ seems instead like a rudimentary measure, that varies a lot depending on preceding layout. With block themes we should have some ahead-of-time awareness of layout which we can use to produce more meaningful instructions.”
Felix Arntz said he already has detecting the header template part on his radar and is willing to refine the implementation as the world of block themes expands.
“The refinement of the lazy-loading implementation should notably improve LCP performance for most sites that rely on it, while not having adverse effects for sites where the default heuristics described above do not apply to,” Arntz said. “That is only a solid starting point though. In the future, specifically with the more semantic content specification that block-based themes will facilitate, we will be able to further fine tune the lazy-loading implementation by using the available block information.”
10up Releases the Publisher Media Kit WordPress Plugin
Earlier today, version 1.0 of 10up’s Publisher Media Kit went live in the WordPress plugin directory. It is a preconfigured set of blocks and patterns for jump-starting a media kit page for small and medium-sized publications.
When I first noticed the plugin, my mind immediately jumped to press kits and branding pages for businesses. Not enough companies within the WordPress space have such pages, and it can often be hard for journalists and other writers to find information. While this plugin is geared toward publications, small businesses can still get some use out of the plugin with a few changes.
Given that WP Tavern just launched its new design yesterday, this might be an opportunity for us to lead the way. The plugin does give me a few ideas on what we could do with a similar page here on the site.
Publisher Media Kit has been tested with Twenty Twenty-One, Newspack, and several Newspack child themes. I did run it through most of those to check for compatibility, and the plugin worked admirably. However, I primarily tested it with Twenty Twenty-Two, the upcoming default WordPress theme. Aside from a few layout alignment quirks, it worked well.
The plugin automatically creates a new “Media Kit” draft page on the website once it is activated. The content is a set of pre-defined sections built from eight patterns and an accompanying Tabs block.
This allows users to quickly fill in their own content and make customizations. Once done, it is just a matter of hitting the publish button.
However, end-users can take things into their own hands by using the various patterns on any post or page of their site. The cover, stats, and questions/contact patterns work well as general-use patterns.
Note: I deleted a couple of the patterns from the screenshot above. For some reason, they were rendered invalid in the patterns explorer but worked fine when inserted into the content canvas.
I would love to see a standalone version of the Tabs block included with the plugin. It is showcased in the rates and digital ad specs patterns, but it is so easy to create new tabbed content that I cannot help but want to use it with other projects.
It could become a popular tabs solution with a few design options like colors, borders, and typography. It is minimal at the moment, but its user experience would make for an ideal foundation for a single-block plugin.
One of my favorite things about the block system is that it makes plugins like Publisher Media Kit feasible. In the past, it was virtually impossible to ship a content-focused plugin and expect it to work with most themes, at least not without a lot of custom design work. That meant that solid solutions would often stay in-house with agencies with no ideal way of shipping them.
The standardization of blocks has bridged much of that gap. As the system continues evolving, especially with more design options, I expect to see similar plugins in the future.
How to Add a Scrolling News Ticker in WordPress
Do you need to add a scrolling news ticker to your WordPress site?
You’ll often see news tickers used by television networks to highlight breaking news. You can add a news ticker to your website to highlight special deals or popular posts.
In this article, we’ll show you how to add a scrolling news ticker in WordPress.
What Is a Scrolling News Ticker?
A news ticker scrolls a single line of information continuously across the screen. They typically display current news items, sporting results, live financial and currency information, and weather information.
They are a great way to display small snippets of information that are always changing. You’ll find that a news ticker can display quite a lot of information in a limited space on your WordPress blog.
For example, you could use a news ticker to display your best performing posts, items in your store that are on sale, or any other information that you want to highlight.
Another way to display this type of information on your website is with a sticky floating footer bar.
With that being said, let’s look at how to add a scrolling news ticker to your WordPress site.
How to Add a Scrolling News Ticker in WordPress
The first thing you need to do is install and activate the Ditty News Ticker plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, the plugin adds a News Ticker menu item to your WordPress admin area.
You need to navigate to News Tickers » Add New to add a news ticker. On the next screen, you will have the ability to give this particular news ticker a name, ticker text, and link.
For each ticker, you can add as many ticks as you like. These are the separate pieces of information you want to display, and each can have its own link.
If you want to add another ticker item, then press the plus + button at the top right of the current tick. A new ticker item will be added.
Once you are done adding ticker items, you should click on the Ticker Mode tab. There are three different ticker modes available: scroll, rotate, and list.
Scroll mode is the default setting because it is the most commonly used in television networks. Rotate is another good option if you want to show one ticker at a time.
The settings on the rest of the page allow you to adjust the behavior of the news ticker. You can configure scroll speed and direction, override the default ticker dimensions, and choose the spacing between each tick.
The plugin generates a shortcode as well as a PHP function for each news ticker you create. You can either add the shortcode to a post, page, sidebar widget, or you can directly insert the PHP function into your theme files.
Once you insert the ticker shortcode or PHP function, then you can visit your website to see it in action.
We hope this tutorial helped you learn how to add a scrolling news ticker in WordPress. You may also want to learn how to increase your blog traffic, or check out list of the best email marketing services for small businesses.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Add a Scrolling News Ticker in WordPress first appeared on WPBeginner.
This Week In Web Design – December 3, 2021
…
Cyber Monday 2021 on Designmodo
This post is originally published on Designmodo: Cyber Monday 2021 on Designmodo
We start the Cyber Monday sale! Apply coupon code CYBER at checkout and save 30%. Start to create websites and email newsletter templates today!
For more information please contact Designmodo
Black Friday 2021 on Designmodo
This post is originally published on Designmodo: Black Friday 2021 on Designmodo
We start the Black Friday sale! Apply coupon code BLACK at checkout and save 30%! The coupon code is available on all our apps.
For more information please contact Designmodo
This Week In Web Design – November 19, 2021
…
120+ Black Friday / Cyber Monday 2021 WordPress Deals – Big Savings
Looking for the best Black Friday and Cyber Monday deals on your favorite WordPress products?
The next few days are the perfect time to buy premium WordPress plugins, themes, web hosting, and tools to grow your business. As always, to help you find the best deals, we have created the ultimate listed of best WordPress Black Friday and Cyber Monday deals for 2021. Some of these are exclusive just for WPBeginner readers.
View our Complete Black Friday and Cyber Monday List for 2021
We will be updating this page on a daily basis to add more deals.
View our Complete Black Friday and Cyber Monday List for 2021
The post 120+ Black Friday / Cyber Monday 2021 WordPress Deals – Big Savings first appeared on WPBeginner.
This Week In Web Design – November 12, 2021
…