WordPress.org

Making WordPress.org

Opened 15 months ago

Closed 8 months ago

Last modified 8 months ago

#2790 closed enhancement (fixed)

Plugin Directory: Blockquote styles enhancement

Reported by: webdevmattcrom Owned by: mapk
Milestone: Priority: normal
Component: Plugin Directory Keywords: has-patch ui-feedback 2nd-opinion
Cc:

Description

Currently, the blockquote styles on the single plugin page are almost invisible. Here's what they are currently:

blockquote {
    background: transparent;
    border: none;
    padding: 0;
    border-left: 2px solid #eee;
    color: #82878c;
    font-style: italic;
    margin: 16px 0;
    margin: 1rem 0;
    padding-left: 16px;
    padding-left: 1rem;
}

I'd like to suggest this instead:

blockquote {
    background: #eee;
    border: none;
    color: #82878c;
    font-style: italic;
    margin: 16px 0;
    margin: 1rem 0;
    padding: 10px 40px;
}

Here's a before image:
https://i.imgur.com/dbk94ob.png

Here's an after image:
https://i.imgur.com/X4Jts45.png

Attachments (5)

2790.diff (695 bytes) - added by ketuchetan 15 months ago.
2790.patch (677 bytes) - added by ketuchetan 15 months ago.
2790.2.patch (702 bytes) - added by ketuchetan 15 months ago.
2790.3.diff (1.8 KB) - added by noisysocks 8 months ago.
wordpressorg.dev_plugins_wordpress-seo_.png (457.7 KB) - added by noisysocks 8 months ago.
What a blockquote looks like with 2790.3.diff applied

Download all attachments as: .zip

Change History (21)

@ketuchetan
15 months ago

#1 @ketuchetan
15 months ago

  • Keywords has-patch added

Hello Guys,

I have added my patch as per the @webdevmattcrom suggestion.

Thanks,

@ketuchetan
15 months ago

#2 @ocean90
15 months ago

  • Owner set to mapk
  • Status changed from new to reviewing

#3 @webdevmattcrom
15 months ago

Thanks @ketuchetan -- I actually realized I didn't follow the standard padding sizing that the current styles employ. If possible, can you update your patch to this?

blockquote {
    background: #eee;
    border: none;
    color: #82878c;
    font-style: italic;
    margin: 16px 0;
    margin: 1rem 0;
    padding: 10px 40px;
    padding: 0.6em 2.5em;
}

It's just adding that second padding rule.

@ketuchetan
15 months ago

#4 @ketuchetan
15 months ago

Hi @webdevmattcrom,

I have updated my patch as per your latest comment.

Thanks,

This ticket was mentioned in Slack in #meta by chetansatasiya. View the logs.


15 months ago

#6 @SergeyBiryukov
14 months ago

  • Component changed from General to Plugin Directory

This ticket was mentioned in Slack in #meta by chetansatasiya. View the logs.


14 months ago

#8 @joyously
14 months ago

I don't think blockquote should be italic. Blockquote can have nested HTML, including <em>, which would be indistinguishable. I favor an indent, but not a background color change. After all, blockquote is for quoting an external source, not making something stand out.

#9 @Ipstenu
13 months ago

  • Milestone Plugin Directory v3.0 deleted
  • Summary changed from Blockquote styles enhancement to Plugin Directory: Blockquote styles enhancement

#10 @melchoyce
12 months ago

  • Keywords ui-feedback added

This ticket was mentioned in Slack in #meta by chetansatasiya. View the logs.


11 months ago

#12 @tellyworth
9 months ago

  • Keywords 2nd-opinion added

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


8 months ago

@noisysocks
8 months ago

#14 @noisysocks
8 months ago

Attached 2790.3.diff which modifies the source SCSS instead of the compiled CSS.

@noisysocks
8 months ago

What a blockquote looks like with 2790.3.diff applied

#15 @tellyworth
8 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 6166:

Plugin directory theme: better visual separation of blockquote elements. Props @webdevmattcrom and @noisysocks

Uses a different background colour and padding to make blockquotes stand out more.

Fixes #2790

#16 @SergeyBiryukov
8 months ago

In 6181:

Plugin Directory: Update style.css and style-rtl.css after [6166].

See #2790.

Note: See TracTickets for help on using tickets.