Title: Block Styling Backend Author: Dennys Dionigi Published: 2022 年 10 月 4 日 Last modified: 2024 年 1 月 19 日 --- 搜索插件 ![](https://ps.w.org/block-styling/assets/banner-772x250.png?rev=2794298) **该插件尚未通过WordPress的最新3个主要版本进行测试**。 当与较新版本的WordPress一起 使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。 ![](https://ps.w.org/block-styling/assets/icon-256x256.gif?rev=2794297) # Block Styling Backend 作者：[Dennys Dionigi](https://profiles.wordpress.org/dennysdionigi/) [下载](https://downloads.wordpress.org/plugin/block-styling.zip) * [详情](https://cn.wordpress.org/plugins/block-styling/#description) * [评价](https://cn.wordpress.org/plugins/block-styling/#reviews) * [安装](https://cn.wordpress.org/plugins/block-styling/#installation) * [开发进展](https://cn.wordpress.org/plugins/block-styling/#developers) [支持](https://wordpress.org/support/plugin/block-styling/) ## 描述 This plugin revolutionizes the Gutenberg editing experience by introducing groundbreaking** visible guidelines for blocks** . These guidelines, seamlessly integrated into the WordPress backend, serve as visual aids that dramatically enhance the readability and organization of blocks. With these clear visual cues, users can effortlessly identify block edges, alignment points, and content boundaries, leading to an unparalleled level of precision and control. This enhanced visual clarity not only simplifies block manipulation but also elevates the overall user experience, making block editing a breeze. ### Context Gutenberg is the code name for the new block based editor introduced in WordPress 5. It replaces the classic WordPress editor which is built on TinyMCE. It is a significant change in how content is created. With Gutenberg, you can add multiple media types and arrange the layout within the editor using blocks. WordPress is changing the editor to make it more approachable to non-coders. **The main problem is that: blocks backend Ui is not as clear and intuitive as it should be.** ## 屏幕截图 * [[ * How it works * [[ * Plugin in action on pages * [[ * Plugin working on posts * [[ * Focus on title and columns ## 安装 1. Upload `block-styling-backend.php` to the `/wp-content/plugins/` directory 2. Activate the plugin through the ‘Plugins’ menu in WordPress 3. that’s it. It works out of the box. ## 常见问题 ### How does it work? It basically works. It’s magic. (Behind the scenes adding small CSS and bytes of code to change Gutenberg **blocks layout** ). ### I really don’t understand how it works? This plugin enhances the Gutenberg editor by offering clear visual indicators. These indicators assist in understanding the layout and relationships among blocks, enabling the creation of organized and visually attractive pages. Furthermore, the plugin includes features for previewing the markup, headings, and names of your blocks. This functionality aids in building well-structured and semantically coherent pages, which is beneficial for improving SEO. ### May I have any extra heavy resources or bloat ? Nope. Just, on backend, few bytes of compressed code which work only upon Gutenberg blocks. ### What’s the killer feature ? Now you can easily spot the markup you’re doing and also headings’ placement, to improve your on-page SEO and writing better content. ## 评价 ![](https://secure.gravatar.com/avatar/1471c57315a48ef94e2b07fef65eec994f9934b0d5be84ba24dff8be5c926781? s=60&d=retro&r=g) ### 󠀁[Great addition](https://wordpress.org/support/topic/great-addition-76/)󠁿 [meksONE](https://profiles.wordpress.org/meksone/) 2022 年 10 月 5 日 2 回复 Very simple, but yet useful! Waiting for more tweaks! ![](https://secure.gravatar.com/avatar/1ec4ac6bffef55503c7c882fc1ed8663c1c64031f5ec2ac794b3e7966939c789? s=60&d=retro&r=g) ### 󠀁[Loved it](https://wordpress.org/support/topic/loved-it-173/)󠁿 [Ivan Messina](https://profiles.wordpress.org/jacksoggetto/) 2022 年 10 月 5 日 1 回复 It makes it easier to navigate Gutenberg blocks. Fell in love with it. Great work. ![](https://secure.gravatar.com/avatar/0d2dc2401971f851e198ad62b61253a17b3f02938a9df08f3f31a1f910473f2f? s=60&d=retro&r=g) ### 󠀁[It just works.](https://wordpress.org/support/topic/it-just-works-744/)󠁿 [Dennys Dionigi](https://profiles.wordpress.org/dennysdionigi/) 2022 年 10 月 4 日 1 回复 I tested myself, and lol… I am also the coder behind itself. But.. hey! It works and it’s also a missing feature that may improve the Blocks Ui, as it may help also color blindness people. [ 阅读所有3条评价 ](https://wordpress.org/support/plugin/block-styling/reviews/) ## 贡献者及开发者 「Block Styling Backend」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ Dennys Dionigi ](https://profiles.wordpress.org/dennysdionigi/) [帮助将「Block Styling Backend」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/block-styling) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/block-styling/)，查看 [SVN仓库](https://plugins.svn.wordpress.org/block-styling/)，或通过[RSS](https://plugins.trac.wordpress.org/log/block-styling/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/block-styling/)。 ## 更新日志 #### 3.1 Bugfix and ui improvement #### 3 Improved code and overall stability #### 2.1 Improved HTML Headings tag. * This has been a highly requested feature which might help SEO. Now suddenly, if you care about the SEO on page, you could spot all the headings you have in your pages. * While on previous version you should have seen just that you have been using any heading, from now on, you shall also check which heading tag you are using, of if you’re doing a semantically good job on your website.* Near each of the title you will see a small square that indicates the closest tag element. * Yep, of course, you need first, to write something and while doing it, remember that you are writing for users. Humans, not robots. #### 2.0 * Added titles to each section * Microinteraction while mouseover blocks * Microinterations on active blocks * Improved code * Improved plugin’s bagdes and icons * Plus: fixed Pattern sidebar #### 1.0 * Second test. * Added screenshot. #### 0.5 * First test. ## 额外信息 * 版本 **3.1** * 最后更新：**2 年前** * 活跃安装数量 **10+** * WordPress 版本 ** 5.0.1 或更高版本 ** * 已测试的最高版本为 **6.4.8** * 语言 * [English (US)](https://wordpress.org/plugins/block-styling/) * 标签 * [css](https://cn.wordpress.org/plugins/tags/css/)[gutenberg](https://cn.wordpress.org/plugins/tags/gutenberg/) [ui](https://cn.wordpress.org/plugins/tags/ui/)[ux](https://cn.wordpress.org/plugins/tags/ux/) * [高级视图](https://cn.wordpress.org/plugins/block-styling/advanced/) ## 评级 5 星（最高 5 星）。 * [ 3 条 5 星评价 ](https://wordpress.org/support/plugin/block-styling/reviews/?filter=5) * [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/block-styling/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/block-styling/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/block-styling/reviews/?filter=2) * [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/block-styling/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/block-styling/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/block-styling/reviews/) ## 贡献者 * [ Dennys Dionigi ](https://profiles.wordpress.org/dennysdionigi/) ## 支持 有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/block-styling/) ## 捐助 您愿意支持这个插件的发展吗? [ 捐助此插件 ](https://www.whynot.media)