Learning WordPress
Design Principles
I am going to try and use just one type or make of blocks on each page, and document my progress on the “Progress” blog page. This home page is just using “Gutenberg” blocks. However, I have installed on this site Pootlepress’s Gutenberg Pro’s plugin which gives enhancement to the actual Gutenberg blocks. This is not a new set of blocks but an enhancement to the built in blocks. Specifically this plugin gives me access to padding and margins which the basic Gutenberg blocks don’t seem to include. You can follow my ups and downs on the “Progress” page
Website curiositylearningdesignmethods development
Themes
The theme that Im using for this site – currently is Blocksey.
I looked for a Full Site Editing theme but when I started this site I hadn’t realised exactly what I was looking for. So after researching what other WordPress experts used it seemed that Blocksey was the best theme to use. As far as I can tell it is not a FSE theme. However, I have been able to affect the header as you can see! I’ve not yet approached the Footer. That’s for later on!!
A plugin that I have added (and Im putting t in the theme column deliberately) is Instant Images. This allows me to add Unsplash, Pixaby and Pexelby to the media library making it easy to download any image form these three sites in this site.
Plugins
The plug-ins that I’ve got on here so far are
- Gutenberg Pro from Pootle Press
- Stackable Blocks – free version
- Gutenbee
- CoBlocks
- Edit Block Outline
- Instant Images
- Layout Grid
- +Anti Spam and Backups
Progress
Gutenberg Gallery
Just because its easy to add!!
Add Ons
I have added a few additions since starting this project including an animation plugin. As you can see there are a few animations on this page now and I will be adding them to other pages as I progress. All the addition will be reviewed in the “Add Ons” page
Progress Slideshow
Recommended from one of the WordPress webinars is Editor’s Kit. At the moment I can’t see what it actually does…….
I tried quite a few blocks systems but most I have ditched. In fact Im thinking of taking the blocks off this site that don’t work very well. However that will men that the pages I have built with them won’t work. So I will have to think about what to do about that. PublishPress In the meantime I also tried “PublishPress” blocks which on the surface look great. Again my main criteria was to have margins and padding and overlaps – ie negative margins. Although these blocks did have margin and padding they didn’t allow for negative amounts. So,…
Well I started developing this site and learning Gutenberg only seven days ago. And I have to say I’m really pleased with the results. This now is a OK site – or IMHO it is!! More to the point I feel that I can now have another tool in my web design armoury. I could knock out a site for a client relatively easily I think. And one of the things Im delighted about is this site hasn’t cost me a penny. (Other than domain name and hosting of course) And I also haven’t used a built in template or…
The two functions that I wanted to achieve and find out if they were possible was getting blocks that had margins and padding on and the ability to “break out” of a part of the site. ie so that the site is not made up of symmetrical oblong boxes. I have succeeded in that. Gutenbee blocks give margins and padding and Generate Blocks contain grids and containers that will do both negative and positive padding and margins. The birds are all in 2 x 3 across grid . But with one third of the grid empty! The cat is “breaking…
Yippee. By accident, as all good discoveries are, I have managed to create an overlap. I was looking for a plugin that would give me a decent header. The Gutenberg cover block altho it does the job keeps crashing and just wasn’t veery reliable. So I went looking for a decent header. I didn’t find one, but in the process, I did find plugin for GRID blocks from Generate Blocks So here is an example of the Grid with the bottom block overlapping
I have pretty much been working on the “About Me” page all day. The image above is a screenshot of my current website I am very much enjoying learning how to use Gutenberg and getting used to its little idiosyncrasies. Dragging and dropping blocks still has a lot to be desired. I’ve discovered that you can’t really just drag things around, it’s very hit and miss. So I have learned that for instance: when trying to enter a block into a column it’s useful to add a paragraph block first from the plus button within the column, and then just…
I must admit after all the years that I’ve slagged off WordPress, I am really enjoying making this site. I feel really excited about what is possible and what I am able to do in the future designing sites for other people and for my community. The difference that “blocks” makes for me is immense. I am now finding this really quite easy to get my head around. Although, I am still a bit perplexed with all the different ways and different elements/plug-ins that you can get to do any one thing. I’m really looking forward to January 25 when…
Thought I would try adding a post on my phone and to see how easy it would be to do it 👍 I found that it was easy except that it was difficult to see what I was doing on all blocks. However, if I needed to add a post then it definitely is possible. And Im guessing that from an iPad would be even easier.
Well I’ve just started using Gutenbee blocks and I must admit they are a lot easier to use and contain more options for each block. These are the free version so far. But they are the best so far so I have a mind to possibly purchase the Pro version. But not yet. I want to keep to my commitment to only use free stuff! Every single one of their blocks contains padding and margin settings. Even silly gimmicky blocks like this progress bar below. I really don’t know how people cope without padding and margins and it not being…
Gutenberg blocks: Ive tried to use only Gutenberg blocks so far in the home page and with the posts. Thy work well except for I do find them limiting in the availability of options for any of the blocks. For instance there is no way of doing margins or padding on any block – or at least I can’t find a way. They also seem to only allow for the typology entered into the customiser rather than having a option to change the typology at block level. I did install Gutenberg Pro from Pootle Press and this has actually made…
Well I have managed to get the blog to appear on the “Progress” page, but it’s still not right. First off I had the blog posts appearing but I couldn’t add a cover image which meant that the blogs were just straight at the top of the page. The only way I could see to change the page and get a cover image was to keep changing the settings in the customiser. This actually meant that I was only managing to change the look of the blog posts. They are now on the “News” page and I think look nice.…
Well I have managed to get a cover hero image on the blogs page now. I realise that I didn’t have the right type of page to show the “progress” posts. So I made a new page, called the old page blog posts and the new page “progress” and added a image to the top and I seem to have sorted the no image problem. Now I have a different problem. The blog list page doesnt seem to be showing all the posts. Sigh……… next learning opportunity!! 🙂
Every move creates a new problem or if Im being positive a new learning opportunity. Ok so now I have to find out how to make the drop down menu items a responsible site and font. Now how do I do that? Edit: Fixed. In the “Customiser” click on the actual element on the page and it takes you to the specific inspector where you can make changes!!
Ive just added a Dashboard plugin to add extra areas to the dashboard. The one I like the most is the “Note” widget. So I can leave notes to myself. I can see how this would be useful to have on the page when you are signing off a site to a client.
Having changed the “Home” page from tea and coffee to relevant copy and images to do with the task of learning WordPress, Im now stuck trying to find out how to put a cover image on the “blog” page. Also how to make the text in the side bar smaller. At the moment, as of this post its huge. Edit: Ive got rid of the sidebar as all I managed to do was put it on every page. And I don’t want that. I just want t on then blog page. However, I have managed to to work out how…
I had started to create this “Just Mucking about site as a cafe/cuppa site, but obviously that was just so I could work out how to design the pages and add blocks where I wanted. Having now decided that I’m going to use this to document my progress, I’m going to change the pictures and find more appropriate ones for learning Guttenburg and WordPress. One of my next tasks is to find out how to add pictures to each of these posts.
Decided to use this site to not only learn WordPress and Gutenberg, but to check out the different makes of blocks available. So I will be doing a page per block type and maybe a page for anything else that I need to learn. Adding pages so I can differentiate between “stuff” And hopefully using this “blog” to document my progress