Twenty Thirteen project update, March 26, 2013

Our focus right now is on post formats integration, both structured (formats with post metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.) and “normal” output for the other formats.

Priorities

  1. Work with Post Formats team to get the_video(), the_audio(), and the_image() functions into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., so we can avoid a ton of extra logic in Twenty Thirteen’s functions.php file to grab the first asset for a format. Making it easier for *any* theme to get the same data back and keep their template files simpler. Themes should not have to parse shortcodes or try to make something run through oEmded before display.
  2. Work with Post Formats team on post_formats_compat() functionality, improving Quote markup and filling in the gaps for other formats. Obenland is going to work on a patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. for this.
  3. Image: we need clarification from 3.6 leads and Post Formats team on whether it is going to be structured or not (post meta) and it needs more work for the post-media functions (see 1 and 2 priorities above)
  4. Finalize each post format in Twenty Thirteen: what template HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. or PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher it needs, what it needs from core functionality to work correctly

By post format

Here’s a breakdown per format, per today’s discussion (IRC log).

  • Standard: good to go
  • Aside: we remove the title from the PHP template, added styling; non-structured
  • Chat: IHNIWIGOWTPF (see IRCIRC Internet Relay Chat, a network where users can have conversations online. IRC channels are used widely by open source projects, and by WordPress. The primary WordPress channels are #wordpress and #wordpress-dev, on irc.freenode.net. log, hehe); non-structured
  • Gallery: we use a bit of PHP to remove default gallery styles, and we use a filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to change the image size to large on index view, then add a bit of CSSCSS Cascading Style Sheets. fanciness to change the first image to “bigger” size, 300×300 (single view is not changed other than to align the columns); non-structured
  • Link: structured, we use get_the_url() wrapped in our own fallback to output permalink if no URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org is found
  • Image: right now it works OK without any changes, but the design calls for the image to be above the title, which means we need a way to pull out the first image, and have the_content() be output without that image; also filter content_width to 724 for this format (small issue with that reported in #23863). Seems like the best approach here is to use a custom image size to grab an exact 724 px wide image (unless it’s smaller that 724, in which case we grab the largest available). Ideal: a user uploads an image, adds it to the post content at exactly 724 from the Media editor, then the_image() outputs the exact HTML img tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) + attributes.
  • Quote: structured; currently we rely on people using blockquote correctly in the editor, and style it with CSS; after Obenland’s patch to Quote markup (noted above in priority 2) we’ll add CSS support for the structured HTML markup, and leave in the basic styles in case someone uses post content anyway
  • Status: similar to Aside
  • Video: structured; we filter content_width to 724 to allow the video to be wider than the rest of the content area; needs the_video() to return the HTML output of first video and remove the same from the post content
  • Audio: structured, we’re leaning towards using the post format compat output instead of a custom structure in the theme; needs more testing but seems to be working OK as-is right now

#3-6, #bundled-theme, #theme, #twentythirteen

Twenty Thirteen project update, March 19, 2013

We’re in great shape to get to betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.. Here is what we’re working on right now.

Blocking older installs

Tracked in #23819 — since Twenty Thirteen is 3.6+ only, older installs could see errors. We’d like to come up with a graceful way to not allow older versions of WordPress to install and run Twenty Thirteen.

Maybe a nag function in the theme that puts up a warning? Forcing a change the previously activated theme upon activation? What are your thoughts?

Relates to #13780 also.

Post formats integration

See #23619, #23620, and #23621 — we are waiting on the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. functionality to be committed before we can change the theme code (images, videos, galleries, links).

Recently completed

  • HTML5 improvements to comment list, comment form, and search form (yay!) #22005, #23702, and #23701
  • Solidify footer positioning when no JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. or no Masonry script available: #23771
  • More gallery visual fixes: #23773 and #23769

Open issues

Here is a link to open tickets.

#3-6, #bundled-theme, #theme, #twentythirteen

Twenty Thirteen project update, March 12 2013

This week we are closing as many open issues as possible to prepare for code freeze.

Blockers

Here are the current blockers to getting to a code freeze tomorrow, as scheduled:

  • Post formats: #23619 #23620 #23621 — waiting on the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. functionality to be committed before we can change the theme code (images, videos, galleries, links)
  • #15080: Comment form HTML5 input types — just needs a commit
  • #20088: Improve wp_list_comments() markup — needs a code review from core team dev, then commit

Recently finished

  • Several passes at RTL, editor, and print styles
  • SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. & footer clearing: #23557
  • Gallery visual fixes: #23742 #23649 #23584
  • Color contrast for accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility): #23513

Open issues

Here is a link to all remaining open tickets.

#3-6, #bundled-theme, #theme, #twentythirteen

Twenty Thirteen project update, March 4 2013

What we worked on last week

Lots of fixes and improvements went in — thanks to everyone who reported and patched and tested.

Bigger items discussed:

1. Fixing the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. (including discussion of dropping it completely). We decided to just swap primary and secondary sidebars for now. See #23644.
2. Remove fixed navbar for mobile — yes, let’s remove it. See #23647.
3. Keep fixed navbar for desktop for now, but next step is to switch site title to menu there, try that out.

IRCIRC Internet Relay Chat, a network where users can have conversations online. IRC channels are used widely by open source projects, and by WordPress. The primary WordPress channels are #wordpress and #wordpress-dev, on irc.freenode.net. logs: Tue Feb 26 2013 | Thu Feb 28 2013

What we’re doing this week

More work on open tickets.

Big items to tackle next:

  • Post format support: #23619 #23620 #23621
  • Sidebar / footer clearing, still no perfect CSSCSS Cascading Style Sheets.-only solution. JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. techniques are next. See #23557.
  • Gallery styles: portrait sized images, #23649 — and caption styles, #23584.

Non-theme tickets that affect Twenty Thirteen’s progress:

  • #15080: Comment Form Should use HTML5 input types for better accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)
  • #15081: Search Form should use type=’search’
  • #20088: Improve wp_list_comments() comment markup

Want to get involved?

View open tickets.

Join us in IRC during office hours and we can get you started on a ticketticket Created for both bug reports and feature development on the bug tracker. or task.

#3-6, #bundled-theme, #theme, #twentythirteen

Twenty Thirteen project update

The Twenty Thirteen team jumped into 3.6 with two two first office hours this week; things are off to a great start. We’re meeting in #wordpress-dev IRCIRC Internet Relay Chat, a network where users can have conversations online. IRC channels are used widely by open source projects, and by WordPress. The primary WordPress channels are #wordpress and #wordpress-dev, on irc.freenode.net. on Tuesdays and Thursdays at 17 UTC.

Who we are

(These are WP.org usernames.)

  • Leads: lancewillett and obenland
  • Contributors joining us for office hours this week: johnbillion kwight clakeb karmatosed sabreuse taupecat jorbin bpetty MikeHansenMe georgestephanis jayjdk nacin

Many other folks already contributed patches and tickets, thank you.

What we’re working on

Tuesday we started by dividing things up a bit:

  • Color contrast and general accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) (sabreuse and jorbin)
  • Mobile behavior, the navbar and menu need some work (obenland, johnbillion, and karmatosed)
  • Device testing (karmatosed)
  • General bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. reporting and patches (everyone)

We also looked at open tickets for Twenty Thirteen.

Thursday we had a more open discussion style. Based on people grabbing tasks I’ve added a “point person” in bold after each — if you want to jump in look for “Unassigned” here and drop a comment or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me in IRC.

Continue reading

#3-6, #bundled-theme, #theme, #twentythirteen

A first draft of the Twenty Thirteen theme…

Screen Shot 2013-02-18 at 5.15.50 PM

A first draft of the Twenty Thirteen theme is now in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., for your inspection and iteration. See: r23452

A demo site is available for you to browse.

@matt set the goals for this theme: a focus on blogging, and great support for post formats (which are getting attention on the backend in 3.6 as well). Under Matt’s guidance, @joen explored the artistic possibilities and was joined by @obenland and @lancewillett in bringing it to fruition.

What you’ll notice first is the colors. Way more use of color than a bundled WordPress theme has had before. Each post format has its own color, so each is distinct, yet they are all complimentary. The bold colors encourage authors to try out all the different formats. This color extends the full width of the window, which breaks your blogblog (versus network, site) up into a lush, segmented timeline. This effect is even more pronounced on mobile browsers, where the screen can be dominated by one or two posts at a time, in all of their chromatic fullness.

On closer inspection, you’ll notice details, like the font-based icons (“Genericons”, by @joen) that scale up to any resolution or zoom level and can be easily recolored using CSSCSS Cascading Style Sheets..

You may notice some playful details, like the size-offset pagination arrows:

Screen Shot 2013-02-18 at 4.52.23 PM

Or the 404 page (which I’ll leave to you to find).

One of the goals of having a new theme every year was to give ourself room to experiment. That hasn’t really happened. We’ve been far too conservative, trying to make themes that work reasonably well for everyone, but don’t push boundaries too much. That changes with Twenty Thirteen. It’s hard not to have a strong feeling about the theme, one way or another. It defies you to give it a shrug or a kurt nod. Some of you will hate it. And that’s okay. We’ll still be shipping Twenty Twelve, which is an excellent base theme and a canvas on which you can build anything from a blog to a static content site. But with Twenty Thirteen we’re taking a bold stance: this theme was meant for blogging, and it’s not a blank canvas. It comes pre-marinated with playfulness and warmth and opinions.

Twenty Thirteen really prefers a single column layout. Widgets live best in the footer, where jQuery Masonry bricks them together (but it supports a sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., if you really insist). HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. images have a fixed width and height, and will be cropped at smaller resolutions, so the best choice is an artistic header where not 100% needs to be shown all the time (it ships with three).

Now that we have a first draft of Twenty Thirteen in core, it’s time to start iterating and sanding off some of the rough edges. AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) is still important, even when making bold artistic statements, and I’d be surprised if we didn’t have work to do there. We’ll need testing on lots of different browsers and platforms, and with lots of different plugins. @helen‘s Post Format UIUI User interface team will need to give feedback on upgrading Twenty Thirteen to use the new post format APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. functions that are available.

@lancewillett and @obenland will be holding Twenty Thirteen office hours on Tuesdays and Thursdays at 1700 UTC. Interested parties should make an effort to attend and help us get this beauty ready for betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.!

#3-6, #bundled-theme, #theme, #twentythirteen

Core Team Meetup Recap: Default Theme “Twenty Twelve”

One of the topics discussed at the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. team meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. was next year’s default theme. It was determined that the default theme will be Matt’s project for 3.4. Matt will be overseeing a theme designer (via Lance) to ensure a theme that is “kind of different from before, generally palatable, and that Matt likes.” Once Matt chooses a design, a directory will be started and the core team will supervise the code from the start, hopefully with review cycles involving the theme review team.

Some notes about what we want in a new default theme:

  • single post/permalink view with post formats is needed
  • variable height headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. image
  • mobile version
  • default to static front pageStatic Front Page A WordPress website can have a dynamic blog-like front page, or a “static front page” which is used to show customized content. Typically this is the first page you see when you visit a site url, like wordpress.org for example. (will need a function in core to auto-choose)
  • editor styles the same as front end.
  • avoid clever things that aren’t super-useful (like ephemera widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.)
  • start with 2011 as base for code (or 2010, which has gotten more updates and had more eyes on it)
  • no featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. in header
  • by default – no header image

To-do: Reverse engineer from 3.4 timeline to create a schedule of deadlines for theme design and development.

#bundled-theme, #theme, #twentytwelve