Posts

Posted on

How to Easily Convert Forms to PDF with Forminator and E2Pdf (For Free!)

Featured Imgs 13

Thanks to Forminator and E2Pdf, you can now quickly and easily generate a PDF from a form in WordPress. This makes it as simple as ever when creating agreements, contracts, certificates, licenses, and more directly from a form on your WordPress site.

Plus — it’s free!

As you’ll see, when these two get together, they form a PDF-ect team.

To kick things off, watch Forminator and E2Pdf in action in the video below. Then, once you get a glimpse of how they work together,  we’ll break-down all the information in detail throughout this article.

As you can see, Forminator and E2Pdf can deliver some amazing PDFs as easily as ever.

You should already be familiar with Forminator. He’s our popular 5-star form building plugin that can create amazing forms, quizzes, polls, registration forms, and much more in just a few clicks.

Forminator banner.
Forminator is the champ at simplifying form building.

And when it comes to PDFs, E2Pdf is another popular 5-star rated plugin that features PDF Document Viewer, PDF Document Editor, PDF Data Injector, and other awesome features.

E2Pdf banner.
E2Pdf is ready to include PDFs with your WordPress quickly and easily.

You’ll see how the combined forces of Forminator and E2Pdf can allow your users to fill out a form on your WordPress site and have it become a PDF.

If you haven’t already, download Forminator and E2Pdf. Once you have them installed and activated, you’ll be ready to follow along as we create some PDFs directly from our WordPress form.

Now, let’s walk through how to create a PDF using three different methods that include:

Additionally, at the end of this post, there’s an opportunity to get a sweet discount for E2Pdf. Though it’s free to use, there are some upgrades you can make with WPMU DEV and E2Pdf’s partnership.

Ready to get your PDF on? Let’s get started.

Automatically Generating a PDF From a Form

This method creates a PDF template based on a form that was created in Forminator. It’s a way to get started with an established form instantly, so you don’t have to start from scratch.

Clicking on Templates from the E2Pdf admin and Add New will get you started. Once clicking Add New, a pop-up will appear where you will create the PDF.

Where you add a new E2Pdf.
The PDF is ready to be made!

From here, you’ll want to give this PDF a Title, select whether it’s active or not in the Status, and change the Width & Height.

You can also choose a premade custom selection from the Size Preset dropdown regarding the size. There are options for Letter, Note, Tabloid, and more.

You can see there are quite a few options already available to you.

Also, choose a Font, Font Size, and Alignment.

Once you have the prerequisites figured out, head to the Extension dropdown. This is where the integration comes into play.

You’ll notice that E2Pdf has picked up that Forminator is installed on our WordPress site and automatically included it as an option. Cool, huh?

I premade a form on Forminator and titled it “E2PDF Test Form.” You can see I have First Name, Email Address, Phone Number, and Message as the fields in the preview below.

Forminator preview.
A preview of my Forminator form shows all the fields.

Keep the Extension on Forminator, and then you’ll choose what form you want to use in the Item dropdown.

You’ll notice my premade Forminator form “E2PDF” is an option, so we’ll select that.

The name of the form that fields will be used.
The name of the form will appear in the dropdown.

When everything is set up, hitting the Auto PDF button will take care of the rest.

The auto PDF button.
You’re one click away from a PDF.

And just like that, we now have a PDF template that is created from a form. E2Pdf takes all the input fields and places them into a template automatically.

Test template.
The template is an exact copy of the form created in Forminator.

You can check out what it looks like by hitting Preview.

Preview of PDF.
The PDF in all its glory.

Need to edit? That’s a click away by clicking the gear icon for Options.

You can also drag and drop the fields around to rearrange any way that you’d like. Additionally, if you right-click (or use two fingers to tap if you’re on a Mac) on a field, it will open up the options for:

  • Map Field
  • Hide
  • Copy
  • Cut
  • Delete
  • Properties
The various field options.
All of these options are available in each field.

The PDF Builder located on the righthand side allows you to drag and drop Fields and Objects into your PDF form.

Drag and drop any additional details that you’d like.

Again, just hit Update if any changes are made, and you’ll be all set!

You’ll notice then that your new PDF for the form is in the Templates section of E2Pdf’s admin. From here, you can open it up, see if it’s active or not, and get the Shortcode for it (which I’ll be discussing soon).

Templates in admin.
The new template in the admin area.

Now that we’ve looked at how to generate a PDF from a form automatically let’s move on to…

Using a Premade PDF

Another way of creating a PDF from a form is by using a premade template and simply mapping data to the fields in it.

You’ll want to add a new PDF template by going to Templates > Add New. Then, title it, and include the settings you’ll want (e.g. width, font, etc.).

Make sure Forminator is selected as the Extension and choose the form used to add in all of the data.

Next, we’ll click Upload PDF, and we’ll select a PDF we want to upload as a template.

Upload PDF button.
Once you click upload, you can choose a file from anywhere.

Once uploaded, it shows up in the admin. In this example, I created one called “Another Example.”

PDF set up in Word.
You can see, I set this up like a contract.

Currently, none of the form fields are mapped on the template. Changing that is a breeze. All you have to do is add them manually from the PDF Builder — just like I showed in the previous example.

Fields you can place in the PDF.
Place the fields wherever you’d like!

As you can see, I added several input fields and a signature field.

Example of the new PDF.
My new PDF form has all of the fields now included.

Now, to choose how the data is stored in the form on Forminator, all you do is right-click (or use two fingers on a Mac) on the field and select Map Field. You’ll then click on the field in Forminator’s form for whatever selection you want.

All the data is quick and accessible to input.

Do this for every field that you want to include on the form and PDF.

If you’re happy with everything after hitting preview, just click Update and save your changes. It’s that easy!

The final method of creating a form that translates into a PDF is the…

Creating a PDF from the PDF Builder to Design a Template

This method creates a template by just using the PDF Builder. Like the other ways of creating PDFs, it’s fast and straightforward to set up.

You’ll start by going to Templates and Add New for a new template. As I previously demonstrated, name it and choose the settings that suit your needs.

Make sure Forminator is selected in Extensions, and choose a form that you’d like to use from the dropdown menu.

This time around, we will click the Empty PDF button because we will completely design this template.

Empty PDF button.
We’re going to start from scratch with this one.

Once clicking Empty PDF, it takes you to — you guessed it — an empty PDF page.

PRO TIP: When doing this, write everything down that you want to include on your PDF. That way, you don’t miss anything, and you can ensure that your PDF design is precisely how you want it before you start putting it together.

Once you know what you’d like to include, you can map all of the blank PDF fields by dragging items from the PDF Builder. Then, right-click (or use two fingers on a MacBook) to Map Field to the form inputs on the Forminator form.

Mapped PDF.
You can even add a company logo as an image.

As always, you can preview it. Once it looks good, click Save, and you’re all set!

How Users View, Receive and Download PDFs

The way users view, receive, and download PDFs all begins with shortcodes. Then, depending on where you add them, users can download, view, or save the PDF.

Each time you create a new template, it creates a shortcode accessible in the admin under Templates and each template. When clicking on Shortcodes, a dropdown appears that has several to choose from.

Shortcodes for the PDFs.
You can see the variety of shortcodes available in the dropdown.

Copy and paste a shortcode of your preference. Then, we’ll head into the form settings in Forminator.

From here, you’ll click on the form that you want and select Edit and then Behavior.

We’re going to add this shortcode to the inline message that appears after the form submission. I’ll also add a little note beforehand. This particular shortcode that I copied is to save the PDF.

Submission Behavior section.
Your user is now all set to save the PDF.

Additionally, after a user submits a form, they can receive an email. I’ll set up an Attachment option for the PDF that the user will receive.

Then, just copy the Attachment shortcode…

The attachment shortcode.
It’s the first shortcode on the top.

Go into Forminator, Email Notifications, and Add Notification (or edit, if you already have one set up). Finally, paste the shortcode that the user receives with your message.

Where you set up an email notification.
The shortcode in the message is all ready to go!

After a user submits a form, they’ll get an email notification with the PDF attachment. Here’s what this example email looks like:

How the PDF looks in the email.
As you can see, the PDF is ready to download.

When the user downloads the PDF, it will show exactly what was submitted on the form that the user filled out.

The downloadable PDF.
Here’s the example I used.

This is a great way to provide contracts, quotes, or any form to your user and yourself — all in an easy and accessible way via PDF.

E2Pdf Plus Forminator Form a Great Team

As you can see, E2Pdf teaming up with Forminator makes creating a PDF based on a form a reliable way to provide PDFs directly from your WordPress site.

There’s an endless amount of combinations you can create when it comes to forms that create PDFs. E2Pdf free version allows for one active page template at a time. That might be fine, depending on what you’re using Forminator and E2Pdf for.

However, if you need more templates than just one, be sure to take advantage of a special 20% discount for E2Pdf on our partners’ page.

And now, you should have the perfect PDF solution for you and your users!

Posted on

Privacy Toggle in Context Menu

Category Image 052

It used to be that in order to change a Pen, Project, or Collection from public to private (or vise versa), you had to open it directly and edit it there. Now, you can make that change from anywhere you see them in grid, be it in the Your Work section, your profile, or anywhere else you see something you own.

If you have a bunch of things you need to toggle, this should be much faster, particularly in list view.

Privacy is a PRO feature, so if you aren’t PRO, you’ll see a message like this:

The post Privacy Toggle in Context Menu appeared first on CodePen Blog.

Posted on

7 APIs for Surveys

Featured Imgs 23

Have you been asked to take a survey lately? Your answer is likely, yes. A business or organization may want to survey people to conduct broad market research, drill down specifics about a customer, or spot trends. And in recent years, a digital transformation has changed the way surveys are conducted.

Posted on

CSS Border Font

Featured Imgs 23

Every letter in this “font” by Davor Suljic is a single div and drawn only with border. That means employing some trickery like border-radius with exotic syntax like border-radius: 100% 100% 0 0 / 37.5% 37.5% 0 0; which rounds just the top of an element with a certain chillness that works here. Plus, using pseudo-elements. I love all the wacky variations with colors, shadows, and border styles, leaning into the limits of CSS.

Drawing things with CSS has long fascinated people. Icons are a popular choice (famously, Nicolas Gallagher’s Pure CSS GUI icons from 2010), since we can draw so many shapes with CSS without even needing to lean on the all-powerful clip-path.

But as Lynn Fisher has taught us, a single div is barely a limitation at all.

Direct Link to Article — Permalink

The post CSS Border Font appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Posted on

Jacek Jeznach

Featured Imgs 23
14

Creative front end / web developer, professionally connected with the web development industry and IT for many years.

Interested in the entire frontend spectrum and working on ambitious projects with positive people.

Posted on

How to Display Full Size Images in WordPress (4 Methods)

Featured Imgs 13

Do you want to learn how to display full-size images in WordPress?

The latest version of WordPress automatically resizes large images to improve performance. But sometimes you may need to display images with larger dimensions.

In this tutorial, we’ll share four different ways to display full-size images on your WordPress site.

How to display full-size images in WordPress

Why is WordPress Scaling Large Images?

Earlier versions of WordPress allowed users to upload images with very large dimensions.

But, what happened is WordPress beginners were uploading images that were simply too large for the modern web. Large images lead to slow website loading speeds and poor performance.

To fix this issue, the WordPress 5.3 update changed how WordPress handles very large images.

For example, if you upload an image with the dimensions of 5000px by 7000px, then WordPress will resize the image to 2560px and scale the width to match the original dimensions.

Now, when a user visits a page with a previously large image, they’ll see the scaled-down version of that image.

This leads to improved website performance and happier users overall.

Reasons to Stop WordPress From Scaling Images

This new feature is useful for most WordPress website owners, but some users might need to display full-size images.

For example, if you’re a photographer or artist who sells your work, then you may want to display larger images on your website, so visitors can buy or download them.

Or, you could be running a website where larger images are a requirement, like a stock photo website or website that sells custom prints and pictures.

Maybe, you need one large image for your home page background image that’s bigger than the 2560px limits?

No matter what your reason for wanting a full-size image, we’ll show you how to do it, step by step.

How to Display Full-Size Images in WordPress (4 Methods)

There are 4 different ways you can display full-size images in WordPress.

Some methods work better for single images, while others are best for an entire image library.

You’ll want to choose the full-size image method that’s right for your goals.

Method 1. Get Full Size Image URL in WordPress

If you only want to use one or two large images on your website, then this solution is probably best.

When you upload an image to WordPress that exceeds the dimensions, WordPress will scale your image and create a new one. But, the original image is still intact.

To display the original image dimensions, you’ll need to delete ‘-scaled’ from the end of the WordPress image URL and insert the image into your site with the modified link.

Simply head over to your media library by going to Media » Library and select your large image.

Large image media library

Now, locate your ‘File URL’ in the image box.

Next, you’ll want to delete ‘-scaled’ from the end of your image URL.

Delete scaled image URL

After that, you can copy the image URL and insert the image into your website.

Note that you’ll need to embed the image into your site using the link, minus the scaled portion.

To do this navigate to a post or page you want to add the image and click the ‘+’ icon to add a new block.

Insert new image block for large image

Then click the ‘Image’ icon to add an image block where you can paste your URL.

Click ‘Insert from URL’, then paste your full size image URL into the box and press the ‘Enter’.

Add non scaled image URL

After that, you’ll need to click ‘Publish’, or ‘Update’, if the post is already live, and your full-size image will now be viewable on your site.

You can follow this same process for every full-size image you want to add to your site. But, as long as you use the File URL minus ‘scaled,’ your WordPress images will display in full size.

Method 2. Automatically Disable Image Scaling in WordPress (with a Plugin)

The second method is using a WordPress plugin to disable image scaling across your site.

The plugin we recommend is called Disable “BIG Image” Threshold. This plugin offers one of the easiest workarounds for displaying big images on your site, and it’s entirely free to use.

First, you’ll need to install and activate the Disable “BIG Image” Threshold plugin. For more details on installing a plugin, see our step by step guide on how to install a WordPress plugin.

Once you’ve installed and activated the plugin on your site, it’ll automatically remove the big image threshold added by WordPress.

You’re free to add new images just as you were before the WordPress image update.

When this plugin is active, WordPress will not add the ‘-scaled’ attribute to any image.

Method 3. Automatically Disable Big Image Scaling in WordPress (with Code Snippet)

Another option is to add a code snippet to WordPress that accomplishes the same goal as the plugin above.

If the plugin doesn’t work for some reason, or you don’t want to install too many plugins, then you can use this method.

The new WordPress image scaling feature uses a filter called big_image_size_threshold.

You’ll want to use the following code to disable this function:

add_filter( 'big_image_size_threshold', '__return_false' );

You need add this code in your theme’s functions.php file, in a site-specific plugin, or by using the Code snippets plugin.

Method 4: Open Full-Size WordPress Images in a Lightbox

The final option is to add a full-size image lightbox to your site. With this solution, you get the best of both world.

You can load smaller image thumbnails in your blog content, gallery, or carousel, and when clicked, it will popup with your full-size image.

Show full size image lightbox effect

To do this, we recommend using the Envira Gallery plugin. It’s the best WordPress image gallery plugin in the market and lets you easily add the lightbox popup image effect.

The first thing you’ll need to do is install the Envira Gallery plugin. For more details, see our step by step guide on how to install a WordPress plugin.

After installing and activating the plugin, see our step by step guide on creating an image gallery in WordPress with the lightbox effect.

Keep in mind that before you upload full-size images for your gallery, you’ll need to disable image scaling via the plugin or child theme methods above.

Otherwise, your lightbox images will be using the scaled-down version of the image.

Finally, it’s important to note that if you add images with large dimensions, it’s essential to optimize them for the web, so you don’t slow down your website.

We hope this article has helped you display full-size images in WordPress. You may want to see our guide on optimizing images for SEO and our expert pick of 40 useful tools to manage and grow your blog.

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 Display Full Size Images in WordPress (4 Methods) appeared first on WPBeginner.

Posted on

Introducing…Blog XChange! Contribute Your Knowledge To Our Blog And Get Hero Points Plus Links To Your Site

Featured Imgs 29

Are you looking for great tips, tutorials, and hacks from experienced web developers to take your skills to the next level and help you solve client problems faster? Well, so are we! That’s why we are launching The BLOG XCHANGE!

WPMU DEV Members Blog XChange
Chun-chun-chun-chun…Blog XChange! (Members Only)

tl;dr – The Blog XChange is a new initiative for WPMU DEV members aimed at providing better engagement with our member community by focusing on the content that matters most to you. Help us to help you and we’ll reward you with Hero points and links to your site.

Blog XChange…What The Heck Is That??

Here at WPMU DEV’s secret content lab, we are always searching for new blog content ideas.

You would think that hiring the most brilliant writers in the WordPress universe would result in endless blog content, but alas, this isn’t so.

Which is ironic, I know, given that one of us is the author of a best ok-selling book called “Infinite Content Creation (How to Never Run out of Content Ideas for Your Blog).”

The WPMU DEV blog, however, is a different beast. We don’t publish fluffy filler content about WordPress. We know that our audience (yes, YOU!!) would never stand for it.

We know that you expect us to write articles and tutorials with substance. Beefy content (or tofurkey if you prefer non-meaty adjectives) that you can apply in your business to improve not only your skills but also solve real challenges for your clients and deliver them better and faster websites that will help them get results.

wpmu-dev-blog
Help us make our blog your blog!

Writing blog content targeted to your needs requires us to spend a lot of time researching previous post comments, scouring our members’ forum, analyzing analytics, doing keyword research, peeking into our competitors’ sites, reading through tons of industry newsletters, etc.

Sometimes, we come near, but near just isn’t close enough.

We want to post content on our blog that reflects who you are, what you do, and how you solve everyday challenges in your business working at the coalface and deep in the trenches.

Since we can’t be you (somebody’s gotta write the blog, right?) we came up with an ingenious idea:

“Why not tap into your knowledge and experiences as a WordPress web developer and reward you for all contributions you make to our blog?”

A Fair Trade

When we recently floated the suggestion to create an area where members could exchange their knowledge for hero points and links to their sites, we received overwhelmingly positive feedback and support from our members…“provided it’s a fair trade,” said all of you in unison.

We know you’re busy running a business and that you pay us to serve you, so we don’t expect you to give us something for nothing.

We’re all about fair trading here at the DEV…(you’re probably not even aware of this, but did you know that you can now get hero points just for commenting on our blog posts?)

Hence, Blog XChange (and not Blog XPloitation!)

By sharing your knowledge and experiences on the Blog XChange, you will be helping other members and helping us too! In return, we will reward you for your contributions with loads of hero points and, if we use your content on our blog, with links to help promote your business.

Web Developer.
Don’t let all that great knowledge go to waste…xchange it for hero points and links at the Blog XChange!

In this post, I’ll briefly tell you how it works and how to get started if you’d like to contribute. For full details, including guidelines for posting content and exactly how we will reward you for your contributions, see the pinned post inside the Blog XChange. (Check it out…it’s now live in your Member’s Area!)

Blog XCh-ch-ch-Changes – How It Works In A Nutshell

First off, we’re not looking for Pulitzer-prize-winning authors. You don’t have to submit polished prose or perfectly-presented publish-ready posts…we’ll take care of that.

What we’re looking for is a good ‘chunky’ piece of content that comes from your experience as a WordPress web developer, website builder, digital agency, tech support services provider, etc.

In your own words, tell us about a problem you have solved or a solution, fix, or hack you discovered that improved some Aspect of your or your client’s website or business.

Test and compare different plugins you are currently using against ours and share your results.

If you like, also feel free to share code snippets, screenshots, links to your favorite time-saving tools and resources, etc.

Preferably, it would be ideal if the content you share on the Blog XChange includes using our plugins or services (you’ll get extra points for that!) but it’s not a requirement.

Every contribution you make on the Blog XChange will earn you points. After all, just by posting it, you are helping other members.

Hustle
The Blog XChange can be your little side hustle.

What the blog team will do, is regularly scan the contributions posted on the Blog XChange. We will then reward you for anything we use on the blog. This includes quotable sentences, paragraphs, or sections of text, code snippets, mini-tutorials, video reviews,…even links to great tutorials published on your own sites, or a great headline idea for a new post will earn you a point.

In some cases, we may contact you to discuss publishing a full-blown article, tutorial, or case study. This is exactly what happened when one of our members posted a comment on one of our discussions. We then created a case study and promoted her business throughout the post…so, win-win!

Obviously, there are some things we will not publish, like content designed to promote affiliate links or hyped-up self-promotional stuff…basically we’ll apply the same editorial guidelines and criteria to whatever you submit that we ourselves use to ensure that we maintain our blog to the highest standards.

The Times, They Are A-Blog XChangin’ – How To Get Started

Contributing content to the Blog XChange is super easy. Any WPMU DEV member can do it.

As soon as you get an idea for a post, head on over to the Members section and click on the Blog XChange link (or click here to go there now.)

WPMU DEV Members Blog XChange
Click this button as soon as inspiration hits!

Click ‘Start Discussion’.

WPMU DEV Members Blog XChange - Start Discussion
Almost there…

Enter the title of your post in the ‘Subject’ field (it doesn’t have to be a snazzy title or an SEO-optimized headline…just tell us what it’s about!)

Under ‘Topic’ select ‘Blog XChange’.

Type or paste in your content in the ‘Discussion’ field. Feel free to use the formatting, quotation, and hyperlink tools too!)

If you’d like to keep track of any discussions on your thread, check the ‘Notify me by Email’ box.

Click the Post button to submit your contribution.

Blog XChange - Content submission form.
Type, select, paste in content, check, and click the button and you’re all done…too easy!

Your contribution is now added to the Blog XChange. If you need to make any adjustments to your post, just click on the Edit link.

Example of Blog XChange submission.
You’re a blog writer now…congrats!

That’s it! you’re all done.

Thank you! Hero points coming right up…check your sidebar!

We’ll get in touch with you if we use your content on our blog (e.g. to confirm the URL we’ll be linking to) and to discuss things further if we have any questions.

WPMU DEV - Blog XChange section with content added.
Hero points and links…thank you WPMU DEV!

To XChange is to Grow

As web developers and WordPress service providers, you know the challenges that you and your clients face every day. Better still, you know how good it feels to solve these challenges and come up with better, faster, more efficient ways to get things done.

By sharing your knowledge and experiences with us, you’ll be helping us write the exact content you’d like to see on our blog, helping other members, and helping yourself too!

As Winston Churchill famously never stated…

“To improve is to XChange; to be perfect is to XChange often.”

We look forward to seeing your contributions and to working more closely with you to benefit our valued members and help improve your businesses.

See you at the Blog XChange!

Posted on

Build a Full WordPress Site via Block Patterns With the Hansen Theme

Category Image 091
Front page output of the Hansen WordPress theme.

Earlier today, the WordPress theme directory welcomed its fourth block-based theme. Built by UXL Themes, Hansen is one of the more stylish projects capable of working with the site editor in the Gutenberg plugin. The theme author also stepped it up a notch and included several block patterns.

I have written about how patterns will be a game-changer. I have talked about the need for a UI overhaul to better expose them to users. And I have proposed that theme authors use the pattern system instead of templates, allowing users to build out full sections of their sites at the click of a button.

UXL Themes has done just that. Most patterns that we have seen thus far have been built primarily for post or page content. The Hansen theme takes that idea a step further and creates patterns for different site sections.

Want to try a different look for the header? Just remove the old one and swap in another header pattern.

Header patterns included with the Hansen WordPress theme: dark and light.
Inserting the dark header pattern.

How about changing the look of your blog posts page? The theme comes with two and three-column patterns for outputting the latest posts.

Blog posts patterns included in the Hansen WordPress theme.
Inserting a two-column blog posts pattern.

It also packages a Content and Sidebar pattern that is more suitable for single posts and pages.

I am still undecided on whether the patterns or template parts system is the ideal solution for this. Right now, patterns have a cleaner UI overall and can be categorized. Template parts might be easier to switch, but there is no way to group them (e.g., header templates, footer templates, etc.). Regardless of what becomes the de facto standard in the long term, we need more theme authors like UXL Themes experimenting with these concepts, seeing what works, and gathering user feedback.

The theme does not add much in the way of content patterns. However, it does include one named “2 Columns of Text and a Full-Width Cover.” While it is a bit of a mouthful, the name does fully describe what it does. This is also the pattern in use for the homepage in the theme’s demo. However, the demo has a slight modification, adding a custom latest posts section.

A custom block pattern with two columns and a cover/hero section.
Hansen content-related pattern.

Hansen is more than just its patterns. The theme generally looks pretty good too. It has a bit more pizazz than we have seen from some other block-based experiments. Like the recently-released Phoenix theme, developers are becoming more comfortable moving beyond the bare-bones block-based designs from previous months.

These themes are obviously not on par with what one could build on more mature systems. However, Gutenberg’s FSE system is inching forward. The theme authors who are experimenting now are paving the way for the next generation of themes, which I am excited to see.

The Hansen theme also includes several block styles. Most are geared toward blocks that users would typically use in the site editor. I have not seen such an approach in previous block-based themes.

Two of the styles are for mobile navigation. The Mobile Friendly style displays a horizontal nav menu on desktop while switching to a hamburger-flydown on mobile devices. The Mobile Style alternative retains the mobile layout on all screen sizes.

There is a Box Shadow style for the Query Loop block, which adds a shadow to each post. In the future, I hope to see WordPress provide box-shadow options for this instead of themes relying on block styles. Nevertheless, it is a welcome addition for the moment.

Selecting the Box Shadow style in the block editor for the Query Loop block.
Box Shadow style for the Query Loop block.

The No Bottom Margin style allows users to remove bottom margin from Columns. I assume the theme author used this to address the common issue of nested blocks and their bottom margins adding on top of each other. I do not like this as a style because it gives the user the responsibility of fixing a design issue that should be taken care of under the hood. Generally, the problem stems from tackling spacing in design using a bottom margin instead of a top margin. It can be corrected in either case, but going with a top-margin approach is easier.

Outside of that one stylistic issue, the other downside to the theme is that it is not well-suited to long-form content out of the box. The content area stretches too wide for the default font size, making for uncomfortable reading. The theme includes a Narrow Width style for the Group block that corrects this. However, it would ideally be the reverse, with the content defaulting to a narrower width. Whenever a user wants to write a long-form blog post, they would need to wrap it in a Group block and apply the Narrow Width style. The more common use case should be the default.

Overall, I love the experimentation. Hansen is one of the best themes for playing around with the site editor in Gutenberg right now.

Posted on

The Ultimate CSS Grid Tutorial for Beginners (With Interactive Examples)

Category Image 052
For some time, many CSS developers had been holding off on incorporating the CSS Grid Layout specification in real projects. This was due to either volatility of the spec, lack of browser support, or possibly not having the time to invest in learning a new layout technique. We're now at the stage that Grid Layout is safe to use in most projects, so I hope this CSS Grid Layout tutorial will help if you haven't yet fully examined this CSS feature.
Posted on

Hiding Content Responsibly

Featured Imgs 25

We’ve covered the idea of hiding things in CSS many times here, the most recent post being Marko Ilic’s “Comparing Various Ways to Hide Things in CSS” which did a nice job of comparing different techniques which you’d use in different situations. Hugo “Kitty” Giraudel has done something similar in “Hiding Content Responsibly” which looks at 10 methods—and even those, you could say, aren’t totally comprehensive.

Does this mean CSS is messy and incomprehensible? Nah. I feel like all the methods are logical, have good use cases, and result in good outcomes. Allow me to do a have a pretend conversation walking through my thought process here.

I need to hide this thing completely. For everyone.

No problem, use display: none;.

I need to hide this thing, but only hide it for screen readers, not visually. (For example, an icon that has no additional meaning for screen readers, as there is an accessible label nearby.)

No problem, that’s what the aria-hidden attribute is for.

I need to hide this thing, but only visually, not for screen readers. (For example, the contents of non-active tabs.)

No problem, use a .sr-only class. That leaves it accessible but hides it visually until you remove that class.

Oops, I actually want to hide this thing visually, but I still want it to take up physical space, not collapse. (For example, say a button has a loading spinner icon that is only needed when performing an action. The size of the button should factor in the size of that icon all the time, not just when the spinner is visible. That way, there’s no layout shifting when that icon comes and goes.)

No problem, use transform: scale(0) which will visually collapse it, but the original space will remain, and will leave it accessible to screen readers.

Oh nice, I could transition the transform, too, I suppose. But actually, that transition doesn’t fit my site well. I just want something I can fade out and fade in.

The opacity property is transitional, so transition that between 0 and 1 for fades. The good news is that visibility is also transitional. When fading out, use visibility: hidden, and when fading in, use visibility: visible to hide and unhide the thing from screen readers.

That’s not entirely comprehensive, but I find that covers 95% of hiding cases.

The post Hiding Content Responsibly appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Posted on

WordPress 5.7 Lets Administrators Send Password Reset Links

Category Image 006

It’s that time in the release cycle when all the dev notes are rolling out ahead of the next major update. These notes include technical summaries of all the goodies coming in the next release. If you haven’t been paying close attention, there are always a few happy surprises in there that pop up as conclusions to tickets that contributors have been working on for years.

The new password reset feature coming in WordPress 5.7 allows administrators to manually send a password reset link to users, resolving a five-year old ticket. Instead of having to instruct a user about where to go to click on the lost password link and follow the steps, this new feature lets administrators push a button in the admin to send the link. If you have ever had to support clients or a community of users who may not be very technically inclined, this new password reset feature will save lots of time in helping users regain access to their accounts.

The “Send password reset” link is available in several places. Administrators can find the link on the Users screen, as well as in the bulk actions dropdown menu.

It is also available on the individual user screen with a button and a note clarifying that this action will not change the user’s password or force the user to change it.

The password reset email notification includes the site name, username, a password reset link, and the IP address where the request originated:

This password reset request originated from the IP address [IPADDRESS].

There is an open discussion on the original ticket regarding whether this email notification should include the administrator’s IP address.

“The IP address (while fraught with privacy concerns) is the only thing validating that this email came from the website and is not a phishing email,” contributor Gabriel Mariani said. “Unless there is a better way to validate the authenticity of the email I’d say it would be worthwhile to keep it.”

Others see the IP address as useful only if a user is attempting to verify that it is their own IP address or collecting the information to prevent a phishing attack. Giving out the administrator’s IP address doesn’t seem pertinent to either of those concerns.

“I could use my phone to send a reset, and I would have no idea what my IP was,” Mika Epstein said. “And that can easily be faked. Omitting the IP actually reduces the data being sent out that could be used by bad-actors.

“I think it’s more likely we’d have a savvy bad actor than end users who would need to ask for a password reset but also know what a valid IP is and how to ask about it.”

This part of the email text may be iterated on in subsequent patches or future releases of WordPress. Check out the dev note for more discussion on this feature, along with information about further customizing the notification email.