Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Contribute Tab for the About page #4431

Closed
wants to merge 31 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
248d6f0
Contribute Tab for the About page draft
OlaIola May 6, 2023
5987723
Update src/wp-admin/contribute.php
OlaIola May 15, 2023
2e707e7
Update src/wp-admin/contribute.php
OlaIola Jun 21, 2023
191745a
Code review
OlaIola Jun 21, 2023
f6cf6b4
CS fix
OlaIola Jun 21, 2023
50c73a4
Text fix
OlaIola Jun 21, 2023
e985ad6
Merge branch 'WordPress:trunk' into 23348.3
OlaIola Jul 8, 2023
50707c9
Change of title
OlaIola Jul 10, 2023
ad76e15
Content change
OlaIola Jul 10, 2023
38d56c9
CS
OlaIola Jul 10, 2023
b4bf72d
Placeholder fix
OlaIola Jul 11, 2023
d2a279d
update translator comment about % sign
audrasjb Jul 11, 2023
30e027c
hardcode 20 in "more than 20"
audrasjb Jul 11, 2023
37048f6
Update src/wp-admin/contribute.php
OlaIola Jul 11, 2023
d9c4b8a
Update src/wp-includes/admin-bar.php
OlaIola Jul 11, 2023
a7c34b4
Update src/wp-admin/contribute.php
OlaIola Jul 11, 2023
3e06255
Update src/wp-admin/contribute.php
OlaIola Jul 11, 2023
a0afe64
Update src/wp-admin/contribute.php
OlaIola Jul 11, 2023
d7b31c1
Update src/wp-admin/contribute.php
OlaIola Jul 12, 2023
a15cb0b
Update src/wp-admin/contribute.php
OlaIola Jul 12, 2023
a3e8a05
Update src/wp-admin/contribute.php
OlaIola Jul 12, 2023
8ae8080
Content changes
OlaIola Jul 12, 2023
9184af4
Update src/wp-admin/contribute.php
OlaIola Jul 12, 2023
ba3dde1
Update src/wp-admin/contribute.php
OlaIola Jul 12, 2023
9ce5bb7
white spaces change
OlaIola Jul 12, 2023
8b7f28c
white spaces change
OlaIola Jul 12, 2023
b662f8d
Fix typos from code review
SergeyBiryukov Jul 12, 2023
8d1158a
Reorder CSS rules for consistency
SergeyBiryukov Jul 12, 2023
c014c30
Move closing </p> tag for consistency
SergeyBiryukov Jul 12, 2023
0f5f0f6
Move add_node() call for consistency
SergeyBiryukov Jul 12, 2023
6667001
Merge branch '23348.3' of https://github.com/OlaIola/wordpress-develo…
SergeyBiryukov Jul 12, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions src/wp-admin/about.php
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
<a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
<a href="contribute.php" class="nav-tab"><?php _e( 'Get Involved' ); ?></a>
</nav>

<div class="about__section">
Expand Down
116 changes: 116 additions & 0 deletions src/wp-admin/contribute.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<?php
/**
* Contribute administration panel.
*
* @package WordPress
* @subpackage Administration
*/

/** WordPress Administration Bootstrap */
require_once __DIR__ . '/admin.php';

// Used in the HTML title tag.
$title = __( 'Get Involved' );
Copy link
Contributor

@costdev costdev Jul 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't look like this is used in all the places that it could be. There are calls to _e( 'Get Involved' ) on lines 24 and 38 rather than echo $title;. Should this be used on these lines too?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That appears to be consistent with the other files, e.g. privacy.php. I think $title here is literally only meant for the <title> tag, so this seems fine as is to me 🙂

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree with @SergeyBiryukov


list( $display_version ) = explode( '-', get_bloginfo( 'version' ) );
audrasjb marked this conversation as resolved.
Show resolved Hide resolved

require_once ABSPATH . 'wp-admin/admin-header.php';
?>
<div class="wrap about__container">

<div class="about__header">
<div class="about__header-title">
<h1>
<?php _e( 'Get Involved' ); ?>
</h1>
</div>

<div class="about__header-text">
<?php _e( 'Be the future of WordPress' ); ?>
</div>
</div>

<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
<a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
<a href="contribute.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Get Involved' ); ?></a>
</nav>

<div class="about__section has-2-columns is-wider-right">
<div class="column about__image">
<img src="data:image/svg+xml,%3Csvg width='436' height='436' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%231d35b4' /%3E%3C/svg%3E" alt="" />
</div>
<div class="column is-vertically-aligned-center">
<p><?php _e( 'Do you use WordPress for work, for personal projects, or even just for fun? You can help shape the long-term success of the open source project that powers millions of websites around the world.' ); ?></p>
<p><?php _e( 'Join the WordPress contributor community and connect with others who are passionate about maintaining a free and open web.' ); ?></p>

<ul>
<li><?php _e( 'Be part of a global open source community' ); ?></li>
<li><?php _e( 'Apply your skills or learn some new ones' ); ?></li>
<li><?php _e( 'Grow your network and make new friends' ); ?></li>
</ul>
</div>
</div>

<div class="about__section">
<div class="column">
<h2><?php _e( 'Find your team' ); ?></h2>
<p><?php _e( 'Finding the area that aligns with your skills and interests is the first step toward meaningful contribution. With more than 20 Make WordPress teams working on different parts of the open-source WordPress project, there&#8217;s a place for everyone, no matter what your skill set is.' ); ?></p>
</div>
</div>

<div class="about__section has-2-columns is-wider-left">
<div class="column is-vertically-aligned-center">
<h3><?php _e( 'No-Code Contribution' ); ?></h3>
<p><?php _e( 'WordPress may thrive on technical contributions, but you don&#8217;t have to code to contribute. Here are some of the ways you can make an impact without writing a single line of code:' ); ?></p>
<ul>
<li><?php _e( '<strong>Share</strong> your knowledge in the WordPress support forums' ); ?></li>
<li><?php _e( '<strong>Write</strong> or improve documentation for WordPress' ); ?></li>
<li><?php _e( '<strong>Translate</strong> WordPress into your local language' ); ?></li>
<li><?php _e( '<strong>Create</strong> and improve WordPress educational materials' ); ?></li>
<li><?php _e( '<strong>Promote</strong> the WordPress project to your community' ); ?></li>
<li><?php _e( '<strong>Take</strong> photos for or help curate the WordPress Photos Directory' ); ?></li>
<li><?php _e( '<strong>Organize</strong> or participate in local WordPress Meetups and WordCamps' ); ?></li>
<li><?php _e( '<strong>Lend</strong> your creative imagination to the WordPress UI design' ); ?></li>
<li><?php _e( '<strong>Edit</strong> videos and add captions to WordPress.tv' ); ?></li>
<li><?php _e( '<strong>Explore</strong> ways to reduce the environmental impact of millions of websites' ); ?></li>
</ul>
</div>
<div class="column">
<img src="data:image/svg+xml,%3Csvg width='436' height='300' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%231d35b4' /%3E%3C/svg%3E" alt="" />
</div>
</div>
<div class="about__section has-2-columns is-wider-right">
<div class="column">
<img src="data:image/svg+xml,%3Csvg width='436' height='300' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%231d35b4' /%3E%3C/svg%3E" alt="" />
</div>
<div class="column is-vertically-aligned-center">
<h3><?php _e( 'Code-based Contribution' ); ?></h3>
<p><?php _e( 'If you do code, or want to learn how, you can contribute technically in numerous ways:' ); ?></p>
<ul>
<li><?php _e( '<strong>Find</strong> and report bugs in the WordPress core software' ); ?></li>
<li><?php _e( '<strong>Test</strong> new releases and proposed features for the block editor' ); ?></li>
<li><?php _e( '<strong>Write</strong> and submit patches to fix bugs or help build new features' ); ?></li>
<li><?php _e( '<strong>Contribute</strong> to the code, improve the UX, and test the WordPress app' ); ?></li>
</ul>
<p><?php _e( 'WordPress embraces new technologies, while being committed to backward compatibility. The WordPress project uses the following languages and libraries:' ); ?></p>
<ul>
<li><?php _e( 'Core and Block Editor: HTML, CSS, PHP, SQL, JavaScript, and React' ); ?></li>
<li><?php _e( 'WordPress app: Kotlin, Java, Swift, Objective-C, Vue, Python, and TypeScript' ); ?></li>
</ul>
</div>
</div>

<div class="about__section is-feature has-subtle-background-color">
<div class="column">
<h2><?php _e( 'Help Make WordPress Better' ); ?></h2>
<p><?php _e( 'Whether you speak at a local meetup, provide your perspective on a feature proposal, or submit a bug report, your contributions will make a difference.' ); ?></p>
<p class="aligncenter"><a href="https://make.wordpress.org/contribute/" target="_blank"><?php _e( 'Find your team &rarr;' ); ?></a></p>
</div>
</div>

</div>
<?php
require_once ABSPATH . 'wp-admin/admin-footer.php';
1 change: 1 addition & 0 deletions src/wp-admin/credits.php
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
<a href="credits.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Credits' ); ?></a>
<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
<a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
<a href="contribute.php" class="nav-tab"><?php _e( 'Get Involved' ); ?></a>
</nav>

<div class="about__section has-1-column has-gutters">
Expand Down
24 changes: 14 additions & 10 deletions src/wp-admin/css/about.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*------------------------------------------------------------------------------
22.0 - About Pages

1.0 Global: About, Credits, Freedoms, Privacy
1.0 Global: About, Credits, Freedoms, Privacy, Get Involved
1.1 Layout
1.2 Typography & Elements
1.3 Header
Expand Down Expand Up @@ -42,20 +42,22 @@
}

/*------------------------------------------------------------------------------
1.0 - Global: About, Credits, Freedoms, Privacy
1.0 - Global: About, Credits, Freedoms, Privacy, Get Involved
------------------------------------------------------------------------------*/

.about-php,
.credits-php,
.freedoms-php,
.privacy-php {
.privacy-php,
.contribute-php {
background: #fff;
}

.about-php #wpcontent,
.credits-php #wpcontent,
.freedoms-php #wpcontent,
.privacy-php #wpcontent {
.privacy-php #wpcontent,
.contribute-php #wpcontent {
background: #fff;
padding: 0 24px;
}
Expand All @@ -64,7 +66,8 @@
.about-php.auto-fold #wpcontent,
.credits-php.auto-fold #wpcontent,
.freedoms-php.auto-fold #wpcontent,
.privacy-php.auto-fold #wpcontent {
.privacy-php.auto-fold #wpcontent,
.contribute-php.auto-fold #wpcontent {
padding-left: 24px;
}
}
Expand Down Expand Up @@ -574,8 +577,9 @@
}

.credits-php .about__header-title h1,
.freedoms-php .about__header-title h1,
.privacy-php .about__header-title h1,
.freedoms-php .about__header-title h1 {
.contribute-php .about__header-title h1 {
/* Fluid font size scales on browser size 960px - 1200px. */
font-size: clamp(3rem, 10vw - 3rem, 4.5rem);
}
Expand Down Expand Up @@ -646,8 +650,9 @@
}

.credits-php .about__header-title h1,
.freedoms-php .about__header-title h1,
.privacy-php .about__header-title h1,
.freedoms-php .about__header-title h1 {
.contribute-php .about__header-title h1 {
/* Fluid font size scales on browser size 600px - 960px. */
font-size: clamp(3rem, 6.67vw - 0.5rem, 4.5rem);
}
Expand Down Expand Up @@ -684,13 +689,12 @@
.about__header {
min-height: auto;
}
}

@media screen and (max-width: 480px) {
audrasjb marked this conversation as resolved.
Show resolved Hide resolved
.about__header,
.credits-php .about__header,
.freedoms-php .about__header,
.privacy-php .about__header,
.freedoms-php .about__header {
.contribute-php .about__header {
background-image: none;
}

Expand Down
1 change: 1 addition & 0 deletions src/wp-admin/freedoms.php
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
<a href="freedoms.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Freedoms' ); ?></a>
<a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
<a href="contribute.php" class="nav-tab"><?php _e( 'Get Involved' ); ?></a>
</nav>

<div class="about__section is-feature">
Expand Down
1 change: 1 addition & 0 deletions src/wp-admin/privacy.php
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
<a href="credits.php" class="nav-tab"><?php _e( 'Credits' ); ?></a>
<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
<a href="privacy.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Privacy' ); ?></a>
<a href="contribute.php" class="nav-tab"><?php _e( 'Get Involved' ); ?></a>
</nav>

<div class="about__section has-2-columns is-wider-right">
Expand Down
21 changes: 18 additions & 3 deletions src/wp-includes/admin-bar.php
Original file line number Diff line number Diff line change
Expand Up @@ -122,11 +122,14 @@ function wp_admin_bar_render() {
*/
function wp_admin_bar_wp_menu( $wp_admin_bar ) {
if ( current_user_can( 'read' ) ) {
$about_url = self_admin_url( 'about.php' );
$about_url = self_admin_url( 'about.php' );
$contribute_url = self_admin_url( 'contribute.php' );
} elseif ( is_multisite() ) {
$about_url = get_dashboard_url( get_current_user_id(), 'about.php' );
$about_url = get_dashboard_url( get_current_user_id(), 'about.php' );
$contribute_url = get_dashboard_url( get_current_user_id(), 'contribute.php' );
} else {
$about_url = false;
$about_url = false;
$contribute_url = false;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we have some tests that could be copied and the about/about.php references changed to contribute/contribute.php so this is covered.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SergeyBiryukov just following up on this bit, should we add these tests to ensure the link only shows when appropriate?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would be great, yes 🙂

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Follow-up: r56227.

}

$wp_logo_menu_args = array(
Expand Down Expand Up @@ -159,6 +162,18 @@ function wp_admin_bar_wp_menu( $wp_admin_bar ) {
);
}

if ( $contribute_url ) {
// Add contribute link.
$wp_admin_bar->add_node(
array(
'parent' => 'wp-logo',
'id' => 'contribute',
'title' => __( 'Get Involved' ),
'href' => $contribute_url,
)
);
}

// Add WordPress.org link.
$wp_admin_bar->add_node(
array(
Expand Down