[Support request] File block and button disappears

[Jennifer]

Hi Support,

Since the last update all my file block PDF links are smaller than the text size and the download button has disappeared leaving just the word download.

The file block is the standard WP block used for adding a PDF file to the page, gives you the option to inline embed, download link or open link.

Regards Jen

[Fernando]

Hi Jeniffer,

That Block would be out of our scope of support.

Is the download “word” not clickable?

[Jennifer]

The link the block generates is clickable as is the word download. However, the back ground of the button has disappeared and the link text is smaller than the styles. I have been advised it is an issue with Generate Press.

[Fernando]

How would you like the Download button to look? Do you have a reference or image you can share?

[Jennifer]

It was a standard button with a black back background that could be changed in colour. The other issue is the theme changes the point size of the link smaller than the text, this also needs to be corrected.

[David]

Hi there,

try adding this CSS to your site:

.wp-block-file__button,
.wp-block-file__button:visited {
    background-color: #000;
    color: #ffffff;
    border-radius: 0;
    padding: 0.5em 1.5em 0.6em 1.5em;
}

.wp-block-file__button:hover,
.wp-block-file__button:active,
.wp-block-file__button:focus {
    background-color: #000;
    color: #ffffff;
}

The issue arose when WP changed the file buttons HTML and dropped the core styles for it.
We are looking at how we now make up for those changes in the theme.

Let me know how the CSS works for you.

[Jennifer]

Thanks David, The CSS does work but uses the link style set in the theme, there is also a conflict with the font size when using the ‘file block’. The link is a smaller size than the text.

Hoping you can resolve this issue with the theme and WordPress.

[Fernando]

For reference, can you share the link to where you’re showing this File Block?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Jennifer]

You will notice the button background has disappeared with the functions and the link text has become smaller font size.

Normally there is a download button where the word download is now.

[David]

We just need to adjust the CSS to suit your needs for example:

.wp-block-file__button,
.wp-block-file__button:visited {
    background-color: #000;
    color: #ffffff;
    font-size: 12px;
}

.wp-block-file__button:hover,
.wp-block-file__button:active,
.wp-block-file__button:focus {
    background-color: #000;
    color: #ffffff;
}

This reduces the font-size to 12px and sets just the colors.
The rest of the styles will be those that are the WordPress defaults, eg. Border Radius and Padding.

[Jennifer]

Nope sadly still no change int he file block setting:(

[David]

Are you adding the CSS to the Customizer > Additional CSS?
If so can you move it to the very top of the CSS

[Author]

Posts