Test new theme by attempting to replicate Newbridge's mini website

[ColmMassey]

Replicate key components of

https://newbridge.solidarityeconomy.coop/

here

http://wp-0.solidarityeconomy.coop

[ColmMassey]

Email thread from Joe about installing the theme.

The plugin was on there (in the inc folder as instructed by the plugin author) but it wasn't referenced in the code anywhere so couldn't be 'seen'. I've updated it and pushed up to github.

Joe

On Fri, Nov 13, 2020 at 2:04 PM Joe Billings joebillings@gmail.com wrote:

Thanks!

Ah yes - that'll be it. I'm able to include the ACF plugin as an include on the theme. The only restriction is that you can't make it publicly available for free.

I did the map work.

Go to a page. Put the cursor in the content where you want the map. Click + and add the SEA Map block. Fill in the details.

It doesn't currently do full screen iirc but it shouldn't be too much work to make that happen – all the pieces are in place.

I'll try and get the plugin up in the next hour. Joe

On Fri, Nov 13, 2020 at 11:56 AM Colm SEA colm@solidarityeconomy.coop wrote:

Hi Joe,

I am afraid we have failed to install the template ourselves. Nick is not sure what he has missed.

One obvious difference is that there is no Custom Fields menu in his install.

Could you take a quick look?

http://wp-0.solidarityeconomy.coop/wp-admin/

I also just want to confirm that you didn't get to the point of creating a method to generate the url arguments?

Where do you set the base url for the iframe?

[ColmMassey]

Lets see if Joe's change is enough to get it working. @wu-lee

[wu-lee]

As per my reply to Joe, I've managed to get a map inserted into a post. That seems to work, implying what I did on the attempt-to-build-install branch here:

https://github.com/SolidarityEconomyAssociation/sea-wordpress-theme/commit/3144749129e9bd63a78eabb2349b836b7fe30523

Was on the right lines, as I've not installed Joe's changes. What I did mostly matches what Joe did here (except here he's also added a new version of the ACF-pro plug-in):

https://github.com/SolidarityEconomyAssociation/sea-wordpress-theme/commit/27a344e8a2c00da7c1ed14407900e174c2e3323e

However, there is still the missing item "Custom Fields" in the admin dashboard, present on the zapdev.co.uk install. Have asked about this, and the mysterious extra plug-in directories oneltd-base and custom-post-type-ui which I suspect are incomplete and/or redundant.

[wu-lee]

Oh, and I asked about the logistics of building it as a theme: does this mean users with a theme already are forced to choose one or the other?

[ColmMassey]

I have made some progress fleshing out the http://wp-0.solidarityeconomy.coop/website. Accumulating a few more questions for Joe.

[wu-lee]

Ok, so Joe was right, the code I copied to include the embedded ACF plugin has a block which hides the custom fields menu. I've commented it out.

[ColmMassey]

So have you made any other changes to replicate zapdev on wp-0?

[wu-lee]

I am in the process of copying what you've done in terms of the content, unfinished as yet.

[wu-lee]

One thing I should check: are we aiming to emulate https://sea.zapdev.co.uk/, or https://newbridge.solidarityeconomy.coop/?

[wu-lee]

Ok, first pass done, I think I have done all I can with the WP admin panel (modulo the colour of the footer, which I could change to match the newbridge site, but this might not match the theme colours.) Comment solicited.

Some things don't seem to be possible with the theme as it is:

• Case studies' comments push their images down in a way which makes it look more untidy than the original site.
• They're also liable to wrap on narrower screens, ditto
• The menu hamburger thing on narrower screens doesn't work (although the menu is configured and works on wider screens)
• I can't find a way to get a list of case studies more than three items long for the "Stories" page. The case studies widget seems to have this hardwired.
• I can't get the footer to look like the original, because the order of items isn't adjustable, and there don't seem to be line breaks in the right places.
• The original site font is Apple Garamond (Regular, Bold and Light), and that doesn't seem to be an option on this Wordpress install.

Also

• I deleted dummy and half-finished looking posts/case studies.
• The layout on the about page doesn't really match that on the original - but I assume you did this on purpose.
• I've kind of copied a mix of the original (with new content) and zapdev (when that seemed to be inserted already). I notice some mentions of Oxford in the latter which suggest this content might need reviewing. I've attempted to keep Oxford out of the wp-0 site.
• I updated the plug-ins which wanted to be - that includes the Custom Post UI, which Joe's code supplies, but is probably superflous because it can be obtained from the WP plug-in repository.
• I "synchonised" the Custom Fields' "Field Groups" - there were none initially, unlike zapdev, but synchronising them pulled in the same fields as zapdev, presumably hardwired somewhere in the code. Not really sure what this did, or what support there is for manual editing in the UI (and having those preserved).

[ColmMassey]

One thing I should check: are we aiming to emulate https://sea.zapdev.co.uk/, or https://newbridge.solidarityeconomy.coop/?

First step was replicating https://sea.zapdev.co.uk/

Then to make sure we could replicate everything in https://newbridge.solidarityeconomy.coop/ but much more flexibly.

[ColmMassey]

Ok, first pass done, I think I have done all I can with the WP admin panel (modulo the colour of the footer, which I could change to match the newbridge site, but this might not match the theme colours.) Comment solicited.

I don't think there should be Theme colours, in the sense that all mini websites use those colours. It should just be easy to set colours in a single place that get applied appropriately through the site. Appearance->Customize->General Settings seems to be a first draft of that. Don't seem to be able to set footer and button colour there though.

[ColmMassey]

Check that the new theme deals with the concern captured here...https://github.com/SolidarityEconomyAssociation/sea-map/issues/58

[ColmMassey]

Outstanding issues on https://sea-test.dreamhosters.com

• [x] Why doesn't ReCoCo appear in the STORIES page?
• [x] The footer doesn't seem to use the fields in Appearance-Customize-Footer
• [x] Case studies' comments push their images down in a way which makes it look more untidy than the original site.
• [x] The menu hamburger thing on narrower screens doesn't work (although the menu is configured and works on wider screens)
• [x] Can we install new fonts via the web interface? (e.g. Apple Garamond (Regular, Bold and Light)
• [x] The 'Find Out More' button in the about page linking to https://www.solidarityeconomy.coop/what-is-solidarity-economy is missing
• [ ] "They're also liable to wrap on narrower screens, ditto" @wu-lee can you still see this behaviour?
• [x] On narrow screens there is too little border for fat fingers to use to scroll past the map. Can we widen the border here just a little?
• [x] Try putting the FullScreen icon in the lower left corner of the page.
• [x] Change the menu order and titles in the main page to reflect those in Newbridge, HOME, ABOUT, STORIES, CONTACT
• [x] Should we add links to the respective documentation on each URL parameter from the Worpress map dialog to https://github.com/SolidarityEconomyAssociation/sea-map/blob/master/CONFIG.md?
• [x] I'm not sure the initital bounds parameters set in wordpress are getting through to the map. (I think the documentation is wrong or at least confusing. It is expecting a list of 4 digits. First 2 are lat/lon of lower left corner, third and fourth are lat/lon of the top right corner. Probably the same for default Lat/Lon.
• [x] I don't think any of the parameters are getting through to the map when the url is pointing to a .../map.html map, but some are at least, when its to one without, like https://dotcoop.solidarityeconomy.coop

[ColmMassey]

@wu-lee At the moment the useCache flag is not supported by the Wordpress theme. Should we leave it that way for the moment?

[wu-lee]

@wu-lee At the moment the useCache flag is not supported by the Wordpress theme. Should we leave it that way for the moment?

In general the caching should be on by default (and automatically disables if there are multiple datasets), so there shouldn't be a need to use it except in unusual cases. So I think this is okay.

[Photosynthesis]

Some notes and questions:

Why doesn't ReCoCo appear in the STORIES page?

In the theme are two ways that the stories can be shown on the front end. One is via a WP "block", and the other is via a page template. In the Wp-0 instance, both the home page and the stories page were using the block, which has a hard-coded limit of three stories.

I've updated sea-test to use the page template on the stories page.

Should we keep the home page stories limited to three, or increase the limit on the block?

The footer doesn't seem to use the fields in Appearance-Customize-Footer

There is default footer content hard-coded in the theme. This populates the customizer fields, but actually doesn't exist in the database. The customizer will only save values that have been edited in the form. This means that until a value has been edited, it will never be saved to the DB, and will never appear on the front end.

This behaviour might be okay, if there are very clear instructions to local groups about updating those values in the customizer (after all, they do need to be updated before they should be published). If that doesn't seem like an acceptable approach, we could work around this by importing the defaults into the actual DB (though this would require a change/additional step to the import process, because the built in content import/export doesn't include theme customizations).

Interestingly, there are also inputs for these footer fields in the theme's Options > Footer Options settings page, but for the most part these do not appear to have any effect and aren't output anywhere.

The exception is the social links. These are output in the footer when set, but require a FontAwesome icons account to work. I recommend that we replace this with WP's built-in Dashicons icon system, which includes all the major social logos and doesn't require an external account. This is a very small change. Should we switch to Dashicons for the social links?.

Case studies' comments push their images down in a way which makes it look more untidy than the original site.

CSS in the theme is not properly equipped to create equal-height cards for the case studies. Let me know if I should update the CSS so the layout is more like the Newbridge site.

The menu hamburger thing on narrower screens doesn't work (although the menu is configured and works on wider screens)

The theme currently does not appear to have any provision for actually showing a menu when the hamburger is clicked, unfortunately. This will need to be added.

Can we install new fonts via the web interface? (e.g. Apple Garamond (Regular, Bold and Light)

Not that I'm aware of. The theme's options page allows linking a Font Awesome kit, but AFAIK this is only for icons, not actual fonts. Actual fonts usually need to be added to the theme code. Let me know if it's important to add the Apple Garamond font.

That said, fonts can be selected from currently installed fonts in the customizer under General Settings.

The 'Find Out More' button in the about page linking to https://www.solidarityeconomy.coop/what-is-solidarity-economy is missing

Added.

"They're also liable to wrap on narrower screens, ditto" @wu-lee can you still see this behaviour?

Let me know if this still needs attention.

On narrow screens there is too little border for fat fingers to use to scroll past the map. Can we widen the border here just a little?

For testing, I've added an inline style to increase the margin to 40px on mobile screens. Does that seem adequate?

Try putting the FullScreen icon in the lower left corner of the page.

This is where I had it initially, but unfortunately below a certain screen height it conflicts with the text on the map menu. If there was a way to move the icon when the map menu was opened we could shift it to the right and keep it over the map, rather than on top of the menu. But, because the map interactions are in the iframe we can't really access them.

Unfortunately there doesn't seem to be any real estate in the iframe that is reliably available for the fullscreen icon. Perhaps if we made it smaller, and used an opaque background that was connected to the corner of the iframe, it would look less buggy in circumstances when it does overlap with menu content.

Change the menu order and titles in the main page to reflect those in Newbridge, HOME, ABOUT, STORIES, CONTACT

Done.

Should we add links to the respective documentation on each URL parameter from the Worpress map dialog to https://github.com/SolidarityEconomyAssociation/sea-map/blob/master/CONFIG.md?

Good idea! I can add this to the field instructions. Maybe a "details" link after the current instructions text?

I'm not sure the initital bounds parameters set in wordpress are getting through to the map. (I think the documentation is wrong or at least confusing. It is expecting a list of 4 digits. First 2 are lat/lon of lower left corner, third and fourth are lat/lon of the top right corner. Probably the same for default Lat/Lon.

Yes, this was definitely wrong. I've updated the map block so it provides a single comma-delimited string with the four coordinates. (This is changed locally -- will push it to sea-test with other changes shortly). Same for defaultLatLon.

I don't think any of the parameters are getting through to the map when the url is pointing to a .../map.html map, but some are at least, when its to one without, like https://dotcoop.solidarityeconomy.coop

I'm not sure I understand this entirely. The initialBounds parameter is definitely working on the fullscreen map when tested with the correct parameter format, for example like this.

The other parameters should be individually tested to make sure there aren't further glitches in how the theme implements them. Since I'm not familiar with the expected effect of the parameters this might be most efficiently done by @wu-lee.

[ColmMassey]

Should we keep the home page stories limited to three, or increase the limit on the block?

Yes, keep home page to 3 and increase the limit on the block (to 20?) . Would that limit be visible/editable?

Interestingly, there are also inputs for these footer fields in the theme's Options > Footer Options settings page, but for the most part these do not appear to have any effect and aren't output anywhere.

This is confusing. Can that by disabled, or replace the text with something that says "Not In Use: Edit Footer details in Customiser."

Should we switch to Dashicons for the social links?. Please do.

CSS in the theme is not properly equipped to create equal-height cards for the case studies. Let me know if I should update the CSS so the layout is more like the Newbridge site.

Looks fine to me, for 3 and 4 entries. Need to see what it's like with more, after you increase the limit on the case study block.

The theme currently does not appear to have any provision for actually showing a menu when the hamburger is clicked, unfortunately. This will need to be added.

Can you, please?

Let me know if it's important to add the Apple Garamond font.

Users are likely to want to choose a font from a wider range then currently available. I don't recall if Apple Garamond was specified by Newbridge. Perhaps just add Apple Garamond for the moment to the Theme. I assume it is obvious to anyone maintaining the theme in the future where to put new ones.

For testing, I've added an inline style to increase the margin to 40px on mobile screens. Does that seem adequate?

That seems about right.

Unfortunately there doesn't seem to be any real estate in the iframe that is reliably available for the fullscreen icon.

I think we agreed elsewhere to postpone adding this feature, so we can cross that bridge later.

Good idea! I can add this to the field instructions. Maybe a "details" link after the current instructions text?

Go for it.

Yes, this was definitely wrong. I've updated the map block so it provides a single comma-delimited string with the four coordinates. (This is changed locally -- will push it to sea-test with other changes shortly). Same for defaultLatLon.

Ping me when you have pushed these changes.

[ColmMassey]

I note that as well as the Footer options settable in Options->Footer Options, Options->Header Options seems to support the setting of a logo, which doesn't get used in the Header. Can we disable?

[Photosynthesis]

Yes, keep home page to 3 and increase the limit on the block (to 20?) . Would that limit be visible/editable?

I've added an options field to edit the number of stories that appear on the stories page (Options > Site options), with the default set to 20.

This is confusing. Can that by disabled, or replace the text with something that says "Not In Use: Edit Footer details in Customiser."

I've removed the unused footer fields, and removed the options page and unused fields for the header.

Should we switch to Dashicons for the social links?. Please do.

That's done, along with some CSS updates for showing the icons. I've added three social links to sea-test so we can see what they would look like.

Looks fine to me, for 3 and 4 entries. Need to see what it's like with more, after you increase the limit on the case study block.

Okay.

The theme currently does not appear to have any provision for actually showing a menu when the hamburger is clicked, unfortunately. This will need to be added. Can you, please?

Working on this now.

Let me know if it's important to add the Apple Garamond font. Users are likely to want to choose a font from a wider range then currently available. I don't recall if Apple Garamond was specified by Newbridge. Perhaps just add Apple Garamond for the moment to the Theme. I assume it is obvious to anyone maintaining the theme in the future where to put new ones.

As far as I can tell Apple Garamond is a proprietary font that we probably can't distribute legally. If there's not a particular need to include it, perhaps we can go with the existing fonts?

For testing, I've added an inline style to increase the margin to 40px on mobile screens. Does that seem adequate? That seems about right.

Implemented in the CSS.

Unfortunately there doesn't seem to be any real estate in the iframe that is reliably available for the fullscreen icon. I think we agreed elsewhere to postpone adding this feature, so we can cross that bridge later.

Yes. I've removed the prototype fullscreen iframe code. We could revisit this for a later iteration.

Good idea! I can add this to the field instructions. Maybe a "details" link after the current instructions text? Go for it.

That's done.

Yes, this was definitely wrong. I've updated the map block so it provides a single comma-delimited string with the four coordinates. (This is changed locally -- will push it to sea-test with other changes shortly). Same for defaultLatLon. Ping me when you have pushed these changes.

@ColmMassey ping.

[ColmMassey]

As far as I can tell Apple Garamond is a proprietary font that we probably can't distribute legally. If there's not a particular need to include it, perhaps we can go with the existing fonts?

So if someone really wanted a proprietary font it would need to be installed just on their instance and the licenese paid for. So independent of this theme work.

[ColmMassey]

Having now tested the url parameters, I note the following:

• [ ] if you don't enter a value in a box in the lat/lon sections, there is a greyed out 0.00 there, but when generating the url arguments, nothing is added in the array, rather than 0.0, which has undefined behaviour in sea-map.

• [ ] Also if no values at all are set, no argument should be passed at all, and in this case the values set in the config file will be used.

I find copying and pasting into the lat/long boxes very buggy with the map widget sometimes being deleted. Do you get that?

I have noticed several other errors in the documentation of the url arguments, but it makes sense for us to fix them and then update the wordpress theme documentation later.

[ColmMassey]

@Photosynthesis Any progress with the veggie-burger?

[Photosynthesis]

@Photosynthesis Any progress with the veggie-burger?

Veggie-burger-controlled mobile menu is now operational on sea-test.

Regarding the map coordinates: I've updated the map block so that if any of the coordinate fields for a parameter are empty, that parameter won't be sent to the map server. Placeholder values are not saved to the DB, so if no coords have been set in the block nothing will be sent for those params and the map will be left to use its internal defaults. Values of zero are treated as valid.

[ColmMassey]

Veggie-burger-controlled mobile menu is now operational on sea-test.

Veggie burger working nicely. And url arguments seem to be being passed through correctly. :-)

[ColmMassey]

There is a green rectangle just below the View Map In Full-screen button that looks lost.

[ColmMassey]

I find copying and pasting into the lat/long boxes very buggy with the map widget sometimes being deleted. Do you get that?

These seems to be across all the parameters in the map dialog. If you select a number and hit CtrlX it cuts the entire map dialog widget. Similarly id f you copy a parameter it copies the whole widget into the copy buffer.

[ColmMassey]

@Photosynthesis, we had a discussion yesterday about domain names for the wp site vs the sea-map instance. @wu-lee, I think what we were proposing was, for the moment having the https://wp.solidarityeconomy.coop/newbridge
as the address of the wp site and leave the sea-map at https://newbridge.solidarityeconomy.coop/

That probably doesn't effect what you need to do Adam, but just capturing the discussion here.

[wu-lee]

This https://github.com/SolidarityEconomyAssociation/sea-wordpress-theme/issues/3#issuecomment-810419986 possibly should have been posted here.

Just to reiterate: on reflection I think it might be easier to put the WP site on https://newbridge.solidarityeconomy.coop/ and move the map somewhere else, as its URL is not really visible.

[wu-lee]

I'm now looking at how to export the base WP site and use it to initialise a fresh WP install.

@ColmMassey - are there any things outstanding before capturing the state of https://sea-test.dreamhosters.com/? Looks like there might be a few things unchecked.

@Photosynthesis - looks like I'd need to go to Tools->Export, check "all content", and submit? Then Tools->Import, enable "From Wordpress", then browse for the WXR file and submit?

Do I need to install the sea-map plug-in before or after that?

Also, I don't think I have access to https://sea-test.dreamhosters.com/, so perhaps either one of you could grant me that.

[ColmMassey]

Looks like there might be a few things unchecked. The only unchecked box I can see in the Outstanding Issues section is one awaiting an answer from @wu-lee

"They're also liable to wrap on narrower screens, ditto" @wu-lee can you still see this behaviour?"

[ColmMassey]

The other 2 outstanding items which came up after were

• There is a green rectangle just below the View Map In Full-screen button that looks lost.
• I find copying and pasting into the lat/long boxes very buggy with the map widget sometimes being deleted. Do you get that? These seems to be across all the parameters in the map dialog. If you select a number and hit CtrlX it cuts the entire map dialog widget. Similarly id f you copy a parameter it copies the whole widget into the copy buffer.

I've deleted the empty block which I think was causing the green rectangle.

Let's not worry about the second for now. So I am happy for you to try to do the fresh install @wu-lee

[ColmMassey]

Also, I don't think I have access to https://sea-test.dreamhosters.com/, so perhaps either one of you could grant me that.

Done. Email invite on the way, and password on Signal channel.

[Photosynthesis]

There is a green rectangle just below the View Map In Full-screen button that looks lost.

The extraneous button was re-appearing every time the page was edited. This turned out to be because the button was using wp-block button styles, which confused the block editor into thinking it was a separate block (outside the map block). I've renamed the styles for this button, which seems to have fixed the issue.

I find copying and pasting into the lat/long boxes very buggy with the map widget sometimes being deleted. Do you get that? These seems to be across all the parameters in the map dialog. If you select a number and hit CtrlX it cuts the entire map dialog widget. Similarly id f you copy a parameter it copies the whole widget into the copy buffer.

This occurs when copying/pasting number fields (but not text fields). Seems to be a known issue with the block editor (https://github.com/WordPress/gutenberg/issues/21440). It may be that the fix for the Gutenberg plugin referenced in that issue hasn't yet made it to the WP core, or it may be that there is something else (perhaps in the ACF code that generates the block interface) that's behind on this.

[Photosynthesis]

@Photosynthesis - looks like I'd need to go to Tools->Export, check "all content", and submit? Then Tools->Import, enable "From Wordpress", then browse for the WXR file and submit?

Yes, this is the correct process.

Do I need to install the sea-map plug-in before or after that?

The sea WP theme should be installed and activated before the import (otherwise the post types won't be defined for the imported content).

Also, I don't think I have access to https://sea-test.dreamhosters.com/, so perhaps either one of you could grant me that.

Did you successfully get access to the sea-test install?

[wu-lee]

Did you successfully get access to the sea-test install?

Yes thanks, Colm created an account for me. And I discovered the answer to the theme/import order just by trying it :)