WP 5.0 Editor Button Styles Lost / Broken

  • Resolved MurnaghanAP

    (@murnaghanap)


    5 years, 11 months ago

    Hi,
    Following the 5.0 upgrade the styling of buttons created in the previous Guttenberg editor have been lost and the button block in the editor is broken.

    The buttons on https://surreyarchery.org/junior_open_championships/ have lost their formatting style. There were created as outline style buttons in pale blue but are now rendered as standard black square buttons. It is if the CSS code relating to the button style is missing.

    When I have tried to edit / create new buttons the editor still offers three different styles – ‘outline’ ; ‘Rounded’ and ‘Square’ but the preview only shows the one default block style – the outline and rounded styles are broken.

    Please can you review and advise on a fix.
    Thanks.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    Looks like the Twenty Seventeen theme was updated to include block styles, and it’s overriding the styles of the buttons.

    In twentyseventeen/assets/css/blocks.css, on line 187, you’ll find this code:

    
/* Buttons */

.wp-block-button .wp-block-button__link {
	background-color: #222;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.66;
	margin-top: 2em;
	padding: 0.7em 2em;
	-webkit-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
	white-space: nowrap;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
	background-color: #767676;
	-webkit-box-shadow: none;
	box-shadow: none;
}

    Delete it, and your buttons will go back to normal.

    Thread Starter MurnaghanAP

    (@murnaghanap)

    Thanks for this advice.

    This will provide a short term fix.
    Is it possible as this is a standard default WordPress theme to get the theme CSS updated to support these editor features?

    Otherwise it would be needed to manually edit all twenty seventeen theme sites every time there is a theme update.

    Should I raise this separately in the twenty seventeen forum?

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    Should I raise this separately in the twenty seventeen forum?

    Yes, I think it would be appropriate to post it there.

    Thread Starter MurnaghanAP

    (@murnaghanap)

    Will do and thanks for your support.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘WP 5.0 Editor Button Styles Lost / Broken’ is closed to new replies.