WordPress.org

Making WordPress.org

Opened 8 months ago

Closed 3 weeks ago

Last modified 3 weeks 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 8 months ago.
2790.patch (677 bytes) - added by ketuchetan 8 months ago.
2790.2.patch (702 bytes) - added by ketuchetan 8 months ago.
2790.3.diff (1.8 KB) - added by noisysocks 3 weeks ago.
wordpressorg.dev_plugins_wordpress-seo_.png (457.7 KB) - added by noisysocks 3 weeks ago.
What a blockquote looks like with 2790.3.diff applied

Download all attachments as: .zip

Change History (21)

@ketuchetan
8 months ago

#1 @ketuchetan
8 months ago

  • Keywords has-patch added

Hello Guys,

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

Thanks,

@ketuchetan
8 months ago

#2 @ocean90
8 months ago

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

#3 @webdevmattcrom
8 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
8 months ago

#4 @ketuchetan
8 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.


8 months ago

#6 @SergeyBiryukov
7 months ago

  • Component changed from General to Plugin Directory

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


7 months ago

#8 @joyously
7 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
6 months ago

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

#10 @melchoyce
5 months ago

  • Keywords ui-feedback added

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


4 months ago

#12 @tellyworth
6 weeks ago

  • Keywords 2nd-opinion added

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


3 weeks ago

@noisysocks
3 weeks ago

#14 @noisysocks
3 weeks ago

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

@noisysocks
3 weeks ago

What a blockquote looks like with 2790.3.diff applied

#15 @tellyworth
3 weeks 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
3 weeks ago

In 6181:

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

See #2790.

Note: See TracTickets for help on using tickets.