mysociety / fixmyblock-wordpress Goto Github PK

If headings are the first element in a wp-block-group, they have no margin-top. I only noticed this because Myf / Danielle used block groups (perhaps unintentionally!) on one of the pages, and the text looked really tight:

Should wp-block-group have its own margin-top?

Or should we remove the &:first-child { margin-top: 0; } override on headings in _type.scss? If we do that, it’ll open a can of worms – off the top of my head, we’d need to compensate for the margin-top on the first heading on the page, and we’d still want to remove the margin-top on headings if they’re the first child of a .wp-block-group.has-background because background-coloured blocks have their own internal padding.

At some point we need to do a survey of users - currently this will need to be online -to get some general feedback about the site and project for our M&E - we need to do this at least twice post "launch" to get an idea of change, ideally the first time should be close to the "launch" and the second should be close to the end of the project (Late october)

The current typeface (Work Sans) has lots of character, and worked well in the fairly sparse prototypes, but now we’re seeing it used on lengthy, text-heavy pages, I’m starting to feel like it’s a bit hard to read:

Perhaps something a bit curvier would be more soothing?

We should also look at self-hosting the font, to cut out a bit more Google tracking ;-)

We’ve defined a customisable logo, but only in the most basic way.

We should revisit this, eventually, to add live updating as the logo is set / unset. And while we’re there, we may as well make the other Customizer fields reload properly too.

See class-twentytwenty-customize.php in the twentytwenty theme for an example of how to do this properly.

We’ve seen this on a few sites, but http://housingcourtanswers.org is a recent example.

Displaying the suggestions on focus helps to keep them out of the way until we know that the user is interested in finding something.

If we do this we’ll need to consider:

• How the suggestions are displayed. In a dropdown? Something else?
• How it works on mobile – eg: will the keyboard obscure the suggestions? will suggestions be tappable?
• How we decide what the "top content" is.
• How many tags (topics) to display.

Neha mentioned that there are no share buttons on the site so we should probably stick these on, especially on the case study pages! and also ensure there are the open graph images to go with them.

WordPress 5.5 brings a few changes to the block editor UI, which means our custom font-family etc isn’t getting applied.

We should really be importing more of the core bootstrap files into the editor-style stylesheet – eg: the one that controls the body font-family, the paragraph and list spacing, etc. From what I can tell, if we did that, we’d need less of the .editor-rich-text hack.

WP Statistics can use visitor IP addresses to tie together hits from a single visitor across a session (even if it doesn’t actually store the IP address after that).

It can get the visitor’s IP address from any HTTP header accessible to PHP, eg: REMOTE_ADDR, HTTP_X_FORWARDED_FOR, HTTP_X_REAL_IP.

We’re running the staging site inside a docker container and behind a load-balancer. Our current setup doesn’t expose the user’s IP address neatly in any of the headers – HTTP_X_REAL_IP is the address of the load balancer, and HTTP_X_FORWARDED_FOR is a comma-separated list of IPs.

If we want to get Visitor data working in WP Statistics, we should either:

1. Fix HTTP_X_REAL_IP so that it returns the user’s IP.

2. Define our own wp_statistics_sanitize_user_ip filter, in the WordPress theme, which extracts the user’s IP address out of the HTTP_X_FORWARDED_FOR header. Example here.

No huge rush on this – we can still track individual page views ("Hits"). Combining them into sessions was only a nice-to-have, given the limitations around cookie-less tracking.

Need to install this plugin, either manually, or via wp-cli plugin install – https://wordpress.org/plugins/helpful/

(See #12 for related issue about staging site not allowing plugin downloads.)

Here are a few screengrabs of how I‘ve got it set up in my local vagrant VM. I think most of this is just the default config:

Once you’ve got it set up, you can add it to sidebars on the site (at /wp-admin/widgets.php). The way to do this is to add a "Text" sidebar widget, and to just type the [helpful] shortcode into the text box, like so:

So wherever you see a "Text" widget in the sidebars below, that’s one of these [helpful] shortcodes:

#20 introduced automatic image credits, but it requires all four fields of metadata (source URL, author name, license name, license URL) to be filled out.

Sometimes images won’t have a license URL (eg: "by permission of the author" as a license name), or a source URL (eg: if we’ve been given the photo by someone we know).

I think the permutations that matter are:

• title by <source url>author name</source url>, <license url><license name></license url>
• title by <source url>author name</source url>, <license name>
• title by <source url>author name</source url>
• title by author name, <license url><license name></license url>
• title by author name, <license name>
• title by author name

In the sidebar, perhaps?

index.php probably needs some pagination handling.

Post list items don’t currently display the page’s featured image. Which is a shame.

We’ll want to display a thumbnail, ideally in a square-ish aspect ratio, next to the title and excerpt, wherever the post list item is displayed.

(And if a post doesn’t have a featured image, I guess we’ll want to show a default thumbnail graphic?)

Might want to take this opportunity to set up custom image sizes for thumbnails and feature images, using add_image_size() and/or set_post_thumbnail_size()?

Might also want to let WordPress admins adjust the automatic thumbnail crops, so they can pick out the most visually pleasing part of each image, rather than just the centre? This plugin seems to handle that, maybe it’d work for us?

The Helpful plugin doesn’t include an option to ask for more information after the person has voted for/against the page.

I’m an idiot. The "Feedback" form option was hiding there all along. I‘ve enabled it now.

Need a "Display as:" select box on the “Post list” block settings.

Options:

• List with thumbnails (default)
• List without thumbnails
• Cards with thumbnails

Card grid would use Bootstrap cards in a responsive grid (at most 2 columns).

Paging @sagepe. This is a fun one.

@MyfanwyNixon tried to upload an image of a tower block. The file was 2500x1667 pixels, weighing in at about 2 MB size. The upload failed, with WordPress displaying this error:

Post-processing of the image failed. If this is a photo or a large image, please scale it down to 2500 pixels and upload it again.

Resizing the image down to something smaller, like 2000x1334 (0.8 MB) worked, but a 2495-pixel wide one didn’t.

It would be good to identify what was causing the 2500-pixel image to fail. It should pass WordPress’s big_image_size_threshold, so I’m wondering whether actually WordPress was running out of memory while trying to generate the thumbnails, and 2000x1334 is luckily just about small enough that it doesn’t trip the memory limit. Or something.

• Decide whether we need individual tracking in GA.
  • If so, decide how to display the required cookie notice.
  • If not, then we won’t need a cookie notice.
• Set up Google Analytics account.
• Include tracking code in the theme.
  • Use a plugin, so the code can be modified in future?
  • Make our own plugin?
  • Or just hard-code it into the theme source files.

Emails from both Wordpress itself and the various Contact Form 7 contact forms will need to go to someone at TBUK, once we’ve handed the site over to them.

This is something TBUK would get included in a Wix subscription, so we should investigate:

• Whether they’d use newsletter functionality?
• How it could be implemented?
  • WordPress plugin? eg: MailPoet
  • MailChimp integration?
• How much this will cost them.
• How much we trust the deliverability of the emails.

Needs

img {
    max-width: 100%;
    height: auto;
}

Live search results or search suggestions would be a nice thing to add, to make the site feel more responsive, and to cut down on clicks/taps, if it’s not too difficult.

• Is this easy to implement?
• Or is there a plugin out there that will do it for us, in a visually acceptable way?
• If we rely on WordPress default search endpoint, will it be performant?

@JenMysoc to draft some questions to go alongside the staging site for when Danielle sends to Rhiannon and Stu and when approved put into surveygizmo

add_theme_support( 'responsive-embeds' );

Should do it.

https://developer.wordpress.org/block-editor/developers/themes/theme-support/#responsive-embedded-content

Something mentioned by Rhiannon at SGTO.

We’ve had a “Directory of Residents Action Groups” earmarked for a while – https://fixmyblock.staging.mysociety.org/directory-of-residents-action-groups/ – but how would it work?

Does it need to be searchable by postcode? (Like finding your local councillors’ details on WriteToThem.) Or is it good enough to have resources categorised by region?

We’re going to wait to see whether anyone else brings up a searchable directory again. But in the meantime, this is something to stay aware of.

Need to install something to generate social tags in wp_head().

Before we hand over to TBUK we need to do a Data Impact Assessment to think about the data that will be held, and why it’s being held, which we can then pass on to TBUK with the site for GDPR and data privacy reasons.

Need to install this plugin, either manually, or via wp-cli plugin install – https://wordpress.org/plugins/tag-list-widget/

(See #12 for related issue about staging site not allowing plugin downloads.)

Then you can add the widget to the relevant sidebars at /wp-admin/widgets.php. Here’s where I’ve got them ("Taxonomy List Widget") in my vagrant VM:

And here’s how each one is set up:

Guides like this have really great content, but visually it’s all very samey, and I feel like the “Take action” part could do with more noticeable styling, somehow, so a casual viewer can identify it as the call to action.

@crowbot This might be something you could help with, while I’m away.

The WordPress front-end doesn’t have permission to write to the wp-content/uploads directory, so you can’t upload any images to the staging site.

We need to add a vertical offset for headings with an [id], so they don’t disappear behind the survey banner when jumped to from the table of contents.

Two ways I can think of doing this:

Padding and negative margin

h1, h2, h3, h4, h5, h6 {
    &[id] {
        padding-top: 5em;
        margin-top: -3.5em; // emulate a 1.5em default margin
    }
}

Drawbacks:

• Need to make sure the "emulated" margin is right for each size of heading.
• Not sure how this will work with the :first-child { margin-top: 0 } we’ve got set on headings (IIRC?)
• Will look broken if headings have a background colour.

Child anchor

function move_heading_id_to_child_anchor( $block_content, $block ) {
    if ( $block['blockName'] === 'core/heading' ) {
        // We already have a `extract_heading_info` function in `functions-table-of-contents.php`
        $b = extract_heading_info($block);
        return sprintf(
            '<h%s><a id="%s" class="fragment"></a>%s</h%s>',
            $b['level'],
            $b['id'],
            $b['text'], // TODO!
            $b['level']
        );
    }
    return $block_content;
}
add_filter( 'render_block', 'move_heading_id_to_child_anchor', 10, 2 );

.fragment {
    display: block;
    transform: translate(0, -100px);
}

Drawbacks:

• Bit more complicated.
• Need to amend the ['text'] bit, so that the entire HTML contents of the original block is returned (rather than the wp_strip_all_tags version).

Sidebars are an easy way for editors to add content to a page, or class of pages, separate from the main content of the page. eg: we might want to display the "Helpful?" feedback form in a sidebar, or mailing list signup box.

• Should the homepage have a sidebar?
• Separate sidebars for each category of post?
  • If so, how would this handle new "categories" being added in future?
• Sidebars on archive pages?

Featured images don’t have enough space above/below them. And there’s no vertical space between the main content and sidebar content on narrow screens.

All in all, we just need better vertical spacing, perhaps through some dedicated page-section-style containers?

There are a few unhandled edge-cases in the code, or things that should really be tidied up, all marked with TODO:. If we have time, we should resolve as many of these as possible before handing over.

I’ve noticed Myf is starting to add image credits to the ends of her pages:

Really this credit should be stored as metadata on the feature image itself, rather than as a paragraph at the end of the page content, because then:

1. The credit only has to be defined once, and it’ll appear whenever the image is used.
2. The right credit(s) will always be displayed automatically – no need to update credits when you add/remove/change the images attached to a post.

WordPress doesn’t have a built-in "credits" field in the attachment metadata. But:

• We could repurpose one of the existing fields, eg: Caption. (But this will require uploaders to write HTML, which isn’t great.)
• We could create our own field(s) on the attachment form. (Annoyingly, it looks like Carbon Fields can’t do this for us, so we’d have to write the fields from scratch.)

We’ll then need some logic in the page templates to store the credits for any images rendered on the page, and print them all out in a single section at the end.

When listing posts by category or tag, if there were more posts in the query than are currently displayed inside the specified limit, then a “Show more” link should be displayed somewhere in the block output. Probably as a link below the list.

The ‘Post list’ block currently lets you filter the list of posts by category or tag.

We need a way to display specific posts in this block. (Right now we need this for the homepage, but it’s conceivable that we might want it for other pages in the future.)

I’d hoped we could do this using a "hidden" category or tag, but I turns out that public is an attribute of an entire taxonomy, not just a single term in a taxonomy, so we can’t easily prevent a specific term from appearing in—for example—tag lists across the rest of the site. Maybe we could find a plugin that lets us do this, but it feels like a fragile solution?

Another option is to use a CarbonFields association field in the block, that lets you pick individual pages, just like you can pick individual pages in the ‘Related items’ block. We’d need to work out whether this should go in a new block, or the existing “Post list” block.

• Second nav menu, with space for more links than the header one?
• Partner logos?
• LEF logo?
• Short site description, with link to full "About" page?
• Mailing list signup?

Font size is a bit big on narrow screens. It’s especially noticeable in headings, and indented lists, where we’re only getting a couple of words per line.

Use the same styling as the tag cloud on the homepage.

Some ideas that we might want:

• Feature image, full width, above the page title
• Feature image, at the width of the content, below the page title
• No feature image (useful if you want the feature image for thumbnails and social tags, but not for display on the page itself?)
• No sidebar (?)

Rhiannon from SGTO noticed that, when she searched for “disrepair” only one page (the tenant action case study) turned up in the results.

She wasn’t sure whether this would really be an issue – after all, “disrepair” is a pretty technical term (and a legal term), and we’re more expecting that people will search for common words like "cracks" or "mould" or "damp".

But @MyfanwyNixon, I did wonder whether we should at least add “Disrepair” to the Glossary page?

If a description of disrepair is too much to fit into a paragraph in the Glossary, then maybe a new page on “What exactly is ‘Disrepair’?” might be useful?

Right now the feature images are just max-width: 100%. They can be quite tall, pushing most of the page content below the first viewport. Or they can shrink to quite narrow, which just looks odd.

I’m also starting to wonder whether the image should go above the page title, rather than below.

It’s currently sitting there, unfinished, in a big grey box.

Needs to:

• Show post excerpts.
• Fit in with the rest of the page.
• Fit in with the post list styling on archive pages.

As seen here:

https://fixmyblock.staging.mysociety.org/citizen-journalism/

WordPress is including some default styles for .wp-block-file, but I think we could do better.

Feels like, if we link to files in the content of a page, the file should stand out as a thing of its own. Perhaps with a nice distinct border, and a little icon suggesting the filetype?

The Bootstrap team is currently preparing version 5. It’s likely to include some breaking changes, compared to 4.3/4.4.

It seems unlikely that FixMyBlock will be upgraded to Bootstrap 5 after we’ve handed it over TBUK. So should we do the Bootstrap 5 upgrade before we hand it over, just to leave them with the most future-proof site we can?

This all depends, of course, on Bootstrap 5 actually being released before we hand over the FixMyBlock theme. I’d say we ignore it, if it’s still in alpha.

It looks like lots of our guides include a numbered list in their "what you should do" sections, and the items of those lists tend to include further block-level items, like multiple paragraphs, or sub-lists, or whatever.

The default "List" block doesn’t allow nested blocks or multiple paragraphs per list item.

But it shouldn’t be too hard to create a custom block that enables this.

Rather than hsing to use a Carbon Fields repeater or anything crazy like that, we should just be able to have one block per list item and then use CSS counters to create and reset the incrementing item numbers. eg:

<style>
.numbered-section {
    counter-increment: numbered-section;
}

.numbered-section:before {
    content: counter(numbered-section);
}

.numbered-section + * {
    counter-reset: numbered-section;
}

.numbered-section + .numbered-section {
    counter-reset: none;
}
</style>

<div class="numbered-section">
    <p>This is the first item in the first list.</p>
</div>
<div class="numbered-section">
    <p>This is the second item in the first list.</p>
    <p>It continues into a second paragraph.</p>
</div>
<div class="numbered-section">
    <ul>
        <li>Items don’t have to…</li>
        <li>…be paragraphs either</li>
    </ul>
</div>
<p>This is a regular paragraph, outside the list</p>
<div class="numbered-section">
    <p>This is the first item in the second list.</p>
</div>
<div class="numbered-section">
    <p>This is the second item in the second list.</p>
</div>

That way, editors only have to drop in a single block—the new "big list item" block—and fill it up with one or more child blocks, rather than having to drop in a "big list" repeater block and fiddling around with a row-based interface for adding more items.

• List of (most recent? most popular?) action guides
• List of case studies
• Any specific pages we want to prominently feature? eg: "How to complain"?

It’d be nice to be able to run wp-cli commands in the Docker container. (Maybe this is already possible?). Eg:

wp plugin install --activate helpful
wp plugin install --activate tag-list-widget

But, realistically, we should allow WordPress to install its own plugins, via the web interface, as this is what most newcomers will expect to do.

Right now, it fails, instead asking for FTP connection details.

We need a contact form plugin that allows WordPress admins to create custom forms and include them on pages.

Forms we’ll need:

• Generic enquiry form (on a "Contact" page?)
• "I want to tell you about my group!" (on the "Action Groups" page)
• "I have a case study I’d like to share" (on case study pages)