Ryan Boren 2:21 pm on February 24, 2016
Tags: 31195, 35875, android ( 15 ), chrome, customize ( 18 ), customizer ( 14 ), desktop ( 26 ), iOS ( 64 ), macos ( 29 ), phablet ( 50 ), phone ( 22 ), preview ( 6 ), safari ( 8 ), visual-survey ( 17 )

Customizer, Preview: Visual survey of customizer device preview

Screenshots from my testing sessions for #31195 and #35875.

Macnchrome, 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. expanded

: Phone device preview

: Tablet device preview

: Desktop device preview

Macnchrome, sidebar collapsed

: Phone device preview

: Tablet device preview

: Desktop device preview

Macnfirefox, sidebar expanded

: Phone device preview

: Tablet device preview

: Desktop device preview

Macnfirefox, sidebar collapsed

: Phone device preview

: Tablet device preview

: Desktop device preview

Tablets and phones don’t have device preview.

iPad Air

: Portrait

: Landscape

iPhone 6+

iPhone 5

Nexus 5

#31195, #35875, #android, #chrome, #customize, #customizer, #desktop, #ios, #macos, #phablet, #phone, #preview, #safari, #visual-survey

Ryan Boren 10:34 pm on February 18, 2016
Tags: 33755 ( 2 ), chrome, customize ( 18 ), customizer ( 14 ), desktop ( 26 ), iOS ( 64 ), macos ( 29 ), phablet ( 50 ), site-logo ( 3 )

Customize: Site logo, 33755.3.diff, Macnchrome, iPhone 6+

Testing 33755.3.diff from #33755.

Macnchrome:

: Click Select Logo

: Drag drop an image and then click Choose logo

: Now let’s change. Click Change logo.

: Drop a new image.

: Click Choose logo

: Now, let’s remove. Click Remove.

: Done

iPhone 6+:

Notes:

I had to remove a console.log() to avoid a console error.
I added add_theme_support( ‘site-logo’ ) to the twentyfifteen functions.php to get the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. logo ui to display.
I didn’t try adding the_site_logo() to the theme.
Logo isn’t above the site title and tagline as discussed in the ticket

#33755, #chrome, #customize, #customizer, #desktop, #ios, #macos, #phablet, #site-logo

Ryan Boren 9:16 pm on November 13, 2015
Tags: 28367, 4.4 ( 2 ), beta ( 19 ), chrome, editor ( 30 ), macos ( 29 ), upload ( 2 ), video ( 7 )

Editor, Video: HTTP error and blank image tag when uploading video, Macnchrome

Video upload is a mystifying pain.

: HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. error when trying to upload a video to make/flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context

: Inserting a video on a self-hosted site running the latest nightly results in a blank anchor

Related: #28367 Video upload failure is a dead end.

#28367, #4-4, #beta, #chrome, #editor, #macos, #upload, #video

Ryan Boren 2:47 pm on September 16, 2015
Tags: chrome, desktop ( 26 ), editor ( 30 ), iOS ( 64 ), macos ( 29 ), media ( 30 ), phablet ( 50 ), scroll-bleed ( 6 ), video ( 7 )

Editor: Trying to upload a video, iPhone 6+, Macnchrome

My journey starts in Press This on a wordpress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ site. I want to upload an image and a video. I upload both seemingly successfully, but only the image inserts. I go back into the media modal, and see this…

: Despite only one upload attempt, there are three videos. Tap them each in turn.

: I didn’t see this error during upload and insertion.

: HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. error

: HTTP error

Notice also that the progress indicator is stuck and that scroll bleedScroll bleed Sometimes when scrolling a modal such as the media modal on touch devices, the scrolling bleeds through to the page beneath the modal. Instead of scrolling the modal, the page beneath scrolls. Sometimes the scrolling nests and sometimes the page beneath grabs scrolling all for itself. Android doesn't usually have this problem, but iOS triggers it often.https://make.wordpress.org/test/tag/scroll-bleed/ is evident.

: Progress indicator stuck.

: #scroll-bleed

Maybe this is a wordpress.com specific problem. Let’s try a self-hosted site on Bluehost.

: The movie inserts as an IMG_4729 link.

: That is empty.

That’s a different error than on wordpress.com, but the effect is the same. I can’t insert a video.

Maybe this is an iOSiOS The operating system used on iPhones and iPads. problem. Next, let’s try desktop with Macos and Chrome.

Broken on desktop too.

Video insertion is broken on Macnchrome as well. The video does upload correctly. I can download it from this link and play it back.

Attachment page showing link to video.

WordPress* mobile web failure.

#chrome, #desktop, #editor, #ios, #macos, #media, #phablet, #video

Pascal Birchler 2:11 pm on September 12, 2015
Tags: chrome, desktop ( 26 ), feature-plugin ( 6 ), feature-plugin-oembed, iOS ( 64 ), macos ( 29 )

Embeds: Visual Survey of the oEmbed feature plugin, Macnchrome, iPhone 5S

Surveying the oEmbed API feature plugin, which makes WordPress an oEmbed provider and allows you to embed posts from other WordPress sites. Related ticket: #32522

Using it is pretty simple:

Find a blog post you like to embed
Copy its URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org
Paste it into the editor

Note that the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party needs to be active on both sites to work.

Chrome (on OS X), single site, admin user:

: Simply insert the URL to the blog post you’d like to embed

: A preview of the embedded post is inserted right away

: It looks like this on the front-end.

: Click on the sharing icon to copy the embed URL

iPhone 5S, single site, admin user:

: Embed preview in the editor

: Also perfectly resizes on the front-end

: Again, click the sharing icon to copy the URL.

#chrome, #desktop, #feature-plugin, #feature-plugin-oembed, #ios, #macos

Ryan Boren 6:37 pm on September 7, 2015
Tags: 23041, 23205, 32622, 33773, chrome, desktop ( 26 ), featured-images, macos ( 29 ), media ( 30 )

Media, Featured Images: Setting the featured image on an old post, Macnchrome

This thread discusses 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. flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.

Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context

through the media modal. There are some requests that the 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. in the media modal remember the “uploaded to this post” filter setting independently for the featured image flow. Here’s an attempt at capturing this flow.

: This is an old post. I’ve uploaded lots of images since this was published. A featured image is not set. Why do I want to set one now? A common scenario is that you have switched to a theme that requires featured images. Click Set featured image.

: By default, all media is shown. I usually want to set the featured image to an image already on the post. To find the images for this post in the all media view, I’d have to scroll pretty far back, scanning small thumbnails as I go. Luckily, there’s an uploaded to this post filter. Click Images.

: Click Uploaded to this post.

: There are the images I want.

“Uploaded to this post” requires that the image be attached to a post. Images uploaded through the media modal from the editor are attached to the post, but images uploaded directly to the media library are not attached and don’t get attached later when added to a post. We could use 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. for pulling images out of post content, like we do with some other media types.

#23041, #23205, #32622, #33773, #chrome, #desktop, #featured-images, #macos, #media

Ryan Boren 9:43 pm on September 3, 2015
Tags: 32678 ( 5 ), chrome, desktop ( 26 ), feature-plugin ( 6 ), feature-plugin-toolbar-experiments, iOS ( 64 ), macos ( 29 ), phablet ( 50 ), toolbar ( 12 ), visual-survey ( 17 )

Toolbar: visual survey of toolbar experiments, Macnchrome, iPhone 6+

Surveying the Toolbar Experiments pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party for #32678.

Macnchrome, single site, admin user:

iPhone 6+, single site, admin user:

#32678, #chrome, #desktop, #feature-plugin, #feature-plugin-toolbar-experiments, #ios, #macos, #phablet, #toolbar, #visual-survey

Ryan Boren 12:57 pm on September 2, 2015
Tags: 4.4 ( 2 ), alpha ( 2 ), chrome, customize ( 18 ), customizer ( 14 ), customizer-ui-experiments, desktop ( 26 ), feature-plugin ( 6 ), feature-preview-responsiveness, iOS ( 64 ), macos ( 29 ), phablet ( 50 ), preview ( 6 ), responsive ( 2 ), tablet ( 4 ), visual-survey ( 17 )

Customize: preview site responsiveness, Macnchrome, iPad Air, iPhone 6+

A brief visual surveyVisual survey A visual survey is a collection of screenshots for a like set of screens or interfaces, such as all list table screens or all toolbar incarnations across various devices. These screens are not presented in the context of a particular flow.https://make.wordpress.org/test/tag/visual-survey/ for #31195 with WP 4.4-alpha-33848 and Customizer UI Experiments 0.1.

: Macnchrome

: Macnchrome

: Macnchrome

: iPhone 6+, customize mode.

: iPhone 6+, preview mode. Note there is no responsive selector on phones.

: iPad Air with customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. ui experiments active, Preview doesn’t load and the Collapse button doesn’t show.

: With the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party deactivated, preview still doesn’t load but the Collapse button shows.