Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Develop Your First Low-Code Block Theme #1503

Closed
valzya opened this issue Apr 19, 2023 · 5 comments
Closed

Develop Your First Low-Code Block Theme #1503

valzya opened this issue Apr 19, 2023 · 5 comments
Assignees
@bsanevans
Labels
[Content] Feedback Feedback provided about content on Learn.

Comments

@valzya
Copy link

valzya commented Apr 19, 2023

This is my first contribution as a group volunteer. Edits are marked in parentheses and strikethroughs.

With the WordPress 5.9 release, a new type of theme known as a block theme became available in the WordPress theme repository(insert period); These new themes place the power of design customizations into the hands of users.

In order to make big layout changes, adjust colors that weren’t already hard-coded into, or even move a logo from the left side of the screen to the right, users needed to have a strong grasp of CSS to move key elements of their websites or even change colors. Here’s an example:

The Site Editor allows users to move big elements of their site, change colors with a the click of a button, and customize their theme exactly to their choosing. There are many more options and flexibility to block themes. See the difference in the screenshot below of changing the text color to blue:

What do users love about classic themes? Add period at end of each sentence.

  • Easy to use right out of the box; . Get started writing immediately without worrying too much about layout.
  • Ideal for new WordPress users.
  • Write, edit and publish posts or pages without thinking about complex customizations.
    What do users love about block themes?
  • Create custom blog posts and also pages using drag and drop builder.
  • Create amazing (omit hyphen) looking pages where a user can add almost anything you need.
  • Design a website from top to bottom without needing any coding knowledge.

Hybrid Themes: A theme that contains a mix of both classic theme elements and block theme elements. These themes borrow a few elements from either the classic or block theme. PHP coding is required to build a hybrid theme. Some examples might be themes that interact heavily with other WordPress plugins, such as eCommerce plugins. As block themes become more and more powerful, however, less of these will (likely!) need to be created.

Universal Themes: These themes can work entirely either like a classic theme or like a block theme–(delete hyphen). (Add period) They are built using both the Site Editor and PHP code. Historically, these themes were used to bridge the gap between what the block editor (at the time) couldn’t do, and what the customizer could do. Largely, however, you’ll find themes will either be a block theme or a classic them(add e).

What will this course focus on?
Designing block themes only requires knowledge of the point(omit hyphen)and(omit hyphen)click Site Editor. It is possible to create a block theme using no code at all. (omit hyphen)although This course will also teach you the very basics of theme.json. to set you up for Block theme designing success allows so you to have more control over of your layout with a few simple codes that you can copy and paste.

How Themes Are Designed

As an intermediate user, you’re probably familiar with finding, installing, and experimenting with both classic and block themes in the WordPress.org theme repository. Have you ever wondered how themes are often developed, from the start of a creative idea to finished product (available in the WordPress.org theme repository)? If so, read on!

  1. Design It
    Once a theme has been dreamed up, many designers turn to other tools, such as Figma or Photoshop, to begin drafting what their WordPress theme will look like. Historically, it was hard to look at a lot of code and picture what the end result would be. (Insert period) ; These tools (Figma, Photoshop, and beyond) helped designers visualize the end result before they passed along their ideas to developers, who would code this into a PHP file. (Omit =)

  2. Move The Draft Into WordPress
    One of the most exciting things about developing block themes is that it eliminates the need for the “moving” step(insert period)–(omit hyphen) In other words, moving from a Figma or image file into WordPress itself.
    Once a Figma file has been created, revised, edited, and finalized, a designer (insert hands) often turns the design over to a developer to take their dreams and code it into reality using a mix of PHP, HTML, CSS, and Javascript.
@valzya
Copy link
Author

valzya commented Apr 19, 2023

This is my first contribution as a group volunteer. Edits are marked in parentheses and strikethroughs.
@bsanevans bsanevans added the [Content] Feedback Feedback provided about content on Learn. label Apr 24, 2023
@bsanevans
Copy link
Contributor

Thank you for your feedback, @valzya . I've had a look through your reviews, and applied what I could. However, there were no strikethroughs in your initial message. These could have been removed when copy-pasting this content from another editor.

Could you clarify your suggestions for the following points, please? You can add a new comment to this GitHub issue and add strikethroughs again. Thanks.

https://learn.wordpress.org/lesson/different-types-of-themes-overview/

In order to make big layout changes, adjust colors that weren’t already hard-coded into, or even move a logo from the left side of the screen to the right, users needed to have a strong grasp of CSS to move key elements of their websites or even change colors. Here’s an example:

The Site Editor allows users to move big elements of their site, change colors with a the click of a button, and customize their theme exactly to their choosing. There are many more options and flexibility to block themes. See the difference in the screenshot below of changing the text color to blue:

Hybrid Themes: A theme that contains a mix of both classic theme elements and block theme elements. These themes borrow a few elements from either the classic or block theme. PHP coding is required to build a hybrid theme. Some examples might be themes that interact heavily with other WordPress plugins, such as eCommerce plugins. As block themes become more and more powerful, however, less of these will (likely!) need to be created.

https://learn.wordpress.org/lesson/how-themes-are-designed/

As an intermediate user, you’re probably familiar with finding, installing, and experimenting with both classic and block themes in the WordPress.org theme repository. Have you ever wondered how themes are often developed, from the start of a creative idea to finished product (available in the WordPress.org theme repository)? If so, read on!
@bsanevans bsanevans self-assigned this Apr 24, 2023
@valzya
Copy link
Author

valzya commented Apr 24, 2023 via email

@bsanevans
Copy link
Contributor

Thank you. I have applied many of the suggested changes.

I'll mark this issue as complete now. In future, when reviewing content, please use the "Content Feedback" GitHub template found at this link: https://github.com/WordPress/Learn/issues/new/choose This will automatically assign some labels and bring it to the attention of the team better.

Thank you for your contribution! 😃
@valzya
Copy link
Author

valzya commented Apr 25, 2023 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Content] Feedback Feedback provided about content on Learn.
2 participants
@bsanevans @valzya