Why is the .button class not targeted in this theme?

  • Resolved 99w

    (@ninetyninew)


    1 year, 9 months ago

    Hi,

    We’ve noticed while testing the twentytwentythree theme that it includes styles for buttons like this:

    .wp-element-button, .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	border-radius: 0;
	border-width: 0;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	text-decoration: none;
}

    Why does this theme only target these elements and not .button ? The button class is important, all previous core themes targeted the .button element and lots of plugins which add custom buttons to the WordPress frontend often use the class .button – if you are using one of these plugins and are using twentytwentythree you don’t get a button and just a text link because it doesn’t target that class any more.

    twentytwentythree (no styling applied):

    twentytwentytwo (styling applied):

    twentytwentyone (styling applied):

    Same for all other core themes except twentytwentythree ^^^

    Thank you,

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hey there @ninetyninew – great question.

    We’ve noticed while testing the twentytwentythree theme that it includes styles for buttons like this: [code]

    Why does this theme only target these elements and not .button

    That styling is actually coming from the block editor, and not from the theme.

    Twenty Twenty-Three (TT3) is different from earlier default themes in that it was the first default theme to be designed entirely via the Site Editor /theme.json. This special file supports styling HTML elements like paragraph or button – but not custom CSS classes like .button or .my-special-class. While it's now possible to add raw CSS to theme.json, that wasn't the case when TT3 was developed.

    If you'd like a hand with some custom CSS to style your plugin-generated buttons with the .button class, I'd be glad to help. If you can provide me with a link to a page or post on your site where I can see what your plugin-generated buttons currently look like – as well as one of your default button blocks – I could take a look.

    • This reply was modified 1 year, 9 months ago by Kathryn Presner. Reason: expanded last paragraph, will need to see how you've styled your core Button blocks too
    Moderator Kathryn Presner

    (@zoonini)

    Hey there – I’ll go ahead and mark this thread as resolved. If you still need help with this, feel free to reply here or start a new topic for new questions. Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Why is the .button class not targeted in this theme?’ is closed to new replies.

Tags