WordPress.org

Making WordPress.org

Opened 3 years ago

Closed 2 years ago

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

Download all attachments as: .zip

Change History (21)

@ketuchetan
3 years ago

#1 @ketuchetan
3 years ago

  • Keywords has-patch added

Hello Guys,

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

Thanks,

@ketuchetan
3 years ago

#2 @ocean90
3 years ago

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

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

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


3 years ago

#6 @SergeyBiryukov
3 years ago

  • Component changed from General to Plugin Directory

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


2 years ago

#8 @joyously
2 years 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
2 years ago

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

#10 @melchoyce
2 years ago

  • Keywords ui-feedback added

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


2 years ago

#12 @tellyworth
2 years ago

  • Keywords 2nd-opinion added

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


2 years ago

@noisysocks
2 years ago

#14 @noisysocks
2 years ago

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

@noisysocks
2 years ago

What a blockquote looks like with 2790.3.diff applied

#15 @tellyworth
2 years 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
2 years ago

In 6181:

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

See #2790.

Note: See TracTickets for help on using tickets.