This is a two part question. Firstly I would like to know how to access all attributes belonging to
the core/image block using php.
I have tried this function which I found in the Developers guide but it doesn’t return any of the attributes. The function is defined in functions.php of the child theme and is called in a page template.
function check_attrs() {
if ( $block['blockName'] === 'core/image' ) {
print_r( $block );
}
}
Secondly, please can someone tell me when I add an additional class via the Block Editor like so
Block –> Advanced –> Additional CSS Class(es) –> members, does the members class attribute get added to the core/image block automatically (assuming the block is an image block)?
Thank you.
]]>But on the front end it adds font-bold: class=”wp-block-mikrutblocks-genericheading font-sans font-light text-8xl font-bold”
If I add the block to a post in the block editor I get: class=”block-editor-rich-text__editable rich-text #t6gg29 #1thlppk #23wnib”
And get the same thing on the front end for the post: class=”wp-block-mikrutblocks-genericheading #t6gg29 #1thlppk #23wnib”
Here is the code for the block – genericheading.js
import { ToolbarGroup, ToolbarButton } from "@wordpress/components";
import { RichText, BlockControls } from "@wordpress/block-editor";
import { registerBlockType } from "@wordpress/blocks";
registerBlockType("mikrutblocks/genericheading", {
title: "Generic Heading",
attributes: {
text: { type: "string" },
// Tailwind css
size: { type: "sting", default: "text-8xl" }
},
edit: EditComponent,
save: SaveComponent
});
function EditComponent(props) {
function handleTextChange(x) {
props.setAttributes({ text: x });
}
function createTagName() {
switch (props.attributes.size) {
case "text-8xl":
return "h1";
case "text-5xl mb-3":
return "h2";
case "text-2xl mb-8":
return "h3";
}
}
return (
<>
<BlockControls>
<ToolbarGroup>
<ToolbarButton isPressed={props.attributes.size === "text-8xl"} onClick={() => props.setAttributes({ size: "text-8xl" })}>
Large
</ToolbarButton>
<ToolbarButton isPressed={props.attributes.size === "text-5xl mb-3"} onClick={() => props.setAttributes({ size: "text-5xl mb-3" })}>
Medium
</ToolbarButton>
<ToolbarButton isPressed={props.attributes.size === "text-2xl mb-8"} onClick={() => props.setAttributes({ size: "text-2xl mb-8" })}>
Small
</ToolbarButton>
</ToolbarGroup>
</BlockControls>
<RichText allowedFormats={["core/bold", "core/italic"]} tagName={createTagName()} className={font-sans font-light ${props.attributes.size}} value={props.attributes.text} onChange={handleTextChange} />
</>
);
}
function SaveComponent(props) {
function createTagName() {
switch (props.attributes.size) {
case "text-8xl":
return "h1";
case "text-5xl mb-3":
return "h2";
case "text-2xl mb-8":
return "h3";
}
}
return <RichText.Content tagName={createTagName()} value={props.attributes.text} className={font-sans font-light ${props.attributes.size}} />;
}
When editing a form field there is a field option under “Advanced” for adding class names to the form field container. However I need a way of adding / appending class names to the actual form element rather than the containing element. Like this: input.form-control or submit.btn.btn-dark.
How would I go about doing this?
Thanks
]]>—what are the Class names or #ID names for custom CSS for:
Widget Title
— And for styling within widget areas: text, heading + link colors. (If background is a different color here, than of course the text and link colors here need be different than in the main content area, else they may be unreadable
— And for the actual writing area of inner content area. For example, if you go to styling > Background : content area background, and select a color, it won’t just color the content area, it’ll color the entire width of the page even out past the sidebars! I’d like to color and style and border and ONLY the actual text writing area of that page. Then for example if content block is blue, and sidebars are red, you could still see a quarter inch or so of white space(or page background) between them. This makes a nice visual separation. And I’d like to put a border around that inner content area, and not have that border touch the sidebars or their widgets.
Is there a list somewhere of all these Class names or #ID names with description?
Thanks so much.
https://www.ads-software.com/plugins/ad-injection/
]]>Thanks!
https://www.ads-software.com/plugins/theme-my-login/
]]>Could you add a custom class name to the paragraph text instructing users to complete mandatory fields. The paragraph appears under the form.
That way we can target and style the text “Required fields are marked *” to our liking.
Request 2:
Also, could you remove the extra empty paragraph that appears below this text. It contains a non breaking space. It’s hard to control form spacing when empty code gets chucked in.
Many thanks
https://www.ads-software.com/plugins/wp-spamshield/
]]>For example, we have styled the .date-start element in a unique way on one site and in the new version the class name changed to .tribe-events-date-start. Really, how necessary was such a change?
Of the dozens of plugins I have used on client sites, the Events Calendar is by far the most treacherous when it comes to CSS visual display problems caused by version updates.
https://www.ads-software.com/plugins/the-events-calendar/
]]>Could you possibly modify your CSS class names to make them more unique so they don’t clash, and update the plug-in? That would be incredible and I’d be more than happy to pay for your help with a donation.
I’m using the latest version of WordPress and a premium WordPress theme purchased from ThemeForest called Venedor ( with WooCommerce).
If not for this one issue which is really breaking the entire dictionary, your plug-in is fantastic.
Thank you for any help or suggestions you can make!
Sincerely,
Chloe
https://www.ads-software.com/plugins/diccionario-de-terminos-y-definiciones-terms-and-definitions-dictionary/
]]>When it comes to my menu, when viewed in a browser, it displays
<div id="menu" class="menu-nav-panel-container"><ul id="menu-nav-panel" class="bottom-menu-list"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-36"><a href="https://localhost/wordpress/">About Me</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="https://localhost/wordpress/?page_id=6">My Work</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="https://localhost/wordpress/?page_id=8">Acting On A Dream</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="https://localhost/wordpress/?page_id=10">Links</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="https://localhost/wordpress/?page_id=12">Blog</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="https://localhost/wordpress/?page_id=14">Gallery</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="https://localhost/wordpress/?page_id=16">Contact Me</a></li>
</ul></div>My question is, how can I do away with the class inside my <div> and how do I rename the ID’s and classes of the
If anyone could help point me in the right direction I’d be quite releaved as this is doing my head in.