page-builder | 自定义页面构建平台 | Frontend Framework library

The updated code looks like following:

The actual issue is with the sidebar, it is overextending.

Remove width: 100% from

You're almost there. You need to create another class and register your widgets in the App_Start folder. Check out the documentation here on that. It's the section on widget registration. Be sure to enable Page builder as well.

*** Updated ***

Based on your update and not being able to see the image well on my mobile device, I was able to see you're defining/registering your widget in your Properties model. This needs to be done in the Controller. See the example below.

\Models\Widgets\JobListingWidgetProperties.cs

Since you are in a loop with your if query and the if query should only refer to the current element, this element must also be addressed.

You can easily do this by changing your code

if (jQuery(".sp-portfolio")[0]){

in

if (jQuery(tag).hasClass(".sp-portfolio")){

Your used code always refers to the first element on the whole web page with the corresponding class, no matter if it is in the loop or not. So if the class exists only once – no matter where on the page – the query always returns a true and behaves correctly.

With the small adjustment you just refer to the current element in the loop and not to the whole page.

I hope this could help. :)

You need to add return before this.drawNav() call in

Are you familiar with CSS Media Queries? They seem to be perfectly suited for what you describe.

Media Queries allow you to trigger a CSS rule at specific screen or device dimensions. So, for instance, if you wanted one of the tags to get the active styling only when the screen was between certain widths, you could use:

OK, I found the solution! There is also wrapper PHP file in templates catalog: https://github.com/woocommerce/woocommerce/blob/master/templates/global/wrapper-start.php and there is this code! Template file adds there below line:

Line 47

Edit -> override -> upload -> done :/

OMG!

Interesting question! It will require some prior research on your part, as there is no obvious answer. Below are my thoughts on the matter, but it the decision is yours to make, as the project requirements are unique and also the time you can invest in it.

When developing within WP, would I need to develop a page-builder for people (without coding knowledge) to edit their pages?

A: No. Gutenberg is perfect for this.

I’m aware of Gutenberg, is that able to edit coded pages or would it not be able to read anything as it wasn’t built using Gutenberg?

A: It won't read anything that wasn't made with it, but you can try recreating those pages with it. Depends on the design, but it shouldn't be hard. If it is a site for a client, you can ask them to recreate one or two pages and see how they feel. They will answer this question for you :)

That way you are able to offer a blank canvas CMS that you can brand as your own?

A: You can "rebrand" the WordPress admin with such a plugin

If so, would it not be better to develop a Custom CMS similar to Wordpress?

A: It all depends on how comfortable you feel with WordPress and Gutenberg, code-wise. You can do pretty much anything, if you understand the PHP, React (Gutenberg is written in React) and logic behind WP, so you won't need a custom CMS. Again, it all depends on your skills with the technologies. If you rate yourself a 10/10, no need to think about it, but I guess you wouldn't be asking this question, if you were.

Pros of going with WordPress and Gutenberg:

• You already have all the necessary tools.
• A ton of supporting plugins, already developed by other people.
• WordPress has one of the most well-maintained codebases out there, so you will have a great start, compared to building a CMS on your own. Even if you decide to create your own plugin, you have a set of rules and practices that you need to adhere to, which is great for starters. You also have all the necessary components - DB, back-end and front-end ready.
• Gutenberg is pretty stable right now and you can install the plugin, because the code that is implemented in WP core is not the latest. It is great for building pages, when you don't know code. Look into all the different blocks it offers by default and think if they cover your requirements. There are also a lot of extra blocks you can add.
• The popularity of Gutenberg is growing and the community is slowly, but surely moving in that direction, so making this project with Gutenberg would benefit your future career as a WP developer, if you are interested in building one.
• On the point of growing community, you will find answers to a lot of the common issues.

Pros of building your own CMS:

• You will see the whole process - DB design, connection and expanding. Back-end and front-end development, user authentication and administration. For me this is a con, because there are many unexpected problems, which WP has solved. It is also very time-consuming, so if you have limited time for this project, I would advise against this.
• You can make a slim CMS, which covers only your requirements and you will know the ins and outs of the code, so any future changes and expansions will be easier for you to make.
• As you said, it will be easier to brand as your own and you can build the Admin side of it however you want, even though there are defined UX standards, which won't allow you to go very wild. It will probably resemble the WP admin in one way or another. Check out these admin page designs, for reference.

Conclusion

Personally, I would go for WordPress and Gutenberg, because I have had mostly bad experiences with building everything on my own. I am not a good enough coder and that is OK, because I can use all of these tools, built by awesome developers before me. So please keep in mind that building your own CMS will take a lot of time, if you want to make it stable and secure. There are also alternatives to WordPress.

Your approach seems like you are over complicating a simple problem. I would never do a validation in a validation rule. Instead do rules that is dependent on the component and adjust it in the form request accordingly. You can easily do nested rules like so.