Preview WordPress Block Pattern and Theme Combinations via New Site

A screenshot of 6 block patterns from the WP Block Patterns homepage.
Viewing patterns from the WP Block Patterns homepage.

Andrew Starr, the owner of UXL Themes, has cobbled together a new project around block patterns. His new site, aptly named WP Block Patterns, allows users to preview any WordPress.org-hosted block themes and patterns together.

The project does not allow visitors to download anything or ask them to sign up. It is a basic demo system, one that WordPress.org should consider at some point.

Visitors can choose any block pattern. Then, they can select any theme to see what they look like together. It is a quick way to test patterns and themes without actually adding them to your WordPress installation.

For example, a user can view the Team Social Cards pattern — one that I had a hand in creating — along with Anders Norén’s Tove theme.

Three-columned team social cards layout pattern.

Or, the Image and a Quote on a Background pattern with Anariel Design’s Naledi theme.

Two sections, each with a fruit and a quote.

From Gutenberg Hub’s landing page templates to EditorsKit’s ShareABlock collection, the block system has allowed developers to experiment with unique sites for end-users. Because everything is built upon a standard, I am guessing we will see even more of these creative projects in the future. WP Block Patterns is another step in that journey.

This was not always the plan for the WP Block Patterns site. Starr set out to blog about patterns after their feature release in WordPress 5.5. After only publishing a single post, the project fell to the wayside. Fortunately, inspiration struck.

“I have a site that I use as my reference point when providing support for my themes,” he said. “This site has a blend of varying content and code that allows me to quickly switch/preview any of my themes, without the need to actually change the active theme in the admin, or maintain a different site for every theme.”

In the process of making improvements to his theme-switching functionality, the domain came up for renewal. He had planned to let it expire but decided to see if he could come up with something to do with the site.

“I got the inspiration to use the theme switcher in conjunction with content from block patterns,” said Starr. “If I hadn’t been working on my script at the same time as I coincidently received the domain expiration message, I probably wouldn’t have had this idea.”

Currently, he is manually installing the themes on the site but may have to automate it in the future as more block themes are released. However, he is pulling patterns and categories directly from the WordPress.org API, which is periodically updated.

The site only showcases 100% block themes. Technically, it should work with any that supports editor styles. Starr said it had never crossed his mind to showcase non-block themes.

“I have been keeping my eye on the releases of FSE themes, checking out every block theme that I come across, and it just sort of seems that block themes are the future, and classic themes feel like a step backwards now after investing so much time working with block themes,” he said. “The site would work just fine with classic themes, but there are so many available I’m not sure how to make it manageable or select which themes to feature (and which ones to leave out). I guess that’s also something I’ll have to think about as the number of block themes increases.”

Thus far, Starr has released two block themes, Hansen and Pria, through his UXL Themes brand. Users can preview both via the site. However, he is already working on his next project.

“As a proof of concept, I am working on a classic theme that will have the functionality to also be a block-based theme when FSE is available in core,” he said. “The idea is that the user will not notice any front-end differences when the theme ‘switches’ from classic to block-based, but the user will gain the new FSE admin tools, with the user’s classic customizer modifications switched over intact to the new Site Editor. I have found that there are compromises that need to be made when getting classic and FSE to work together seamlessly in a single theme, so I am not sure whether this will be released generally.”

He also teased a project related to FSE that is neither a theme nor a plugin. However, he was not ready to share any details just yet.

how to create event of mysql in node js

hello i'm trying to schedule event from mysql in node js i know how to execute query (connection.query("select * from test") but how to do that in nodejs
-------->

CREATE EVENT IF NOT EXISTS reurring_event
ON SCHEDULE EVERY 1 MINUTE
STARTS CURRENT_TIMESTAMP
ENDS CURRENT_TIMESTAMP + INTERVAL 1 minute
DO
INSERT INTO Demo (message,created_on)
VALUES ('RecurringTimeEvent',NOW());

---------->

335: Code’s a Drag

There are lots of types of dragging that can happen on websites. While they are all click (or tap), hold down, move, and let go, they are all quite a bit different. For instance:

  • Drag files/folders onto the browser window and drop them. The likely use case there is uploading.
  • Drag an element on the screen to another (valid) area of the screen. The likely use case is dragging cards from one column to another
  • Drag the position of an element. The likely use case is dividers between different areas.

There are native APIs for dragging stuff on the web, and it’s nice to use them when you can as that means not relying on potentially hefty JavaScript libraries. And yet, the native APIS are fairly limited, and the JavaScript libraries that exist for this stuff are pretty darn nice.

We use Filestack for file uploading. There are lots of incentives there, like them staying on top of the latest and greatest in browser tech around this stuff rather than us having to. Back when we switched to this, we got mobile uploading support overnight, for example. For drag-elements-to-other-areas we use react-beautiful-dnd, which is a pretty darn nice library for that, especially since we’re using React anyway. Interestingly, as robust as react-beautiful-dnd is, it doesn’t really support position-dragging at all. Just not what it’s built for. So for that, we’ve gone back to the trenches to write our own componentry, which is a delicate balance of JavaScript event-powered and CSS behind it that supports the changes.

Time Jumps

  • 00:26 Dragging (on) CodePen
  • 01:04 How the browser works with drag and drop
  • 05:52 iFrame bugs with drag and drop
  • 08:29 Sponsor: WordPress.com
  • 09:02 Kanban style drag and drop in the browser
  • 15:49 Triggering a drag event
  • 23:56 Lack of support for dragging
  • 28:12 Dealing with Grid

Sponsor: WordPress.com

WordPress.com is easily the fastest way to spin up a great-looking WordPress site. Not to mention performant and secure, as your site will be hosted on the great WordPress cloud, and they make those things their concern, not yours. You might think you’d have to give up a lot of control and customizability when you use a fully hosted and managed WordPress service (as opposed to hosting yourself), but that’s actually not true. If you’re on the Business Plan or higher, you can install plugins, SFTP into the server, and even have direct database access like any other host.

The post 335: Code’s a Drag appeared first on CodePen Blog.

Hi everyone, I’m safost56

Hi there,
I have been a developer since 1999 but I was in an auto accident and have a severe traumatic brain injury which hasn't helped me write php code at all...LOL
But I'm still here and trying. I need some help with file uploading in php. It's giving me a hard way to go:

Top Free & Premium WordPress Calendar Plugins

There’s nothing as satisfying as ending the day feeling accomplished in all that you had planned to do. It may not be practical to have a tight everyday schedule because well, life happens, but it’s no doubt that calendars help keep us organized. Sharing events online where everyone can easily access is becoming more and more common. WordPress offers a number of plugins to choose from for this very purpose. WordPress calendar plugins are ideal for scheduling things like boardroom meetings, work events, family meetings, and other important dates.

These plugins have features like time tracking and event-hosting capabilities.

Though you can expect better features from premium plugins, here’s a list of some top free WordPress Plugins that can work just fine.

UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets

Sign up for Envato Elements and get unlimited downloads starting at only $16.50 per month!



 

5 Top Free WordPress Plugins

You don’t need to have room in the budget to add a calendar feature to WordPress. In fact, there are several free plugins available to choose from. Let’s explore five top options now.

1. All-in-One Event Calendar

All-in-One Event Calendar - WordPress Calendar Plugins

The All-in-One Event Calendar has a unique way of presenting events to users compared to other free plugins. It allows for the easy import and export of calendar feeds that make it possible for events on one website to automatically appear on a calendar opened on a different website. This makes it easy when scheduling important events that should not be overshadowed.

The plugin also allows you to assign different colored categories to tasks and events.

Some of its features include:

  • Has widgets for scheduling upcoming events.
  • Embedded Google Maps.
  • Can be customized using theme options.
  • Has a day, week, and month view.

2. Modern Events Calendar Lite

Modern Events Calendar Lite - WordPress Calendar Plugins

This type of plugin is a good choice if you’re running a booking or events website. The calendar design displayed to users is newer and more modern compared to other free plugins. You can access different calendar views like monthly view, daily view, full calendar, countdown, and carousel view.

There are many features available on this plugin like BuddyPress and some MailChimp integrations. There’s also a feature that allows you to directly import events from the Google events calendar in various file formats including XML, CSV, and JSON.

Some of its top features include:

  • Provides different views for events.
  • Can be used by multiple workers. Works well in a group setting.
  • Offers customer customization for different categories.

3. My Calendar

My Calendar - WordPress Calendar Plugins

The My Calendar plugin is built with ease of accessibility and use in mind. It provides flexibility to designers or developers who need a customized plugin calendar.

On My Calendar, you can create recurring events and edit them separately. It also offers widgets that show both upcoming events and events of the day.

If you want a more customized feel, you can easily change the font, margins, primary colors, padding, and borders.

Some of its features include:

  • Has custom templates.
  • Daily, weekly, and monthly view.
  • Has list and grid view of events.
  • Has email notifications.

4. The Events Calendar

The Events Calendar - WordPress Calendar Plugins

The Events Calendar is the most popular and widely used free plugin for managing events. Whether your events require in-person or virtual meetings, the features available on this plugin are professional and easy to use.

The plugin gives you the option to specify the start time and end time of events. And for events that require venues, you can easily embed Google Maps on the calendar.

Some of Its features include:

  • Can save venues.
  • Has widgets for upcoming events.
  • Is completely responsive.
  • Has categories and tags for different events.

5. Easy Appointments

Easy Appointments - WordPress Calendar Plugins

This plugin is easy to use and is recommended for websites that manage appointments with clients. These can be websites used by doctors, lawyers, hairdressers, and lecturers especially if you’re constantly cancelling and rescheduling events.

It allows you to create events for multiple people, locations, and services. You can also have separate calendars for specific services or locations.

With Easy Appointments, you get email notifications when an event has been cancelled or postponed. You can also have different appointment categories like canceled, reserved, and confirmed.

Some of Its top features include:

  • Has email notifications.
  • Has an extremely flexible calendar.
  • Can be used by multiple people.
  • Can be accessed in multiple locations.

4 Top Premium WordPress Plugins

Now, if you do have some room in your budget for a calendar plugin, rest assured there’s no shortage of high-quality ones available. Here’s some of our favorites:

1. Bookly PRO- Appointment Booking and Scheduling Software System

Bookly PRO - WordPress Calendar Plugins

Bookly PRO is an add-on that requires the Bookly plugin for WordPress Websites. With this plugin, you don’t need to endure face-to-face meetings or long phone calls. Your clients can just book appointments directly on the website.

This paid premium plugin offers automated online booking and scheduling features with fully customizable booking forms that have online payment options, google calendar sync, and notifications.

Reviews from loyal users agree that Bookly PRO is a premium and easy to use plugin that saves you hours on chasing clients.  The developers are constantly updating and including suggested features based on user votes.

Some of its top features include:

  • Has a number of templates for customizable emails.
  • Can be synchronized with Google calendar.
  • Offers multi-language support.
  • Has an unlimited number of services that can be put in different categories with unique colors.

2. Calendarize it! For WordPress

Calendarize it! WordPress Calendar Plugin

Calendarize it! is a flexible and feature-rich WordPress plugin that comes with add-ons which add even more functionality to the main plugin. You can use it for all day events and events with fixed timings.

The plugin also offers a number of views that can be customized like monthly view, week view, event grid view, event year view, and event map view.

Some of its top features include:

  • Has multiple widgets.
  • Has a number of pre-built color schemes.
  • Has monthly view, weekly view, and day view.
  • Users can customize colors, styles, fonts.

3. Booked – Appointment Booking for WordPress

 Booked

Booked – Appointment Booking is a simple plugin that makes it easy for businesses to accept bookings online.

Some of its top features include:

  • Has custom time slots.
  • Has fields for additional information.
  • Colors for customizing your calendar.
  • Customizable emails.

4. WordPress Pro Event Calendar

WordPress Pro Event Calendar

The WordPress Pro Event Calendar is a professional looking calendar plugin that adds a stylish view to your event calendar.

Some of its top features include:

  • Has an elegant design.
  • You can create recurring events.
  • You can import events from Facebook.
  • Has a responsive layout.

Conclusion

When it comes to WordPress calendar plugins, finding one that works well for you is easy and doesn’t require any in depth knowledge to figure out how they work. A free plugin can work well if you need one for basic use. If you require a plugin for a more complex website with a lot of traffic, then premium is definitely the way to go. Either way, there’s no reason you can’t keep events more organized with one of these plugins in hand.

Kinetic Typography Page Transition

The other day I was drooling over HOLOGRAPHIK’s amazing kinetic typography animations. Especially this one caught my eye. There’s a very interesting (very short) part where some words are being rotated and zoomed in, and I couldn’t help but think of a page transitions that somehow incorporates that idea.

So I went ahead and tried it on a simple layout to see how it could work. Turns out it’s a lot of fun and there’s so many possibilities for making this look and feel right for a specific design.

The initial screen has some items:

Once we click on an item, the typography page transition happens. The faded background letters starts to rotate and become more visible and finally, they move out, revealing the next screen:

Here’s the whole animation (the color is actually a bit off in the video):

I really hope you enjoy this one and find it inspirational! Let me know what you think on Twitter @codrops or @crnacura! Thank you for checking by!

The post Kinetic Typography Page Transition appeared first on Codrops.

How to Add or Remove Capabilities to User Roles in WordPress

Do you want to add or remove capabilities to user roles in WordPress?

WordPress comes with a simple but powerful user management system. Each user has capabilities based on the roles they are assigned.

In this article, we’ll show you how to modify user roles in WordPress by adding or removing capabilities from user roles.

Customing user role permissions in WordPress

Why Add or Remove User Role Capabilities in WordPress

WordPress comes with a built-in user management system and some predefined user roles and permissions.

As an Administrator, you have the ability to perform any action on your WordPress website. For instance, you can add or remove new users, install plugins and themes, delete content, and more.

If you run a multi-author WordPress blog, then you can add other users with Editor, Author, or Contributor user roles. This gives them user role permissions to add new content, but they cannot do administrative tasks.

WordPress also comes with a Subscriber role so users can log in to your site and manage their profiles.

Users with different roles on a WordPress website

Similarly, WordPress plugins can also create user roles with custom permissions. For example, eCommerce plugins can create a user role for customers with specific custom permissions, or a membership plugin can create its own custom user roles for members.

But what if you wanted to give a user role certain extra permissions or take away some existing permissions?

For instance, you may want to take away publishing permission from the Author user role, or allow Authors to edit other user’s blog posts.

What if you wanted to create a totally custom user role with limited capabilities?

That being said, let’s take a look at how to easily modify user role capabilities in WordPress and create custom user roles with specific permissions.

Add / Remove User Role Capabilities in WordPress

The first thing you need to do is install and activate the Members plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Members » Roles page and click on the Edit link below the user role that you want to modify.

Edit user role

This will open the user role editor where you will see different sections in the left column and available capabilities to the right.

Edit capabilities

You’ll notice two checkboxes to Grant or Deny the permission next to each capability.

If a user role is granted permission that you want to take away, then you need to uncheck the Grant option and check the Deny box.

For instance, if you want to prevent the Author user role from publishing blog posts, then you need to switch to the Posts section and then check the Deny box next to the ‘Publish Post’ option.

Remove capability

Similarly, you can also give additional capabilities to a user role.

For instance, let’s suppose you want to allow users with the Author user role to be able to moderate comments as well. By default, the Author user role does not give users permission to moderate comments.

To do that, you need to switch to the ‘General’ section and check the Grant box next to the Moderate Comments option.

Add capability

Don’t forget to click on the ‘Update’ button to save your changes after you are done modifying a user role.

You can now create a new user account with that particular user role and log in to make sure that your customized permissions are working as you intended.

Adding A New User Role with Custom Permissions

The plugin also allows you to create custom user roles where you can select which permissions and capabilities the role would give to the users.

Let’s suppose you have a ‘Movies’ custom post type on your website and you want some users to be able to add movie reviews there. However, you don’t want them to edit any other section.

To do this you’ll need to create a custom user role.

Simply go to Members » Add New Role page. First, you need to provide a title for the custom user role.

New custom user role

After that, you can switch to the section where you want to grant the user the capabilities. For instance, we have a section called Movies for our custom post type on our test site.

There you can give users the permissions to edit and publish content for that post type.

After that, you can review other sections too and see if you want to give users capabilities to do anything else on your site.

Once you are finished, don’t forget to click on the Add Role button to save your changes.

You can now add a new user to your website and assign them the custom user role you just created.

User with custom role

After that, you can log in with that new user account to make sure that everything is working fine. Here is what our custom user role dashboard looked like:

Custom user role dashboard

Securely Managing User Accounts in WordPress

Customizing WordPress user roles and permissions allows you to control user access to the admin area of your WordPress website.

However, it also opens up your site to hacking attempts and vulnerabilities. Following are a few things that you can do to make sure that only users with access can securely log in to your WordPress website.

1. Enforce Strong Passwords

WordPress includes a strong password generator by default, but users can skip it. You can add a password policy manager to ensure all users are using a strong password.

2. Enforce Two-Step Authentication

Two-step authentication asks users to enter a one-time code to login to their account in addition to their password. Users can generate this code via an authenticator app on their computers or phone.

For more details, see our guide on how to add two-step authentication in WordPress.

3. Install a WordPress Security Plugin

WordPress security plugins help protect your website by monitoring it for suspicious activity and login attempts. We recommend using Sucuri, which is the best WordPress security plugin on the market.

We hope this article helped you learn how to add or remove capabilities to user roles in WordPress. You may also want to see our guide on how to get a free email domain, or our comparison of the best business phone services for small business.

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 or Remove Capabilities to User Roles in WordPress appeared first on WPBeginner.