[ad_1] I ended the last article with a functioning block that shows one thing in the editor and another thing on the frontend. The reason for doing so was so we could see how to put together the basic foundation of a plugin for the Block Editor. Now that we’re at this point, it’s much easier to start talking about things related to the Editor, things related to the frontend, how to start serializing data, how to start reading data, and so on. But because I’m trying to do this entire series as a backend engineer creating blocks – which is generally delegated to frontend development – I want to take it step by step. In the last article, I wrote: [T]he thing we’re going to look at doing next is adding styles for both the frontend and the editor and some basic functionality to the block. As I continue to write about learning to build block editor blocks, we’ll continue with looking at adding styles to both the backend and the frontend. In this article, we’re going to cover: adding controls to the block in the editor so we can control its placement within WordPress itself (or even remove it from the editor), ensuring what we see in the editor is what we see on the frontend Like last time, there are going to be things we have to dive into that will require reference material and links to external resources. But consider that part of the journey of learning to build blocks. Block Editor Blocks: Editing and Saving (Or Viewing) The first thing I want to mention is, as I wrote about in the first article, the two functions with which we’ll be working are edit and save. Personally, I think the functions are unfortunately named. It’s not that they don’t represent what they do, but they don’t represent just what they do. In other words, they do more than just allow us to edit and save content. 💭 A Digression on Function Names edit actually isn’t all of that bad since that’s the function responsible for allowing us to actually edit content. But save is overloaded. Not only does it read saved content, it renders it, too. And, as we’ll see in future posts, other functionality. So if you’re used to thinking in terms of how backend functionality works then you wouldn’t be far off in thinking something like: edit is for editing the content that’s saved in some type of data store, save is where the data is sanitized and written into said data store, read is where the data is retrieved and validated before displaying it, and render or display is a function for finally displaying it to the user. But that’s now how blocks work. At least, not at the time of this writing. Instead, we just work with edit and save. So that’s what I’m going to use in the rest of the article. You can read more about this in the Reference material at the end of the article. 🗺 Where We’re Going For starters, we’re going to do the following: add functionality to allow the block to be manipulated within WordPress, write styles to style our block, introduce them to the editor, introduce them to the frontend The reason for doing this is to give a concrete example as to how various files and functions play a role in block development. Granted, there may be a time in which you want something in the editor to appear one way and not on the frontend but the goal I’m working towards with this series of articles getting functionality added to the editor and presentation the same across what the author sees and what the user sees. Functionality Recall that in the last article, the edit function looked like this: edit: () => { return ( “This is content from the editor.” ); }, And this was sufficient for the demo but it only renders a string. Let’s make it a little more advanced such that it renders an HTML element. To that though, we’re going to have to get more into WordPress-specific block development. As usual, I’ll link to all of this in the reference material at the end of the article but I’ll explain each step as I work through it. First, I’m going to add some functionality to my block. Specifically, I’m going to the block the ability to be removed, to be moved, or to more generally be modified the in the context of the editor. To this, I need to add a few things. At the top of index.js, I need: import { useBlockProps } from ‘@wordpress/block-editor’; Then, in the edit function, update it to look like this: edit: () => { const blockProps = useBlockProps({ className: ‘tm-block-demo-container’ }); return ( <div {…blockProps}> This is content from the editor. </div> ); } Obviously, there are a few things in the code above that aren’t yet explained (such as blockProps and className) but I’ll get the explanation momentarily. Styles Let’s introduce some basic styles to the Editor. For example, let’s have the block include the following: a background color, a border and border color, a specific font color, a specific width, some padding First, let’s create an index.scss file in the src directory. This file will belong with other files like block.json, block.php, and index.php. Before adding any styles, though, we need to make sure we have the proper selector. So at this point, go ahead and write the following code in index.scss: .tm-block-demo-container { color: #fff; background: #0d63fd; border: 1px solid #0a58ca; font-weight: bold; padding: 0.5em; width: 100%; } Then in the same file, include the following (I like to place it above the registerBlockType function call): import ‘./index.scss’; The Code Thus Far Note at this point, the following is happening in the code: We’re now using @wordpress/block-editor which is a package that allows us to work with blocks within the context of the block editor (it
Continue readingTag Archives: Build
A World Where (Some) Block Development Is Merely a Templating System With No Build Process? – WP Tavern
[ad_1] What if WordPress developers lived in a world where we could create PHP-based templates that would output data on the front end and handle editable fields via the block editor? Or, we had a system where we could create blocks without a build step? While there are many reasons the modern WordPress editor is not the best fit for everyone just yet, one stumbling block has been building custom interface components. The ecosystem has a deep history of creating bespoke solutions for clients using PHP. These have been custom meta boxes and form fields in the classic editor screen for the most part. When WordPress 5.0 launched with its block editor, it turned the world upside down, often leaving agencies and freelancers with no way to move forward without dedicating massive resources to learning React to build blocks or interact with the new editing screen. The solution? Stick with what you know. It was cheaper and already seemed to do the job well. As we talk about the support window for the Classic Editor plugin, the WordPress project needs people to provide tools for this segment of the ecosystem if it ever plans on bringing them along for the ride. Solutions such as ACF Pro and Genesis Custom Blocks have bridged some of the technical gaps. However, the user experience can be sub-par when using server-side rendering in the block editor. That method works well for some types of blocks but not all. We need to take this one step more. Mark Jaquith, a lead WordPress developer, shared a few questions from Helen Hou-Sandí, another lead developer, around this idea and a basic concept about what this might look like: Weekend exploration, egged on and sparked by @helenhousandi: “What if building custom blocks for the Block Editor was as easy as supplying attributes and a block of HTML? What if this produced React editing code and PHP rendering code without a build step?” pic.twitter.com/r86Phu88SX — Mark Jaquith (@markjaquith) August 30, 2021 Hou-Sandí followed this with a detailed post on the concept, but she pointed out that this is merely an exploratory phase. “The React-based WordPress block editor (sometimes referred to as Gutenberg) is a powerful tool for WYSIWYG editing that continues to prove to be somewhere between a speed bump and a roadblock for long-time WordPress developers who historically have been more PHP-centric,” she wrote in the post. If you are a WordPress developer, there is a not-so-small chance that you are thinking, Yep, I have hit a few of those speed bumps and crashed into that roadblock a few times. This is unlikely news to you. What might start winning hearts and minds is acknowledging and understanding where much of the problem lies for custom development. “By leveraging the familiar parts of PHP-based templating and creating a bridge that demonstrates the power of React when combined with the markup and styling already being done for the front-end, we can de-duplicate code, help demystify the critical role of JavaScript in modernizing WordPress, and serve as an on-ramp for PHP-centric developers to create compelling and delightful 1:1 live preview editing experiences,” wrote Hou-Sandí. This all boils down to the process of, essentially, writing some template code that works on both the front-end and editor without all the complexities of currently setting up and building blocks. That is an exciting prospect, evidenced by the numerous likes, retweets, and replies to Jaquith’s tweet. Hou-Sandí pointed out that the current thought process is primarily about easing the transition for custom client block solutions and not necessarily for WordPress itself. However, that does not mean that this or a similar solution might not be a part of the core platform’s future. Gutenberg project lead Matías Ventura replied to Ben Gillbanks in the same Twitter thread that it was definitely something they were considering. “From a core perspective we had to ensure the primitives and interactivity is not compromised, but there’s no reason why that should imply a full JS toolchain for simpler blocks. Lowering barrier of entry is important.” Like several others, Gillbanks thought that such a system would have made an easier transition for PHP-centric developers from the start. However, the project was not ready for that at the time, according to Ventura. “It’s tricky to do something like this from the start until the compile target APIs are robust enough,” he tweeted. “We are getting to a point where many of the interactive properties are clustered into primitives and components, which makes a templating approach more appealing.” Automattic developer Riad Benguella shared a similar solution in the past week, launching the Blocky project on GitHub. With his approach, developers utilize the block.json file to create the template or view component and run it through a simple build step to generate the block’s code. While it is not too early to hope and dream, it may just be a bit premature to begin seriously considering whether such tools will land in core WordPress. However, seeing some of the lead WordPress and Gutenberg developers at least openly talking about solutions is something worth paying attention to. Like this: Like Loading… [ad_2] Source link
Continue reading4 Quality ClickFunnels Alternatives to Help You Build Better Sales Funnels
[ad_1] While running a website doesn’t require too much need for complex growth strategies, ‘sales funnels’ are something you should investigate. ClickFunnels is a market leader for creating targeted pages to drive users through your funnel. However, it’s not the only solution. There are a number of ClickFunnels alternatives available that are worth considering. Of course, different solutions have specific focuses, although all generally let you create targeted landing pages. They let you push your site’s visitors through the sales funnel without affecting your ‘bounce rate’. In this post, we’ll look at the concept of sales funnels, then introduce you to ClickFunnels. Finally, we’ll look at a number of ClickFunnels alternatives and discuss what makes them viable. A Primer on Sales Funnels For the unaware, sales funnels are where your website’s visitors go through a number of steps before becoming a paying customer. Usually, you’ll find three or four steps consisting of Awareness, Interest, Desire, and Action (AIDA). While a sales funnel is usually part of a defined conversion strategy, practically every business that sells products and services will use one. For example, take the following: Awareness. You put out a social media ad, which some users click through. Interest. Once they get to the page you specified in the ad, they check out the product. Desire. The copy on that page causes them to add the product to their cart. Action. The visitor becomes a paying customer once they checkout. Here, you have distinct phases. The ‘top’ of the funnel is where potential customers enter, based on their reaction to your ads, content marketing, and other promotional tactics. At this point, they’re ‘qualified’. In other words, they’ve expressed at least some interest in buying your wares. Once they’re on the site, you funnel them through one or more pages designed to pitch your product and convince them to sell. The ‘bottom’ of the funnel is where a paying customer exits after checking out. However, the goal of a good sales funnel is to prevent ‘leaks’. In other words, each part of the funnel needs to keep users within it. There have been numerous products to help you with this. Introducing ClickFunnels ClickFunnels uses the term “marketing funnel”, but it’s essentially the same thing as a sales funnel. The goal is still to take the unqualified masses, filter them into qualified leads, and push them through the funnel to become paying customers. The product is essentially an all-in-one solution for creating a website and sales funnel. There are also elements of aftercare, called ‘Follow-Up Funnels’. Overall, the process is simple. Create a website based around landing pages using the built-in drag-and-drop editor; Connect payment gateways so that customers can buy your products and services; Use Follow-Up Funnels to capture any users who leak from the funnel. However, while this seems solid on paper (and it is – ClickFunnels has a lot of happy users), it’s not the whole story. Why You’d Want a ClickFunnels Alternative ClickFunnels has definitely found a market that’s lucrative. However, there’s room for competition, and it’s not a perfect offering. For starters, ClickFunnels often comes across like stock photography, in that you know when you’re in a funnel: Huge font sizes, mammoth copy, and myriad success stories on every page are the order of the day. This can be tiring to wade through, although we admit that it’s a successful approach. While you don’t have to use this approach, much of the ClickFunnels methodology is based around it. What’s more, the price is astronomical. The entry tier is $97 per month, which is nearly $1,200 per year. This doesn’t give you access to Follow-Up Funnels either. For that, you have to opt for the $297 per month Platinum plan. High-rolling businesses can stump up $2,497 per month for the top-tier Two Comma Club plan. If we’re judging this, we’d wonder what business has up to $30,000 a year spare to spend, yet still needs help capturing customers. Finally, you’re going to be locked into the ClickFunnels ecosystem, which is going to sting if you ever want to change your approach. Coupled with the pricing and methodology, there are other avenues for you to consider. What You Should Look for In a ClickFunnels Alternative Fortunately, we’ve already distilled the elements required to build a sales or marketing funnel. These are essentially the same elements you need to look for in a ClickFunnels alternative: The ability to build a website to host your funnel. A way to create landing pages, add payment gateways, and capture forms. Drag-and-drop editing that’s flexible and powerful enough to cater to non-coders and web designers. Functionality to reconnect with users who have leaked from the funnel. In addition to this, you’re going to want competitive pricing. Being honest, most solutions are going to be closer to your budget compared to ClickFunnels. Still, your chosen alternative has to be cost-effective. There are plenty of solutions available that could tick all of these boxes. Let’s discuss them next. 4 Quality ClickFunnels Alternatives to Help You Build Better Sales Funnels Below, we’re going to look at four alternatives to ClickFunnels. Let’s quickly show you what we’re going to feature: Systeme. This is a direct ClickFunnels alternative, with a competitive price and comparable functionality. Elementor. WordPress’ most popular page builder plugin has enough grunt to help you build stellar sales funnels on the platform. OptimizePress. This is a dedicated WordPress landing page plugin with strong functionality and great pricing. CartFlows. A WordPress-based solution that combined with tools such as Elementor, can give you immense power and flexibility. However, there are many more solutions too. We could have featured Unbounce, Thrive Architect, Leadpages, and umpteen other ClickFunnels alternatives. Even so, these four cover a lot of ground. Let’s take a look, starting with a direct competitor to ClickFunnels. 1. Systeme First up, Systeme is a solution we’ve talked about before on the blog. It bills itself as a ClickFunnels alternative, although we believe its user base is
Continue reading