xwp / ampnews Goto Github PK

Going off the designs, create the static more stories section of the single post.

Hi there,

I found an issue when I enable the theme and install the wordpress plugin(amp 0.7.0), basically the site is not shown any style, even I ran the yarn build command to generate the assets/dist/css/main.css. I'm not sure is any step I missed or I need do something more?

BTW, the assets/html/*.php seem like is some static template, but for now, I think my site is not rendering any of this static template. Is there any document or even conference video I can find?

Great thanks to you guys.

The "load new articles" is displayed when the AMP plugin is disabled, see below

Going off the designs, create the static content and sidebar section of the index.php page. This also covers the content and sidebar sections of the archive.php and category.php pages.

AC1: The rendered PHP output from each page template (index.php, single.php, archive.php, etc.) should be output buffered to control what specific output is sent in the response from the templates.

• Because PHP parsing is piecemealed and complex, theme markup rendering can become more efficient if rendered using output buffering.
• As a result of working shortcodes and page templates, and components (sidebar.php, comments.php)

AC2: The buffered output should be modified to remove elements and attributes that are invalid AMP.

• <script> tags, for example, should not renderable from widget or content areas on the front end.

AC3: Each output buffer logic should play nicely with the the AMP plugin to filter standard HTML markup into valid, AMP-compatible markup. Standard HTML output by the theme should get converted over to AMP equivalents, such as using action-xhr attribute for POST forms instead of action attributes.

AC4: As a result of this template output buffering, AMP pages should not have visual or functional regression compared to their HTML versions in support of rendering AMP canonical pages.

I'd like to move towards AMP native and wondering on the status of this project.

Two big areas I'd like to contribute patches are additional color customization settings and some additional actions/filters for customization. Thoughts?

Now that #23 is merged, we should create dynamic WordPress theme templates.

While the error message have enough spacing above, the success message doesn't. See below

I tried to use this theme and got some validation errors for pages i published.

css_overflow_property_removed
node_name
link
sources
[
{
"type": "theme",
"name": "amp",
"function": "ampconf_enqueue_styles",
"hook": "wp_enqueue_scripts"
},
{
"type": "core",
"name": "wp-includes",
"function": "wp_enqueue_scripts",
"hook": "wp_head"
}
]
parent_name
head
node_attributes
{
"rel": "stylesheet",
"id": "ampconf-css",
"href": "/wp-content/themes/amp/assets/dist/css/main.css?ver=4.9.5",
"type": "text/css",
"media": "all"
}

I would suggest to agree on a Design Pattern (ex. MVC, Simple Factory ...) which should be followed throughout the code base.

Header:

AC1: The header should have the a navigation bar, set to the primary menu, editable within WordPress admin menus.
AC2: On larger devices the menu bar is fixed position, it shows as you scroll down the page. This doesn’t include the logo and subtitle though. On smaller devices the navigation bar (which includes the logo) is fixed position as well.
AC3: The header should have a search bar, where you can type into, press search button (or press enter) and be taken to a search results page
AC4: The header should have a logo area that contains either the text of the website name or an uploaded logo.
AC5: The uploaded logo size should be defined as following: “The logo should fit in a 60x600px rectangle, and either be exactly 60px high (preferred), or exactly 600px wide. For example, 450x45px would not be acceptable, even though it fits in the 600x60px rectangle.” based on this website: https://developers.google.com/search/docs/data-types/article#logo-guidelines
AC6: There should be a toggle for uploading the logo. Mobile logo: light/dark, desktop logo: light/dark. AC7: Which will give the user full control over where the light and dark logos are shown.
AC8: Below the logo should be an optional tagline, which is editable from WordPress admin > Settings > Tagline
AC9: On smaller devices only display the light logo, the dark color border, and a hamburger menu icon.

Footer:

AC10: The footer should be a custom menu, set in WordPress admin, with defined pages. Default to four when realistic.
AC11: The footer pages should go to two columns on larger devices and one column on smaller devices.
AC11: The footer should also have a place in Customizer where publishers can optionally add custom code snippets like Google Analytics (analytics.js).
AC12: The footer should have an area to put in a line about the company, such as © 2018 brand.
AC13: On larger devices, with pages that contain a load more stories, such as index.php and archive.php (https://d.pr/i/UVU49Q/YEzhdWDcLJ), have the footer display at the bottom of the sidebar.
AC14: On larger devices, pages without a load more button, have the footer display at the bottom of the page.
AC15: On smaller devices, have the footer display at the bottom of the page.

Both:

AC16: header.php and footer.php template should generally meet Figma mockups.
AC17: Confirm issues #7, #18, #26, #33, #38 all match the above AC and reopen issues as necessary.

Acceptance Criteria

AC1: All templates in the theme need to be AMP enabled/supported.
AC2: When you do not have the plugin installed, the theme should still be rendered, even if it cannot be validated.

Insure that the amp text domain does not conflict with the plugin text domain and make necessary adjustment if need be.

Acceptance Criteria

AC1: Conduct a Discovery to ensure all relevant WordPress actions/filters are AMP compatible
AC2: Create an issue/issues as an outcome of the Discovery.

Related to issues #22, #23, #41 #29.

AC1: Single.php template should generally meet Figma mockups.

AC2: Menu and branding should rendered by header.php.

AC3: Featured image should render at ~3:1 on desktop and ~4:3 on mobile.

AC4: Below this, the page title should display, above the_content.

AC5: Below this, To the left, a meta group containing Publish Time (or date if older than 24 hours), Author, All Categories, and all Tags.

AC6: And an optional share widget should render below the meta group. These Share buttons are set from within the Customizer.

AC7: Below the page title and to the right of the left sidebar, the_content of the article should appear.

AC8: User should be able to use all regular content elements (H# tags, blockquotes, paragraphs, links, list items, images, galleries, captions, videos, embeds) and they should render appropriately on the front end. Each of these elements should also be responsive.- Blockquotes should left align with the outer column content and be half a column wide on desktop width.

• List items (ordered and unordered) should have standard margins.
• Paragraphs should have internal line spacing. There should be automatic margins between paragraphs as reflected in the mockup. They should not render wider than the inside column.
• Cover image blocks should render to the outside column.
• Native WP Galleries should run four across, from the left of the outside column to the right.
• Video embeds should not go wider than the inner content column, as reflected in the design. This would also be true for any other embedded element, like maps or audio players.

AC9: At the bottom of the_content() should also be another optional share widget, as managed by a Customizer option.

AC10: Below should be an optional related posts section, where three articles would appear. In between article two and three would appear the optional “Must Read” email section.

AC11: Below this should be a comments section, loading comments.php.

AC12: Below this should be the footer, containing any links in the bottom footer menu.

AC13: No sidebar.php file should load on single.php templates.

AC14: No visual or functional regression should occur with AMP-enabled pages.

AC15: Confirm open issues were closed as appropriate with this ticket and reopen issues if necessary.

Setup the dev-lib

• WPCS
• ESLint
• Travis
• PHPUnit

Within the designs we are provide with very specific image sizes and currently there is no way to represent those image sizes as the amp-wp plugin filters the images in AMP_Img_Sanitizer class. While using the WordPress Core API the_post_thumbnail() does work, it does not output the correct image size, nor does it allow for specific image sizes to be added to the srcset of amp-img (or img before parsing).

Mobile menu was not yet complete when working on static markup, but now that the header has been added as a WordPress template, it is time to rework the mobile version based on mobile designs.

Closely related to #9 and partly related to #58 and its children tasks.

AC1: On mobile device widths (smartphone and tablet) A hamburger menu icon should replace a full-width menu, hiding the menu’s contents.
AC2: If I tap or click the hamburger navigation on a smaller device, it should slide in main items in the menu. An arrow icon to the right of the menu item name should hide an accordion menu where a sub-menu would exist. If a user taps or clicks this, the children pages would be revealed as visualized in the Figma mockup.
AC3: If there are items two levels deep, they should not appear.
AC4: If a sub-menu is already open and another is tapped, the first sub-menu should close and the second should open so that the focus item occupies the majority of the screen and the user is more likely to move forward.

Now that #20 is merged, we should create dynamic WordPress theme templates.

Going off the designs, create the static article section of pages.

Acceptance Criteria

AC1: See example

AC1: Share buttons should be optional and off by default.
AC2: Share buttons should be assigned and set in the Customizer. User can checkmark from a list of 10 social sharing options, and enter the fields for where they want the links to go.
AC3: Sharing buttons should be rearrangeable. The user should be able to set any order of buttons.
AC4: These buttons should include:

• Twitter
• Facebook
• Tumblr
• Google+
• Pinterest
• Reddit
• LinkedIn
• Pocket
• Press This
• WhatsApp
• Telegram
• Skype
• Email
• Print

Covers integrating the static html from assets/html into standard WordPress templates. See #19 for information regarding the static markup.

AC1: The comments.php block should render comments for a given post.
AC2: If there are no comments, or comments are closed for a given post, the comment block should indicate this.
AC3: If another user has commented on this story already, a user should see that user’s Name, Image, Comment Time, and Comment. Threadded comments should be indented and margins should line up as displayed in the Figma mockup.
AC4: A given user should able to leave a comment. A form to do so should render below any comment thread, if it exists. The form should contain three required fields (Comment, Name, Email) and one optional field (Website). When a user clicks or taps “Post Comment” it should validate the form.
AC5: If a user clicks or taps the “Post Comment” button several times, it should not send multiple requests to the server.
AC6: This comments.php block should have no visual or functional regression on AMP-enabled posts.
AC7: Confirm comments.php template should generally meet Figma mockups.

Going off the designs, create the static comment section of the single post. Please also refer to the comments.php block of the design.

AC1: In this theme Index.php should represent a home page for a given site.

AC2: On mobile, all posts should stack vertically respecting the ordering outlined below in #3. On desktop, a more complex layout should render based on whether items are in the A or B positions.

AC3: Within the admin there should be a way to define story and content areas.

• Main story optionally sits on top (A Position).
  • Top story featured image should render, always as wide as displayed in the designs. It fills its space using the CSS cover property. Height should be static, matching the design.
  • Stories in this position should have: Publish Time (or date if older than 24 hours), Author, Main Category, an optional Excerpt, and a “Read More” button
• Secondary stories optionally sit below it (B Position) in rows, divided into two columns. A user can also create additional rows of stories.
  • Stories in this position should have: Publish Time (or date if older than 24 hours), Author, Main Category, and an optional Excerpt.
• Any other stories would then continue to display newest to oldest (C Postition).
  • All other featured images are set to background-size: cover, with ratio of 4:3.
  • Any story in A or B should be excluded here, unless the user enables “Include all stories in Home Page Feed” as a theme option inside Customizer.
  • Stories in this position should have: Publish Time (or date if older than 24 hours), Author, Main Category and an optional Excerpt.
  • Using Customizer, an admin should be able to optionally inject an email list after the first 3 posts.
  • “Load more stories” button does infinite, lazy loading.
• A “sidebar” (D Position) should be optionally enabled to the right of C Position on desktop view that manages a widget area from sidebar.php.
  • Sidebar.php should come to the last of the markup and should render below the queries of the index.php file.
  • Footer.php should be rendered inside this sidebar column.

AC4: Index.php template should generally meet Figma mockups.

AC5: Confirm issues #7, #18, #26, #33, #38 all match the above AC and reopen issues as necessary.

Acceptance Criteria

AC1: Once the script creates the list of all comments, we will determine the level of AMP support for them
AC2: Create a story to add/enhance commenting output support.

When the comments are used the live list button isn't style, this should have styling.

Currently waiting on the designer to provide these designs.

Acceptance Criteria

AC1: If the plugin is not found, we will prompt users to install the plugin (possibly use this library)
AC2: An alert will display if the user does not have the plugin installed, which will contain content explaining they should download the plugin, and a call-to-action (CTA) to download.
AC3: Selecting the CTA will take the user to the download screen.
AC4: If a user has the plugin installed, but on check it is determined to be outdated (use this library), a prompt will display with content informing the user that their plugin is outdated, and an upgrade is available along with a CTA to upgrade.
AC5: Selecting the CTA will take the user to the upgrade screen.

Going off the designs, create the static featured post on the index page.

Leveraging general design and functionality from #64, search is a form of archive listing.

AC1: A given user should be able to see results based on a keyword search.
AC2: Each search result should contain the query’s name as the h1 and page title (12 results for “elections”).
AC3: The listing should resemble the standard archive.php loop, as reflected in the design.
AC4: The search result page should also show sidebar.php.
AC5: Search template should generally meet Figma mockups.

Acceptance Criteria:

AC1: Need to ensure that we can run the core hooks, and prevent the scripts from being enqueued.

Tasks

• Unhook printing of scripts and styles.

Going off the designs, create the static header section of the archive and category pages. This includes the secondary navigation on the category page.

Covers integrating static header and footer from assets/html into standard WordPress templates. Refer to #18 for any information regarding static templates and markup.

AC1: The 404.php template needs to be created.
AC2: The template will surface when 404 errors are encountered by a user accessing an inaccessible post or page.
AC3: 404 text should default to generic text: “It looks like nothing was found at this location. Return home, use the sidebar to find what you’re looking for, or try a search below.”
AC4: A user should be able to replace the generic text with rich media (an image, a video, etc.) as managed by Customizer theme options.
AC5: Below the generic text, an optional search bar should appear. Results should appear below the search.
AC6: 404 template should generally meet Figma mockups.

Going off the designs, create the static article section of the single post.

The Recent Comments widget outputs the following style element in the head via \WP_Widget_Recent_Comments::recent_comments_style():

<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>

The show_recent_comments_widget_style filter allows this to be turned off, which it must be for AMP validity. Since it is off, the theme itself will need to incorporate this CSS rule, except for !important since this is also invalid in AMP.

Ref. ampproject/amp-wp#864

Going off the designs, create the static secondary featured posts on the index.php page.

Acceptance Criteria

AC1: Create a wp-cli script to output the necessary levels of menus on a test page (example).
AC2: Create an issue(s) to support for top level navigation menu after discovery work is complete.

AC1: Should load header.php

AC2: Title is the archive that you’re on

AC3: If this is an author archive and an image is available for the author, display it to the left of the description area.

AC4: Optionally display for WordPress’ category/author/tag description below this title.

AC5: If there are sub-categories and this is a category page, show below the description a list of child categories, clickable, and horizontally shown. If it gets past the width of the page then it just goes to a second line.

AC6: Posts that belong to this query should be available to display.

AC7: The posts query should be display the first X# of posts.

• Each of these posts should have:
  • the_date (published date)
  • The_title, linking to the post
  • the_excerpt
  • the_author, linking to the author’s page
  • Taxonomic display (the_category, the_tags)
  • Featured image, linking to the post- The next X# of posts should be ready to be displayed when the user clicks on a button titled “Load more stories” that then renders more posts as described above.
    These posts should be from newest published to oldest.
• A control in Customizer could be added to allow a publisher to disable one or more of the default elements of the post components.

AC8: Should optionally load sidebar.php to the right of the main query.

• Sidebar.php should come to the last of the markup and should render below the query of the archive.php file.

AC9: Should load footer.php

AC10: Archive templates should generally meet Figma mockups.

Using the text domain ampconf does not really work for long term usage. I suggest we change the theme text domain to something more suitable for real world usage by people who will download the theme.

Going off the designs, create the header and footer for the site.

Now that #21 has been merged, we need to work the static templates into dynamic WordPress templates.