When using WordPress Site Editing (FSE) topics, such as Twenty Twenty-Five (hereinafter referred to as TT5), you often encounter problems with limited scope control scope. This article records the drop-down menu for the category directory <select> Elements, from style failure, troubleshooting logic to the final technical review of the final solution.
The first attempt at the original style and the block level
The TT5 theme is rendered by the browser User Agent by default. <select> Elemental style, this extremely rudimentary default appearance produces a strong split between the overall style of the elegant theme.
In order to solve the style problem, I first in the ‘Classification List’ blockPremium -> Extra CSS Add styles to the panel. Logically, the extra CSS of the block itself should serve the elements within that block. But I didn’t want to be deliberately based on dynamically generated IDs at the time (such as WP-Block-Categories-1) To do precise matching, I am more inclined to find more general methods, and at the same time, I have the idea of trying to realize the implementation of third-party plug-ins.
2. Trial and error of third-party plug-in integration scheme
Following the idea of trying to implement the plugin implementation, I decided to introduce a third-party search filter plugin. In the plugin admin panel I looked for and installed search & filter plugin.
I delete the original classification list block, directly replace withshortcode blockand paste it according to the document [searchandfilter fields='search,category,series' ...] Structure, trying to achieve a unified integration of search and classification pull-down.
The results of the front-end test verify the limitations of this scheme: the visual style of the plug-in front drop-down menu is still stuck in the default state of the browser, and even if the parameters are added to the parameters hierarchical='1'native <select> The underlying constraints of the component still make it impossible to present the tree hierarchy relationship.
3. The root cause of ‘styling not loading’ parsing and positioning ‘style not loading’ from the bottom of the browser
Back to the original intention, I try again in the advanced panel of the native ‘Classification List’ block, using the ID selector SELECT#WP-BLOCK-CATEGORIES-1 Perform precise locking, attempting to hard cover the original.
But when I go through the browser View source code When the function retrieves this segment of CSS, it is found that it does not exist in the current DOM structure at all.
For further verification, I open the browser’s network Panel Search Keywords .postform, the result is still empty. This proves from the bottom:CSS written in the block advanced panel, which has been intercepted or isolated by the system in the FSE rendering process, and is not output to the front end at all.
4. Position the global CSS injection port to achieve style rewriting
Based on the previous investigation, I decided to change my thinking, no longer rely on block configuration, but explore the global style panel of TT5. After some searching, I found the real global attached CSS entry hidden in:Click the [Style] icon in the upper right corner (half black and half white dots), and then click [Three Vertical Arranged Points] on the right side, and the pop-up menu really contains the [Extra CSS].
I paste the final adapted version code to that global entry. Then use the network panel to retrieve at the front desk again,.postform Successfully matched to several load records.The style file was successfully injected and took effect. At this time, the drop-down box on the page has perfectly realized modernization and beautification.
💻 Attachment: CSS code that is finally injected by the global style panel
In order to beautify the drop-down menu in the TT5 theme, the following is the exact code that I finally injected into ‘Three Points in the upper right corner -> Extra CSS’. Mainly use the outer wrapping container .wp-block-categories-dropdown pair of child elements select.postform double lock and pass !important Force overwrite the default style of the browser:
/* 使用外层容器做双重锁定，提高权重，强制生效 */
.wp-block-categories-dropdown select.postform {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-color: #ffffff !important;
border: 1px solid #d1d5db !important;
border-radius: 4px !important;
padding: 10px 44px 10px 16px !important;
min-height: 46px !important;
width: 100% !important;
font-size: 16px !important;
color: #1a1a1a !important;
cursor: pointer !important;
outline: none !important;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 14px !important;
}
.wp-block-categories-dropdown select.postform:hover {
border-color: #000000 !important;
}The final reconciliation of visual presentation and technical limitations
After style rewriting, the modernity of the drop-down list is greatly improved. However, after expanding the drop-down item, it still expresses sub-category indentation in the form of long-strings spaces (such as level-5 level). Subject to HTML <option> Attribute limits for native tags,Native <select> The tree-level interaction that cannot be folded and expanded cannot be provided, and it can only rely on spaces ( ) for visual indentation.
Technical summary:
- Block advanced ‘extra CSS’ in FSE theme
<select>The specific element of this class of PHP rendering is not valid, because its rendering logic completely bypasses Gutenberg’s React engine. - Search & Filter pluginAlthough the function is powerful, the default style of the drop-down menu of its output is still subject to the native rendering of the browser, and it cannot break through the native rendering of HTML with the free version.
<select>hierarchical indentation limits. - The right solutionis to find the global CSS injection point (three dot menu in the upper right corner), and cooperate with
.wp-block-categories-dropdownContainer selector adds weights to cover. - Finally, multi-level classification (such as
level-4Orlevel-5) in<select>Interactions can only accept space-based visual indents. From the perspective of product selection, the current presentation meets the minimum availability requirements.
Leave a Reply